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 the 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 the content of PSA.zip, DefaultPsaUi 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, DefaultPsaUi and PSACommon.framework

Open PROJECT_NAME target

  • Open Build Phases tab
  • Remove PSA.framework, DefaultPsaUi and PSACommon.framework from Link Binaries with Libraries
  • Open General tab
  • Drag and drop PSA.framework, DefaultPsaUi and PSACommon.framework into Embedded Binaries

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(OKAY_SERVER_URL) on the SDK to properly initialise Okay server URL on Android. For example, we pass in 'https://demostand.okaythis.com/' as our server URL.

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, returned 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 SDK with the 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 has been granted, we proceed to enrol the user. Okay SDK provides the enrollProcedure(SpaEnrollData) method which takes a JSON object with "SpaEnrollData" as a property.

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 secure communication with Okay servers.

"appPns" - This is your push notification token from Firebase (allowing us to send a notification to Android devices).

"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" - This is a number that we 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 customise the colours for our enrolment and authorisation screens to suit your product branding. Click here to see all valid colour properties.

How to link a user

The linkTenant(linkingCode, SpaStorage) method links a user of your application with an existing tenant on the Okay Cloud Based solution. When you make a linking request to an Okay server, it returns a linkingCode as part of its response. For more information on how to send a linking request, please see this document.

The linking code can be passed directly to this method after a request is sent to an Okay secure sever, 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

You can unlink a user from your tenant on the Okay secure server by using the unlinkTenant(tenantId, SpaStorage) method.

firebase.iid().getToken()

.then(token => {

RNOkaySdk.unlinkTenant(

tenantId,

{

SpaStorage: {

appPns: token,

pubPss: pubPssBase64,

externalId: 'YOUR_EXTERNAL_ID',

installationId: "9990",

enrollmentId: null

}

})

})

Authorising a User's Action

When there is a transaction that needs to be authorised by your application, Okay sends a push notification to your mobile app with the details needed to process the authorisation 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