Web

Integrate DigiLocker document retrieval into your web application using the JavaScript SDK. The SDK provides a pre-built interface that handles the complete DigiLocker flow.

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.

Add the SDK script

Include the Digilocker SDK script in your HTML page.

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

The SDK is loaded globally and available as DigilockerSDK.

Initialize the SDK

Configure and launch the DigiLocker SDK when the user initiates document retrieval.

3.1 Basic implementation

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

<script>
  function launch() {
    // 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>

3.2 SDK options reference

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

string

required

Unique session ID generated when Create Session API is called.

object

required

Configuration for branding displayed in the DigiLocker interface.

Show child attributes

string

required

Display name of your business or app shown during the DigiLocker flow.

string

required

Publicly accessible HTTPS URL of your logo displayed within the SDK.

object

required

Appearance configuration for the SDK.

Show child attributes

string

required

Sets the overall appearance of the SDK. Accepts "light" or "dark".

string

required

Primary brand color used in the SDK interface. Accepts a hex code.

Handle SDK events

Set up an event listener to handle SDK events indicating session completion, cancellation, or errors.

// 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);
  
  switch (event.type) {
    case "in.co.sandbox.kyc.digilocker_sdk.session.completed":
      // Documents were fetched successfully
      // Proceed with your application flow
      fetchDocumentsFromBackend(sessionId);
      break;

    case "in.co.sandbox.kyc.digilocker_sdk.session.closed":
      // User closed or exited the SDK
      showMessage("Document retrieval cancelled");
      break;

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

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

To programmatically verify the final status of a session, call the Session Status endpoint from your backend.

Event types

The SDK emits the following event types:

Event Type	Description
`in.co.sandbox.kyc.digilocker_sdk.session.completed`	User successfully completed the DigiLocker flow and documents were retrieved
`in.co.sandbox.kyc.digilocker_sdk.session.closed`	User closed the SDK without completing the flow

Next steps

Create Session API

Learn how to create sessions for the SDK

Session Status API

Monitor session progress and status

Get Document API

Retrieve document data after completion

Aadhaar

Bank

DigiLocker

EntityLocker

MCA

PAN

Annexures

Create a session

Add the SDK script

Initialize the SDK

Handle SDK events

Event types

Next steps

Create Session API

Session Status API

Get Document API

Create a session

Add the SDK script

Initialize the SDK

Handle SDK events

​Event types

​Next steps

Create Session API

Session Status API

Get Document API

Event types

Next steps