Skip to main content

React Package (Enhanced Version)

Attention

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: SDK Version​

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

app/build.gradle
android {
    //Rest of your code
    dataBinding {
        enabled = true
    }
}

Step 4: For iOS, navigate to the iOS folder and run the commands pod install and pod update to fetch the latest dependencies.

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 = {
      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: "",
      language: "",  
      email: "",  
      callback_url: "",  
      redirect_url: "",
      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.

UI Customisation​

To customise the color scheme of the entire ShuftiPro mobile SDK, as well as the text and background colors of the widgets, you can utilize the following keys within the config object.

const configObject = {
      base_url:  "api.shuftipro.com",
      button_text_color:  "#XXXXXX",
      button_primary_color:  "#XXXXXX",
      button_secondary_color:  "#XXXXXX",
      heading_color:  "#XXXXXX",
      sub_heading_color:  "#XXXXXX",
      theme_color:  "#XXXXXX",
      icon_color:  "#XXXXXX",
      background_color:  "#XXXXXX",
      stroke_color:  "#XXXXXX",
      shuftipro_light_icon:  false

    };

Localization​

Shufti Pro offers users the capability to customise 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​

DateSDK VersionsDescription
Jul 03, 20240.0.3Update the Android & iOS SDK Versions with support of Simulator.
Mar 25, 20240.0.2Improvement
Update the Android & iOS SDK Versions.
Dec 14, 20230.0.1Improvement
Onsite SDK now offers an enhanced user interface along with improved features for localization, OCR Form, and a Retry Option.