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.

Importing

Import the module’s function in App.js/App.tsx file using the following line

import { startOCR } from "@valifysolutions/react-native-vidvocr";

Configurations

The plugin builder is separated into two components.

Required Configurations

Initialize the required parameters as follows while adding the required configurations

const access_token = "token";
const base_url = "ValifyEnvironment_base_url";
const bundle_key = "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 document_verification = <boolean>; // false is set as default
const collect_user_info = <boolean>; // false is set as default
const document_verification_plus = <boolean>; // false is set as default
const advanced_confidence = <boolean>; // false is set as default
const profession_analysis = <boolean>; // false is set as default
const review_data = <boolean>; // default is true
const preview_captured_image = <boolean>; //default is false
const manual_capture_mode = <boolean>; //default is false
const capture_only_mode = <boolean>; // default is false
const primaryColor = ”<hex_color_code>”;
const disable_valify_logo = <boolean>; //default is false
const custom_logo = "<base_64_image>";
const headers = {}; // default is empty
const enable_logging= <boolean>; // default 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, the SDK will return document verification plus data

const document_verification_plus = <boolean>;

1. If the following line is set to true, the SDK will return advanced confidence data

const advanced_confidence = <boolean>;

1. If the following line is set to true, the captured image will be displayed for the user.

const preview_captured_image = <boolean>;

1. If the following line is set to true, the SDK will automatically enable manual capture if it detects that the user is unable to autocapture card.

const manual_capture_mode = <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 review_data = <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 capture_only_mode = <boolean>;

8.If the following line is set to true, the Valify logo will be hidden from the SDK user interface.

const disable_valify_logo = <boolean>; // default is false

9.The following line can be used to display a custom logo instead of the default Valify logo. The value should be a base64-encoded image string.

const custom_logo = "<base_64_image>";

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 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 = {};

Parameter Declaration

Declare the SDK parameters with the configuration variables previously created

const params = {
access_token: access_token,
base_url: base_url,
bundle_key: bundle_key,
language: language,
collect_user_info: collect_user_info,
document_verification_plus: document_verification_plus,
advanced_confidence: advanced_confidence,
document_verification: document_verification,
review_data: review_data,
preview_captured_image: preview_captured_image
manual_capture_mode: manual_capture_mode,
capture_only_mode: capture_only_mode,
disable_valify_logo: disable_valify_logo,
custom_logo: custom_logo,
primary_color: primaryColor,
headers: headers
enable_logging: enable_logging
};

Start the SDK

Use the following code snippet to run the plugin

export default function App() {
    startOCR(params).then(
        function (value) {
            console.log(value);
            const s = value.toString();
            const json = JSON.parse(s);
            if(json.nameValuePairs.state == "SUCCESS"){
            //an example code for using the response of the SDK , front will have the base64 image captured front side of the National ID during the successfull OCR process.
            final front = nameValuePairs.ocrResult.ocrResult.frontNid;
            alert("success");
            }
            
            else if(json.nameValuePairs.state == "ERROR")
            alert("error");
             else if(json.nameValuePairs.state == "FAILURE")
            alert("failure");
            else
            alert("exit");
        },
        function (error) {
            alert(error);
            }
        );
    }

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.