# React Native Module

# Latest Release

Version 1.19.7 (Changelog)

# Installation

yarn add @sumsub/react-native-mobilesdk-module

# Android

Add the following repository to your android/build.gradle file:

allprojects {
  repositories {
      // ...
      maven { url "https://maven.sumsub.com/repository/maven-public/" }
      // ...
  }
}

# iOS

1. Add as follows at the top of ios/Podfile:

source 'https://cdn.cocoapods.org/'
source 'https://github.com/SumSubstance/Specs.git'

# Enable MRTDReader (NFC) module 
#ENV['IDENSIC_WITH_MRTDREADER'] = 'true'

Note: uncomment the ENV['IDENSIC_WITH_MRTDREADER'] line if you'd like to enable the MRTDReader module.

Then run:

npx pod-install

cd ios && pod update IdensicMobileSDK && cd ..

2. Update Info.plist to have description for the camera, microphone and the photo library usage

plutil -insert "NSCameraUsageDescription" -string "Let us take a photo" ios/${PWD##*/}/Info.plist
plutil -insert "NSMicrophoneUsageDescription" -string "Time to record a video" ios/${PWD##*/}/Info.plist
plutil -insert "NSPhotoLibraryUsageDescription" -string "Let us pick a photo" ios/${PWD##*/}/Info.plist

# MRTDReader (NFC)

The MRTDReader is a module that allows the sdk to detect and read the electronic chips placed on MRTD documents via NFC. For Android platform the module comes out of the box, while for iOS in order to enable please follow the instructions below.

1. Update ios/Podfile

1.1. Enable MRTDReader module

# Enable MRTDReader (NFC) module 
ENV['IDENSIC_WITH_MRTDREADER'] = 'true'

1.2. Ensure OpenSSL-Universal dependency to be included in Release builds

The MRTDReader module depends on the OpenSSL-Universal internally but starting off React Native 0.67 the Flipper extension forces the OpenSSL-Universal not to be included in the Release builds, so you have to either stop using Flipper or use the following workaround:

  use_flipper!()
  # Ensure `OpenSSL-Universal` dependency to be included in Release builds
  if ENV['IDENSIC_WITH_MRTDREADER']
    pod 'OpenSSL-Universal', :configurations => ['Debug', 'Release']
  end

2. Open up the iOS project in XCode

xed ios/

Then do as follows:

2.1. Turn on Near Field Communication Tag Reading capability for your project’s target (here is how to)

2.2. Add to the application's Info.plist file:

<key>NFCReaderUsageDescription</key>
<string>Let us scan the document for more precise recognition</string>
<key>com.apple.developer.nfc.readersession.iso7816.select-identifiers</key>
<array>
    <string>A0000002471001</string>
    <string>A0000002472001</string>
    <string>00000000000000</string>
</array>

# Usage

# Setup

import SNSMobileSDK from '@sumsub/react-native-mobilesdk-module';

// ...

let launchSNSMobileSDK = () => {

  // From your backend get an access token for the applicant to be verified.
  // The token must be generated with `levelName` and `userId`,
  // where `levelName` is the name of a level configured in your dashboard.
  //
  // The sdk will work in the production or in the sandbox environment
  // depend on which one the `accessToken` has been generated on.
  //
  let accessToken = "your_access_token";

  let snsMobileSDK = SNSMobileSDK.init(accessToken, () => {
      // this is a token expiration handler, will be called if the provided token is invalid or got expired
      // call your backend to fetch a new access token (this is just an example)
      return fetch('http://example.org/', {
        method: 'GET',
      }).then(resp => {
        // return a fresh token from here
        return 'new_access_token'
      })
    })
    .withHandlers({ // Optional callbacks you can use to get notified of the corresponding events
      onStatusChanged: (event) => {
        console.log("onStatusChanged: [" + event.prevStatus + "] => [" + event.newStatus + "]");
      },
      onLog: (event) => {
        console.log("onLog: [Idensic] " + event.message);
      }
    })
    .withDebug(true)
    .withLocale('en') // Optional, for cases when you need to override the system locale
    .build();

  snsMobileSDK.launch().then(result => {
    console.log("SumSub SDK State: " + JSON.stringify(result))
  }).catch(err => {
    console.log("SumSub SDK Error: " + JSON.stringify(err))
  });
}

The snsMobileSDK.launch() returns a Promise that will be resolved with a Result object. Use it to determine the SDK status upon its closure.

Here is an example of the result:

{
  "success": false,
  "status": "Failed",
  "errorType": "Unauthorized",
  "errorMsg": "Unauthorized access with accessToken=[your access token]"
}

Please find a detailed description below.

# Launch

Next, you are able to use the launchSNSMobileSDK(), as defined above, in order to launch the SDK.

For example:

<Button onPress={launchSNSMobileSDK} title="Launch SumSub SDK" />

# Dismission

Normally the user closes the sdk himself, but if you need to do it programmatically, here is the helper:

snsMobileSDK.dismiss()

# Advanced

# Configuration

If it's required, you could provide an email and/or a phone number those will be assigned to the applicant initially:

.withApplicantConf({
  "email": "...",
  "phone": "..."
})

# Events

Various events happening along the processing could be delivered into an optional onEvent handler:

.withHandlers({
  onEvent: (event) => {
    console.log("onEvent: " + JSON.stringify(event));
  }
})

Each Event has eventType and some parameters packed into payload hash, for example:

{
  "eventType": "StepInitiated",
  "payload": {
    "idDocSetType": "IDENTITY"
  }
}

# Possible events:

"ApplicantLoaded"

{
  "applicantId": "$applicantId"
}

"StepInitiated"

{
  "idDocSetType": "$idDocSetType"
}

"StepCompleted"

{
  "idDocSetType": "$idDocSetType",
  "isCancelled": false|true
}

# Applicant Actions

There is a special way to use the SDK in order to perform Applicant actions.

In order to run the SDK in applicant action mode, you need to

1. Associate your applicant level with a customization of Applicant actions type in your dashboard
2. Make an Access Token with the userId, levelName and externalActionId parameters

When an action is completed the status will be set to ActionCompleted and the result structure would contain the actionResult field that describes the outcome of the last action's invocation:

{
  "success": true,
  "status": "ActionCompleted",
  "actionResult": {
    "actionId": "5f77648daee05c419400c572",
    "answer": "GREEN"
  }
}

An empty value of actionResult.answer means that the action was cancelled.

# Action Result Handler

In addition, there is an optional onActionResult handler, that allows you to handle the action's result upon it's arrival from the backend. The user sees the "Processing..." screen at this moment.

.withHandlers({
  onActionResult: (result) => {
    console.log("onActionResult: " + JSON.stringify(result));

    // you must return a `Promise` that in turn should be resolved with
    // either `cancel` to force the user interface to close, or `continue` to proceed as usual
    return new Promise(resolve => {
      resolve("continue");
    })
  }
})

# API Reference

# Result

An object described the outcome of the last sdk launch:

While successand status are always present, the rest fields are optional.

# Status

Here is the possible sdk statuses:

# Error Type

Here is the possible error types:

# Event

An object that represents an event happening along the processing:

# Action Result

An object that represents the applicant action's result: