@eka-care/abha 0.1.88 → 0.1.90
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +308 -165
- package/dist/images/health-chatbot.svg +8 -0
- package/dist/images/self-assessment.svg +11 -0
- package/dist/sdk/abha/css/abha.css +1 -1
- package/dist/sdk/abha/js/abha.js +28 -53
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -4,12 +4,14 @@ This guide provides everything you need to integrate the ABHA SDK into your appl
|
|
|
4
4
|
|
|
5
5
|
## Overview
|
|
6
6
|
|
|
7
|
-
The ABHA SDK allows you to integrate Create ABHA, Login
|
|
7
|
+
The ABHA SDK allows you to integrate flows—such as Create ABHA, Login, Profile KYC, Consent Management, and Scan & Share—into your healthcare application, while offering customizable theme options. It provides:
|
|
8
8
|
|
|
9
9
|
- **Create ABHA**: Create a new ABHA using Mobile or Aadhaar.
|
|
10
|
-
- **Login with ABHA**: Login to your
|
|
10
|
+
- **Login with ABHA**: Login to your existing ABHA using PHR Address, ABHA number, Aadhaar number or Mobile number.
|
|
11
11
|
- **ABHA Consent Management**: Manage Consent requests raised by healthcare providers to share medical records securely.
|
|
12
12
|
- **ABHA Profile KYC**: Get your ABHA address KYC verified.
|
|
13
|
+
- **ABHA Scan & Share**: Get your Appointments Booked through ABHA.
|
|
14
|
+
- **Customizing the Theme**: Customize the ABHA SDK colors to match your application's branding.
|
|
13
15
|
|
|
14
16
|
## Installation
|
|
15
17
|
|
|
@@ -25,16 +27,13 @@ The ABHA SDK allows you to integrate Create ABHA, Login with ABHA, ABHA Consent
|
|
|
25
27
|
Add the following HTML and script tags to your webpage:
|
|
26
28
|
|
|
27
29
|
```html
|
|
28
|
-
<!
|
|
30
|
+
<!doctype html>
|
|
29
31
|
<html>
|
|
30
32
|
<head>
|
|
31
33
|
<title>ABHA SDK Integration</title>
|
|
32
34
|
|
|
33
35
|
<!-- Include ABHA SDK CSS -->
|
|
34
|
-
<link
|
|
35
|
-
rel="stylesheet"
|
|
36
|
-
href="https://unpkg.com/@eka-care/abha-stg/dist/sdk/abha/css/abha.css"
|
|
37
|
-
/>
|
|
36
|
+
<link rel="stylesheet" href="https://unpkg.com/@eka-care/abha/dist/sdk/abha/css/abha.css" />
|
|
38
37
|
</head>
|
|
39
38
|
<body>
|
|
40
39
|
<h1>ABHA SDK Demo</h1>
|
|
@@ -46,53 +45,55 @@ Add the following HTML and script tags to your webpage:
|
|
|
46
45
|
<div id="sdk_container"></div>
|
|
47
46
|
|
|
48
47
|
<!-- Include ABHA SDK JS -->
|
|
49
|
-
<script
|
|
50
|
-
type="module"
|
|
51
|
-
src="https://unpkg.com/@eka-care/abha-stg/dist/sdk/abha/js/abha.js"
|
|
52
|
-
></script>
|
|
48
|
+
<script type="module" src="https://unpkg.com/@eka-care/abha/dist/sdk/abha/js/abha.js"></script>
|
|
53
49
|
|
|
54
50
|
<script>
|
|
55
51
|
function mountABHASDK() {
|
|
56
52
|
window.initAbhaApp({
|
|
57
|
-
containerId:
|
|
58
|
-
clientId:
|
|
59
|
-
theme:{
|
|
60
|
-
|
|
61
|
-
|
|
53
|
+
containerId: 'sdk_container',
|
|
54
|
+
clientId: 'ext',
|
|
55
|
+
theme: {
|
|
56
|
+
// if you want to customise sdk theme/colors
|
|
57
|
+
// pass the colors of your organisation design system
|
|
62
58
|
},
|
|
63
|
-
|
|
59
|
+
// data object
|
|
64
60
|
data: {
|
|
65
61
|
// pass the required data as per the flow
|
|
66
|
-
|
|
62
|
+
},
|
|
67
63
|
|
|
68
64
|
// Success callback
|
|
69
65
|
onSuccess: (params) => {
|
|
70
|
-
console.log(
|
|
66
|
+
console.log('ABHA Registration flow completed successfully:', params);
|
|
71
67
|
},
|
|
72
68
|
|
|
73
|
-
//KYC
|
|
69
|
+
// KYC Success callback
|
|
74
70
|
onKYCSuccess: (params) => {
|
|
75
|
-
console.log(
|
|
71
|
+
console.log('ABHA KYC Verified successfully:', params);
|
|
76
72
|
},
|
|
77
73
|
|
|
78
|
-
//Consent
|
|
74
|
+
// Consent Success callback
|
|
79
75
|
onConsentSuccess: (params) => {
|
|
80
|
-
console.log(
|
|
76
|
+
console.log('ABHA Consent flow completed successfully:', params);
|
|
81
77
|
},
|
|
82
78
|
|
|
83
|
-
//
|
|
84
|
-
|
|
85
|
-
console.
|
|
79
|
+
// Scan & Share Success callback
|
|
80
|
+
onAppointmentBookedSuccess: (params) => {
|
|
81
|
+
console.log('Appointment Booked successfully:', params);
|
|
82
|
+
},
|
|
83
|
+
|
|
84
|
+
// Skip ABHA callback
|
|
85
|
+
onSkipAbha: (params) => {
|
|
86
|
+
console.log('ABHA flow SKIPPED:', params);
|
|
86
87
|
},
|
|
87
|
-
|
|
88
|
+
|
|
88
89
|
// Abha Close callback
|
|
89
90
|
onAbhaClose: () => {
|
|
90
|
-
console.log(
|
|
91
|
+
console.log('ABHA SDK closed');
|
|
91
92
|
},
|
|
92
93
|
|
|
93
|
-
//
|
|
94
|
-
|
|
95
|
-
console.
|
|
94
|
+
// Error callback
|
|
95
|
+
onError: (params) => {
|
|
96
|
+
console.error('ABHA SDK failed:', params);
|
|
96
97
|
},
|
|
97
98
|
});
|
|
98
99
|
}
|
|
@@ -100,6 +101,7 @@ Add the following HTML and script tags to your webpage:
|
|
|
100
101
|
</body>
|
|
101
102
|
</html>
|
|
102
103
|
```
|
|
104
|
+
|
|
103
105
|
## Core Functions
|
|
104
106
|
|
|
105
107
|
### 1. initAbhaApp
|
|
@@ -108,19 +110,19 @@ Initializes and renders the ABHA SDK in your specified container.
|
|
|
108
110
|
|
|
109
111
|
**Parameters:**
|
|
110
112
|
|
|
111
|
-
| Name
|
|
112
|
-
|
|
|
113
|
-
| `containerId`
|
|
114
|
-
| `clientId`
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `onSuccess`
|
|
118
|
-
| `onKYCSuccess`
|
|
119
|
-
| `onConsentSuccess`
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
123
|
-
|
|
113
|
+
| Name | Type | Required | Description |
|
|
114
|
+
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
115
|
+
| `containerId` | `string` | ✅ | The HTML element ID where the SDK will mount. |
|
|
116
|
+
| `clientId` | `string` | ✅ | Provide clientId as `ext`. |
|
|
117
|
+
| `data` | `{`<br/>`accessToken: string;`<br/>`hipId: string;`<br/>`oid?: string;`<br/>`identifier?: string;`<br/>`identifier_type?: string;`<br/>`counter_id?: string;`<br/>`consent_id?: string;`<br/>`flow?: string;`<br/>`orgIconUrl?: string;`<br/>`linkToOrgIcon?: string;`<br/>`skipABHAEnable?: boolean;`<br/>`}` | ⚙️ Optional | Configuration data for initializing the ABHA flow. <br/><br/>- <strong>accessToken:</strong> Pass the access token you have generated from [Connect Login ](https://developer.eka.care/api-reference/authorization/client-login) API without the word `Bearer`. <br/>- <strong>hipId:</strong> Pass the HFR ID you have. <br/>- <strong>oid:</strong> Pass oid of patient if available / needed in the flow. <br/>- <strong>identifier:</strong> Pass the login identifier value i.e. mobile number / aadhaar number / phr address / abha number.<br/>- <strong>identifier_type:</strong> Pass the type of identifier which you passed in `identifier` key i.e. "mobile" / "aadhaar_number" / "phr_address" / "abha_number" /. If not known pass undefined.<br/>- <strong>counter_id:</strong> Pass the HIP code of the facility you have.<br/>- <strong>consent_id:</strong> Pass the consent_id of the consent request raised. <br/>- <strong>flow:</strong> Pass the type of flow for which you want to use SDK for i.e. `abha-kyc` for KYC flow / `consent` for Consent flow. <br/>- <strong>orgIconUrl:</strong> Public CDN URL of the logo of your organisation url should start with https://. [Example](https://cdn.eka.care/vagus/cl5jgf0u500070shaetqw0r5l.png)<br/>- <strong>linkToOrgIcon:</strong> Public CDN URL of the icon representing “Link ABHA to your organisation” url should start with https://. [Example](https://cdn.eka.care/vagus/cm6agrs5000090tfwfz984x5b.webp)<br/>- <strong>skipABHAEnable:</strong> Pass the boolean as true if you want Skip ABHA button to be enabled on login screen. <br/><br/> `keys with ? are optional and needs to be passed as per flow requirement.` |
|
|
118
|
+
| `theme` | `object` | ⚙️ Optional | Color token overrides to match your organisation's design system. All keys are optional — only supply the tokens you want to change. |
|
|
119
|
+
| `onSuccess` | `(params: TOnAbhaSuccessParams) => void` | ✅ | Triggered when the user successfully creates or logs in to ABHA. |
|
|
120
|
+
| `onKYCSuccess` | `(params: TOnAbhaKycSuccessParams) => void` | ⚙️ Optional | Triggered when the user KYC verified successfully. |
|
|
121
|
+
| `onConsentSuccess` | `(params: TOnAbhaConsentSuccessParams) => void` | ⚙️ Optional | Triggered when the consent flow completes successfully. |
|
|
122
|
+
| `onAppointmentBookedSuccess` | `(params: TOnAbhaSnSAppointmentSuccessParams) => void` | ✅ | Triggered when the Appointment is booked and token gets generated successfully. |
|
|
123
|
+
| `onSkipAbha` | `(params: TOnSkipABHA) => void` | ⚙️ Optional | Triggered if the ABHA flow is skipped. |
|
|
124
|
+
| `onAbhaClose` | `() => void` | ✅ | Triggered when SDK closes. |
|
|
125
|
+
| `onError` | `(params: TOnAbhaFailureParams) => void` | ✅ | Triggered when an error occurs during the ABHA flow. |
|
|
124
126
|
|
|
125
127
|
## Callback Parameters
|
|
126
128
|
|
|
@@ -170,40 +172,37 @@ type TProfileRecord = {
|
|
|
170
172
|
fn: string;
|
|
171
173
|
mn?: string;
|
|
172
174
|
ln?: string;
|
|
173
|
-
gen?:
|
|
175
|
+
gen?: 'M' | 'F' | 'O' | 'U' | undefined; // 'male' | 'female' | 'other' | 'unknown'
|
|
174
176
|
dob?: string;
|
|
175
177
|
mobile?: string;
|
|
176
178
|
email?: string;
|
|
177
179
|
uuid?: string;
|
|
178
|
-
bloodgroup?:
|
|
180
|
+
bloodgroup?: '' | 'A+' | 'A-' | 'B+' | 'B-' | 'O+' | 'O-' | 'AB+' | 'AB-';
|
|
179
181
|
pic?: string;
|
|
180
182
|
as?: string;
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
183
|
+
'dob-valid'?: boolean;
|
|
184
|
+
'is-d'?: boolean;
|
|
185
|
+
'is-d-s'?: boolean;
|
|
186
|
+
'is-p'?: boolean;
|
|
185
187
|
oid: string;
|
|
186
188
|
at: string;
|
|
187
189
|
type?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
188
|
-
|
|
190
|
+
'health-ids'?: Array<string>;
|
|
189
191
|
abha_number?: string;
|
|
190
192
|
kyc_verified?: boolean;
|
|
191
193
|
};
|
|
192
|
-
|
|
193
194
|
```
|
|
194
195
|
|
|
195
196
|
**Parameters**
|
|
196
|
-
| Key
|
|
197
|
+
| Key | Type | Description |
|
|
197
198
|
| ---------- | ----------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
198
199
|
| `response` | `TAuthVerifyV2Response` | The complete ABHA verification response, containing session tokens, user profile, and transaction details. |
|
|
199
200
|
|
|
200
|
-
|
|
201
|
-
|
|
202
201
|
**Example:**
|
|
203
202
|
|
|
204
203
|
```javascript
|
|
205
204
|
const onSuccess = (params) => {
|
|
206
|
-
console.log(
|
|
205
|
+
console.log('ABHA Success:', params.response);
|
|
207
206
|
|
|
208
207
|
const abhaNumber = params.response.data?.profile?.abha_number;
|
|
209
208
|
const userName = params.response.data?.profile?.name;
|
|
@@ -219,7 +218,7 @@ const onSuccess = (params) => {
|
|
|
219
218
|
|
|
220
219
|
### onKYCSuccess Callback
|
|
221
220
|
|
|
222
|
-
The onKYCSuccess callback is triggered when the ABHA KYC flow completes successfully.
|
|
221
|
+
The onKYCSuccess callback is triggered when the ABHA KYC flow completes successfully.
|
|
223
222
|
It returns a confirmation message indicating that the KYC has been verified.
|
|
224
223
|
|
|
225
224
|
**Callback Signature:**
|
|
@@ -235,19 +234,18 @@ type TOnAbhaKycSuccess = string;
|
|
|
235
234
|
```
|
|
236
235
|
|
|
237
236
|
**Parameters**
|
|
238
|
-
| | Type | Description |
|
|
239
|
-
| ---------- | ----------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
240
|
-
| `TOnAbhaKycSuccess` | `string` | A confirmation message from SDK post KYC verification |
|
|
241
|
-
|
|
242
237
|
|
|
238
|
+
| Key | Type | Description |
|
|
239
|
+
| ------------------- | -------- | ----------------------------------------------------- |
|
|
240
|
+
| `TOnAbhaKycSuccess` | `string` | A confirmation message from SDK post KYC verification |
|
|
243
241
|
|
|
244
242
|
**Example:**
|
|
245
243
|
|
|
246
244
|
```javascript
|
|
247
245
|
const onKYCSuccess = (params) => {
|
|
248
|
-
console.log(
|
|
246
|
+
console.log('KYC verification Success:', params);
|
|
249
247
|
|
|
250
|
-
alert(
|
|
248
|
+
alert('KYC was verified successfully!');
|
|
251
249
|
|
|
252
250
|
// Optionally pass data to native bridge if available
|
|
253
251
|
if (window.EkaAbha) {
|
|
@@ -258,7 +256,7 @@ const onKYCSuccess = (params) => {
|
|
|
258
256
|
|
|
259
257
|
### onConsentSuccess Callback
|
|
260
258
|
|
|
261
|
-
The onConsentSuccess callback is triggered when the ABHA Consent flow completes successfully.
|
|
259
|
+
The onConsentSuccess callback is triggered when the ABHA Consent flow completes successfully.
|
|
262
260
|
It returns a confirmation message indicating that the Consent flow ended successfully.
|
|
263
261
|
|
|
264
262
|
**Callback Signature:**
|
|
@@ -274,28 +272,123 @@ type TOnAbhaConsentSuccessParams = string;
|
|
|
274
272
|
```
|
|
275
273
|
|
|
276
274
|
**Parameters**
|
|
277
|
-
| | Type | Description |
|
|
278
|
-
| ---------- | ----------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
279
|
-
| `TOnAbhaConsentSuccessParams` | `string` | A confirmation message from SDK post Consent flow completion |
|
|
280
|
-
|
|
281
275
|
|
|
276
|
+
| Key | Type | Description |
|
|
277
|
+
| ----------------------------- | -------- | ------------------------------------------------------------ |
|
|
278
|
+
| `TOnAbhaConsentSuccessParams` | `string` | A confirmation message from SDK post Consent flow completion |
|
|
282
279
|
|
|
283
280
|
**Example:**
|
|
284
281
|
|
|
285
282
|
```javascript
|
|
286
283
|
const onConsentSuccess = (params) => {
|
|
287
|
-
console.log(
|
|
284
|
+
console.log('Consent Flow completed:', params);
|
|
288
285
|
|
|
289
|
-
alert(
|
|
286
|
+
alert('Consent flow completed successfully!');
|
|
290
287
|
|
|
291
288
|
// Optionally pass data to native bridge if available
|
|
292
289
|
if (window.EkaAbha) {
|
|
293
290
|
window.EkaAbha.onAbhaConsentSuccess(params);
|
|
294
291
|
}
|
|
295
292
|
};
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
```
|
|
296
|
+
### onAppointmentBookedSuccess Callback
|
|
297
|
+
|
|
298
|
+
The onAppointmentBookedSuccess callback is triggered when the appointment is booked and token gets generated successfully.
|
|
299
|
+
It returns a confirmation message indicating that the Appointment is booked.
|
|
300
|
+
|
|
301
|
+
**Callback Signature:**
|
|
302
|
+
|
|
303
|
+
```typescript
|
|
304
|
+
onAppointmentBookedSuccess: (params: TOnAbhaSnSAppointmentSuccessParams) => void;
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
**Type Definitions**
|
|
308
|
+
|
|
309
|
+
```typescript
|
|
310
|
+
type TOnAbhaSnSAppointmentSuccess = string;
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
**Parameters**
|
|
314
|
+
| | Type | Description |
|
|
315
|
+
| ---------- | ----------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
316
|
+
| `onAppointmentBookedSuccess` | `string` | A confirmation message from SDK post Appointment Token generation |
|
|
317
|
+
|
|
318
|
+
**Example:**
|
|
319
|
+
|
|
320
|
+
```javascript
|
|
321
|
+
const onAppointmentBookedSuccess = (params) => {
|
|
322
|
+
console.log("Appointment Booked successfully!:", params);
|
|
323
|
+
|
|
324
|
+
alert("Appointment Booked successfully!");
|
|
325
|
+
|
|
326
|
+
// Optionally pass data to native bridge if available
|
|
327
|
+
if (window.EkaAbha) {
|
|
328
|
+
window.EkaAbha.onAppointmentBookedSuccess(params);
|
|
329
|
+
}
|
|
330
|
+
};
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
### onSkipAbha Callback
|
|
334
|
+
|
|
335
|
+
The onSkipAbha callback is triggered when the ABHA SDK flow is skipped. The callback is functional when skipABHAEnable is set to true in the data parameter while initializing the SDK.
|
|
336
|
+
|
|
337
|
+
**Callback Signature:**
|
|
338
|
+
|
|
339
|
+
```typescript
|
|
340
|
+
onSkipAbha: (params: TOnSkipABHA) => void;
|
|
341
|
+
```
|
|
342
|
+
|
|
343
|
+
**Example:**
|
|
344
|
+
|
|
345
|
+
```javascript
|
|
346
|
+
const onSkipAbha = (params) => {
|
|
347
|
+
console.log("ABHA SDK Skipped:", params);
|
|
348
|
+
};
|
|
349
|
+
```
|
|
350
|
+
|
|
351
|
+
**Type Definitions**
|
|
352
|
+
|
|
353
|
+
```typescript
|
|
354
|
+
type IdentifierType =
|
|
355
|
+
| "mobile"
|
|
356
|
+
| "aadhaar_number"
|
|
357
|
+
| "abha_number"
|
|
358
|
+
| "phr_address";
|
|
359
|
+
|
|
360
|
+
type TOnSkipABHA = {
|
|
361
|
+
identifier?: string;
|
|
362
|
+
identifier_type?: IdentifierType[]; // No default value here
|
|
363
|
+
};
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
**Parameters**
|
|
367
|
+
| Key | Type | Description |
|
|
368
|
+
| ---------- | ------------------------ | ---------------------------------------------------------------- |
|
|
369
|
+
| `identifier` | `string?` | It will be login identifier value filled by user. |
|
|
370
|
+
| `identifier_type` | `IdentifierType[]?` | It will be type of login identifier. |
|
|
371
|
+
|
|
372
|
+
### onAbhaClose Callback
|
|
373
|
+
|
|
374
|
+
The onAbhaClose callback is triggered when the ABHA SDK flow gets closed.
|
|
375
|
+
|
|
376
|
+
**Callback Signature:**
|
|
377
|
+
|
|
378
|
+
```typescript
|
|
379
|
+
onAbhaClose: () => void;
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
**Example:**
|
|
383
|
+
|
|
384
|
+
```javascript
|
|
385
|
+
const onAbhaClose = () => {
|
|
386
|
+
console.log("ABHA SDK Closed");
|
|
387
|
+
};
|
|
296
388
|
```
|
|
297
389
|
|
|
298
390
|
### onError Callback
|
|
391
|
+
|
|
299
392
|
The onError callback is triggered whenever an ABHA flow fails or is interrupted.
|
|
300
393
|
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).
|
|
301
394
|
|
|
@@ -360,16 +453,14 @@ type TProfileRecord = {
|
|
|
360
453
|
abha_number?: string;
|
|
361
454
|
kyc_verified?: boolean;
|
|
362
455
|
};
|
|
363
|
-
|
|
364
456
|
```
|
|
365
457
|
|
|
366
458
|
**Parameters**
|
|
367
|
-
| Key
|
|
459
|
+
| Key | Type | Description |
|
|
368
460
|
| ---------- | ------------------------ | ---------------------------------------------------------------- |
|
|
369
|
-
| `error`
|
|
461
|
+
| `error` | `string?` | Short description of the failure or error message. |
|
|
370
462
|
| `response` | `TAuthVerifyV2Response?` | Partial or full API response object returned from ABHA services. |
|
|
371
463
|
|
|
372
|
-
|
|
373
464
|
**Example:**
|
|
374
465
|
|
|
375
466
|
```javascript
|
|
@@ -391,72 +482,23 @@ const onError = (params) => {
|
|
|
391
482
|
};
|
|
392
483
|
```
|
|
393
484
|
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
The onAbhaClose callback is triggered when the ABHA SDK flow gets closed.
|
|
485
|
+
**Suggested Handling**
|
|
397
486
|
|
|
398
|
-
|
|
487
|
+
- Always log the full error response (`params`) for debugging.
|
|
488
|
+
- Display friendly error messages for known `error.code` values.
|
|
489
|
+
- If `params.response` is present, inspect `response.error.message` for more detail.
|
|
490
|
+
- If integrating with native apps, forward the serialized error object:
|
|
399
491
|
|
|
400
|
-
```typescript
|
|
401
|
-
onAbhaClose: () => void;
|
|
402
|
-
```
|
|
403
|
-
|
|
404
|
-
**Example:**
|
|
405
|
-
|
|
406
|
-
```javascript
|
|
407
|
-
const onAbhaClose = () => {
|
|
408
|
-
console.log("ABHA SDK Closed");
|
|
409
|
-
};
|
|
410
|
-
```
|
|
411
|
-
|
|
412
|
-
### onSkipAbha Callback
|
|
413
|
-
|
|
414
|
-
The onSkipAbha callback is triggered when the ABHA SDK flow is skipped. The callback is functional when skipABHAEnable is set to true in the data parameter while initializing the SDK.
|
|
415
|
-
|
|
416
|
-
**Callback Signature:**
|
|
417
|
-
|
|
418
|
-
```typescript
|
|
419
|
-
onSkipAbha: (params: TOnSkipABHA) => void;
|
|
420
|
-
```
|
|
421
|
-
|
|
422
|
-
**Example:**
|
|
423
|
-
|
|
424
|
-
```javascript
|
|
425
|
-
const onSkipAbha = (params) => {
|
|
426
|
-
console.log("ABHA SDK Skipped:", params);
|
|
427
|
-
};
|
|
428
|
-
```
|
|
429
|
-
**Type Definitions**
|
|
430
|
-
|
|
431
|
-
```typescript
|
|
432
|
-
type IdentifierType = "mobile" | "aadhaar_number" | "abha_number" | "phr_address";
|
|
433
|
-
|
|
434
|
-
type TOnSkipABHA = {
|
|
435
|
-
identifier?: string;
|
|
436
|
-
identifier_type?: IdentifierType[]; // No default value here
|
|
437
|
-
};
|
|
438
|
-
```
|
|
439
|
-
|
|
440
|
-
**Parameters**
|
|
441
|
-
| Key | Type | Description |
|
|
442
|
-
| ---------- | ------------------------ | ---------------------------------------------------------------- |
|
|
443
|
-
| `identifier` | `string?` | It will be login identifier value filled by user. |
|
|
444
|
-
| `identifier_type` | `IdentifierType[]?` | It will be type of login identifier. |
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
**Suggest Handling**
|
|
448
|
-
-Always log the full error response (params) for debugging.
|
|
449
|
-
-Display friendly error messages for known error.code values.
|
|
450
|
-
-If params.response is present, inspect response.error.message for more detail.
|
|
451
|
-
-If integrating with native apps, forward the serialized error object:
|
|
452
492
|
```javascript
|
|
453
493
|
window.EkaAbha.onAbhaFailure(JSON.stringify(params));
|
|
454
494
|
```
|
|
455
495
|
|
|
456
496
|
## Customizing the Theme
|
|
497
|
+
|
|
457
498
|
The ABHA SDK supports full color-token overriding. You can pass a theme object during initialization to match your application's branding.
|
|
458
499
|
|
|
459
500
|
### Default Theme Colors
|
|
501
|
+
|
|
460
502
|
If no theme is provided, the SDK uses the following default values:
|
|
461
503
|
|
|
462
504
|
```typescript
|
|
@@ -470,38 +512,40 @@ const defaultAbhaColors = {
|
|
|
470
512
|
brand: '#6B5CE0', // Main buttons, radios, and active states
|
|
471
513
|
},
|
|
472
514
|
surface: {
|
|
473
|
-
base: '#FFFFFF',
|
|
474
|
-
subtle: '#F2F4F7',
|
|
475
|
-
muted: '#E4E7EC',
|
|
515
|
+
base: '#FFFFFF', // Background of pages
|
|
516
|
+
subtle: '#F2F4F7', // Card backgrounds
|
|
517
|
+
muted: '#E4E7EC', // Dividers and borders
|
|
476
518
|
strong: '#BEC5D0',
|
|
477
|
-
success: '#D5F6E2',
|
|
519
|
+
success: '#D5F6E2', // Success background alerts
|
|
478
520
|
neutral: '#0000000D',
|
|
479
521
|
danger: '#DD3F3F',
|
|
480
|
-
abhaCard: '#232477',
|
|
522
|
+
abhaCard: '#232477', // Specific background for the ABHA ID card
|
|
481
523
|
},
|
|
482
524
|
content: {
|
|
483
|
-
primary: '#111B31',
|
|
525
|
+
primary: '#111B31', // Heading and main text
|
|
484
526
|
secondary: '#4B596D', // Subtext
|
|
485
|
-
muted: '#9EA8B8',
|
|
486
|
-
success: '#1B7E43',
|
|
487
|
-
enabled:
|
|
527
|
+
muted: '#9EA8B8', // Disabled or placeholder text
|
|
528
|
+
success: '#1B7E43', // Success text
|
|
529
|
+
enabled: '#ffffff', // enabled button text color
|
|
488
530
|
},
|
|
489
531
|
qrCodeColors: {
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
}
|
|
532
|
+
fgColor: '#000000', // Color of the QR code dots
|
|
533
|
+
bgColor: '#FFFFFF', // Background of the QR code
|
|
534
|
+
},
|
|
493
535
|
};
|
|
494
536
|
```
|
|
537
|
+
|
|
495
538
|
### Overriding the theme
|
|
539
|
+
|
|
496
540
|
To customize the look, add the `theme` key to your `initAbhaApp` configuration:
|
|
497
541
|
|
|
498
542
|
```typescript
|
|
499
543
|
window.initAbhaApp({
|
|
500
|
-
containerId:
|
|
501
|
-
clientId:
|
|
544
|
+
containerId: 'sdk_container',
|
|
545
|
+
clientId: 'ext',
|
|
502
546
|
theme: {
|
|
503
547
|
primary: {
|
|
504
|
-
brand: '<your_org_primary_color', // brand color
|
|
548
|
+
brand: '<your_org_primary_color>', // brand color
|
|
505
549
|
},
|
|
506
550
|
semantic: {
|
|
507
551
|
error: '<your_semantic_error_color>',
|
|
@@ -509,45 +553,47 @@ window.initAbhaApp({
|
|
|
509
553
|
success: '<your_semantic_success_color>',
|
|
510
554
|
},
|
|
511
555
|
surface: {
|
|
512
|
-
base: '<your_base_color>',
|
|
513
|
-
subtle: '<your_subtle_color>',
|
|
514
|
-
muted: '<your_muted_color>',
|
|
556
|
+
base: '<your_base_color>', // Background of pages
|
|
557
|
+
subtle: '<your_subtle_color>', // Card backgrounds
|
|
558
|
+
muted: '<your_muted_color>', // Dividers and borders
|
|
515
559
|
strong: '<your_strong_color>',
|
|
516
|
-
success: '<your_success_color>',
|
|
560
|
+
success: '<your_success_color>', // Success background alerts
|
|
517
561
|
neutral: '<your_neutral_color>',
|
|
518
562
|
danger: '<your_danger_color>',
|
|
519
|
-
abhaCard: '<your_abhaCard_color>',
|
|
563
|
+
abhaCard: '<your_abhaCard_color>', // Specific background for the ABHA ID card
|
|
520
564
|
},
|
|
521
565
|
content: {
|
|
522
|
-
primary: '<your_content_primary_color>',
|
|
566
|
+
primary: '<your_content_primary_color>', // Heading and main text
|
|
523
567
|
secondary: '<your_content_secondary_color>', // Subtext
|
|
524
|
-
muted: '<your_content_muted_color>',
|
|
525
|
-
success: '<your_content_success_color>',
|
|
526
|
-
enabled:
|
|
568
|
+
muted: '<your_content_muted_color>', // Disabled or placeholder text
|
|
569
|
+
success: '<your_content_success_color>', // Success text
|
|
570
|
+
enabled: '<enabled_button_text_color>', // enabled button text color
|
|
527
571
|
},
|
|
528
572
|
qrCodeColors: {
|
|
529
573
|
fgColor: '<your_qrcode_dot_color>', // Color of the QR code dots
|
|
530
|
-
bgColor: '<your_qrcode_bg_color>'
|
|
531
|
-
}
|
|
574
|
+
bgColor: '<your_qrcode_bg_color>', // Background of the QR code
|
|
575
|
+
},
|
|
532
576
|
},
|
|
533
577
|
data: {
|
|
534
|
-
orgIconUrl:
|
|
578
|
+
orgIconUrl: 'https://your-domain.com/logo.png',
|
|
535
579
|
// ... rest of your data
|
|
536
580
|
},
|
|
537
|
-
onSuccess: (params) => {
|
|
538
|
-
|
|
581
|
+
onSuccess: (params) => {
|
|
582
|
+
/* ... */
|
|
583
|
+
},
|
|
584
|
+
onError: (params) => {
|
|
585
|
+
/* ... */
|
|
586
|
+
},
|
|
539
587
|
// ... other methods of initAbhaApp fn
|
|
540
588
|
});
|
|
541
589
|
```
|
|
542
590
|
|
|
543
|
-
|
|
544
591
|
## Container Styling
|
|
592
|
+
|
|
545
593
|
Ensure your container has sufficient space:
|
|
594
|
+
|
|
546
595
|
```html
|
|
547
|
-
<div
|
|
548
|
-
id="sdk_container"
|
|
549
|
-
style="width: 100%; height: 600px; border: 1px solid #ddd;"
|
|
550
|
-
></div>
|
|
596
|
+
<div id="sdk_container" style="width: 100%; height: 600px; border: 1px solid #ddd;"></div>
|
|
551
597
|
```
|
|
552
598
|
|
|
553
599
|
## Troubleshooting
|
|
@@ -559,6 +605,7 @@ Ensure your container has sufficient space:
|
|
|
559
605
|
**Problem**: Nothing appears in the container.
|
|
560
606
|
|
|
561
607
|
**Solution**:
|
|
608
|
+
|
|
562
609
|
- Ensure containerId matches an existing HTML element.
|
|
563
610
|
- Verify the SDK JS and CSS are correctly loaded.
|
|
564
611
|
- Check browser console for errors.
|
|
@@ -568,6 +615,7 @@ Ensure your container has sufficient space:
|
|
|
568
615
|
**Problem**: API requests are not triggered after the SDK is mounted.
|
|
569
616
|
|
|
570
617
|
**Solution**:
|
|
618
|
+
|
|
571
619
|
- Ensure that the accessToken is passed correctly (do not include the Bearer prefix) and that the token has not expired.
|
|
572
620
|
- To prevent CORS-related issues, ensure that your domain is whitelisted.
|
|
573
621
|
|
|
@@ -576,6 +624,7 @@ Ensure your container has sufficient space:
|
|
|
576
624
|
**Problem**: onSuccess, onError, onKYCSuccess, onConsentSuccess, onAbhaClose isn’t firing.
|
|
577
625
|
|
|
578
626
|
**Solution**:
|
|
627
|
+
|
|
579
628
|
- Make sure callbacks are passed as valid functions.
|
|
580
629
|
- Avoid race conditions (e.g., calling before SDK fully loads).
|
|
581
630
|
|
|
@@ -584,6 +633,100 @@ Ensure your container has sufficient space:
|
|
|
584
633
|
**Problem**: SDK content appears misaligned or clipped.
|
|
585
634
|
|
|
586
635
|
**Solution**:
|
|
636
|
+
|
|
587
637
|
- Give your container a fixed height (e.g., 600px).
|
|
588
|
-
- Ensure no parent element uses overflow: hidden
|
|
638
|
+
- Ensure no parent element uses `overflow: hidden`.
|
|
639
|
+
|
|
640
|
+
### Common Theming Issues
|
|
641
|
+
|
|
642
|
+
#### 1. Button Not Visible or Hard to See
|
|
643
|
+
|
|
644
|
+
**Problem**: A button appears invisible, blends into the background, or is difficult to read.
|
|
645
|
+
|
|
646
|
+
**Cause**: This typically happens when `primary.brand` and `content.enabled` are too similar (e.g., both set to white or both dark), making the button label invisible against its background.
|
|
647
|
+
|
|
648
|
+
**Solution**:
|
|
649
|
+
- Ensure `primary.brand` (button background) and `content.enabled` (button text) have sufficient contrast.
|
|
650
|
+
- A dark `primary.brand` should pair with a light `content.enabled` (e.g., `#ffffff`), and vice versa.
|
|
651
|
+
|
|
652
|
+
```typescript
|
|
653
|
+
theme: {
|
|
654
|
+
primary: {
|
|
655
|
+
brand: ‘#1A237E’, // Dark button background
|
|
656
|
+
},
|
|
657
|
+
content: {
|
|
658
|
+
enabled: ‘#FFFFFF’, // Light text on button — must contrast with brand
|
|
659
|
+
},
|
|
660
|
+
}
|
|
661
|
+
```
|
|
662
|
+
|
|
663
|
+
#### 2. Color Discrepancy — Overrides Not Taking Effect
|
|
664
|
+
|
|
665
|
+
**Problem**: You passed a theme but some colors still appear as defaults.
|
|
666
|
+
|
|
667
|
+
**Cause**: Token keys may be misspelled, nested incorrectly, or using the wrong casing.
|
|
668
|
+
|
|
669
|
+
**Solution**:
|
|
670
|
+
- Double-check that your token keys exactly match the structure in [Default Theme Colors](#default-theme-colors). The SDK performs a shallow merge — missing or misnamed keys fall back to defaults silently.
|
|
671
|
+
- Verify nesting: tokens like `surface.base` must be passed as `surface: { base: ‘...’ }`, not as a flat key.
|
|
672
|
+
|
|
673
|
+
```typescript
|
|
674
|
+
// ❌ Wrong — flat key, will be ignored
|
|
675
|
+
theme: {
|
|
676
|
+
‘surface.base’: ‘#F9FAFB’,
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
// ✅ Correct — nested object
|
|
680
|
+
theme: {
|
|
681
|
+
surface: {
|
|
682
|
+
base: ‘#F9FAFB’,
|
|
683
|
+
},
|
|
684
|
+
}
|
|
685
|
+
```
|
|
686
|
+
|
|
687
|
+
#### 3. Success / Error States Look Off
|
|
688
|
+
|
|
689
|
+
**Problem**: Success alerts, error messages, or validation states are visually inconsistent or unreadable.
|
|
690
|
+
|
|
691
|
+
**Cause**: Overriding only `semantic.success` without also updating `surface.success` and `content.success` (or vice versa) breaks the foreground/background pairing for state banners.
|
|
692
|
+
|
|
693
|
+
**Solution**: Always override semantic state colors as a group — the background surface token, the text content token, and the semantic indicator token together.
|
|
694
|
+
|
|
695
|
+
| State | Tokens to keep in sync |
|
|
696
|
+
| ------- | --------------------------------------------------------------- |
|
|
697
|
+
| Success | `semantic.success`, `surface.success`, `content.success` |
|
|
698
|
+
| Error | `semantic.error`, `surface.danger` |
|
|
699
|
+
| Warning | `semantic.warning` |
|
|
700
|
+
|
|
701
|
+
#### 4. ABHA Card Color Not Changing
|
|
702
|
+
|
|
703
|
+
**Problem**: The ABHA ID card background color is not updating despite passing a theme.
|
|
704
|
+
|
|
705
|
+
**Solution**: The card background is controlled by `surface.abhaCard`, not `surface.base` or `primary.brand`. Pass it explicitly:
|
|
706
|
+
|
|
707
|
+
```typescript
|
|
708
|
+
theme: {
|
|
709
|
+
surface: {
|
|
710
|
+
abhaCard: ‘#1A237E’, // Override the ABHA card background
|
|
711
|
+
},
|
|
712
|
+
}
|
|
713
|
+
```
|
|
714
|
+
|
|
715
|
+
#### 5. QR Code Invisible or Unreadable
|
|
716
|
+
|
|
717
|
+
**Problem**: The QR code is not scannable or appears blank.
|
|
718
|
+
|
|
719
|
+
**Cause**: `qrCodeColors.fgColor` and `qrCodeColors.bgColor` may have been set to the same or similar colors.
|
|
720
|
+
|
|
721
|
+
**Solution**: Maintain high contrast between the QR dot color and background — black on white is the most reliable combination for scanner compatibility.
|
|
722
|
+
|
|
723
|
+
```typescript
|
|
724
|
+
theme: {
|
|
725
|
+
qrCodeColors: {
|
|
726
|
+
fgColor: ‘#000000’, // QR dots — keep dark
|
|
727
|
+
bgColor: ‘#FFFFFF’, // QR background — keep light
|
|
728
|
+
},
|
|
729
|
+
}
|
|
730
|
+
```
|
|
731
|
+
|
|
589
732
|
|