@paydock/client-sdk 1.144.1-beta → 1.147.0

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 (82) hide show
  1. package/README.md +551 -32
  2. package/bundles/index.cjs +2683 -599
  3. package/bundles/index.cjs.d.ts +322 -21
  4. package/bundles/index.mjs +2683 -600
  5. package/bundles/index.mjs.d.ts +322 -21
  6. package/bundles/types/api/api-base.d.ts +6 -0
  7. package/bundles/types/api/api-base.d.ts.map +1 -1
  8. package/bundles/types/api/api-charge-internal.d.ts +1 -5
  9. package/bundles/types/api/api-charge-internal.d.ts.map +1 -1
  10. package/bundles/types/canvas-3ds/canvas-3ds-event-map.d.ts +50 -0
  11. package/bundles/types/canvas-3ds/canvas-3ds-event-map.d.ts.map +1 -1
  12. package/bundles/types/canvas-3ds/canvas-3ds.d.ts +7 -5
  13. package/bundles/types/canvas-3ds/canvas-3ds.d.ts.map +1 -1
  14. package/bundles/types/canvas-3ds/index.d.ts +1 -1
  15. package/bundles/types/canvas-3ds/index.d.ts.map +1 -1
  16. package/bundles/types/canvas-3ds/services/gpayments-service.d.ts +117 -2
  17. package/bundles/types/canvas-3ds/services/gpayments-service.d.ts.map +1 -1
  18. package/bundles/types/canvas-3ds/services/standalone3ds-service.d.ts +6 -0
  19. package/bundles/types/canvas-3ds/services/standalone3ds-service.d.ts.map +1 -1
  20. package/bundles/types/components/iframe-event.d.ts +4 -3
  21. package/bundles/types/components/iframe-event.d.ts.map +1 -1
  22. package/bundles/types/components/iframe.d.ts +5 -0
  23. package/bundles/types/components/iframe.d.ts.map +1 -1
  24. package/bundles/types/components/param.d.ts +19 -0
  25. package/bundles/types/components/param.d.ts.map +1 -1
  26. package/bundles/types/helper/browser.d.ts.map +1 -1
  27. package/bundles/types/helper/element-id.d.ts +3 -1
  28. package/bundles/types/helper/element-id.d.ts.map +1 -1
  29. package/bundles/types/helper/uuid.d.ts.map +1 -1
  30. package/bundles/types/index-cba.d.ts +1 -1
  31. package/bundles/types/index-cba.d.ts.map +1 -1
  32. package/bundles/types/index.d.ts +2 -2
  33. package/bundles/types/index.d.ts.map +1 -1
  34. package/bundles/types/open-wallets/apple-pay-open-wallet-button.d.ts +41 -0
  35. package/bundles/types/open-wallets/apple-pay-open-wallet-button.d.ts.map +1 -1
  36. package/bundles/types/open-wallets/base/open-wallet-buttons.d.ts +10 -0
  37. package/bundles/types/open-wallets/base/open-wallet-buttons.d.ts.map +1 -1
  38. package/bundles/types/open-wallets/base/service-config-cache.d.ts +23 -0
  39. package/bundles/types/open-wallets/base/service-config-cache.d.ts.map +1 -0
  40. package/bundles/types/open-wallets/google-pay-open-wallet-button.d.ts +33 -1
  41. package/bundles/types/open-wallets/google-pay-open-wallet-button.d.ts.map +1 -1
  42. package/bundles/types/open-wallets/index.d.ts +82 -1
  43. package/bundles/types/open-wallets/index.d.ts.map +1 -1
  44. package/bundles/types/open-wallets/interfaces/apple-pay/apple-pay-availability.interface.d.ts +41 -0
  45. package/bundles/types/open-wallets/interfaces/apple-pay/apple-pay-availability.interface.d.ts.map +1 -0
  46. package/bundles/types/open-wallets/interfaces/apple-pay/index.d.ts +1 -0
  47. package/bundles/types/open-wallets/interfaces/apple-pay/index.d.ts.map +1 -1
  48. package/bundles/types/open-wallets/interfaces/google-pay/google-pay-availability.interface.d.ts +25 -0
  49. package/bundles/types/open-wallets/interfaces/google-pay/google-pay-availability.interface.d.ts.map +1 -0
  50. package/bundles/types/open-wallets/interfaces/google-pay/index.d.ts +1 -0
  51. package/bundles/types/open-wallets/interfaces/google-pay/index.d.ts.map +1 -1
  52. package/bundles/types/open-wallets/interfaces/index.d.ts +3 -0
  53. package/bundles/types/open-wallets/interfaces/index.d.ts.map +1 -1
  54. package/bundles/types/open-wallets/interfaces/open-wallet-availability.interface.d.ts +31 -0
  55. package/bundles/types/open-wallets/interfaces/open-wallet-availability.interface.d.ts.map +1 -0
  56. package/bundles/types/open-wallets/services/apple-pay/apple-pay-availability.d.ts +58 -0
  57. package/bundles/types/open-wallets/services/apple-pay/apple-pay-availability.d.ts.map +1 -0
  58. package/bundles/types/open-wallets/services/apple-pay/apple-pay.open-wallet.service.d.ts +8 -10
  59. package/bundles/types/open-wallets/services/apple-pay/apple-pay.open-wallet.service.d.ts.map +1 -1
  60. package/bundles/types/open-wallets/services/apple-pay/index.d.ts +1 -0
  61. package/bundles/types/open-wallets/services/apple-pay/index.d.ts.map +1 -1
  62. package/bundles/types/open-wallets/services/google-pay/google-pay-availability.d.ts +53 -0
  63. package/bundles/types/open-wallets/services/google-pay/google-pay-availability.d.ts.map +1 -0
  64. package/bundles/types/open-wallets/services/google-pay/google-pay.open-wallet.service.d.ts.map +1 -1
  65. package/bundles/types/open-wallets/services/google-pay/index.d.ts +1 -0
  66. package/bundles/types/open-wallets/services/google-pay/index.d.ts.map +1 -1
  67. package/bundles/types/widget/multi-widget.d.ts +19 -0
  68. package/bundles/types/widget/multi-widget.d.ts.map +1 -1
  69. package/bundles/widget.umd.js +2683 -599
  70. package/bundles/widget.umd.js.d.ts +322 -21
  71. package/bundles/widget.umd.js.min.d.ts +322 -21
  72. package/bundles/widget.umd.min.js +1 -1
  73. package/docs/api-canvas3ds.md +10 -8
  74. package/docs/api-checkout-button.md +15 -0
  75. package/docs/api-ps-widget.md +15 -0
  76. package/docs/api-widget.md +15 -0
  77. package/docs/canvas3ds-examples.md +43 -1
  78. package/docs/open-wallet-buttons-examples.md +170 -2
  79. package/docs/open-wallet-buttons.md +252 -29
  80. package/docs/widget-examples.md +41 -0
  81. package/package.json +20 -11
  82. package/slate.md +254 -3
