ShuftiPro JavaScript SDK

Table of Contents

• 1. Introduction
• 2. Overview
• 3. Installation
  • 3.1. Directly from CDN
  • 3.2. NPM Installation
• 4. Usage
  • 4.1. Add basic HTML markup
  • 4.2. Initialization
    • 4.2.1 Using customer ID
  • 4.3. Handling Events
  • 4.4. Fetching Request Status
  • 4.5. Destroy SDK Instance
  • 4.6. Multiple Instances

1. Introduction

The ShuftiPro JavaScript SDK provides comprehensive functionalities for integrating Shufti Pro verification services into web applications. Developers can easily initialize the SDK by providing client Id and customer Id, facilitating seamless integration of verification processes and event handling.

2. Overview

The purpose of the ShuftiPro Web SDK is to streamline the integration process of Shufti Pro's verification services within web applications. It simplifies and automates various aspects of verification, including SDK initialization using either authentication tokens or client Id and customer Id, verification process initiation, and event handling. By offering a comprehensive set of functionalities, the Web SDK empowers developers to seamlessly incorporate Shufti Pro's verification capabilities into their web applications, enhancing user experience and security.

3. Installation

We can include the SDK in our web project by directly referencing it from a CDN or by using npm package.

3.1. Directly from CDN

<script src="https://cdn.jsdelivr.net/npm/shuftipro-web-sdk/dist/cdn/shuftipro-web-sdk.js"></script>

3.2. NPM Installation

If you prefer to use the npm package, you can install it via npm or yarn:

npm install shuftipro-web-sdk

After installing, you can import and use the SDK in your JavaScript files:

import ShuftiPro from 'shuftipro-web-sdk';

// Initialize the ShuftiPro SDK
const shuftiPro = new ShuftiPro();
shuftiPro.init({
    client_id: 'YOUR_CLIENT_ID',
    customer_id: 'YOUR_CUSTOMER_ID',
}).start();

4. Usage

4.1. Add basic HTML markup

Add an empty HTML element at the bottom of your page for the modal interface to mount itself on.

<div id="verification-container"></div>

4.2. Initialization

To initialize the SDK, create a new instance of ShuftiPro and call the init method with initial data:

4.2.1 Using customer ID

const shuftiPro = new ShuftiPro();
shuftiPro.init({
    client_id: 'YOUR_CLIENT_ID',
    customer_id: 'YOUR_CUSTOMER_ID',
    containerId: 'verification-container' //or iframeId
}).start();

| Parameter | Format | Notes | | ------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | client_id | string | required Your Shufti Pro client ID. | | customer_id | string | required Your Customer ID. | | containerId | string | optional A string containing the ID of the container element that the UI will mount to. This must be an empty element. The default is shuftipro-websdk-iframe. Alternatively, if your integration requires it, you can pass in the container element instead. Note that if iframeId is provided, then containerId will be ignored. if both are not provided then iframe will be opened in popup |

4.3. Handling Events

We can listen for verification events using the on method. Here's how we can handle the 'shuftiResponse' event:

shuftiPro.on('shuftiResponse', (response) => {
    console.log('Verification response:', response);
});

Alternatively, we can listen for verification events using callback. Here's how we can handle the 'callback' event.

shuftiPro.start(callbackFunction);

4.4. Fetching Request Status

To fetch the status of a verification request, use the fetchRequestStatus method. Pass the reference ID of the request along with a callback function to handle the status response:

shuftiPro.fetchRequestStatus('REFERENCE_ID', (response) => {
    console.log('Verification status:', response);
});

| Parameter | Format | Notes | | ------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | reference | string | required Pass the reference ID of the request | | callback | string | required A callback function to handle the status |

This method allows us to query the status of a verification request by providing its unique reference ID. Upon receiving the status response, we can handle it accordingly within the provided callback function.

4.5. Destroy SDK Instance

To clean up and destroy the SDK instance, call the destroy method:

shuftiPro.destroy();

4.6. Multiple Instances

We can create and manage multiple instances of the SDK to handle various verification processes simultaneously. Each instance can be independently configured and initiated, allowing for efficient management of multiple verification tasks:

// First instance
const shuftiProInstance1 = new ShuftiPro();
shuftiProInstance1.setToken(token1)
    .init({
        payload: payload1,
        containerId: 'verification-container1' // or frameId
    })
    .start(callback1);

// Second instance
const shuftiProInstance2 = new ShuftiPro();
shuftiProInstance2.setToken(token2)
    .init({
        payload: payload2,
        containerId: 'verification-container2' // or frameId
    })
    .start(callback2);

// Additional instances can be similarly created and managed

By creating multiple instances, we can efficiently handle concurrent verification processes within our application. Each instance operates independently, allowing for parallel execution of verification tasks and enhancing overall performance.