React Package (Enhanced Version)
This documentation is for the Enhanced Version, encompassing expanded capabilities and advancements. We strongly recommend testing this version before using it in a production environment.
Getting Started
Latest release:
Requirements
- Physical devices (Android & iOS)
- 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 in your project terminal:
npm i shuftipro-onsite-mobilesdk
Step 2: Include the Shufti Pro module by adding the import statement at the top of your main project file.
import {NativeModules} from 'react-native';
const {ShuftiproReactNativeModule} = NativeModules;
Step 3:
For Android: Go to project
> android
> app
> build.gradle
file and add the following
android {
//Rest of your code
dataBinding {
enabled = true
}
}
Step 4: For iOS, make sure to add the following post-install hook to your Podfile.
post_install do |installer|
installer.aggregate_targets.each do |target|
target.xcconfigs.each do |variant, xcconfig|
xcconfig_path = target.client_root + target.xcconfig_relative_path(variant)
IO.write(xcconfig_path, IO.read(xcconfig_path).gsub("DT_TOOLCHAIN_DIR", "TOOLCHAIN_DIR"))
end
end
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
if config.base_configuration_reference.is_a? Xcodeproj::Project::Object::PBXFileReference
xcconfig_path = config.base_configuration_reference.real_path
IO.write(xcconfig_path, IO.read(xcconfig_path).gsub("DT_TOOLCHAIN_DIR", "TOOLCHAIN_DIR"))
end
if ['Socket.IO-Client-Swift', 'Starscream'].include? target.name
config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'
end
end
end
end
Step 5:
For iOS, add linkage = 'dynamic'
to your Podfile.
linkage = ENV['USE_FRAMEWORKS']
linkage = 'dynamic'
if linkage != nil
Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
use_frameworks! :linkage => linkage.to_sym
end
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 client_id and secret_key or access token in auth object.
Basic Auth
Make auth object using client id and secret key
const authObject = {
auth_type:"basic_auth",
client_id: "xxxxx-xxxxx-xxxxx",
secret_key: "xxxxx-xxxxx-xxxxx"
}
Or
Access Token
Make auth object using access token
const authObject = {
auth_type:"access_token",
access_token: "xxxxx-xxxxx-xxxxx"
}
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.
const configObject = {
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.
const verificationObject =
{
reference: "uniqueReference",
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,
verification_mode:"image_only",
show_privacy_policy: 1,
face: {proof: ""},
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",
},
};
Initialisation
Shufti Pro's mobile SDK can be initialized using the given method and passing auth, config and request objects as the parameters.
ShuftiproReactNativeModule.verify(JSON.stringify(verificationObject), JSON.stringify(authObject), JSON.stringify(configObject), (res)=>{
const parsedResponse = JSON.parse(res); // Parse the JSON string into an object
const event = parsedResponse.event; // Access the value of the "event" property
console.log("Event:", event);
});
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
ShuftiproReactNativeModule.verify(JSON.stringify(verificationObject), JSON.stringify(authObject), JSON.stringify(configObject), (res)=>{
const parsedResponse = JSON.parse(res); // Parse the JSON string into an object
const event = parsedResponse.event; // Access the value of the "event" property
if (event === "verification.accepted") {
// Verification accepted callback
}
if (event === "verification.declined") {
// Verification declined callback
}
if (event === "verification.cancelled") {
// This callback is returned when verification is cancelled midway by the end user
}
});
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"
"verification_mode" : "image_only"
"allow_online" : "1"
"allow_offline" : "1"
"decline_on_single_step" : "1"
"show_ocr_form" : "0"
"allow_retry" : "0"
You can find the complete detail here
Config Object
"show_requirement_page": true
"base_url": "api.shuftipro.com"
"consent_age": 16
You can find the complete detail here
Localization
Shufti Pro offers users the capability to customize the SDK text according to their preferred language. Merchants can modify the SDK language by specifying the language code in the country parameter within the main request object, such as "language": "en"
Revision History
Date | SDK Versions | Description |
---|---|---|
Dec 14, 2023 | 0.0.1 | Improvement Onsite SDK now offers an enhanced user interface along with improved features for localization, OCR Form, and a Retry Option. |