@eka-care/abha 0.1.81 → 0.1.82

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.
Files changed (18) hide show
  1. package/README.md +350 -142
  2. package/dist/sdk/abha/css/abha.css +1 -1
  3. package/dist/sdk/abha/js/abha.js +1476 -120
  4. package/dist/sdk/abha/js/html2canvas-CetShvGb.js +1 -0
  5. package/dist/sdk/abha/js/index.es-C7kErKNS.js +18 -0
  6. package/dist/sdk/abha/js/purify.es-C5KSVp3G.js +2 -0
  7. package/package.json +3 -3
  8. package/dist/images/at-the-rate.webp +0 -0
  9. package/dist/images/ayushman-bharat.webp +0 -0
  10. package/dist/images/biometric.svg +0 -6
  11. package/dist/images/circle-checkmark.webp +0 -0
  12. package/dist/images/face_auth.svg +0 -10
  13. package/dist/images/national-authority.webp +0 -0
  14. package/dist/images/otp.svg +0 -3
  15. package/dist/images/select_biometric.svg +0 -6
  16. package/dist/images/select_faceAuth.svg +0 -10
  17. package/dist/images/select_otp.svg +0 -3
  18. package/dist/images/three-dots.webp +0 -0
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 with ABHA address[PHR Address], ABHA number, Adhaar number or Mobile number linked to your ABHA into your healthcare application.
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
 
@@ -31,7 +33,7 @@ Add the following HTML and script tags to your webpage:
31
33
  <!-- Include ABHA SDK CSS -->
32
34
  <link
33
35
  rel="stylesheet"
34
- href="https://unpkg.com/@eka-care/abha/dist/sdk/abha/css/abha.css"
36
+ href="https://unpkg.com/@eka-care/abha-stg/dist/sdk/abha/css/abha.css"
35
37
  />
36
38
  </head>
37
39
  <body>
@@ -46,38 +48,51 @@ 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
- src="https://unpkg.com/@eka-care/abha/dist/sdk/abha/js/abha.js"
51
+ src="https://unpkg.com/@eka-care/abha-stg/dist/sdk/abha/js/abha.js"
51
52
  ></script>
52
53
 
53
54
  <script>
54
55
  function mountABHASDK() {
55
56
  window.initAbhaApp({
56
57
  containerId: "sdk_container",
57
-
58
- // Pass access token and oid
59
- data: {
60
- accessToken: "<your_access_token>", // Pass the access token you have
61
- oid: "<your_oid_if_available>", // Pass if you have the OID
62
- 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
58
+ clientId: "ext",
59
+ theme:{
60
+ // if you want to customise sdk theme/colors
61
+ // pass the colors of your organisation design system
63
62
  },
63
+ // data object
64
+ data: {
65
+ // pass the required data as per the flow
66
+ },
64
67
 
65
68
  // Success callback
66
- onSuccess: async (params) => {
67
- console.log("ABHA flow completed successfully:", params);
68
- // Example: Store ABHA data in your app
69
- dispatch({
70
- type: "set-only-healthid-data",
71
- healthIdData: formatter(params.response.data),
72
- });
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);
73
81
  },
74
82
 
75
83
  // Error callback
76
84
  onError: (params) => {
77
- console.error("ABHA flow failed:", params);
78
- if (window.EkaAbha) {
79
- window.EkaAbha.onAbhaFailure(JSON.stringify(params));
80
- }
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);
81
96
  },
82
97
  });
83
98
  }
@@ -96,34 +111,22 @@ Initializes and renders the ABHA SDK in your specified container.
96
111
  | Name | Type | Required | Description |
97
112
  | ------------- | --------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
98
113
  | `containerId` | `string` | ✅ | The HTML element ID where the SDK will mount. |
