Documentation
Start typing to search…

Web Integration

The Embedded Flow is a versatile drop-in module designed to seamlessly integrate into your web page, allowing individuals to complete their onboarding process directly within your site. This approach ensures that users can onboard themselves without interrupting their current experience or navigating away from your website. The flow securely collects and verifies user information, providing a smooth and uninterrupted onboarding experience.

Integration pre-requisites

  • Client ID: Unique identifier provided by your Account Manager.
  • Journey ID: Unique identifier for your onboarding journey, containing configurations provided by your Account Manager.
  • API Key: Secure token to authorize access to specific journeys provided by your Account Manager.
  • SDK URLs
ENVURL
TESThttps://connect.test.equal.in/sdk/js/connect-business.js
PRODhttps://connect.equal.in/sdk/js/connect-business.js

Step-by-Step Integration

  1. Add SDK Script to Your HTML : Include the SDK script in your HTML file. Use the appropriate URL for your environment (TEST or PROD).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Replace with Equal SDK URL based on your environment -->
    <script src="https://connect.test.equal.in/sdk/js/connect-business.js" type="text/javascript"></script> 
  </head>
  <body>
    <!-- Add initialization script below -->
  </body>
</html>
  1. Configure Content Security Policy (CSP) Headers: Ensure your CSP headers allow the SDK to be embedded
EnvCSP headers
TESTframe-src 'self' 'unsafe-inline' 'unsafe-eval' https://connect.test.equal.in;
PRODframe-src 'self' 'unsafe-inline' 'unsafe-eval' https://connect.equal.in;
  1. Initialize the SDK: Add the following script in the section of your HTML to initialize and launch the SDK

Embedded Code Snippet

<!DOCTYPE html>
<html>
  <head>

    <!-- Replace with Equal SDK URL based on your env -->

    <script src="https://test.equal.in/sdk/js/connect-business.js" type="text/javascript"></script> 

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <!-- Initialise the Connect SDK -->

    <script>

      const client = new  EqualClient({
        clientId: "<Client ID shared by Equal>",
        apiKey: "<API Key shared by Equal>",
        mobileNumber: "<User Mobile Number>",
        journeyId: "<Journey Id shared by Equal >",
        onCancel: (eventName, authCode) => console.log('onCancel'),
        onError: (errorMessage, errorCode, authCode) => console.error('onError:', errorMessage),
        onEvent: (eventName, metadata) => { // CONNECT_STARTED etc... check name will add proper event names
        },
        onComplete: (eventName, result, authCode) => {
        //result will contain response map of profile attributes.
        },
      });

      // To launch Connect SDK.
      client.open();

    </script>
  </body>
  </html>
  1. Handle Responses

onComplete Response

onComplete: (eventName, result, authCode) => {
  console.log('User name:', result['name']);
  // Handle other profile attributes as needed
}

onCancel Response

onCancel: (eventName, authCode) => {
  console.log('User canceled the onboarding process');
}

onError Response

onError: (errorMessage, errorCode, authCode) => {
  console.error('Error occurred:', errorMessage, 'Code:', errorCode);
}

onEvent Response

onEvent: (eventName, metadata) => {
  console.log('Event:', eventName, 'Metadata:', metadata);
}
  1. Exchange authCode for Tokens : After obtaining the authCode in the onComplete callback, use it to get an AccessToken and ID Token
const authCode = '<authCode obtained from onComplete>';
const tokenUrl = 'https://api.test.equal.in/auth/token?code=' + authCode;  // Use PROD URL for production

fetch(tokenUrl, {
  method: 'POST',
  headers: {
    'Authorization': 'Basic ' + btoa('<Client ID>:<Client Secret>'),
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
.then(response => response.json())
.then(data => {
  console.log('AccessToken:', data.access_token);
  console.log('ID Token:', data.id_token);
})
.catch(error => console.error('Error fetching tokens:', error))

📘

The clientID, apikey, journeyID would be shared as part of Onboarding.

Status Codes

CodeDescription
CONNECT_STARTEDThis event is triggered when the Connect SDK is successfully rendered and the user can view the Connect interface.
CONFIG_ERRORWrong inputs from the client.
INTERNAL_ERRORWhen an error occurs in the connection flow.

Updated 3 months ago