Skip to main content

React Native Package

Getting Started

Latest release: Version 1.1.9

Requirements

  1. Architecture armeabi-v7a, x86, arm64-v8a, x86_64
  2. Internet connection
  3. Camera

Resources

Installation

Tip

Note: It’s always recommended to use the updated version

Step 1: Run this command:

$ npm install react-native-shuftipro-kyc --save`

Step 2: Add following dependencies

"dependencies": {  
"@react-native-async-storage/async-storage": "^1.13.4",
"@react-native-community/netinfo": "^5.9.6",
"base-64": "^0.1.0",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-camera": "^3.36.0",
"react-native-easy-grid": "^0.2.2",
"react-native-fs": "^2.16.6",
"react-native-remote-svg": "^2.0.6",
"react-native-responsive-screen": "^1.4.1",
"react-native-shuftipro-kyc": "^1.1.9",
"react-native-video": "^5.1.0-alpha7",
"react-native-video-helper": "^1.4.4",
"react-native-webview": "^11.2.3",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
},

Step 3: For Android: goto ProjectName/android/app/build.gradle and add missingDimensionStrategy react-native-camera, 'general in defaultConfig: section. like this :

defaultConfig {
applicationId "com.xxxxxxxxx"
minSdkVersion rootProject.xx.xxxxxxxxxx
targetSdkVersion rootProject.xx.xxxxxxxx
versionCode 1
versionName "1.0"
missingDimensionStrategy 'react-native-camera', 'general' //add this line
}

Basic Usage

Note

Note: Make sure you have obtained the client id and secret key or access token before proceeding

Authorization

Shufti Pro provides two types of authorization to its users. The following shows the code snippet of how to use the authorization keys to authenticate the SDK.

Basic Auth

Make auth object using client id and secret key

    <ShuftiPro
basicAuth={{client_id:KEYS.BASIC_AUTH_UNAME,secret_key:KEYS.BASIC_AUTH_PWD }}
/>

Access Token

Or make auth object using access token

<ShuftiPro
accessToken={"access token here"}
/>
info

You can get client id or secret key and generate access token like this

Configuration

The client can configure the Shufti Pro's mobile SDKs based on the parameters provided in the config object.
Make config object

Map<String,Object> configObj = {
"open_webview": false, // pass true for verification through hybrid view
"asyncRequest": false
};

Config object parameters are explained here

Request Object

This object contains the service objects and their settings through which the merchant wants to verify end users. Request Object

export const verificationObj = {  
reference: "Unique reference",
country: "GB",
language: "EN",
email: "[email protected]",
callback_url: "http://www.example.com",
redirect_url: "http://www.example.com",
show_consent: 1,
show_results: 1,
show_privacy_policy: 1,
open_webview:false
face: true,
document: {
supported_types["passport","id_card","driving_license","credit_or_debit_card"],
name: {
first_name: "",
last_name: "",
middle_name: ""
},
dob: "",
document_number: "",
expiry_date: "",
issue_date: "",
fetch_enhanced_data: "",
gender: "",
backside_proof_required: "0",
},
address: {
full_address: "",
name: {
first_name: "",
last_name: "",
middle_name: "",
fuzzy_match: ""
},
supported_types: ["id_card", "utility_bill", "bank_statement"],
backside_proof_required: "0",
},
consent: {
supported_types: ['printed'],
text: "This is a customised text"
},
background_checks:{

},
phone:{

}


};

Initialisation

Shufti Pro's mobile SDK can be initialized using the given method and passing auth, config and request objects as the parameters.
With access token

<ShuftiPro
requestPayload={verificationObj}
verificationMode={"image"}
async={false}
asyncResponseCallback={(response)=>{
console.log("Response : ", response)
}}
onResponseOkayButton={()=>{console.log("Okay Btn")}}
cancelBtn={()=>{console.log("Cancel Btn")}}
accessToken={""}
/>

With Client ID and Secret Key

<ShuftiPro
requestPayload={verificationObj}
verificationMode={"image"}
async={false}
asyncResponseCallback={(response)=>{
console.log("Response : ", response)
}}
onResponseOkayButton={()=>{console.log("Okay Btn")}}
cancelBtn={()=>{console.log("Cancel Btn")}}
basicAuth={{client_id:KEYS.BASIC_AUTH_UNAME,secret_key:KEYS.BASIC_AUTH_PWD }}
/>

Verification Types

Native Flow

In the native verification flow, the end-user interacts with the native mobile SDK. The native flow of verification tends to be much faster since the whole app depends on the device's processing power for the verification process. Also, all the proofs are taken for all services in native flow first and then and only then, is a request made to the server in the form of JSONObject.
You can enable native flow by passing false for open_webview key in Config object.

Config.put("open_webview",false);

Hybrid Flow

The hybrid verification flow includes mobile verifications on a web view built on HTML 5 that will show the verification process to the end user. End-user provides the information in the online customer onboarding process. In hybrid flow, proofs are uploaded as every service is performed, verification results are shown simultaneously in case of decline, and the user can retry the request.
You can enable native flow by passing true for open_webview key in Config object.

Config.put("open_webview",true);
info

In both flows, Shufti Pro provides the facility to their customers to tailor the identity verification services according to their needs.

SDK Flow

Callbacks

Callbacks are received whenever the SDK is terminated or closed, whether after request completion or if the user leaves the verification journey mid-way.
The function will return the response of the verification. You can save or do whatever you want with the response.

var response = await ShuftiproSdk.sendRequest(authObject: AuthObject,
createdPayload: createdPayload, configObject: ConfigObject);

Following is the list of callbacks we receive in the above function.

KeysValues
request.pendingRequest parameters are valid and verification url is generated in case of on-site verification
request.invalidRequest parameters provided in request are invalid
request.cancelledRequest is cancelled by the user. This event occurs when the end-user disagrees to terms and conditions before starting verifications
request.timeoutRequest has timed out after a specific period of time
request.unauthorizedRequest is unauthorised. The information provided in the authorization header is invalid
verification.acceptedRequest was valid and accepted after verification
verification.declinedRequest was valid and declined after verification
info

You can check complete response of shuftipro from here

Customisation

ShuftiPro supports a set of customization options that will influence the appearance of the mobile SDK.

Verification flow and UI

The complete verification journey is customisable. To remove the screen from verification flow, you need to provide that parameter to the SDK through request/config object. For instance;

Request Object

"show_consent" : "0" // providing this parameter 0 value will hide the verification consent screen

"country" : "GB" // providing a value to this parameter will not ask the end user to provide his country

"verification_mode" : "image_only" // "image_only" or "video_only" values will allow you to avoid mode selection at real-time

"show_privacy_policy" : "0" // value will remove the privacy policy content shown at result screen

"allow_online" : "1" // 1 value will ask the user to capture real time proofs(image or video) depending upon verification mode

"allow_offline" : "1" // 1 value will ask the user to upload proofs(image or video) depending upon verification mode

"decline_on_single_step" : "1" // this parameter will work with onsite flow(open_webview : true). This will show continue the journey only if pervious step is successfully verified

"show_feedback_form" : "1" // this parameter will work with onsite flow(open_webview : true). 1 value will ask the user for its feedback at the end of verification

// Service Level Parameters

"supported_types" : [id_card] // providing a single value to this parameter will not ask the user for document type

"show_ocr_form" : "1" // this parameter will work with onsite flow(open_webview : true). 1 value will show the OCR form to the user

Config Object

"asyncRequest": "true" // passing true value to this parameter will not show result screen to the user and will just return the callback on request completion

Changelog

SDK VersionsChanges
1.1.9
  • The country selection issue is resolved.
    • The user will now be able to pass the desired country parameter in request object
1.1.8
  • With OCR, Without OCR and hybrid SDKs are merged into one single SDK
    • From now onwards, one SDK does it all. SDK contains verficication flow for all types, differentiating on the basis of request object parameters.