99
- | `data` | `{ accessToken: string; oid?: string; linkToOrgIcon?: string }` | ⚙️ Optional | Configuration data for initializing the ABHA flow. <br/>- accessToken: Pass the access token you have. <br/>- oid: Pass if available. <br/>- linkToOrgIcon: URL of the image representing “Link ABHA to your organisation” url should start with https://. |
100
- | `onSuccess` | `(params: AbhaSuccessParams) => void` | ✅ | Triggered when the user successfully creates or logs in to ABHA. |
101
- | `onError` | `(params: AbhaErrorParams) => void` | ✅ | Triggered when an error occurs during the ABHA flow. |
102
-
103
- **Example:**
104
-
105
- ```javascript
106
- window.initAbhaApp({
107
- containerId: "sdk_container",
108
- data: {
109
- accessToken: "your_access_token_here",
110
- oid: "optional_oid_here",
111
- linkToOrgIcon: "url_of_image_to_link_abha_to_your_org",
112
- },
113
- onSuccess: (params) => {
114
- console.log("ABHA created successfully!", params);
115
- },
116
- onError: (error) => {
117
- console.error("ABHA flow failed:", error);
118
- },
119
- });
120
- ```
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
+
121
124
 
122
125
  ## Callback Parameters
123
126
 
124
127
  ### onSuccess Callback
125
128
 
126
- The onAbhaSuccess callback is triggered when the ABHA flow completes successfully.
129
+ The onSuccess callback is triggered when the ABHA flow completes successfully.
127
130
  It returns verified user details and tokens, which can be used to log in or continue the user’s session.
128
131
 
129
132
  **Callback Signature:**
@@ -135,11 +138,11 @@ onSuccess: (params: TOnAbhaSuccessParams) => void;
135
138
  **Type Definitions**
136
139
 
137
140
  ```typescript
138
- export type TOnAbhaSuccessParams = {
141
+ type TOnAbhaSuccessParams = {
139
142
  response: TAuthVerifyV2Response;
140
143
  };
141
144
 
142
- export type TAuthVerifyV2Response = {
145
+ type TAuthVerifyV2Response = {
143
146
  skip_state: number;
144
147
  method: AUTH_METHOD;
145
148
  data?: {
@@ -155,6 +158,38 @@ export type TAuthVerifyV2Response = {
155
158
  message: string;
156
159
  };
157
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
+
158
193
  ```
159
194
 
160
195
  **Parameters**
@@ -175,13 +210,91 @@ const onSuccess = (params) => {
175
210
 
176
211
  alert(`Welcome ${userName}! Your ABHA Number: ${abhaNumber}`);
177
212
 
178
- // Optionally pass data to native bridge
213
+ // Optionally pass data to native bridge if available
179
214
  if (window.EkaAbha) {
180
215
  window.EkaAbha.onAbhaSuccess(JSON.stringify(params));
181
216
  }
182
217
  };
183
218
  ```
184
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
+
185
298
  ### onError Callback
186
299
  The onError callback is triggered whenever an ABHA flow fails or is interrupted.
187
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).
@@ -200,7 +313,7 @@ type TOnAbhaFailureParams = {
200
313
  response?: TAuthVerifyV2Response;
201
314
  };
202
315
 
203
- export type TAuthVerifyV2Response = {
316
+ type TAuthVerifyV2Response = {
204
317
  skip_state: number;
205
318
  method: AUTH_METHOD;
206
319
  data?: {
@@ -216,6 +329,38 @@ export type TAuthVerifyV2Response = {
216
329
  message: string;
217
330
  };
218
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
+
219
364
  ```
220
365
 
221
366
  **Parameters**
@@ -246,109 +391,163 @@ const onError = (params) => {
246
391
  };
247
392
  ```
248
393
 
249
- **Suggest Handling**
250
- -Always log the full error response (params) for debugging.
251
- -Display friendly error messages for known error.code values.
252
- -If params.response is present, inspect response.error.message for more detail.
253
- -If integrating with native apps, forward the serialized error object:
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
+
254
406
  ```javascript
