Implementation Guide

Authentication

A unique access token should be created upon each SDK entry. In order to generate an access token, please refer to Valify's Authentication Documentation.

Security Warning: For improved security, consider implementing the access token fetching logic outside the Activity. This helps keep sensitive credentials secure and reduces potential exposure within the Activity/Fragment code.

Configurations

The plugin builder is separated into two components.

Required Configurations

Initialize the required parameters as follows while adding the required configurations

const token = "token";
const baseUrl = "base_url";
const bundleKey = "your_bundle_key";

Optional Configurations

Initialize the required parameters as follows while adding the desired configurations

const language = "<insert_language>"; // "en" is set as default
const dataValidation = <boolean>; // false is set as default
const reviewData = <boolean>; // default is true
const captureOnlyMode = <boolean>; // default is false
const primaryColor = "<hex_color_code>"; //hexString color 
const headers = {}; // default is empty
const enable_logging = <boolean>; // default false 
const sslCertificate = ""; // certificate, no default
const setDocumentVerificationPlus = <boolean> // default is false
const setCollectUserInfo = <boolean> //default is false
const setAdvancedConfidence  = <boolean> //default is false

Configurations Breakdown

This section shows the breakdown of all optional builder configurations.

1. The following line is where the user interface language is set.

const language = "<insert_language>"; // ["ar" or "en"] 

The currently supported languages are Arabic and English

1. If the following line is set to true, an extra layer of validations is added to the SDK response.

const dataValidation = <boolean>;

1. If the following line is set to true, a screen is added to the user flow that displays the images captured and the OCR result to the user.

const reviewData = <boolean>;

1. If the following line is set to true, the SDK purely performs image capturing and only returns these images in the SDK response.

const captureOnlyMode = <boolean>;

1. The following line is optional and can be used to set your company's branding color to the SDK's user interface.

const primaryColor = "<hex_color_code>";

1. The following line is optional and can be used to set any headers that may be required for purposes specific to your application. Any headers set will be sent along with each API call made by the SDK.

const headers = {};

1. The following line is optional and can be used to receive event logs from the SDK experience to be used for user behavior analysis.

const enable_logging = <boolean>;

1. The following line is optional and can be used to set an SSL certificate that may be required for purposes specific to your application.

const sslCertificate = "";

1. If this flag is set to true, the SDK performs additional data validations on the document. These validations are returned in the SDK response as flags, and you must implement your own handling logic based on these flags [Handling Document Verification Plus Flags in Code] , the SDK does not auto-reject or block the transaction.

   View Document Verification Plus Breakdown here: [Understanding Document verification plus flag]

const setDocumentVerificationPlus = <boolean>

1. If this flag is set to true, the SDK detects potential physical or digital manipulation in the National ID. These validations are returned in the SDK response as flags, and you must implement your own handling logic based on these flags [Handling Advanced Confidence Flags in Code] , the SDK does not auto-reject or block the transaction.

   View Advanced Confidence Breakdown here: [Understanding Advanced Confidence flag]

const setAdvancedConfidence  = <boolean>

1. description here (location permission needed for android)

const setCollectUserInfo = <boolean>

Parameter Declaration

Declare the SDK parameters with the configuration variables previously created

const params = {
  access_token: token,
  base_url: baseUrl,
  bundle_key: bundleKey,
  language: language,
  data_validation: dataValidation,
  review_data: reviewData,
  capture_only_mode: captureOnlyMode,
  ssl_certificate: sslCertificate,
  primary_color: primaryColor,
  enable_logging: enableLogging,
  set_document_verification_plus: setDocumentVerificationPlus,
  set_collect_user_info: setCollectUserInfo, 
  set_advanced_confidence: setAdvancedConfidence 
};

Start the SDK

Use the following code snippet to run the plugin

window.VIDVOCRPlugin.startOCR(
        params, headers,
        (result) => {
          console.log('valify success result : ', result);
          const s = result.toString();
          const json = JSON.parse(s);
  if(json.nameValuePairs.state=="CAPTURED_IMAGES"){
//  Process is still running, you receive any captured image here
      	}else if(json.nameValuePairs.state=="EVENT_LOGS"){
 // Process is still running, you receive here any event during user’s session
     }else if(json.nameValuePairs.state=="ERROR_LOGS"){
 // Process is still running, you receive here any error during user’s session
}else if(json.nameValuePairs.state=="SUCCESS"){
 // Process finished successfully 
}
        },
        (error) => {
          console.log('error in valify', error);
          const s = error.toString();
          const json = JSON.parse(s);
           if (json.nameValuePairs.state=="EXIT") {
            // user exits the SDK due to an error occurred
          } else if (json.nameValuePairs.state=="ERROR"){ 
           // user exits the SDK due to builder error }
        } else if (json.nameValuePairs.state=="FAILURE"){ 
           // user exits the SDK due to service failure }
        }
        });

Sample Integration Example

Check out our GitHub repository for a simple integration app demonstrating how to use our SDK. The repository includes step-by-step instructions and sample code to help you get started quickly.