Okay LogoOkay Logo

React Native SDK documentation

Use our SDK for React Native apps

React Native SDK documentation
1. Installation

Create a folder called custom_modules in your React Native project root folder

$ mkdir ~/project_dir/custom_modules

Copy the downloaded React Native module from this repository to custom_modules folder

$ cp ~/Downloads/RNOkaySDK ~/project_dir/custom_modules

Add RNOKaySDK as a local dependency to your package.json file:

"react-native-okay-sdk": "file:custom_modules/RNOkaySDK"

Install node_modules:

Run the following command from your project root folder

$ yarn install

Link library with react-native:

Run the following command from your project root folder

$ react-native link react-native-okay-sdk

2. Android

Configure Android project:

Locate your project_dir/android/app/build.gradle file in your project workspace, then set your minSDKVersion in the build.gradle to API 16.

buildscript {

ext {

buildToolsVersion = "28.0.3"

minSdkVersion = 16

compileSdkVersion = 28

targetSdkVersion = 28

supportLibVersion = "28.0.0"

}

.....

dependencies {

classpath("com.android.tools.build:gradle:3.4.1") // update gradle to 3.4.1

...

}

.....

}

Add Okay maven repository to your Android project_dir/android/build.gradle file

allprojects {

repositories {

mavenLocal()

google()

jcenter()

maven {

// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

url "$rootDir/../node_modules/react-native/android"

}

// Begin: Add This

maven {

url 'https://dl.bintray.com/okaythis/maven'

}

// End:

}

}

Add permissions to AndroidManifest.xml:

Locate your project_dir/android/src/main/AndroidManifest.xml file, then add these Android permissions to the file.

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.READ_PHONE_STATE"/>

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

Add databinding and multidex for android:

Add the following to your Android project_dir/android/app/build.gradle file

android {

compileSdkVersion rootProject.ext.compileSdkVersion

compileOptions {

sourceCompatibility JavaVersion.VERSION_1_8

targetCompatibility JavaVersion.VERSION_1_8

}

// Begin Add DataBinding

dataBinding {

enabled = true

}

// End

defaultConfig {

...

multiDexEnabled true // Add this line

}

...

}

Install React Native Firebase:

Please see this document for further instruction on how to install Firebase package for React Native https://rnfirebase.io/

3. iOS

Download PSA.framework and PSACommon.framework:

You can get the zipped version of the SDK here: https://github.com/Okaythis/PSACommonIOS. Unpack content of PSA.zip and PSACommon.zip to the RN's project_dir/ios

Open XCode project structure

  • Right-click on Frameworks folder in Project Structure
  • Click Add files to "PROJECT_NAME"...
  • Added PSA.framework and PSACommon.framework

Open PROJECT_NAME target

  • Open Build Phases tab
  • Remove PSA.framework and PSACommon.framework from 
  • Open General tab
  • Drag and drop PSA.framework and PSACommon.framework into 

Enable Push Notifications

Please visit this link to enable Push Notification for iOS devices when using React Native: https://facebook.github.io/react-native/docs/pushnotificationios

4. API Usage

  • init(okayServerAdress: string): Promise (Android Only)
  • permissionRequest(): Promise<[]>
  • updateDeviceToken(token) (iOS only)
  • isEnrolled(): boolean
  • enrollProcedure(SpaEnrollData): Promise
  • linkTenant(linkingCode: number, SpaStorage): Promise
  • unlinkTenant(tenantId: number, SpaStorage): Promise
  • isReadyForAuthorization(): boolean
  • authorization(SpaAuthorizationData): Promise

SDK Initialization(Android Only):

We will need to call the init(endpoint) on the SDK to properly initialize Okay server address on Android. For example we pass in 'https://demostand.okaythis.com/' as our server endpoint.

CompontentDidMount() {

RNOkaySdk.init("https://demostand.okaythis.com/").then(response =>

...

);

}

For Okay to work correctly, you are required to prompt the user to grant the following permissions return by permissionRequest()method.

// fetches an array of required permissions

RNOkaySdk.permissionRequest().then(response => console.log(response));

Update Okay with Token received from PushNotificationsIOS (iOS ONLY)

We will need to update Okay with push notification token generated for iOS devices.

// For example

CompontentDidMount() {

PushNotificationIOS.addEventListener('register', token => {

RNOkaySdk.updateDeviceToken(token);

})

...

);

}

How to enroll a user

If the permission above have been granted we can now proceed to enrolling the user. Okay SDK provides the enrollProcedure(SpaEnrollData) method which takes a Json with "SpaEnrollData" as key.

firebase.iid().get()