@@ -154,12 +154,14 @@ List of available event's name for Standalone 3ds flow
154
154
 
155
155
  **Kind**: global constant
156
156
 
157
- | Param | Type | Default |
158
- | --- | --- | --- |
159
- | CHARGE_AUTH_SUCCESS | <code>string</code> | <code>&quot;chargeAuthSuccess&quot;</code> |
160
- | CHARGE_AUTH_REJECT | <code>string</code> | <code>&quot;chargeAuthReject&quot;</code> |
161
- | CHARGE_AUTH_DECOUPLED | <code>string</code> | <code>&quot;chargeAuthDecoupled&quot;</code> |
162
- | CHARGE_AUTH_CHALLENGE | <code>string</code> | <code>&quot;chargeAuthChallenge&quot;</code> |
163
- | CHARGE_AUTH_INFO | <code>string</code> | <code>&quot;chargeAuthInfo&quot;</code> |
164
- | ERROR | <code>string</code> | <code>&quot;error&quot;</code> |
157
+ | Param | Type | Default | Description |
158
+ | --- | --- | --- | --- |
159
+ | AUTH_SUCCESS | <code>string</code> | <code>&quot;chargeAuthSuccess&quot;</code> | |
160
+ | AUTH_ERROR | <code>string</code> | <code>&quot;chargeAuthReject&quot;</code> | |
161
+ | DECOUPLED | <code>string</code> | <code>&quot;chargeAuthDecoupled&quot;</code> | |
162
+ | CHALLENGE | <code>string</code> | <code>&quot;chargeAuthChallenge&quot;</code> | |
163
+ | CHALLENGE_LOADED | <code>string</code> | <code>&quot;chargeAuthChallengeLoaded&quot;</code> | challenge iframe painted (first `load`, or 2.5 s fallback); reveal your challenge UI here |
164
+ | CHALLENGE_COMPLETED | <code>string</code> | <code>&quot;chargeAuthChallengeCompleted&quot;</code> | the shopper finished the challenge (issuer result delivered to the 3DS Server); cover the challenge iframe with your own loader until the terminal event |
165
+ | INFO | <code>string</code> | <code>&quot;chargeAuthInfo&quot;</code> | |
166
+ | ERROR | <code>string</code> | <code>&quot;error&quot;</code> | |
165
167
 
