Skip to main content

ABHA SDK - Profile KYC Implementation

This guide provides everything you need to integrate the ABHA SDK into your application for ABHA Profile KYC Verification.
  • ABHA Profile KYC: Get your ABHA address KYC verified.

Implementation Example

Add the following HTML and script tags to your webpage:
<!DOCTYPE html>
<html>
  <head>
    <title>ABHA SDK Integration for ABHA Profile KYC</title>

    <!-- Include ABHA SDK CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/@eka-care/abha/dist/sdk/abha/css/abha.css"
    />
  </head>
  <body>
    <h1>ABHA SDK Demo</h1>

    <!-- Mount Button -->
    <button class="button" onclick="mountABHASDK()">Mount SDK</button>

    <!-- Container for ABHA SDK -->
    <div id="sdk_container"></div>

    <!-- Include ABHA SDK JS -->
    <script
      type="module"
      src="https://unpkg.com/@eka-care/abha/dist/sdk/abha/js/abha.js"
    ></script>

    <script>
      function mountABHASDK() {
        window.initAbhaApp({
          containerId: "sdk_container",
          clientId: 'ext',

         // Pass the data here: 
          data: {
             accessToken: "<your_access_token>", // Pass the access token you have
             identifier:'<phr_address_of_the_patient_to_be_kyced>', // Pass the phr address as identifier to get it kyc verified 
             identifier_type:"phr_address",  // Pass the identifier type i.e. "phr_address"
             flow:'abha-kyc', // Pass the flow as abha-kyc
             orgIcon: "<url_of_your_org_icon>", // Pass the url to your organisation icon which starts with for ex: https://cdn.eka.care/vagus/cl56w6zg3001f0scsaqrh16is.jpg
             linkToOrgIcon: "<url_of_image_to_link_abha_to_your_org>", // Pass the url of an image which depicts linking abha to your organisation for ex https://cdn.eka.c
          },

          // KYC Success callback
          onKYCSuccess: (params) => {
            console.log("ABHA KYC Verified successfully:", params);
            
            // Example: Store ABHA data in your app
            if (window.EkaAbha) {
              window.EkaAbha.onAbhaKYCSuccess(JSON.stringify(params));
            }
          },

          // Error callback
          onError: (params) => {
            console.error("ABHA SDK failed:", params);

            // Example: Store ABHA data in your app
            if (window.EkaAbha) {
              window.EkaAbha.onAbhaFailure(JSON.stringify(params));
            }
          },

          // Abha Close callback
          onAbhaClose: () => {
            console.log("ABHA SDK closed");
          },
        });
      }
    </script>
  </body>
</html>

Core Functions

1. initAbhaApp

Initializes and renders the ABHA SDK in your specified container. Parameters:
NameTypeRequiredDescription
containerIdstringThe HTML element ID where the SDK will mount.
clientIdstringProvide clientId as ext.
data{
accessToken: string;
identifier: string;
identifier_type: string;
flow: string;
orgIcon?: string;
linkToOrgIcon?: string;
}
⚙️ OptionalConfiguration data for initializing the ABHA flow.

- accessToken: Pass the access token you have generated from Connect Login API without the word Bearer.
- identifier: Pass the identifier value i.e. phr address to get it kyced.
- identifier_type: Pass the type of identifier which you passed in identifier key i.e. “phr_address”.
- flow: Pass the type of flow for which you want to use SDK for i.e. abha-kyc for KYC flow.
- orgIcon: Public CDN URL of your organisation’s icon to display inside the SDK url should start with https://. Example
- linkToOrgIcon: Public CDN URL of the icon representing “Link ABHA to your organisation” url should start with https://. Example

keys with ? are optional.
onKYCSuccess(params: TOnAbhaKycSuccessParams) => voidTriggered when the user KYC verified successfully.
onError(params: TOnAbhaFailureParams) => voidTriggered when an error occurs during the ABHA flow.
onAbhaClose() => voidTriggered when SDK closes.
Example:
window.initAbhaApp({
  containerId: "sdk_container",
  data: {
    accessToken: "your_access_token_here",
    identifier: "phr_address_of_the_patient_to_be_kyced"
    identifier_type: "phr_address"
    flow: "abha-kyc"
    orgIcon: "url_of_your_org_icon",
    linkToOrgIcon: "url_of_image_to_link_abha_to_your_org",
  },
  onKYCSuccess: (params) => {
    console.log("ABHA KYC verification successful!", params);
  },
  onError: (error) => {
    console.error("ABHA flow failed:", error);
  },
  onAbhaClose: (error) => {
    console.error("ABHA SDK closed");
  },
});

Callback Parameters

onKYCSuccess Callback