.then(instanceID => {

RNOkaySdk.enrollProcedure({

SpaEnrollData: {

host: "http://protdemo.demohoster.com", // PSS server address

appPns: instanceID,

pubPss: pubPssBase64, // public Pss key https://github.com/Okaythis/okay-example/wiki/Mobile-Client-Settings

installationId: "9990", // installationId https://github.com/Okaythis/okay-example/wiki/Mobile-Client-Settings

pageTheme: { // Page Theme customization, if you don't want customization: pageTheme: null.

actionBarTitle: "YOUR_ACTION_BAR_TITLE",

actionBarBackgroundColor: "#ffffff",

actionBarTextColor: "#ffffff",

buttonTextColor: "#ffffff",

}

}

}).then(response => console.log(response));

})

.catch(error => console.log(error));

SpaEnrollData contains several keys that are required for a secure communication with Okay servers.

"appPns": This is your push notification token from Firebase(This allows us to send notification to Android devices). For testing purposes we ask our users to use this value 9990 as their installationId

"pubPss": This is a public key we provide to applications that use our SDK for secure communication with our server. For testing purposes we ask our users to use the value below as their "pubPss" key.

const pubPssBase64 = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxgyacF1NNWTA6rzCrtK60se9fVpTPe3HiDjHB7MybJvNdJZIgZbE9k3gQ6cdEYgTOSG823hkJCVHZrcf0/AK7G8Xf/rjhWxccOEXFTg4TQwmhbwys+sY/DmGR8nytlNVbha1DV/qOGcqAkmn9SrqW76KK+EdQFpbiOzw7RRWZuizwY3BqRfQRokr0UBJrJrizbT9ZxiVqGBwUDBQrSpsj3RUuoj90py1E88ExyaHui+jbXNITaPBUFJjbas5OOnSLVz6GrBPOD+x0HozAoYuBdoztPRxpjoNIYvgJ72wZ3kOAVPAFb48UROL7sqK2P/jwhdd02p/MDBZpMl/+BG+qQIDAQAB'

"installationId": is also a number that we also provide for applications that use our SDK. For testing purposes we ask our users to use this value 9990 as their installationId

"pageTheme": This is a JSON object that allows you to customize the colors for our enrollment and authorization screens to suit your product branding. Click here to see all valid color properties

How to link a user

The linkTenant(linkingCode, SpaStorage) method links a user of your application with an existing tenant on Okay Cloud Based solution. When you make a linking request to your Okay servers, it returns a linkingCode as part of its response (For more information on how to send a linking request please see this documatation). The linking code can be passed directly to this method after a a request to Okay Service or entered by a user via a user interface. This depends on your implementation and business logic. The externalId can be retrieved from the RNOkaySdk.enrollProcedure(...).then( externalId => ...) method, if the method was called and executed successfully.

firebase.iid().getToken()

.then(token => {

RNOkaySdk.linkTenant(

linkingCode,

{

SpaStorage: {

appPns: token,

pubPss: pubPssBase64,

externalId: 'YOUR_EXTERNAL_ID',

installationId: "9990",

enrollmentId: null

}

})

})

How to unlink a user

If a user was successfully linked to a tenant and you now wish to unlink that user from your tenant on Okay, you can use the unlinkTenant(tenantId, SpaStorage) method to do this as described below.

firebase.iid().getToken()

.then(token => {

RNOkaySdk.unlinkTenant(

tenantId,

{

SpaStorage: {

appPns: token,

pubPss: pubPssBase64,

externalId: 'YOUR_EXTERNAL_ID',

installationId: "9990",

enrollmentId: null

}

})

})

Authorizing a User's Action

When there is a transaction that needs to be authorized by your application, Okay sends a push notification to your mobile app with details needed to process the authorization on the client side. The body of the push notification has the following shape as shown below:

{

"tenantId": <int>,

"sessionId": <int>

}

When the push notification is received on the client side, you can retrieve the sessionId from the push notification body and in turn, pass the value to RNOkaySdk.authorization(SpaAuthorizationData) method directly.

CompontentDidMount() {

firebase.messaging().onMessage(message => {

startAuthorization(message.data.sessionId);

});

}

startAuthorization = (sessionId) => {

firebase.iid().getToken()

.then(token => {

RNOkaySdk.authorization({

SpaAuthorizationData: {

sessionId: sessionId, // Received from firebase messaging

appPns: token,

pageTheme: { // Page Theme customization, if you don't want customization: pageTheme: null

actionBarTitle: "YOUR_ACTION_BAR_TITLE",

actionBarBackgroundColor: "#eeffc5",

actionBarTextColor: "#ffcc34",

buttonTextColor: "#ccccc4",

}

}

}).then(response => console.log(response));

})

.catch(error => console.log(error));

}

6. Page Theme properies for iOS

Not available now