@@ -23,6 +23,12 @@
23
23
  <dl>
24
24
  <dt><a href="#user-content-cb_CHECKOUT_BUTTON_EVENT">CHECKOUT_BUTTON_EVENT</a> : <code>object</code></dt>
25
25
  <dd></dd>
26
+ <dt><a href="#user-content-cb_CARD_SCHEME">CARD_SCHEME</a></dt>
27
+ <dd><p>Card schemes the widget is able to resolve from a card number, and therefore the only values
28
+ <code>setAllowedCardSchemes</code> accepts. This is a separate vocabulary from SUPPORTED_CARD_TYPES, which drives the
29
+ card icons: it omits the icon-only variants <code>visa_white</code> / <code>eftpos_white</code>, and the <code>laser</code> / <code>maestro</code>
30
+ identifiers the widget can never resolve — allowing those would be configuration that can never match.</p>
31
+ </dd>
26
32
  </dl>
27
33
 
28
34
  ## Typedefs
@@ -556,6 +562,15 @@ button.turnOffBackdrop();
556
562
  | FINISH | <code>string</code> | <code>&quot;finish&quot;</code> |
557
563
  | CLOSE | <code>string</code> | <code>&quot;close&quot;</code> |
558
564
 
565
+ <a name="cb_CARD_SCHEME" id="cb_CARD_SCHEME" href="#user-content-cb_CARD_SCHEME">&nbsp;</a>
566
+
567
+ ## CARD\_SCHEME
568
+ Card schemes the widget is able to resolve from a card number, and therefore the only values
569
+ `setAllowedCardSchemes` accepts. This is a separate vocabulary from SUPPORTED_CARD_TYPES, which drives the
570
+ card icons: it omits the icon-only variants `visa_white` / `eftpos_white`, and the `laser` / `maestro`
571
+ identifiers the widget can never resolve — allowing those would be configuration that can never match.
572
+
573
+ **Kind**: global constant
559
574
  <a name="cb_listener" id="cb_listener" href="#user-content-cb_listener">&nbsp;</a>
560
575
 
561
576
  ## listener : <code>function</code>
@@ -21,6 +21,12 @@
21
21
  <dt><a href="#user-content-psw_PAYMENT_SOURCE_TYPE">PAYMENT_SOURCE_TYPE</a> : <code>object</code></dt>
22
22
  <dd><p>List of available payment source types</p>
23
23
  </dd>
24
+ <dt><a href="#user-content-psw_CARD_SCHEME">CARD_SCHEME</a></dt>
25
+ <dd><p>Card schemes the widget is able to resolve from a card number, and therefore the only values
26
+ <code>setAllowedCardSchemes</code> accepts. This is a separate vocabulary from SUPPORTED_CARD_TYPES, which drives the
27
+ card icons: it omits the icon-only variants <code>visa_white</code> / <code>eftpos_white</code>, and the <code>laser</code> / <code>maestro</code>
28
+ identifiers the widget can never resolve — allowing those would be configuration that can never match.</p>
29
+ </dd>
24
30
  </dl>
25
31
 
26
32
  ## Typedefs
@@ -572,6 +578,15 @@ List of available payment source types
572
578
  | BANK_ACCOUNT | <code>string</code> | <code>&quot;bank_account&quot;</code> |
573
579
  | CHECKOUT | <code>string</code> | <code>&quot;checkout&quot;</code> |
574
580
 
581
+ <a name="psw_CARD_SCHEME" id="psw_CARD_SCHEME" href="#user-content-psw_CARD_SCHEME">&nbsp;</a>
582
+
583
+ ## CARD\_SCHEME
584
+ Card schemes the widget is able to resolve from a card number, and therefore the only values
585
+ `setAllowedCardSchemes` accepts. This is a separate vocabulary from SUPPORTED_CARD_TYPES, which drives the
586
+ card icons: it omits the icon-only variants `visa_white` / `eftpos_white`, and the `laser` / `maestro`
587
+ identifiers the widget can never resolve — allowing those would be configuration that can never match.
588
+
589
+ **Kind**: global constant
575
590
  <a name="psw_listener--PaymentSourceWidget" id="psw_listener--PaymentSourceWidget" href="#user-content-psw_listener--PaymentSourceWidget">&nbsp;</a>
576
591
 
577
592
  ## listener--PaymentSourceWidget : <code>function</code>