255
- window.EkaAbha.onAbhaFailure(JSON.stringify(params));
407
+ const onAbhaClose = () => {
408
+ console.log("ABHA SDK Closed");
409
+ };
256
410
  ```
257
411
 
258
- ### Container Styling
259
- Ensure your container has sufficient space:
260
- ```html
261
- <div
262
- id="sdk_container"
263
- style="width: 100%; height: 600px; border: 1px solid #ddd;"
264
- ></div>
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;
265
420
  ```
266
421
 
267
- ## Complete Implementation Example
422
+ **Example:**
268
423
 
269
- ```html
270
- <!DOCTYPE html>
271
- <html>
272
- <head>
273
- <title>ABHA SDK Complete Example</title>
274
- <link
275
- rel="stylesheet"
276
- href="https://unpkg.com/@eka-care/abha/dist/sdk/abha/css/abha.css"
277
- />
278
- </head>
279
- <body>
280
- <h1>ABHA SDK Demo</h1>
424
+ ```javascript
425
+ const onSkipAbha = (params) => {
426
+ console.log("ABHA SDK Skipped:", params);
427
+ };
428
+ ```
429
+ **Type Definitions**
281
430
 
282
- <button onclick="mountABHASDK()">Launch ABHA SDK</button>
431
+ ```typescript
432
+ type IdentifierType = "mobile" | "aadhaar_number" | "abha_number" | "phr_address";
283
433
 
284
- <div
285
- id="sdk_container"
286
- style="width: 100%; height: 600px; border: 1px solid #ccc;"
287
- ></div>
434
+ type TOnSkipABHA = {
435
+ identifier?: string;
436
+ identifier_type?: IdentifierType[]; // No default value here
437
+ };
438
+ ```
288
439
 
289
- <script
290
- type="module"
291
- async
292
- src="https://unpkg.com/@eka-care/abha/dist/sdk/abha/js/abha.js"
293
- ></script>
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. |
294
445
 
295
- <script>
296
- function mountABHASDK() {
297
- window.initAbhaApp({
298
- containerId: "sdk_container",
299
- data: {
300
- accessToken: "<your_access_token>",
301
- oid: "<your_oid_if_available>",
302
- linkToOrgIcon: "<url_of_image_to_link_abha_to_your_org>",
303
- },
304
- onSuccess: (params) => {
305
- console.log("ABHA flow completed successfully:", params);
306
- },
307
- onError: (params) => {
308
- console.error("ABHA flow failed:", params);
309
- },
310
- });
311
- }
312
- </script>
313
- </body>
314
- </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));
315
454
  ```
316
455
 
317
- ## Type Definitions
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:
318
461
 
319
462
  ```typescript
