# 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](https://valify.gitbook.io/documentation/apis/oauth-token) Documentation.

{% hint style="warning" %}
**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.
{% endhint %}

### Importing

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

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

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

<pre class="language-javascript"><code class="lang-javascript">const language = "&#x3C;insert_language>"; // "en" is set as default
const document_verification = &#x3C;boolean>; // false is set as default
const collect_user_info = &#x3C;boolean>; // false is set as default
const document_verification_plus = &#x3C;boolean>; // false is set as default
const advanced_confidence = &#x3C;boolean>; // false is set as default
const profession_analysis = &#x3C;boolean>; // false is set as default
const review_data = &#x3C;boolean>; // default is true
const preview_captured_image = &#x3C;boolean>; //default is false
const manual_capture_mode = &#x3C;boolean>; //default is false
const capture_only_mode = &#x3C;boolean>; // default is false
const primaryColor = ”&#x3C;hex_color_code>”;
const disable_valify_logo = &#x3C;boolean>; //default is false
const custom_logo = "&#x3C;base_64_image>";
const enableSecondChanceFallback = &#x3C;boolean>; 
<strong>const headers = {}; // default is empty
</strong>const enable_logging= &#x3C;boolean>; // default false
</code></pre>

### Configurations Breakdown

This section shows the breakdown of all optional builder configurations.&#x20;

1. The following line is where the user interface language is set.&#x20;

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

{% hint style="info" %}
The currently supported languages are Arabic and English
{% endhint %}

2. 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\]**](https://valify.gitbook.io/valify-ios-sdk-documentation/android-native-sdk/sdk-response#document-verification-plus-case-handling) , the SDK does not auto-reject or block the transaction.

   &#x20;View Document Verification Plus Breakdown here: [**\[Understanding Document verification plus flag\]**](https://valify.gitbook.io/documentation/apis/egy-nid-ocr/egy-nid-ocr#document-verification-plus-breakdown)

```javascript
const document_verification_plus = <boolean>;
```

3. 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\]** ](https://valify.gitbook.io/valify-ios-sdk-documentation/document-capture/plugin-response#advance-confidence-case-handling), the SDK does not auto-reject or block the transaction.

   &#x20; View Advanced Confidence Breakdown here: [**\[Understanding Advanced Confidence flag\]**](https://valify.gitbook.io/documentation/kyc/kyc-documents/egy-nid-ocr/egy-nid-ocr#advanced-confidence-breakdown)

```javascript
const advanced_confidence = <boolean>;
```

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

```java
const preview_captured_image = <boolean>;
```

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

```java
const manual_capture_mode = <boolean>;
```

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

```javascript
const review_data = <boolean>;
```

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

```javascript
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.

```javascript
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.

```javascript
const custom_logo = "<base_64_image>";
```

10. The following line is optional and can be used to receive event logs from the SDK experience to be used for user behavior analysis.&#x20;

```javascript
const enable_logging= <boolean>;
```

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

```javascript
const primaryColor = ”<hex_color_code>”;
```

12. 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.&#x20;

```javascript
const headers = {};
```

### Parameter Declaration

Declare the SDK parameters with the configuration variables previously created

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

```javascript
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](https://github.com/Valify-Solutions/React_VIDOCR_LIVENESS_Simple_Integration_App) 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.