@@ -28,6 +28,12 @@
28
28
  <dt><a href="#user-content-w_GENERIC_VALIDATORS">GENERIC_VALIDATORS</a> : <code>Record.&lt;string, string&gt;</code></dt>
29
29
  <dd><p>List of available generic form field validators and their definition</p>
30
30
  </dd>
31
+ <dt><a href="#user-content-w_CARD_SCHEME">CARD_SCHEME</a></dt>
32
+ <dd><p>Card schemes the widget is able to resolve from a card number, and therefore the only values
33
+ <code>setAllowedCardSchemes</code> accepts. This is a separate vocabulary from SUPPORTED_CARD_TYPES, which drives the
34
+ card icons: it omits the icon-only variants <code>visa_white</code> / <code>eftpos_white</code>, and the <code>laser</code> / <code>maestro</code>
35
+ identifiers the widget can never resolve — allowing those would be configuration that can never match.</p>
36
+ </dd>
31
37
  <dt><a href="#user-content-w_TRIGGER">TRIGGER</a> : <code>object</code></dt>
32
38
  <dd><p>List of available triggers</p>
33
39
  </dd>
@@ -414,6 +420,15 @@ List of available generic form field validators and their definition
414
420
  | --- | --- | --- | --- |
415
421
  | REQUIRED | <code>string</code> | <code>&quot;required&quot;</code> | Asserts the input or form field has a value defined truthy value |
416
422
 
423
+ <a name="w_CARD_SCHEME" id="w_CARD_SCHEME" href="#user-content-w_CARD_SCHEME">&nbsp;</a>
424
+
425
+ ## CARD\_SCHEME
426
+ Card schemes the widget is able to resolve from a card number, and therefore the only values
427
+ `setAllowedCardSchemes` accepts. This is a separate vocabulary from SUPPORTED_CARD_TYPES, which drives the
428
+ card icons: it omits the icon-only variants `visa_white` / `eftpos_white`, and the `laser` / `maestro`
429
+ identifiers the widget can never resolve — allowing those would be configuration that can never match.
430
+
431
+ **Kind**: global constant
417
432
  <a name="w_TRIGGER" id="w_TRIGGER" href="#user-content-w_TRIGGER">&nbsp;</a>
418
433
 
419
434
  ## TRIGGER : <code>object</code>
@@ -181,7 +181,13 @@ After you initialized the standalone 3ds charge via `v1/charges/standalone-3ds`
181
181
  console.log(data);
182
182
  });
183
183
  canvas3ds.on("chargeAuthChallenge", function (data) {
184
- console.log(data);
184
+ console.log(data); // keep your loader up — the challenge page is still loading
185
+ });
186
+ canvas3ds.on("chargeAuthChallengeLoaded", function (data) {
187
+ console.log(data.reason); // 'load' | 'timeout' — hide your loader, the challenge is visible
188
+ });
189
+ canvas3ds.on("chargeAuthChallengeCompleted", function (data) {
190
+ console.log(data.source); // 'poll' | 'callback' — shopper finished, cover the challenge with "Completing verification"
185
191
  });