320
- interface InitAbhaAppParams {
321
- containerId: string;
322
- data?: {
323
- accessToken: string;
324
- oid?: string;
325
- linkToOrgIcon?: string;
326
- };
327
- onSuccess: (params: AbhaSuccessParams) => void;
328
- onError: (params: AbhaErrorParams) => void;
329
- }
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
+ enabled:"#ffffff", // enabled button text color
488
+ },
489
+ qrCodeColors: {
490
+ fgColor: '#000000', // Color of the QR code dots
491
+ bgColor: '#FFFFFF' // Background of the QR code
492
+ }
493
+ };
494
+ ```
495
+ ### Overriding the theme
496
+ To customize the look, add the `theme` key to your `initAbhaApp` configuration:
330
497
 
331
- interface AbhaSuccessParams {
332
- response: {
333
- data: {
334
- abha_number?: string;
335
- abha_address?: string;
336
- name?: string;
337
- gender?: string;
338
- yearOfBirth?: string;
339
- mobile?: string;
340
- };
341
- };
342
- message: string;
343
- status: "SUCCESS";
344
- }
498
+ ```typescript
499
+ window.initAbhaApp({
500
+ containerId: "sdk_container",
501
+ clientId: "ext",
502
+ theme: {
503
+ primary: {
504
+ brand: '<your_org_primary_color', // brand color
505
+ },
506
+ semantic: {
507
+ error: '<your_semantic_error_color>',
508
+ warning: '<your_semantic_warning_color>',
509
+ success: '<your_semantic_success_color>',
510
+ },
511
+ surface: {
512
+ base: '<your_base_color>', // Background of pages
513
+ subtle: '<your_subtle_color>', // Card backgrounds
514
+ muted: '<your_muted_color>', // Dividers and borders
515
+ strong: '<your_strong_color>',
516
+ success: '<your_success_color>', // Success background alerts
517
+ neutral: '<your_neutral_color>',
518
+ danger: '<your_danger_color>',
519
+ abhaCard: '<your_abhaCard_color>', // Specific background for the ABHA ID card
520
+ },
521
+ content: {
522
+ primary: '<your_content_primary_color>', // Heading and main text
523
+ secondary: '<your_content_secondary_color>', // Subtext
524
+ muted: '<your_content_muted_color>', // Disabled or placeholder text
525
+ success: '<your_content_success_color>', // Success text
526
+ enabled:"<enabled_button_text_color>", // enabled button text color
527
+ },
528
+ qrCodeColors: {
529
+ fgColor: '<your_qrcode_dot_color>', // Color of the QR code dots
530
+ bgColor: '<your_qrcode_bg_color>' // Background of the QR code
531
+ }
532
+ },
533
+ data: {
534
+ orgIconUrl: "https://your-domain.com/logo.png",
535
+ // ... rest of your data
536
+ },
537
+ onSuccess: (params) => { /* ... */ },
538
+ onError: (params) => { /* ... */ }
539
+ // ... other methods of initAbhaApp fn
540
+ });
541
+ ```
345
542
 
346
- interface AbhaErrorParams {
347
- status: "FAILED";
348
- message: string;
349
- error_code?: string;
350
- details?: any;
351
- }
543
+
544
+ ## Container Styling
545
+ Ensure your container has sufficient space:
546
+ ```html
547
+ <div
548
+ id="sdk_container"
549
+ style="width: 100%; height: 600px; border: 1px solid #ddd;"
550
+ ></div>
352
551
  ```
353
552
 
354
553
  ## Troubleshooting
@@ -364,18 +563,27 @@ interface AbhaErrorParams {
364
563
  - Verify the SDK JS and CSS are correctly loaded.
365
564
  - Check browser console for errors.
366
565
 
367
- #### 2. Callback Not Triggered
566
+ #### 2. APIs Not Being Called
567
+
568
+ **Problem**: API requests are not triggered after the SDK is mounted.
569
+
570
+ **Solution**:
571
+ - Ensure that the accessToken is passed correctly (do not include the Bearer prefix) and that the token has not expired.
572
+ - To prevent CORS-related issues, ensure that your domain is whitelisted.
573
+
574
+ #### 3. Callback Not Triggered
368
575
 
369
- **Problem**: onSuccess or onError isn’t firing.
576
+ **Problem**: onSuccess, onError, onKYCSuccess, onConsentSuccess, onAbhaClose isn’t firing.
370
577
 
371
578
  **Solution**:
372
- - Make sure both callbacks are passed as valid functions.
579
+ - Make sure callbacks are passed as valid functions.
373
580
  - Avoid race conditions (e.g., calling before SDK fully loads).
374
581
 
375
- #### 3. Styling Issues
582
+ #### 4. Styling Issues
376
583
 
377
584
  **Problem**: SDK content appears misaligned or clipped.
378
585
 
379
586
  **Solution**:
380
587
  - Give your container a fixed height (e.g., 600px).
381
- - Ensure no parent element uses overflow: hidden.
588
+ - Ensure no parent element uses overflow: hidden.
589
+