React Native

📘

Sample Project

You can find the sample project for sample code for React-Native Integration.

1. Prerequisite

1.1 Android

The minSdkVersion is 21 and targetSdkVersion is set to 31 in IDWise Android SDK. It is recommended to install the Latest Android Studio on your development machine.

Build Setup

Add the following to your app-level build.gradle file located at projectRoot/android/app/build.gradle

android {
  ...
  defaultConfig {
    ...
    multiDexEnabled true
  }
  buildFeatures {
    ...
    dataBinding true
  }
}

Please Double check that mavenCentral() is added in your repositories, which is added by default if you create the new React-native Project.

repositories {
  ...
  mavenCentral()
}

To support Right-to-Left (Android)

Add the following attribute in the application tag in your project’s AndroidManifest.xml file located at /app/src/main/AndroidManifest.xml for the right-to-left language such as Arabic, Urdu and etc.

android:supportsRtl="true"

1.2 iOS

The minimum deployment target for IDWiseSDK is iOS 12.0. In order to use the SDK your application's minimum deployment target should be iOS 12.0 or higher.

2. Installation

Add the IDWiseSDK Plugin to your React Native project by running the following command in the root project

npm install idwise-react-native-sdk

yarn add idwise-react-native-sdk

3. React-Native Usage

Invoking IDWise SDK is very simple. First import IDWise package in your .js file from where you want to invoke IDWise SDK:

3.1 Required Imports

import {IDWise} from 'idwise-react-native-sdk/src/IDWise';
import {IDWiseSDKTheme} from 'idwise-react-native-sdk/src/IDWiseConstants';

3.2 Initializing the SDK

In order to use the SDK, we need to initialize it first with the <CLIENT_KEY> provided by IDWise. You can pre-load this on componentDidMount() if you want to. Here is how we can initialize the SDK.

const theme = IDWiseSDKTheme.SYSTEM_DEFAULT; //[LIGHT, DARK]
IDWise.initialize("<CLIENT_KEY>", theme, {
  onError(error) {
      console.log(' onInitializeError: ', error);
  }
});

initializeSDK method takes two parameters and one callback:

• clientKey: is a key provided to you by IDWise to authenticate your app with IDWise backend.
• theme: Theme of the IDWise's UI, Available options are "DARK", "LIGHT", and "SYSTEM_DEFAULT"

3.3 Starting the Journey

Now we can start the verification journey by calling startJourney(..) of the SDK like below. This will start the verification process and that's it.

IDWise.startJourney("<FLOW_ID>","<REFERENCE_NO>","<LOCALE>", journeyCallback);

This method takes the following parameters:

• flowId: (also called Journey Definition ID) This is a unique identifier that identifies your journey flow. IDWise shares this with you when you register to use IDWise system.
• referenceNo: (Optional) This parameter allows you to attach a unique identifier (such as a reference number) with the user undergoing the current journey. It's beneficial for connecting the journey to the user and/or the application that initiated it. You will receive this reference number in the webhook request.
• locale: (Optional)This refers to the ISO code representing the desired language for the user interface components. Please reach out to IDWise IDWise Support for the list of available languages.
• IDWiseSDKJourneyCallback: This is an implementation of an interface that consists of various step callback events.

3.4 Journey (Callbacks)

Throughout the journey, IDWise SDK sends back some events to the Hosting app. Here we can listen to those events:

const journeyCallback = {
  onJourneyStarted(data) {
    console.log('onJourneyStarted:', data);
  },
  onJourneyResumed(data) {
    console.log('onJourneyResumed:', data);
  },
  onJourneyFinished(data) {
    console.log('onJourneyFinished:', data);
  },
  onJourneyCancelled(data) {
    console.log('onJourneyCancelled:', data);
  },
  onError(data) {
    console.log('onError:', data);
  },
};

The journeyId, received in onJourneyStarted, can then be used by your backend code to securely get the result of the ID verification.

3.5 Resuming a Journey

If you want to resume an unfinished journey, you can do so as below:

const journeyDefinitionId = "FLOW ID"; //As known as journey definition ID, Provided by IDWise
const journeyId = "journey id"; //they journey id that you want to resume
const locale = "en"; //Language code e.g en, ar 

IDWise.resumeJourney(journeyDefinitionId,journeyId,locale,journeyCallbacks);

This method takes the following parameters:

• journeyDefinitionId: Specifies the journey definition (aka template) to base this new journey on. Journey definitions are created based on your requirements and specify what documents and biometrics to collect from the user and in what order. JourneyDefinitionId is shared with you by IDWise team as part of your use-case and requirements discussions.
• journeyId: This is a unique identifier that identifies your journey and it can be used to resume. This is received in the implementation of journeyCallback interface in onJourneyStarted method when you started the journey the first time.
• locale : Language code of the language to be used to display the journey user interface. This is either an ISO 639-1 (2-letter for example en) or IETF BCP 47 (2-letter plus extended language specified for example zh-HK or zh-CN)
• journeyCallbacks: This parameter is used to provide a set of event handlers to handle the different events that are triggered from IDWise SDK. These events indicate the lifetime of a journey and provide oppurtunity for your application to react to certain events. For more details please check Section 3.4
• Once journey is resumed successfully, the event onJourneyResumed will be triggered.