186
192
  canvas3ds.on("chargeAuthDecoupled", function (data) {
187
193
  console.log(data.result.description);
@@ -204,10 +210,26 @@ After you initialized the standalone 3ds charge via `v1/charges/standalone-3ds`
204
210
  - A `data.status` of `rejected` will be received when the authorization was rejected.
205
211
  - A `data.status` of `invalid_event` will be received for unhandled situations.
206
212
  - The `chargeAuthChallenge` event is sent before starting a challenge flow (i.e. opening an IFrame for the customer to complete a challenge with ther bank). Once the end customer performs the challenge, the Canvas3ds will be able to identify the challenge result and will either produce a `chargeAuthSuccess` or `chargeAuthReject` event.
213
+ - The `chargeAuthChallengeLoaded` event (SDK **v1.147.0+**) is sent once per challenge, after `chargeAuthChallenge`, when the challenge IFrame has finished loading the bank's page (its first `load` event) — this is the moment the customer can actually see the challenge. `data.reason` is `load` for a real load, or `timeout` when no load was observed within 2.5 seconds: the event is emitted anyway so you never hold a loading indicator forever (a `load` arriving later is simply ignored). Hide your loader on this event either way; `data.reason` is only informational (e.g. analytics). Not sent for decoupled challenges (no challenge IFrame).
214
+ - The `chargeAuthChallengeCompleted` event (SDK **v1.147.0+**) is sent once the customer has finished the challenge (or approved a decoupled authentication): the bank has delivered the final result to the 3DS server and the Canvas3ds is now obtaining the outcome. Whatever the bank or the 3DS server render inside the IFrame from here on is plumbing, not UX — cover the IFrame with your own "Completing verification" state and hold it until the terminal event. `data.source` tells you how the SDK learned about it: `poll` (the 3DS server's result monitor — the usual case, it flips before the IFrame has even left the bank's page) or `callback` (the callback message carrying the outcome arrived first; the terminal event follows immediately) — handle both the same way. Sent at most once per authentication, always before `chargeAuthSuccess` / `chargeAuthReject` / `error` and never after them. A wrong OTP or a further interactive step (e.g. a second OTP screen) does **not** send it — no result has been delivered yet — so no grace timer or reveal fallback is needed on your side. Also sent for decoupled challenges.
207
215
  - The `chargeAuthDecoupled` event is sent when the flow is a decoupled challenge, alongside a `data.result.description` field that you must show to the customer, indicating the method the user must use to authenticate. For example this may happen by having the cardholder authenticating directly with their banking app through biometrics. Once the end customer does this, the Canvas3ds will be able to recognize the challenge result is ready and will either produce a `chargeAuthSuccess` or `chargeAuthReject` event.
208
216
  - The `error` event is sent if an unexpected issue with the client library occurs. In such scenarios, you should consider the autentication process as interrupted:
209
217
  - When getting this event, you will get on `data.error` the full error object.
210
218
 
219
+ ### Recommended loading indicator pattern
220
+
221
+ > Requires SDK **v1.147.0 or later** (`chargeAuthChallengeLoaded` / `chargeAuthChallengeCompleted`). On older versions the same effect needs a `MutationObserver` on the container plus `load` listeners on the challenge IFrame — see the Standalone 3DS UX guide in the playground for that legacy approach.
222
+
223
+ The Canvas3ds renders nothing visible until a challenge is presented, and `chargeAuthChallenge` fires when the API responds — about 1–2 seconds before the bank's page actually paints inside the IFrame. Drive a single loading indicator from the events:
224
+
225
+ 1. Show the loader **before** you `POST /v1/charges/standalone-3ds` and keep it up through `canvas3ds.load()` (fingerprinting and processing are invisible).
226
+ 2. Keep it up on `chargeAuthChallenge` — the challenge IFrame is being injected but is still blank.
227
+ 3. Hide it on `chargeAuthChallengeLoaded` — the challenge is visible. `data.reason` tells you whether it was a real paint (`load`) or the 2.5 s safety fallback (`timeout`); either way, no further handling is needed.
228
+ 4. Cover the IFrame with a "Completing verification" indicator on `chargeAuthChallengeCompleted` — the customer finished the challenge and the SDK is obtaining the outcome — and hold it until the terminal event. No grace timer or reveal fallback is needed: a wrong OTP or a second interactive step does not fire this event.
229
+ 5. Finish on `chargeAuthSuccess` / `chargeAuthReject` / `error`.
230
+
231
+ Decoupled challenges (`chargeAuthDecoupled`) never emit `chargeAuthChallengeLoaded` (there is no challenge IFrame) but do emit `chargeAuthChallengeCompleted` once the customer approved out-of-band: show a dedicated waiting state with `data.result.description` until then, and "Completing verification" until the terminal event. Frictionless flows go straight from `load()` to the terminal event.
232
+
211
233
  ### Events and Values
212
234
 
213
235
  | Event Value | Type | Description |
@@ -215,6 +237,8 @@ After you initialized the standalone 3ds charge via `v1/charges/standalone-3ds`
215
237
  | <code>chargeAuthSuccess</code> | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
216
238
  | <code>chargeAuthReject</code> | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
217
239
  | <code>chargeAuthChallenge</code> | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
240
+ | <code>chargeAuthChallengeLoaded</code> | <code>object</code> | Instance of [ChallengeLoadedResponse](#cb_challengeLoadedResponse) |
241
+ | <code>chargeAuthChallengeCompleted</code> | <code>object</code> | Instance of [ChallengeCompletedResponse](#cb_challengeCompletedResponse) |
218
242
  | <code>chargeAuthDecoupled</code> | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
219
243
  | <code>chargeAuthInfo</code> | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
220
244
  | <code>error</code> | <code>object</code> | Instance of [chargeError](#cb_chargeError) |
@@ -232,6 +256,24 @@ After you initialized the standalone 3ds charge via `v1/charges/standalone-3ds`
232
256
  | <code>info</code> | <code>string</code> | info field for `chargeAuthInfo` event |
233
257
  | <code>result.description</code> | <code>string</code> [Optional] | field that you must show to the customer, indicating the method the user must use to authenticate during the decoupled challenge flow. |
234
258
 
259
+ <a name="cb_challengeLoadedResponse" id="cb_challengeLoadedResponse"></a>
260
+
261
+ ### ChallengeLoadedResponse
262
+
263
+ | Param | Type | Description |
264
+ | ------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------- |
265
+ | <code>charge_3ds_id</code> | <code>string</code> | Universal unique transaction identifier to identify the transaction |
266
+ | <code>reason</code> | <code>string</code> | `load` — the challenge IFrame fired its first load event; `timeout` — no load within 2.5 s, emitted so a loader is never held forever (a later load is ignored) |
267
+
268
+ <a name="cb_challengeCompletedResponse" id="cb_challengeCompletedResponse"></a>
269
+
270
+ ### ChallengeCompletedResponse
271
+
272
+ | Param | Type | Description |
273
+ | ------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------- |
274
+ | <code>charge_3ds_id</code> | <code>string</code> | Universal unique transaction identifier to identify the transaction |
275
+ | <code>source</code> | <code>string</code> | `poll` — the 3DS server's result monitor reported that the bank delivered the result (the usual case); `callback` — the callback message carrying the outcome arrived first (the terminal event follows immediately). Informational only — handle both the same way |
276
+
235
277
  ### ChargeError
236
278
 
237
279
  <a name="cb_chargeError" id="cb_chargeError"></a>
@@ -81,6 +81,106 @@ Bear in mind that you must set an environment before calling `button.load()`.
81
81
  button.setEnv('sandbox');
82
82
  ```
83
83
 
84
+ ### Checking availability before instantiation (static)
85
+
86
+ `ApplePayOpenWalletButton.checkAvailability(options)` is a **static** method so you can decide
87
+ whether to show an Apple Pay option — or which payment method to default to — **without
88
+ instantiating the button** and waiting for the `onUnavailable` event.
89
+
90
+ > **Apple Pay is no longer Safari-only.** Since iOS 16 (third-party mobile browsers) and the
91
+ > iOS 18 / 2025 desktop rollout, Apple Pay also works in Chrome, Edge and Firefox — including
92
+ > on Windows — via a **cross-device QR handoff**: the user scans a code and completes the
93
+ > payment on their iPhone. Because the paying device is often *not* the browsing device, the
94
+ > only authoritative availability signal is the async `checkAvailability()`.
95
+ > `applePayCapabilities()` is what Apple recommends; `canMakePayments()` is just a coarse
96
+ > local-device hint. See
97
+ > [Apple — Checking for Apple Pay availability](https://developer.apple.com/documentation/applepayontheweb/checking-for-apple-pay-availability).
98
+
99
+ #### `ApplePayOpenWalletButton.checkAvailability(options)`
100
+
101
+ The single, authoritative, cross-browser-aware check. It resolves the merchant identifier,
102
+ loads Apple's web SDK if needed, and queries `ApplePaySession.applePayCapabilities()`.
103
+
104
+ You may supply the merchant context in either of two ways:
105
+
106
+ ```javascript
107
+ // 1) Lightest path — no network — when you already know the Apple merchant identifier:
108
+ const result = await paydock.ApplePayOpenWalletButton.checkAvailability({
109
+ merchant_id: 'merchant.com.example',
110
+ });
111
+
112
+ // 2) Resolve the merchant identifier from the service configuration (fetched & cached):
113
+ const result = await paydock.ApplePayOpenWalletButton.checkAvailability({
114
+ public_key_or_access_token: publicKeyOrAccessToken,
115
+ service_id: serviceId,
116
+ env: 'sandbox',
117
+ // Optional — which device statuses count as "available".
118
+ // Defaults to ['credentials_available', 'credentials_status_unknown'].
119
+ apple_pay_capabilities: ['credentials_available', 'credentials_status_unknown'],
120
+ });
121
+ ```
122
+
123
+ **Result shape (`ApplePayAvailabilityResult`):**
124
+
125
+ ```javascript
126
+ {
127
+ available: true, // verdict vs the allowed capability set
128
+ supported: true, // Apple Pay usable here AT ALL (incl. cross-device QR)
129
+ has_native_session: false, // native same-device session present (canMakePayments)
130
+ payment_credential_status: // OUTPUT — the device's reported status
131
+ 'paymentCredentialStatusUnknown',
132
+ reason: undefined, // set when not available, see below
133
+ }
134
+ ```
135
+
136
+ **Inferring the transport (Apple does not expose it directly):**
137
+ - `available && has_native_session` ⇒ **native** Apple Pay sheet is likely (Safari on an Apple device).
138
+ - `available && !has_native_session` ⇒ **cross-device / QR** handoff is likely (e.g. Chrome on desktop).
139
+
140
+ `payment_credential_status` is the device's actual status:
141
+ `'paymentCredentialsAvailable'`, `'paymentCredentialStatusUnknown'`,
142
+ `'paymentCredentialsUnavailable'`, or `'applePayUnsupported'`. **Third-party / desktop
143
+ browsers normally report `paymentCredentialStatusUnknown`** (Apple can't see the remote
144
+ iPhone's cards until the user scans the QR), which is why the default allowed set includes it.
145
+
146
+ The `apple_pay_capabilities` **input** maps to those statuses
147
+ (`credentials_available` → `paymentCredentialsAvailable`,
148
+ `credentials_status_unknown` → `paymentCredentialStatusUnknown`,
149
+ `credentials_unavailable` → `paymentCredentialsUnavailable`) and decides which ones make
150
+ `available` true. When omitted, **both** `paymentCredentialsAvailable` and
151
+ `paymentCredentialStatusUnknown` count — narrow it to `['credentials_available']` only if you
152
+ want to require a confirmed local card (this will hide the button in cross-browser/QR contexts).
153
+
154
+ When `available` is `false`, `reason` is one of: `'unsupported_browser'`,
155
+ `'missing_merchant_id'`, `'service_type_mismatch'`, `'config_fetch_failed'`,
156
+ `'sdk_load_failed'`, `'query_failed'`, `'no_credentials'`, or `'no_native_session'`
157
+ (only from the synchronous check below).
158
+
159
+ ```javascript
160
+ const result = await paydock.ApplePayOpenWalletButton.checkAvailability({ merchant_id: merchantId });
161
+ if (result.available) {
162
+ renderApplePayButton();
163
+ } else {
164
+ console.log('Apple Pay unavailable:', result.reason, result.payment_credential_status);
165
+ }
166
+ ```
167
+
168
+ **Synchronous native-only fast check (`sync: true`).** Pass `{ sync: true }` for a cheap,
169
+ network-free pre-check that resolves immediately — it runs only the native same-device check
170
+ (`window.ApplePaySession` + `canMakePayments()`), with no merchant resolution, SDK load, or
171
+ `applePayCapabilities()` query. In this mode `available` reflects the native session only and
172
+ `payment_credential_status` is `undefined`. It is a Safari-oriented hint and is **not**
173
+ authoritative for cross-browser / QR availability (which require the full async check above).
174
+
175
+ ```javascript
176
+ const { has_native_session } = await paydock.ApplePayOpenWalletButton.checkAvailability({
177
+ sync: true,
178
+ });
179
+ if (has_native_session) {
180
+ // Native Apple Pay is ready on this device (Safari fast path).
181
+ }
182
+ ```
183
+
84
184
  ### Full Apple Pay example
85
185
 
86
186
  ```html
@@ -499,6 +599,58 @@ The GooglePayOpenWalletButton constructor accepts the following parameters:
499
599
 
500
600
  > **Note:** Required meta fields (`amount`, `currency`, `country`) are validated automatically by the `GooglePayOpenWalletButton` class. You do not need to specify them manually.
501
601
 
602
+ ### Checking availability before instantiation (static)
603
+
604
+ `GooglePayOpenWalletButton.checkAvailability(options)` is a **static** method that reports
605
+ whether Google Pay can be used in the current context **without instantiating the button**.
606
+ It loads the Google Pay JS SDK if needed and runs `PaymentsClient.isReadyToPay()`.
607
+
608
+ Unlike Apple Pay, **all options are optional** — Google Pay's readiness check does not
609
+ require a merchant identifier. Supplying `publicKeyOrAccessToken` + `serviceId` additionally
610
+ validates that the service is a Google Pay service (and resolves the merchant id).
611
+
612
+ ```javascript
613
+ // Simplest form — no merchant context needed:
614
+ const result = await paydock.GooglePayOpenWalletButton.checkAvailability();
615
+
616
+ // Or validate the service is a Google Pay service while checking:
617
+ const result = await paydock.GooglePayOpenWalletButton.checkAvailability({
618
+ public_key_or_access_token: publicKeyOrAccessToken,
619
+ service_id: serviceId,
620
+ env: 'sandbox',
621
+ });
622
+ ```
623
+
624
+ **Result shape (`GooglePayAvailabilityResult`):**
625
+
626
+ ```javascript
627
+ {
628
+ available: true, // isReadyToPay().result — ready to pay in this context
629
+ supported: true, // the Google Pay JS API is present and the query ran
630
+ payment_method_present: true, // OUTPUT — whether the buyer already has a usable card
631
+ reason: undefined, // set when not available, see below
632
+ }
633
+ ```
634
+
635
+ > **Note:** the static check uses the **default** card configuration (standard auth methods
636
+ > and card networks). A button instance configured with a custom `card_config` may produce a
637
+ > different result.
638
+
639
+ When `available` is `false`, `reason` is one of: `'unsupported_browser'`,
640
+ `'service_type_mismatch'`, `'config_fetch_failed'`, `'sdk_load_failed'`, `'query_failed'`,
641
+ `'no_payment_method'`, or `'api_not_loaded'` (only from the synchronous check below).
642
+
643
+ **Synchronous fast check (`sync: true`).** Google Pay has no synchronous device/card
644
+ capability API, so `{ sync: true }` only reports whether the Google Pay JS API is already
645
+ present in the page — it does **not** run `isReadyToPay()`:
646
+
647
+ ```javascript
648
+ const { available } = await paydock.GooglePayOpenWalletButton.checkAvailability({
649
+ sync: true,
650
+ });
651
+ // `available` here means "the Google Pay JS API script is loaded", not "ready to pay".
652
+ ```
653
+
502
654
  ### Full Google Pay Example
503
655
 
504
656
  ```html
@@ -641,12 +793,28 @@ Both `ApplePayOpenWalletButton` and `GooglePayOpenWalletButton` share the same e
641
793
 
642
794
  ### Checking for button availability
643
795
 
644
- If the customer's browser is not supported, or the customer does not have any card added to their wallet, the button will not load. In this case the callback onUnavailable() will be called. You can define the behavior of this function before loading the button.
796
+ There are two ways to know whether a wallet is available:
797
+
798
+ **1. After `load()` — the `onUnavailable()` callback.** If the customer's browser is not supported, or the customer does not have any card added to their wallet, the button will not load. In this case the callback onUnavailable() will be called. You can define the behavior of this function before loading the button.
645
799
 
646
800
  ```javascript
647
801
  button.onUnavailable(({ data }) => console.log("No wallet button available", data));
648
802
  ```
649
803
 
804
+ **2. Before instantiation — the static `checkAvailability()` method.** Each button class exposes a static `checkAvailability(options)` that resolves availability **without instantiating the button**, so you can decide whether to render a wallet option (or which payment method to default to) up front. The options and result are wallet-specific — see [Apple Pay → Checking availability before instantiation](#checking-availability-before-instantiation-static) and [Google Pay → Checking availability before instantiation](#checking-availability-before-instantiation-static-1).
805
+
806
+ ```javascript
807
+ // Apple Pay
808
+ const apple = await paydock.ApplePayOpenWalletButton.checkAvailability({ merchant_id: merchantId });
809
+
810
+ // Google Pay (merchant context optional)
811
+ const google = await paydock.GooglePayOpenWalletButton.checkAvailability();
812
+
813
+ if (apple.available || google.available) {
814
+ // Show a wallet payment option.
815
+ }
816
+ ```
817
+
650
818
  ### Service type validation
651
819
 
652
820
  Each button validates that the service configuration matches its expected wallet type. If you use an Apple Pay service ID with `GooglePayOpenWalletButton` (or vice versa), an error will be emitted via `onError`:
@@ -808,7 +976,7 @@ A full description of the [ApplePayOpenWalletMeta](#ApplePayOpenWalletMeta) prop
808
976
  - `request_shipping?: boolean`: Enable shipping address collection
809
977
  - `shipping_options?: IApplePayShippingOption[]`: Array of shipping options
810
978
  - `show_billing_address?: boolean`: Show billing address fields
811
- - `apple_pay_capabilities?: string[]`: Device capabilities
979
+ - `apple_pay_capabilities?: string[]`: Device credential statuses that make the button render. **Defaults to `['credentials_available', 'credentials_status_unknown']`**: `credentials_available` means the device has a confirmed Apple Pay card ready to use; `credentials_status_unknown` means a local card can't be confirmed but Apple Pay can still proceed (e.g. the cross-device QR flow used by Chrome, Edge and Firefox). Narrow to `['credentials_available']` to require a confirmed local card.
812
980
  - `merchant_capabilities?: string[]`: Merchant capabilities
813
981
  - `supported_networks?: string[]`: Supported payment networks
814
982
  - `required_billing_contact_fields?: string[]`: Required billing contact fields