React Native Package
Our SDK is deprecated, but a new version is coming soon. Meanwhile, consider integrating our Native Android and iOS SDKs into your React project.
Getting Started
Latest release: Version 1.1.9
Requirements
- Architecture armeabi-v7a, x86, arm64-v8a, x86_64
- Internet connection
- Camera
Resources
- Integration Sample (React): Shufti Pro ReactNativeSample
Installation
It’s always recommended to use the updated version
Step 1: Run the following command:
npm install react-native-shuftipro-kyc --save
Step 2: Add following dependencies in package.json as described in following code snippet.
"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
Make sure you have obtained authorization credentials before proceeding. You can get client id or secret key and generate access token like this.
Authorization
The following code snippet shows how to use the access token in auth object.
Access Token
Make auth object using access token
<ShuftiPro
accessToken={"access token here"}
/>
Configuration
The Shufti Pro’s mobile SDKs can be configured on the basis of parameters provided in the config object. The details of parameters can be found here.
Map<String,Object> configObj = {
"open_webview": false, // pass true for verification through hybrid view
"asyncRequest": false,
"base_url": "api.shuftipro.com",
"consent_age": 16,
};
Request Object
This object contains the service objects and their settings through which the merchant wants to verify end users. Complete details of service objects and their parameters can be found here.
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_results: 1,
allow_warnings: "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:"your-clientId",secret_key:"your-secretKey }}
/>
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 process depends on the device's processing power. All the proofs are taken against required services and then a request is made to the server
You can enable native flow by passing false for open_webview key in Config object.
config: {
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 after every service, verification results are shown simultaneously in case of decline, and the user can retry the request.
You can enable hybrid flow by passing true for open_webview key in Config object.
config: {
open_webview: true
}
In both flows, Shufti Pro provides the facility for their customers to tailor the identity verification services according to their needs.
Callbacks
The SDK receives callback events as result, whether the verification journey is completed or left mid-way. The call back is received in following function
<ShuftiPro
requestPayload={{...createdPayload, ...paylaod, ...config}}
isShow={true}
verificationMode={selectedServicesType}
accessToken={''}
basicAuth={{client_id: client_id, secret_key: secret_key}}
async={false}
asyncResponseCallback={response => {
// handle response value
}}
/>
The complete list of callback events can be found here.
Customisation
ShuftiPro supports a set of customisation 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
"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
"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
| Date | SDK Versions | Changes |
|---|---|---|
| Aug 12, 2022 | 1.1.9 |
|
| Jul 09, 2021 | 1.1.8 |
|