Skip to main content

React Package (Deprecated)

Attention

This documentation is for the Standard Version, encompassing foundational features. To access expanded capabilities and the latest advancements, we strongly recommend upgrading to the Enhanced Version

Getting Started​

Latest release: Version 0.0.6

Requirements​

  1. Physical devices (Android & iOS)
  2. Internet connection
  3. Camera

Resources​

Installation​

tip

It’s always recommended to use the updated version

Step 1: Run the following command in your project terminal: 

npm i shuftipro-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: goto ProjectName/android/app/build.gradle and update minSdkVersion version to 23.

  minSdkVersion = 23

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​

Note

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 = {
      "open_webview": false,
      "asyncRequest": false,
      "captureEnabled": 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.

    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, 
      allow_warnings: "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);
    });

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.

const configObject = {
      "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.

const configObject = {
      "open_webview": true
    };
info

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

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" // 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

"show_requirement_page": true // passing true value to this parameter will show requirement page of Shufti Pro verification.

"base_url": "api.shuftipro.com" // User can pass api.shuftipro.com or us-api.shuftipro.com

"consent_age": 16 // This parameter is use to set age in consent screen.

Revision History​

DateSDK VersionsDescription
Mar 20, 20240.0.6Changed
Update SDK version of Android and iOS
Nov 27, 20230.0.5Changed
Update SDK version of Android and iOS
Oct 07, 20230.0.4Changed
Update SDK version of Android and iOS
Android SDK: 0.7.4
iOS SDK: 3.6.7

Improved
Improve UI/UX of camera screen
Improve autocapture speed and performance
Add option to change consent age
Improve the image quality
Add requirement page

Removed
Remove lottie dependency from SDK
Jul 03, 20230.0.3Update SDK version of android(0.6.7) and iOS(3.5.8).
Jun 22, 20230.0.2React Native SDK with autoCapture and improve UI/UX.