The onKYCSuccess callback is triggered when the ABHA KYC flow completes successfully. It returns a confirmation message indicating that the KYC has been verified. Callback Signature:
onKYCSuccess: (params: TOnAbhaKycSuccessParams) => void;
Type Definitions
type TOnAbhaKycSuccess = string;
Parameters
TypeDescription
TOnAbhaKycSuccessstringA confirmation message from SDK post KYC verification
Example:
const onKYCSuccess = (params) => {
  console.log("KYC verification Success:", params);

  alert("KYC was verified successfully!");

  // Optionally pass data to native bridge if available
  if (window.EkaAbha) {
    window.EkaAbha.onAbhaKYCSuccess(params);
  }
};

onError Callback

The onError callback is triggered whenever an ABHA flow fails or is interrupted. It provides details about the failure through structured parameters, allowing you to handle or forward the error appropriately (for example, to native apps or monitoring tools). Callback Signature:
onError: (params: TOnAbhaFailureParams) => void;
Type Definitions
type TOnAbhaFailureParams = {
  error?: string;
  response?: TAuthVerifyV2Response;
};

type TAuthVerifyV2Response = {
  skip_state: number;
  method: AUTH_METHOD;
  data?: {
    tokens: {
      sess: string;
      refresh: string;
    };
    profile: TProfileRecord;
  };
  txn_id: string;
  error?: {
    code: number;
    message: string;
  };
};

enum AUTH_METHOD {
  EMAIL = 1,
  MOBILE = 2,
  ABHA = 7,
}

type TProfileRecord = {
  fln: string;
  fn: string;
  mn?: string;
  ln?: string;
  gen?: "M" | "F" | "O" | "U" | undefined; // 'male' | 'female' | 'other' | 'unknown'
  dob?: string;
  mobile?: string;
  email?: string;
  uuid?: string;
  bloodgroup?: "" | "A+" | "A-" | "B+" | "B-" | "O+" | "O-" | "AB+" | "AB-";
  pic?: string;
  as?: string;
  "dob-valid"?: boolean;
  "is-d"?: boolean;
  "is-d-s"?: boolean;
  "is-p"?: boolean;
  oid: string;
  at: string;
  type?: 1 | 2 | 3 | 4 | 5 | 6;
  "health-ids"?: Array<string>;
  abha_number?: string;
  kyc_verified?: boolean;
};

Parameters
KeyTypeDescription
errorstring?Short description of the failure or error message.
responseTAuthVerifyV2Response?Partial or full API response object returned from ABHA services.
Example:
const onError = (params) => {
  console.error("ABHA Error:", params);

  if (params.response?.error?.code === 1001) {
    alert("Authentication failed. Please try again.");
  } else if (params.error === "NETWORK_ERROR") {
    alert("Please check your internet connection.");
  } else {
    alert("Something went wrong. Please retry.");
  }

  // Forward the error to native handler if available
  if (window.EkaAbha) {
    window.EkaAbha.onAbhaFailure(JSON.stringify(params));
  }
};

onAbhaClose Callback

The onAbhaClose callback is triggered when the ABHA SDK flow gets closed. Callback Signature:
onAbhaClose: () => void;
Example:
const onAbhaClose = () => {
  console.log("ABHA SDK Closed");
};
Suggest Handling -Always log the full error response (params) for debugging. -Display friendly error messages for known error.code values. -If params.response is present, inspect response.error.message for more detail. -If integrating with native apps, forward the serialized error object:
window.EkaAbha.onAbhaFailure(JSON.stringify(params));
Suggest Handling -Always log the full error response (params) for debugging. -Display friendly error messages for known error.code values. -If params.response is present, inspect response.error.message for more detail. -If integrating with native apps, forward the serialized error object:
window.EkaAbha.onAbhaFailure(JSON.stringify(params));

Container Styling

Ensure your container has sufficient space:
<div
  id="sdk_container"
  style="width: 100%; height: 600px; border: 1px solid #ddd;"
></div>

Troubleshooting

Common Issues

1. SDK Not Rendering

Problem: Nothing appears in the container. Solution:
  • Ensure containerId matches an existing HTML element.
  • Verify the SDK JS and CSS are correctly loaded.
  • Check browser console for errors.

2. APIs Not Being Called

Problem: API requests are not triggered after the SDK is mounted. Solution:
  • Ensure that the accessToken is passed correctly (do not include the Bearer prefix) and that the token has not expired.
  • To prevent CORS-related issues, ensure that your domain is whitelisted.

3. Callback Not Triggered

Problem: onSuccess, onError, onKYCSuccess, onConsentSuccess, onAbhaClose isn’t firing. Solution:
  • Make sure callbacks are passed as valid functions.
  • Avoid race conditions (e.g., calling before SDK fully loads).

4. Styling Issues

Problem: SDK content appears misaligned or clipped. Solution:
  • Give your container a fixed height (e.g., 600px).
  • Ensure no parent element uses overflow: hidden.