@eka-care/abha-stg 0.1.94 → 0.1.96
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 +346 -144
- package/dist/sdk/abha/css/abha.css +1 -1
- package/dist/sdk/abha/js/abha.js +51 -34
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,10 +4,12 @@ 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 with ABHA flows into your healthcare applications. It provides:
|
|
7
|
+
The ABHA SDK allows you to integrate Create ABHA, Login with ABHA, ABHA Consent Management, ABHA Profile KYC flows into your healthcare applications. It provides:
|
|
8
8
|
|
|
9
|
-
- **Create ABHA**: Create a new ABHA using Mobile or Aadhaar
|
|
10
|
-
- **Login with ABHA**: Login
|
|
9
|
+
- **Create ABHA**: Create a new ABHA using Mobile or Aadhaar.
|
|
10
|
+
- **Login with ABHA**: Login to your exisiting ABHA using PHR Address, ABHA number, Aadhaar number or Mobile number.
|
|
11
|
+
- **ABHA Consent Management**: Manage Consent requests raised by healthcare providers to share medical records securely.
|
|
12
|
+
- **ABHA Profile KYC**: Get your ABHA address KYC verified.
|
|
11
13
|
|
|
12
14
|
## Installation
|
|
13
15
|
|
|
@@ -46,7 +48,6 @@ Add the following HTML and script tags to your webpage:
|
|
|
46
48
|
<!-- Include ABHA SDK JS -->
|
|
47
49
|
<script
|
|
48
50
|
type="module"
|
|
49
|
-
async
|
|
50
51
|
src="https://unpkg.com/@eka-care/abha/dist/sdk/abha/js/abha.js"
|
|
51
52
|
></script>
|
|
52
53
|
|
|
@@ -54,31 +55,44 @@ Add the following HTML and script tags to your webpage:
|
|
|
54
55
|
function mountABHASDK() {
|
|
55
56
|
window.initAbhaApp({
|
|
56
57
|
containerId: "sdk_container",
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
clientId: "ext",
|
|
59
|
+
theme:{
|
|
60
|
+
// if you want to customise sdk theme/colors
|
|
61
|
+
// pass the colors of your organisation design system
|
|
62
|
+
}
|
|
63
|
+
// data object
|
|
59
64
|
data: {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
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
|
|
63
|
-
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.care/vagus/cm6agrs5000090tfwfz984x5b.webp
|
|
64
|
-
},
|
|
65
|
+
// pass the required data as per the flow
|
|
66
|
+
},
|
|
65
67
|
|
|
66
68
|
// Success callback
|
|
67
|
-
onSuccess:
|
|
68
|
-
console.log("ABHA flow completed successfully:", params);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
69
|
+
onSuccess: (params) => {
|
|
70
|
+
console.log("ABHA Registration flow completed successfully:", params);
|
|
71
|
+
},
|
|
72
|
+
|
|
73
|
+
//KYC Successs callback
|
|
74
|
+
onKYCSuccess: (params) => {
|
|
75
|
+
console.log("ABHA KYC Verified successfully:", params);
|
|
76
|
+
},
|
|
77
|
+
|
|
78
|
+
//Consent Successs callback
|
|
79
|
+
onConsentSuccess: (params) => {
|
|
80
|
+
console.log("ABHA Consent flow completed successfully:", params);
|
|
74
81
|
},
|
|
75
82
|
|
|
76
83
|
// Error callback
|
|
77
84
|
onError: (params) => {
|
|
78
|
-
console.error("ABHA
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
85
|
+
console.error("ABHA SDK failed:", params);
|
|
86
|
+
},
|
|
87
|
+
|
|
88
|
+
// Abha Close callback
|
|
89
|
+
onAbhaClose: () => {
|
|
90
|
+
console.log("ABHA SDK closed");
|
|
91
|
+
},
|
|
92
|
+
|
|
93
|
+
// Skip ABHA callback
|
|
94
|
+
onSkipAbha: (params) => {
|
|
95
|
+
console.log("ABHA flow SKIPPED:", params);
|
|
82
96
|
},
|
|
83
97
|
});
|
|
84
98
|
}
|
|
@@ -97,35 +111,22 @@ Initializes and renders the ABHA SDK in your specified container.
|
|
|
97
111
|
| Name | Type | Required | Description |
|
|
98
112
|
| ------------- | --------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
99
113
|
| `containerId` | `string` | ✅ | The HTML element ID where the SDK will mount. |
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
accessToken: "your_access_token_here",
|
|
111
|
-
oid: "optional_oid_here",
|
|
112
|
-
orgIcon: "url_of_your_org_icon",
|
|
113
|
-
linkToOrgIcon: "url_of_image_to_link_abha_to_your_org",
|
|
114
|
-
},
|
|
115
|
-
onSuccess: (params) => {
|
|
116
|
-
console.log("ABHA created successfully!", params);
|
|
117
|
-
},
|
|
118
|
-
onError: (error) => {
|
|
119
|
-
console.error("ABHA flow failed:", error);
|
|
120
|
-
},
|
|
121
|
-
});
|
|
122
|
-
```
|
|
114
|
+
| `clientId` | `string` | ✅ | Provide clientId as `ext`. |
|
|
115
|
+
| `theme` | `{} object` | ⚙️ Optional | Provide theme object with your org design system colors. |
|
|
116
|
+
| `data` | `{`<br/>`accessToken: string;`<br/>`hipId: string;`<br/>`oid?: string;`<br/>`identifier?: string;`<br/>`identifier_type?: string;`<br/>`consent_id?: string;`<br/>`flow?: string;`<br/>`linkToOrgIcon?: string;`<br/>`orgIconUrl?: 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>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>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>orgIconUrl:</strong> Public URL of your organization's logo. It is displayed in specific journey headers url should start with https://. [Example](https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.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.` |
|
|
117
|
+
| `onSuccess` | `(params: TOnAbhaSuccessParams) => void` | ✅ | Triggered when the user successfully creates or logs in to ABHA. |
|
|
118
|
+
| `onKYCSuccess` | `(params: TOnAbhaKycSuccessParams) => void` | ⚙️ Optional | Triggered when the user KYC verified successfully.
|
|
119
|
+
| `onConsentSuccess` | `(params: TOnAbhaConsentSuccessParams) => void` | ⚙️ Optional | Triggered when the consent flow completes successfully.
|
|
120
|
+
| `onError` | `(params: TOnAbhaFailureParams) => void` | ✅ | Triggered when an error occurs during the ABHA flow.
|
|
121
|
+
| `onAbhaClose` | `() => void` | ✅ | Triggered when SDK closes.
|
|
122
|
+
| `onSkipAbha` | `(params: TOnSkipABHA) => void` | ⚙️ Optional | Triggered if the ABHA flow is skipped. |
|
|
123
|
+
|
|
123
124
|
|
|
124
125
|
## Callback Parameters
|
|
125
126
|
|
|
126
127
|
### onSuccess Callback
|
|
127
128
|
|
|
128
|
-
The
|
|
129
|
+
The onSuccess callback is triggered when the ABHA flow completes successfully.
|
|
129
130
|
It returns verified user details and tokens, which can be used to log in or continue the user’s session.
|
|
130
131
|
|
|
131
132
|
**Callback Signature:**
|
|
@@ -137,11 +138,11 @@ onSuccess: (params: TOnAbhaSuccessParams) => void;
|
|
|
137
138
|
**Type Definitions**
|
|
138
139
|
|
|
139
140
|
```typescript
|
|
140
|
-
|
|
141
|
+
type TOnAbhaSuccessParams = {
|
|
141
142
|
response: TAuthVerifyV2Response;
|
|
142
143
|
};
|
|
143
144
|
|
|
144
|
-
|
|
145
|
+
type TAuthVerifyV2Response = {
|
|
145
146
|
skip_state: number;
|
|
146
147
|
method: AUTH_METHOD;
|
|
147
148
|
data?: {
|
|
@@ -157,6 +158,38 @@ export type TAuthVerifyV2Response = {
|
|
|
157
158
|
message: string;
|
|
158
159
|
};
|
|
159
160
|
};
|
|
161
|
+
|
|
162
|
+
enum AUTH_METHOD {
|
|
163
|
+
EMAIL = 1,
|
|
164
|
+
MOBILE = 2,
|
|
165
|
+
ABHA = 7,
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
type TProfileRecord = {
|
|
169
|
+
fln: string;
|
|
170
|
+
fn: string;
|
|
171
|
+
mn?: string;
|
|
172
|
+
ln?: string;
|
|
173
|
+
gen?: "M" | "F" | "O" | "U" | undefined; // 'male' | 'female' | 'other' | 'unknown'
|
|
174
|
+
dob?: string;
|
|
175
|
+
mobile?: string;
|
|
176
|
+
email?: string;
|
|
177
|
+
uuid?: string;
|
|
178
|
+
bloodgroup?: "" | "A+" | "A-" | "B+" | "B-" | "O+" | "O-" | "AB+" | "AB-";
|
|
179
|
+
pic?: string;
|
|
180
|
+
as?: string;
|
|
181
|
+
"dob-valid"?: boolean;
|
|
182
|
+
"is-d"?: boolean;
|
|
183
|
+
"is-d-s"?: boolean;
|
|
184
|
+
"is-p"?: boolean;
|
|
185
|
+
oid: string;
|
|
186
|
+
at: string;
|
|
187
|
+
type?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
188
|
+
"health-ids"?: Array<string>;
|
|
189
|
+
abha_number?: string;
|
|
190
|
+
kyc_verified?: boolean;
|
|
191
|
+
};
|
|
192
|
+
|
|
160
193
|
```
|
|
161
194
|
|
|
162
195
|
**Parameters**
|
|
@@ -177,13 +210,91 @@ const onSuccess = (params) => {
|
|
|
177
210
|
|
|
178
211
|
alert(`Welcome ${userName}! Your ABHA Number: ${abhaNumber}`);
|
|
179
212
|
|
|
180
|
-
// Optionally pass data to native bridge
|
|
213
|
+
// Optionally pass data to native bridge if available
|
|
181
214
|
if (window.EkaAbha) {
|
|
182
215
|
window.EkaAbha.onAbhaSuccess(JSON.stringify(params));
|
|
183
216
|
}
|
|
184
217
|
};
|
|
185
218
|
```
|
|
186
219
|
|
|
220
|
+
### onKYCSuccess Callback
|
|
221
|
+
|
|
222
|
+
The onKYCSuccess callback is triggered when the ABHA KYC flow completes successfully.
|
|
223
|
+
It returns a confirmation message indicating that the KYC has been verified.
|
|
224
|
+
|
|
225
|
+
**Callback Signature:**
|
|
226
|
+
|
|
227
|
+
```typescript
|
|
228
|
+
onKYCSuccess: (params: TOnAbhaKycSuccessParams) => void;
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
**Type Definitions**
|
|
232
|
+
|
|
233
|
+
```typescript
|
|
234
|
+
type TOnAbhaKycSuccess = string;
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
**Parameters**
|
|
238
|
+
| | Type | Description |
|
|
239
|
+
| ---------- | ----------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
240
|
+
| `TOnAbhaKycSuccess` | `string` | A confirmation message from SDK post KYC verification |
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
**Example:**
|
|
245
|
+
|
|
246
|
+
```javascript
|
|
247
|
+
const onKYCSuccess = (params) => {
|
|
248
|
+
console.log("KYC verification Success:", params);
|
|
249
|
+
|
|
250
|
+
alert("KYC was verified successfully!");
|
|
251
|
+
|
|
252
|
+
// Optionally pass data to native bridge if available
|
|
253
|
+
if (window.EkaAbha) {
|
|
254
|
+
window.EkaAbha.onAbhaKYCSuccess(params);
|
|
255
|
+
}
|
|
256
|
+
};
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
### onConsentSuccess Callback
|
|
260
|
+
|
|
261
|
+
The onConsentSuccess callback is triggered when the ABHA Consent flow completes successfully.
|
|
262
|
+
It returns a confirmation message indicating that the Consent flow ended successfully.
|
|
263
|
+
|
|
264
|
+
**Callback Signature:**
|
|
265
|
+
|
|
266
|
+
```typescript
|
|
267
|
+
onConsentSuccess: (params: TOnAbhaConsentSuccessParams) => void;
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
**Type Definitions**
|
|
271
|
+
|
|
272
|
+
```typescript
|
|
273
|
+
type TOnAbhaConsentSuccessParams = string;
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
**Parameters**
|
|
277
|
+
| | Type | Description |
|
|
278
|
+
| ---------- | ----------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
279
|
+
| `TOnAbhaConsentSuccessParams` | `string` | A confirmation message from SDK post Consent flow completion |
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
**Example:**
|
|
284
|
+
|
|
285
|
+
```javascript
|
|
286
|
+
const onConsentSuccess = (params) => {
|
|
287
|
+
console.log("Consent Flow completed:", params);
|
|
288
|
+
|
|
289
|
+
alert("Consent flow completed successfully!");
|
|
290
|
+
|
|
291
|
+
// Optionally pass data to native bridge if available
|
|
292
|
+
if (window.EkaAbha) {
|
|
293
|
+
window.EkaAbha.onAbhaConsentSuccess(params);
|
|
294
|
+
}
|
|
295
|
+
};
|
|
296
|
+
```
|
|
297
|
+
|
|
187
298
|
### onError Callback
|
|
188
299
|
The onError callback is triggered whenever an ABHA flow fails or is interrupted.
|
|
189
300
|
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).
|
|
@@ -202,7 +313,7 @@ type TOnAbhaFailureParams = {
|
|
|
202
313
|
response?: TAuthVerifyV2Response;
|
|
203
314
|
};
|
|
204
315
|
|
|
205
|
-
|
|
316
|
+
type TAuthVerifyV2Response = {
|
|
206
317
|
skip_state: number;
|
|
207
318
|
method: AUTH_METHOD;
|
|
208
319
|
data?: {
|
|
@@ -218,6 +329,38 @@ export type TAuthVerifyV2Response = {
|
|
|
218
329
|
message: string;
|
|
219
330
|
};
|
|
220
331
|
};
|
|
332
|
+
|
|
333
|
+
enum AUTH_METHOD {
|
|
334
|
+
EMAIL = 1,
|
|
335
|
+
MOBILE = 2,
|
|
336
|
+
ABHA = 7,
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
type TProfileRecord = {
|
|
340
|
+
fln: string;
|
|
341
|
+
fn: string;
|
|
342
|
+
mn?: string;
|
|
343
|
+
ln?: string;
|
|
344
|
+
gen?: "M" | "F" | "O" | "U" | undefined; // 'male' | 'female' | 'other' | 'unknown'
|
|
345
|
+
dob?: string;
|
|
346
|
+
mobile?: string;
|
|
347
|
+
email?: string;
|
|
348
|
+
uuid?: string;
|
|
349
|
+
bloodgroup?: "" | "A+" | "A-" | "B+" | "B-" | "O+" | "O-" | "AB+" | "AB-";
|
|
350
|
+
pic?: string;
|
|
351
|
+
as?: string;
|
|
352
|
+
"dob-valid"?: boolean;
|
|
353
|
+
"is-d"?: boolean;
|
|
354
|
+
"is-d-s"?: boolean;
|
|
355
|
+
"is-p"?: boolean;
|
|
356
|
+
oid: string;
|
|
357
|
+
at: string;
|
|
358
|
+
type?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
359
|
+
"health-ids"?: Array<string>;
|
|
360
|
+
abha_number?: string;
|
|
361
|
+
kyc_verified?: boolean;
|
|
362
|
+
};
|
|
363
|
+
|
|
221
364
|
```
|
|
222
365
|
|
|
223
366
|
**Parameters**
|
|
@@ -248,111 +391,161 @@ const onError = (params) => {
|
|
|
248
391
|
};
|
|
249
392
|
```
|
|
250
393
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
394
|
+
### onAbhaClose Callback
|
|
395
|
+
|
|
396
|
+
The onAbhaClose callback is triggered when the ABHA SDK flow gets closed.
|
|
397
|
+
|
|
398
|
+
**Callback Signature:**
|
|
399
|
+
|
|
400
|
+
```typescript
|
|
401
|
+
onAbhaClose: () => void;
|
|
402
|
+
```
|
|
403
|
+
|
|
404
|
+
**Example:**
|
|
405
|
+
|
|
256
406
|
```javascript
|
|
257
|
-
|
|
407
|
+
const onAbhaClose = () => {
|
|
408
|
+
console.log("ABHA SDK Closed");
|
|
409
|
+
};
|
|
258
410
|
```
|
|
259
411
|
|
|
260
|
-
###
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
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;
|
|
267
420
|
```
|
|
268
421
|
|
|
269
|
-
|
|
422
|
+
**Example:**
|
|
270
423
|
|
|
271
|
-
```
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
rel="stylesheet"
|
|
278
|
-
href="https://unpkg.com/@eka-care/abha/dist/sdk/abha/css/abha.css"
|
|
279
|
-
/>
|
|
280
|
-
</head>
|
|
281
|
-
<body>
|
|
282
|
-
<h1>ABHA SDK Demo</h1>
|
|
424
|
+
```javascript
|
|
425
|
+
const onSkipAbha = (params) => {
|
|
426
|
+
console.log("ABHA SDK Skipped:", params);
|
|
427
|
+
};
|
|
428
|
+
```
|
|
429
|
+
**Type Definitions**
|
|
283
430
|
|
|
284
|
-
|
|
431
|
+
```typescript
|
|
432
|
+
type IdentifierType = "mobile" | "aadhaar_number" | "abha_number" | "phr_address";
|
|
285
433
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
434
|
+
type TOnSkipABHA = {
|
|
435
|
+
identifier?: string;
|
|
436
|
+
identifier_type?: IdentifierType[]; // No default value here
|
|
437
|
+
};
|
|
438
|
+
```
|
|
290
439
|
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
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. |
|
|
296
445
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
linkToOrgIcon: "<url_of_image_to_link_abha_to_your_org>",
|
|
306
|
-
},
|
|
307
|
-
onSuccess: (params) => {
|
|
308
|
-
console.log("ABHA flow completed successfully:", params);
|
|
309
|
-
},
|
|
310
|
-
onError: (params) => {
|
|
311
|
-
console.error("ABHA flow failed:", params);
|
|
312
|
-
},
|
|
313
|
-
});
|
|
314
|
-
}
|
|
315
|
-
</script>
|
|
316
|
-
</body>
|
|
317
|
-
</html>
|
|
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
|
+
```javascript
|
|
453
|
+
window.EkaAbha.onAbhaFailure(JSON.stringify(params));
|
|
318
454
|
```
|
|
319
455
|
|
|
320
|
-
##
|
|
456
|
+
## Customizing the Theme
|
|
457
|
+
The ABHA SDK supports full color-token overriding. You can pass a theme object during initialization to match your application's branding.
|
|
458
|
+
|
|
459
|
+
### Default Theme Colors
|
|
460
|
+
If no theme is provided, the SDK uses the following default values:
|
|
321
461
|
|
|
322
462
|
```typescript
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
463
|
+
const defaultAbhaColors = {
|
|
464
|
+
semantic: {
|
|
465
|
+
error: '#BD0F0F',
|
|
466
|
+
warning: '#FCB069',
|
|
467
|
+
success: '#27B961',
|
|
468
|
+
},
|
|
469
|
+
primary: {
|
|
470
|
+
brand: '#6B5CE0', // Main buttons, radios, and active states
|
|
471
|
+
},
|
|
472
|
+
surface: {
|
|
473
|
+
base: '#FFFFFF', // Background of pages
|
|
474
|
+
subtle: '#F2F4F7', // Card backgrounds
|
|
475
|
+
muted: '#E4E7EC', // Dividers and borders
|
|
476
|
+
strong: '#BEC5D0',
|
|
477
|
+
success: '#D5F6E2', // Success background alerts
|
|
478
|
+
neutral: '#0000000D',
|
|
479
|
+
danger: '#DD3F3F',
|
|
480
|
+
abhaCard: '#232477', // Specific background for the ABHA ID card
|
|
481
|
+
},
|
|
482
|
+
content: {
|
|
483
|
+
primary: '#111B31', // Heading and main text
|
|
484
|
+
secondary: '#4B596D', // Subtext
|
|
485
|
+
muted: '#9EA8B8', // Disabled or placeholder text
|
|
486
|
+
success: '#1B7E43', // Success text
|
|
487
|
+
},
|
|
488
|
+
qrCodeColors: {
|
|
489
|
+
fgColor: '#000000', // Color of the QR code dots
|
|
490
|
+
bgColor: '#FFFFFF' // Background of the QR code
|
|
491
|
+
}
|
|
492
|
+
};
|
|
493
|
+
```
|
|
494
|
+
### Overriding the theme
|
|
495
|
+
To customize the look, add the `theme` key to your `initAbhaApp` configuration:
|
|
334
496
|
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
497
|
+
```typescript
|
|
498
|
+
window.initAbhaApp({
|
|
499
|
+
containerId: "sdk_container",
|
|
500
|
+
clientId: "ext",
|
|
501
|
+
theme: {
|
|
502
|
+
primary: {
|
|
503
|
+
brand: '<your_primary_color', // Change main brand color to bright blue
|
|
504
|
+
},
|
|
505
|
+
semantic: {
|
|
506
|
+
error: '<your_semantic_error_color>',
|
|
507
|
+
warning: '<your_semantic_warning_color>',
|
|
508
|
+
success: '<your_semantic_success_color>',
|
|
509
|
+
},
|
|
510
|
+
surface: {
|
|
511
|
+
base: '<your_base_color>', // Background of pages
|
|
512
|
+
subtle: '<your_subtle_color>', // Card backgrounds
|
|
513
|
+
muted: '<your_muted_color>', // Dividers and borders
|
|
514
|
+
strong: '<your_strong_color>',
|
|
515
|
+
success: '<your_success_color>', // Success background alerts
|
|
516
|
+
neutral: '<your_neutral_color>',
|
|
517
|
+
danger: '<your_danger_color>',
|
|
518
|
+
abhaCard: '<your_abhaCard_color>', // Specific background for the ABHA ID card
|
|
519
|
+
},
|
|
520
|
+
content: {
|
|
521
|
+
primary: '<your_content_primary_color>', // Heading and main text
|
|
522
|
+
secondary: '<your_content_secondary_color>', // Subtext
|
|
523
|
+
muted: '<your_content_muted_color>', // Disabled or placeholder text
|
|
524
|
+
success: '<your_content_success_color>', // Success text
|
|
525
|
+
},
|
|
526
|
+
qrCodeColors: {
|
|
527
|
+
fgColor: '<your_qrcode_dot_color>', // Color of the QR code dots
|
|
528
|
+
bgColor: '<your_qrcode_bg_color>' // Background of the QR code
|
|
529
|
+
}
|
|
530
|
+
},
|
|
531
|
+
data: {
|
|
532
|
+
orgIconUrl: "https://your-domain.com/logo.png",
|
|
533
|
+
// ... rest of your data
|
|
534
|
+
},
|
|
535
|
+
onSuccess: (params) => { /* ... */ },
|
|
536
|
+
onError: (params) => { /* ... */ }
|
|
537
|
+
...
|
|
538
|
+
});
|
|
539
|
+
```
|
|
349
540
|
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
541
|
+
|
|
542
|
+
## Container Styling
|
|
543
|
+
Ensure your container has sufficient space:
|
|
544
|
+
```html
|
|
545
|
+
<div
|
|
546
|
+
id="sdk_container"
|
|
547
|
+
style="width: 100%; height: 600px; border: 1px solid #ddd;"
|
|
548
|
+
></div>
|
|
356
549
|
```
|
|
357
550
|
|
|
358
551
|
## Troubleshooting
|
|
@@ -368,18 +561,27 @@ interface AbhaErrorParams {
|
|
|
368
561
|
- Verify the SDK JS and CSS are correctly loaded.
|
|
369
562
|
- Check browser console for errors.
|
|
370
563
|
|
|
371
|
-
#### 2.
|
|
564
|
+
#### 2. APIs Not Being Called
|
|
565
|
+
|
|
566
|
+
**Problem**: API requests are not triggered after the SDK is mounted.
|
|
567
|
+
|
|
568
|
+
**Solution**:
|
|
569
|
+
- Ensure that the accessToken is passed correctly (do not include the Bearer prefix) and that the token has not expired.
|
|
570
|
+
- To prevent CORS-related issues, ensure that your domain is whitelisted.
|
|
571
|
+
|
|
572
|
+
#### 3. Callback Not Triggered
|
|
372
573
|
|
|
373
|
-
**Problem**: onSuccess
|
|
574
|
+
**Problem**: onSuccess, onError, onKYCSuccess, onConsentSuccess, onAbhaClose isn’t firing.
|
|
374
575
|
|
|
375
576
|
**Solution**:
|
|
376
|
-
- Make sure
|
|
577
|
+
- Make sure callbacks are passed as valid functions.
|
|
377
578
|
- Avoid race conditions (e.g., calling before SDK fully loads).
|
|
378
579
|
|
|
379
|
-
####
|
|
580
|
+
#### 4. Styling Issues
|
|
380
581
|
|
|
381
582
|
**Problem**: SDK content appears misaligned or clipped.
|
|
382
583
|
|
|
383
584
|
**Solution**:
|
|
384
585
|
- Give your container a fixed height (e.g., 600px).
|
|
385
|
-
- Ensure no parent element uses overflow: hidden.
|
|
586
|
+
- Ensure no parent element uses overflow: hidden.
|
|
587
|
+
|