Integration Guide

This integration guide provides a step-by-step process to integrate the Digilocker SDK into your web application.

1. Create a Session

Before initializing the SDK, you must create a unique session.
Each SDK instance requires its own session to ensure secure and independent interactions.

Use the Create Session endpoint to generate this session.
This is a server-side API call that uses Sandbox Authentication to validate your credentials.

Once created, you’ll receive a session_id, which you’ll need when initializing the SDK on the client side.


2. Integrate the SDK on the Client Side

After creating the session, the next step is to integrate the DigiLocker SDK into your client-side application.
You’ll add a “Fetch with DigiLocker” button that triggers the DigiLocker flow.


2.1 Example: “Fetch with DigiLocker” Button


<script src="https://sdk.sandbox.co.in/kyc/digilocker/sdk.js"></script>

<script>
  function launch() {
    // Define a custom event listener to handle SDK events
    class EventListener extends DigilockerSDK.EventListener {
      constructor(callback) {
        super();
        this.callback = callback;
      }
      onEvent(event) {
        if (this.callback) {
          this.callback(event);
        }
      }
    }
    
    // Define a callback function to process events from the SDK
    const handleEvent = (event) => {
      console.log("Received event:", event);
    };

    // Initialize the event listener with your callback
    const eventListener = new EventListener(handleEvent);
    DigilockerSDK.setEventListener(eventListener);


    // Set your API key
    DigilockerSDK.setAPIKey("YOUR_API_KEY");

    // Configure the SDK options
    const options = {
      session_id: "a7fac865-61a9-4589-b80c....", // Replace with your session ID from Step 1
      brand: {
        name: "MoneyApp", // Your business or app name
        logo_url: "https://example.com/your_logo", // Publicly accessible URL of your logo
      },
      theme: {
        mode: "light", // Options: "light" or "dark"
        seed: "#3D6838", // Primary color for theme customization
      },
    };

    // Launch the DigiLocker SDK
    DigilockerSDK.open(options);
  }
</script>

<button onclick="launch()">Fetch with DigiLocker</button>

2.2 SDK Options

The options object customizes how the DigiLocker SDK behaves and appears within your application.

{
  "session_id": "a7fac865-61a9-4589-b80c....",
  "brand": {
    "name": "MoneyApp",
    "logo_url": "https://example.com/your_logo"
  },
  "theme": {
    "mode": "light",
    "seed": "#3D6838"
  }
}

Parameter Details

KeyTypeDescriptionExample
session_idstringUnique identifier for the SDK session. Connects the client SDK to the session created on your backend."a7fac865-61a9-4589-b80c..."
brandobjectConfiguration for branding displayed in the DigiLocker interface.
brand.namestringDisplay name of your business or app shown during the DigiLocker flow."MoneyApp"
brand.logo_urlstringPublicly accessible HTTPS URL of your logo displayed within the SDK."https://example.com/your_logo"
themeobjectAppearance configuration for the SDK.
theme.modestringSets the overall appearance of the SDK. Accepts "light" or "dark"."light"
theme.seedstringPrimary brand color used in the SDK interface. Accepts a hex code."#3D6838"


3. Handle Session Success and Failure

After a user interacts with the DigiLocker SDK, various events are emitted that indicate the outcome of the session — whether it succeeded, failed, or was canceled.

Your event listener (defined earlier) receives these events. You can handle them as follows:

const handleEvent = (event) => {
  console.log("Event received:", event);
  
  switch (event.type) {
    case "in.co.sandbox.kyc.digilocker_sdk.session.completed":
      // The documents were fetched from digilocker successfully
      // Proceed with your application flow
      break;

    case "in.co.sandbox.kyc.digilocker_sdk.session.closed":
      // The user closed or exited out of the sdk
      break;

    default:
      console.log("Unhandled event:", event);
  }
};

To programmatically verify the final status of a session, you can call the Session Status endpoint from your backend.
This is useful for confirming completion or troubleshooting unexpected results, especially in cases where the client event might have been interrupted.


Summary

  1. Create a session using your backend and store the session_id.
  2. Integrate the SDK on the client side and configure it with your brand and theme.
  3. Listen for SDK events to determine success, failure, or cancellation.
  4. Verify session status using the server-side API for additional confirmation.