@amos.com/amos-js 0.9.14 → 0.9.16
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 +121 -114
- package/dist/apple-pay.d.ts +19 -10
- package/dist/google-pay.d.ts +21 -11
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/index.mjs +214 -237
- package/dist/messaging.d.ts +6 -3
- package/dist/mount.d.ts +14 -0
- package/dist/types.d.ts +28 -81
- package/package.json +1 -1
- package/src/apple-pay.ts +30 -24
- package/src/google-pay.ts +32 -28
- package/src/index.ts +1 -9
- package/src/messaging.ts +10 -5
- package/src/mount.ts +29 -4
- package/src/types.ts +31 -179
package/README.md
CHANGED
|
@@ -101,7 +101,7 @@ The following flow is for credit card and bank account payment method types only
|
|
|
101
101
|
4. **Create payment intent on your server**: use your server-side Amos client to call `POST /payment_intents`. You may also associate this payment intent with a new or existing customer via `POST /customers`. This must be server-side because it uses your private API key.
|
|
102
102
|
5. **Return the payment intent token to the browser**: your backend responds with the embed token (`components["schemas"]["EmbedToken"]`) needed for confirmation.
|
|
103
103
|
6. **Confirm the payment intent from the client**: call `confirmPaymentIntent({ iframe: form.iframe, token })` in the browser to continue the payment flow.
|
|
104
|
-
7. **Handle UX**: show the user a "processing" state when the "Pay now" button is clicked, and handle `onResult`. Do not treat `onResult` as settlement proof — verify payment success on your backend via webhooks. Recoverable field errors are shown in the iframe (`status: "incomplete"`).
|
|
104
|
+
7. **Handle UX**: show the user a "processing" state when the "Pay now" button is clicked, and handle `onResult`. Do not treat `onResult` as settlement proof — verify payment success on your backend via webhooks. Recoverable field errors are shown in the iframe (`status: "incomplete"` with `reason`: `"field_errors"` or `"validation_failed"`).
|
|
105
105
|
|
|
106
106
|
### Google Pay & Apple Pay
|
|
107
107
|
|
|
@@ -114,44 +114,56 @@ The key differences between the express and non-express payment flows are:
|
|
|
114
114
|
- You do not call `confirmPaymentIntent` in an express flow (this is done after `onInitiatePaymentIntentRequest` returns a token).
|
|
115
115
|
|
|
116
116
|
```ts
|
|
117
|
-
import {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
117
|
+
import {
|
|
118
|
+
mountAmosApplePayButton,
|
|
119
|
+
mountAmosGooglePayButton,
|
|
120
|
+
type ConfirmationResult,
|
|
121
|
+
} from "@amos.com/amos-js";
|
|
122
|
+
import type { components } from "@amos.com/node";
|
|
123
|
+
|
|
124
|
+
async function createPaymentIntentToken({
|
|
125
|
+
paymentIntentCreateAttributes,
|
|
126
|
+
customerCreateAttributes,
|
|
127
|
+
}: {
|
|
128
|
+
paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
|
|
129
|
+
customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
|
|
130
|
+
}): Promise<string> {
|
|
131
|
+
const response = await fetch("/api/payment-intents", {
|
|
132
|
+
method: "POST",
|
|
133
|
+
headers: { "Content-Type": "application/json" },
|
|
134
|
+
body: JSON.stringify({
|
|
135
|
+
customer: customerCreateAttributes,
|
|
136
|
+
paymentIntent: paymentIntentCreateAttributes,
|
|
137
|
+
}),
|
|
138
|
+
});
|
|
139
|
+
const { token } = (await response.json()) as { token: string };
|
|
140
|
+
return token;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
const shared = {
|
|
144
|
+
renderToken: "the-render-token-created-on-dashboard.amos.com",
|
|
145
|
+
amount: "50.00",
|
|
146
|
+
merchantName: "Example Store",
|
|
147
|
+
onInitiatePaymentIntentRequest: createPaymentIntentToken,
|
|
148
|
+
onResult: (result: ConfirmationResult) => {
|
|
149
|
+
if (result.status === "succeeded") {
|
|
150
|
+
console.log("Confirm returned:", result);
|
|
151
|
+
} else if (result.status === "failed") {
|
|
152
|
+
console.error("Confirm failed:", result.errorMessage);
|
|
153
|
+
}
|
|
147
154
|
},
|
|
148
|
-
|
|
155
|
+
};
|
|
149
156
|
|
|
150
|
-
|
|
151
|
-
|
|
157
|
+
const googlePay = mountAmosGooglePayButton("#google-pay", shared);
|
|
158
|
+
const applePay = mountAmosApplePayButton("#apple-pay", shared);
|
|
159
|
+
|
|
160
|
+
googlePay.update({ amount: "75.00" });
|
|
161
|
+
applePay.update({ amount: "75.00" });
|
|
152
162
|
```
|
|
153
163
|
|
|
154
|
-
|
|
164
|
+
Do not call `validateForm` or `confirmPaymentIntent` — return the embed token from `onInitiatePaymentIntentRequest` and the SDK confirms. Size the mount slot; omitted `buttonProps` keep paint defaults and fill the iframe.
|
|
165
|
+
|
|
166
|
+
On Safari, Apple Pay uses the native payment sheet. On other browsers, Apple's QR handoff opens in a popup (`pay.apple.com`); while that popup is open, the SDK shows a waiting overlay with **Cancel payment**.
|
|
155
167
|
|
|
156
168
|
## Understanding the flow for creating and confirming setup intents
|
|
157
169
|
|
|
@@ -179,7 +191,7 @@ In short, your app orchestrates the payment flow, while sensitive payment data s
|
|
|
179
191
|
|
|
180
192
|
## Appearance
|
|
181
193
|
|
|
182
|
-
|
|
194
|
+
Card and bank mount functions (and `attachPaymentMethodFormListeners`) accept an optional `appearance` option that controls the look of the iframe UI. It contains a `themeVariables` object whose keys are CSS custom-property names and whose values are strings, and an optional `labels` setting for field label placement. You can update appearance after page load via the controller's `update({ appearance })` method. Wallet buttons do not take `appearance`.
|
|
183
195
|
|
|
184
196
|
```ts
|
|
185
197
|
form.update({
|
|
@@ -199,57 +211,57 @@ form.update({
|
|
|
199
211
|
|
|
200
212
|
Set `labels` to control how field labels are rendered in card and bank account forms:
|
|
201
213
|
|
|
202
|
-
| Value
|
|
203
|
-
|
|
|
204
|
-
| `above` (default) | Label text above each input
|
|
205
|
-
| `floating`
|
|
206
|
-
| `placeholder`
|
|
214
|
+
| Value | Behavior |
|
|
215
|
+
| ----------------- | --------------------------------------------------------- |
|
|
216
|
+
| `above` (default) | Label text above each input |
|
|
217
|
+
| `floating` | Label inside the control; moves up when focused or filled |
|
|
218
|
+
| `placeholder` | No visible label; placeholder and `aria-label` only |
|
|
207
219
|
|
|
208
220
|
Radio groups (e.g. account type) always use an above-style group label regardless of this setting.
|
|
209
221
|
|
|
210
222
|
### Available theme variables
|
|
211
223
|
|
|
212
|
-
| Variable
|
|
213
|
-
|
|
|
214
|
-
| `--background`
|
|
215
|
-
| `--foreground`
|
|
216
|
-
| `--primary`
|
|
217
|
-
| `--primary-foreground`
|
|
218
|
-
| `--secondary`
|
|
219
|
-
| `--secondary-foreground`
|
|
220
|
-
| `--muted`
|
|
221
|
-
| `--muted-foreground`
|
|
222
|
-
| `--accent`
|
|
223
|
-
| `--accent-foreground`
|
|
224
|
-
| `--destructive`
|
|
225
|
-
| `--destructive-foreground`
|
|
226
|
-
| `--border`
|
|
227
|
-
| `--popover`
|
|
228
|
-
| `--popover-foreground`
|
|
229
|
-
| `--input`
|
|
230
|
-
| `--input-background`
|
|
231
|
-
| `--input-height`
|
|
232
|
-
| `--input-font-size`
|
|
233
|
-
| `--input-font-weight`
|
|
234
|
-
| `--input-padding`
|
|
235
|
-
| `--input-border-width`
|
|
236
|
-
| `--input-shadow`
|
|
237
|
-
| `--floating-input-height`
|
|
238
|
-
| `--floating-label-font-size`
|
|
239
|
-
| `--floating-label-empty-font-size`
|
|
240
|
-
| `--floating-label-font-weight`
|
|
241
|
-
| `--floating-label-color`
|
|
242
|
-
| `--floating-label-floated-color`
|
|
243
|
-
| `--floating-label-offset`
|
|
244
|
-
| `--label-font-size`
|
|
245
|
-
| `--label-font-weight`
|
|
246
|
-
| `--field-gap`
|
|
247
|
-
| `--control-gap`
|
|
248
|
-
| `--error-font-size`
|
|
249
|
-
| `--radio-size`
|
|
250
|
-
| `--ring`
|
|
251
|
-
| `--ring-width`
|
|
252
|
-
| `--radius`
|
|
224
|
+
| Variable | Purpose | Default |
|
|
225
|
+
| ---------------------------------- | -------------------------------------------------------- | ------------------------------- |
|
|
226
|
+
| `--background` | Page body and base surface color | `oklch(1 0 0)` |
|
|
227
|
+
| `--foreground` | Default text color | `oklch(0.145 0 0)` |
|
|
228
|
+
| `--primary` | Button fill and input text-selection highlight | `oklch(0.205 0 0)` |
|
|
229
|
+
| `--primary-foreground` | Text on primary-colored surfaces | `oklch(0.985 0 0)` |
|
|
230
|
+
| `--secondary` | Secondary button fill | `oklch(0.97 0 0)` |
|
|
231
|
+
| `--secondary-foreground` | Text on secondary-colored surfaces | `oklch(0.205 0 0)` |
|
|
232
|
+
| `--muted` | Muted surface color | `oklch(0.97 0 0)` |
|
|
233
|
+
| `--muted-foreground` | Placeholder text, helper labels, muted icons | `oklch(0.556 0 0)` |
|
|
234
|
+
| `--accent` | Hover/focus highlight for interactive items | `oklch(0.97 0 0)` |
|
|
235
|
+
| `--accent-foreground` | Text on accent-highlighted items | `oklch(0.205 0 0)` |
|
|
236
|
+
| `--destructive` | Error/invalid state borders, icons, and field error text | `oklch(0.577 0.245 27.325)` |
|
|
237
|
+
| `--destructive-foreground` | Text on destructive-colored surfaces | `oklch(0.45 0.24 27.325)` |
|
|
238
|
+
| `--border` | General border color | `oklch(0.922 0 0)` |
|
|
239
|
+
| `--popover` | Dropdown / popover panel background | `oklch(1 0 0)` |
|
|
240
|
+
| `--popover-foreground` | Dropdown / popover panel text color | `oklch(0.145 0 0)` |
|
|
241
|
+
| `--input` | Input field border color | `oklch(0.922 0 0)` |
|
|
242
|
+
| `--input-background` | Input field background fill | `var(--background)` |
|
|
243
|
+
| `--input-height` | Height of text inputs and form controls | `2.25rem` |
|
|
244
|
+
| `--input-font-size` | Font size of text inputs and dropdown fields | `0.875rem` |
|
|
245
|
+
| `--input-font-weight` | Font weight of typed input values | `400` |
|
|
246
|
+
| `--input-padding` | Horizontal padding inside inputs | `0.75rem` |
|
|
247
|
+
| `--input-border-width` | Input field border width | `1px` |
|
|
248
|
+
| `--input-shadow` | Input field box shadow | `0 1px 2px 0 rgb(0 0 0 / 0.05)` |
|
|
249
|
+
| `--floating-input-height` | Height of inputs when labels are floating | `3.25rem` |
|
|
250
|
+
| `--floating-label-font-size` | Font size of floating labels when focused or filled | `0.75rem` |
|
|
251
|
+
| `--floating-label-empty-font-size` | Font size of floating labels when empty (unfocused) | `var(--input-font-size)` |
|
|
252
|
+
| `--floating-label-font-weight` | Font weight of floating labels | `500` |
|
|
253
|
+
| `--floating-label-color` | Color of floating labels when empty (unfocused) | `var(--muted-foreground)` |
|
|
254
|
+
| `--floating-label-floated-color` | Color of floating labels when focused or filled | `var(--floating-label-color)` |
|
|
255
|
+
| `--floating-label-offset` | Top offset of the shrunk floating label | `0.625rem` |
|
|
256
|
+
| `--label-font-size` | Font size of above-style field labels | `0.875rem` |
|
|
257
|
+
| `--label-font-weight` | Font weight of above-style field labels | `500` |
|
|
258
|
+
| `--field-gap` | Vertical gap between stacked form fields | `1rem` |
|
|
259
|
+
| `--control-gap` | Horizontal gap between side-by-side controls | `0.5rem` |
|
|
260
|
+
| `--error-font-size` | Font size of field-level error messages | `0.875rem` |
|
|
261
|
+
| `--radio-size` | Size of radio buttons on the bank account form | `1rem` |
|
|
262
|
+
| `--ring` | Focus ring and outline color | `oklch(0.708 0 0)` |
|
|
263
|
+
| `--ring-width` | Focus ring width | `3px` |
|
|
264
|
+
| `--radius` | Base border-radius (derived into sm/md/lg/xl) | `0.625rem` |
|
|
253
265
|
|
|
254
266
|
## API reference
|
|
255
267
|
|
|
@@ -268,7 +280,6 @@ Mount the secure credit-card payment method form into a container element (an `H
|
|
|
268
280
|
- `additionalFields` (`{ cardholderName: boolean }`, defaults to `{ cardholderName: false }`)
|
|
269
281
|
- `billingAddressRequirement` (`"country" | "full"`, defaults to `"country"`) — how much billing address the iframe collects. `country` collects country / region and, for CA / PR / GB / US, a postal code (labeled ZIP for the United States). `full` shows a full street address form with Smarty autocomplete.
|
|
270
282
|
|
|
271
|
-
|
|
272
283
|
- `onValidityChange` (`(event: { isValid: boolean }) => void`) — called when form validity changes. `isValid` is true when all required fields are present and valid. Does not include PCI data. Use this to enable or disable your checkout button.
|
|
273
284
|
- `onHeightChange`, `onAppearanceReady` (advanced — override the default iframe styling logic). The skeleton is removed and the iframe faded in when `onAppearanceReady` fires.
|
|
274
285
|
|
|
@@ -289,65 +300,59 @@ Mount the secure Google Pay button (express checkout) into a container element.
|
|
|
289
300
|
**Required `options`:**
|
|
290
301
|
|
|
291
302
|
- `renderToken` (`string`)
|
|
292
|
-
- `amount` (`string`)
|
|
303
|
+
- `amount` (`string`) — major-currency decimal string shown in the wallet sheet (e.g. `"50.00"` for $50.00). The iframe converts this to cents in `paymentIntentCreateAttributes.amount`.
|
|
293
304
|
- `merchantName` (`string`)
|
|
294
305
|
- `onInitiatePaymentIntentRequest` (`({ paymentIntentCreateAttributes, customerCreateAttributes }) => Promise<components["schemas"]["EmbedToken"]["token"]>`)
|
|
295
306
|
|
|
296
307
|
- `onResult` (`(result: ConfirmationResult) => void`) — required. Called when the interactive confirmation attempt finishes (`succeeded`, `failed`, or `incomplete` with `reason`). Not settlement proof; verify via webhooks.
|
|
297
308
|
|
|
298
|
-
**Optional `options`:** `
|
|
309
|
+
**Optional `options`:** `onHeightChange`, `onAppearanceReady`, plus:
|
|
299
310
|
|
|
300
|
-
- `
|
|
301
|
-
- `
|
|
302
|
-
- `buttonColor` (`"default" | "black" | "white"`)
|
|
303
|
-
- `buttonRadius` (`number`, 0–20)
|
|
304
|
-
- `buttonSizeMode` (`"static" | "fill"`)
|
|
305
|
-
- `buttonLocale` (`string`, e.g. `"en"`)
|
|
306
|
-
- `buttonBorderType` (`"no_border" | "default_border"`)
|
|
307
|
-
- `style` (`{ [property: string]: string | number }`) — applied to the Google Pay button inside the iframe (e.g. `{ height: "48px" }`)
|
|
311
|
+
- `height` (`string`, defaults to `"48px"`) — painted button height. CSS length (e.g. `"48px"`).
|
|
312
|
+
- `buttonProps` — native Google Pay button options. Omitted fields keep `"plain"` / `"fill"`. The button fills the iframe; size the mount slot, not the button. Compact: `buttonProps: { buttonSizeMode: "static", style: { width: "240px" } }`.
|
|
308
313
|
|
|
309
|
-
|
|
314
|
+
- `iframeClassName` / `iframeStyle` — applied to the host-page `<iframe>` element. Use CSS values with units (`{ borderRadius: "8px" }`).
|
|
310
315
|
|
|
311
316
|
```ts
|
|
312
317
|
mountAmosGooglePayButton("#google-pay", {
|
|
313
318
|
// ...required options
|
|
314
|
-
|
|
315
|
-
|
|
319
|
+
buttonProps: {
|
|
320
|
+
buttonType: "donate",
|
|
321
|
+
buttonBorderType: "no_border",
|
|
322
|
+
},
|
|
323
|
+
iframeStyle: { borderRadius: "8px" },
|
|
316
324
|
});
|
|
317
325
|
```
|
|
318
326
|
|
|
319
|
-
The wallet iframe
|
|
320
|
-
zero margin). `style` targets the button inside that iframe. For advanced host
|
|
321
|
-
layout overrides, use the returned controller's `iframe` element.
|
|
327
|
+
The wallet iframe is flush with its mount container (`width: 100%`, zero margin). The branded button fills that iframe at 48px tall. For advanced host layout overrides, use the returned controller's `iframe` element.
|
|
322
328
|
|
|
323
329
|
**Returns** `AmosGooglePayButtonMountController`:
|
|
324
330
|
|
|
325
|
-
- `iframe`, `update(patch)`, `destroy()`. Use `update({ amount, merchantName })` to push new values into the iframe. Use `update({
|
|
331
|
+
- `iframe`, `update(patch)`, `destroy()`. Use `update({ amount, merchantName })` to push new values into the iframe. Use `update({ height, buttonProps })` to restyle the button.
|
|
326
332
|
|
|
327
333
|
### `mountAmosApplePayButton(container, options)`
|
|
328
334
|
|
|
329
335
|
Mount the secure Apple Pay button (express checkout). Same required options and return shape as `mountAmosGooglePayButton`.
|
|
330
336
|
|
|
331
|
-
**Optional visual options
|
|
337
|
+
**Optional visual options:**
|
|
332
338
|
|
|
333
|
-
- `
|
|
334
|
-
- `
|
|
335
|
-
|
|
336
|
-
- `
|
|
337
|
-
- `style` — applied to the `<apple-pay-button>` inside the iframe. Apple sizes the button with CSS custom properties, not CSS `height`:
|
|
339
|
+
- `height` (`string`, defaults to `"48px"`) — painted button height. CSS length (e.g. `"48px"`). Apple ignores CSS `height`; Amos maps this for you.
|
|
340
|
+
- `buttonProps` — native `<apple-pay-button>` attributes. Omitted fields keep Apple's `black` / `plain` / `en-US`. The button fills the iframe; size the mount slot, not the button. `style.width` also updates `--apple-pay-button-width` unless you set that custom property yourself.
|
|
341
|
+
|
|
342
|
+
- `iframeClassName` / `iframeStyle` — host-page `<iframe>` chrome.
|
|
338
343
|
|
|
339
344
|
```ts
|
|
340
345
|
button.update({
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
style: {
|
|
346
|
-
"--apple-pay-button-height": "48px",
|
|
346
|
+
buttonProps: {
|
|
347
|
+
buttonstyle: "white-outline",
|
|
348
|
+
type: "buy",
|
|
349
|
+
locale: "en-GB",
|
|
347
350
|
},
|
|
348
351
|
});
|
|
349
352
|
```
|
|
350
353
|
|
|
354
|
+
Only Amos domains need Apple merchant registration. The button and `ApplePaySession` run inside the Amos embed iframe. On Safari, the native payment sheet is used. On other browsers, Apple's QR handoff opens in a popup (`pay.apple.com`); while that popup is open, the SDK automatically shows a full-viewport waiting overlay on the host page with instructions and a **Cancel payment** button. You do not need to implement popup or overlay handling yourself.
|
|
355
|
+
|
|
351
356
|
### `validateForm({ iframe })`
|
|
352
357
|
|
|
353
358
|
Validates the embedded card/bank iframe form. Returns `Promise<boolean>` (resolves to `false` after 5 seconds if the iframe does not respond).
|
|
@@ -384,13 +389,15 @@ Advanced helpers exposed for integrators that need to construct or inspect the m
|
|
|
384
389
|
|
|
385
390
|
### Exported types
|
|
386
391
|
|
|
387
|
-
`Message`, `Appearance`, `ThemeVariable`, `FormattedGooglePayPaymentData`, `PaymentMethodFormValidityChangeEvent`, plus the per-form `*Options` and `*Controller` types. For OpenAPI schema types, import `components` from `@amos.com/node`.
|
|
392
|
+
`ConfirmationResult`, `ConfirmationIncompleteReason`, `Message`, `Appearance`, `ThemeVariable`, `FormattedGooglePayPaymentData`, `PaymentMethodFormValidityChangeEvent`, plus the per-form `*Options` and `*Controller` types. For OpenAPI schema types, import `components` from `@amos.com/node`.
|
|
388
393
|
|
|
389
394
|
## Notes and potential gotchas
|
|
390
395
|
|
|
391
396
|
- **`iframe` argument**: every messaging helper (`validateForm`, `confirmPaymentIntent`, `confirmSetupIntent`, `resetForm`) accepts the `iframe` element directly. With the mount helpers, use `controller.iframe`.
|
|
397
|
+
- **`onResult` is not settlement proof**: `onResult` tells you when to stop waiting (e.g. dismiss a spinner). Verify payment or setup success on your backend via webhooks. On `status: "incomplete"`, unlock your UI — the customer can fix fields in the iframe and retry. Use `result.reason` (`"field_errors"` or `"validation_failed"`) to distinguish recoverable states.
|
|
392
398
|
- **Same components for payment vs setup intents**: `mountAmosCreditCardPaymentMethodForm` and `mountAmosBankAccountPaymentMethodForm` support both payment intents and setup intents. The flow differs only by which server call you make and which confirmation function you use. Handle both outcomes via `onResult`.
|
|
393
|
-
- **Amount format**: for `mountAmosGooglePayButton` and `mountAmosApplePayButton`, `amount` is a string (e.g. `"
|
|
399
|
+
- **Amount format**: for `mountAmosGooglePayButton` and `mountAmosApplePayButton`, `amount` is a major-currency decimal string (e.g. `"50.00"` for $50.00). For `components["schemas"]["CreatePaymentIntentInput"]` on the server (card/bank create, and the object the wallet iframe sends to `onInitiatePaymentIntentRequest`), `amount` is a number in cents (e.g. `5000`).
|
|
400
|
+
- **Apple Pay waiting overlay**: on browsers where Apple's QR handoff opens in a popup (non-Safari), `mountAmosApplePayButton` shows a fixed full-viewport overlay on the host page until payment completes, the popup closes, or the user clicks **Cancel payment**. Avoid stacking other fixed UI above it.
|
|
394
401
|
- **Browser-only**: the mount and messaging helpers require `window` and the DOM. They are not safe to call during server-side rendering — call them from client-side code only (for example, inside a `useEffect`-like hook in your framework of choice).
|
|
395
402
|
|
|
396
403
|
---
|
package/dist/apple-pay.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { components } from '@amos.com/node';
|
|
2
|
-
import {
|
|
2
|
+
import { ApplePayButtonElementProps, ConfirmationResult } from './types';
|
|
3
3
|
/**
|
|
4
4
|
* Build the iframe `src` URL for the embedded Apple Pay button.
|
|
5
5
|
*/
|
|
@@ -11,16 +11,26 @@ export declare function getApplePayButtonInitialHeight(): string;
|
|
|
11
11
|
/**
|
|
12
12
|
* Options accepted by {@link attachApplePayButtonListeners}.
|
|
13
13
|
*/
|
|
14
|
-
export type ApplePayButtonListenerOptions =
|
|
15
|
-
/**
|
|
14
|
+
export type ApplePayButtonListenerOptions = {
|
|
15
|
+
/**
|
|
16
|
+
* Major-currency decimal string shown in the Apple Pay sheet
|
|
17
|
+
* (e.g. `"50.00"` for $50.00). Converted to cents in
|
|
18
|
+
* `paymentIntentCreateAttributes.amount`.
|
|
19
|
+
*/
|
|
16
20
|
amount: string;
|
|
17
21
|
/** A user-visible merchant name. */
|
|
18
22
|
merchantName: string;
|
|
19
23
|
/**
|
|
20
|
-
*
|
|
21
|
-
*
|
|
24
|
+
* Painted Apple Pay button height. CSS length (e.g. `"48px"`).
|
|
25
|
+
* @default "48px"
|
|
26
|
+
*/
|
|
27
|
+
height?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Native `<apple-pay-button>` attributes and inner style. Omitted
|
|
30
|
+
* fields keep Apple's defaults (`black` / `plain` / `en-US`). The
|
|
31
|
+
* button fills the iframe — size the mount slot, not the button.
|
|
22
32
|
*/
|
|
23
|
-
|
|
33
|
+
buttonProps?: ApplePayButtonElementProps;
|
|
24
34
|
/**
|
|
25
35
|
* Called whenever the iframe asks the host page to resize it. Update
|
|
26
36
|
* the iframe's `height` style here.
|
|
@@ -54,9 +64,8 @@ export type ApplePayButtonController = {
|
|
|
54
64
|
/**
|
|
55
65
|
* Update one or more listener options without re-attaching the
|
|
56
66
|
* message listener. Pass `amount` or `merchantName` to push the new
|
|
57
|
-
* value into the iframe; pass `
|
|
58
|
-
*
|
|
59
|
-
* Apple Pay button.
|
|
67
|
+
* value into the iframe; pass `height` or `buttonProps` to restyle
|
|
68
|
+
* the Apple Pay button.
|
|
60
69
|
*/
|
|
61
70
|
update: (patch: Partial<ApplePayButtonListenerOptions>) => void;
|
|
62
71
|
/**
|
|
@@ -77,4 +86,4 @@ export type ApplePayButtonController = {
|
|
|
77
86
|
* Apple Pay Code is open in a separate window, this host paints a
|
|
78
87
|
* waiting overlay and can cancel via {@link Message} `APPLE_PAY_CANCEL`.
|
|
79
88
|
*/
|
|
80
|
-
export declare function attachApplePayButtonListeners(iframe: HTMLIFrameElement, options: ApplePayButtonListenerOptions): ApplePayButtonController;
|
|
89
|
+
export declare function attachApplePayButtonListeners(iframe: HTMLIFrameElement, { height, ...options }: ApplePayButtonListenerOptions): ApplePayButtonController;
|
package/dist/google-pay.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { components } from '@amos.com/node';
|
|
2
|
-
import {
|
|
2
|
+
import { ConfirmationResult, GooglePayButtonElementProps } from './types';
|
|
3
3
|
/**
|
|
4
4
|
* Build the iframe `src` URL for the embedded Google Pay button.
|
|
5
5
|
*/
|
|
@@ -11,16 +11,28 @@ export declare function getGooglePayButtonInitialHeight(): string;
|
|
|
11
11
|
/**
|
|
12
12
|
* Options accepted by {@link attachGooglePayButtonListeners}.
|
|
13
13
|
*/
|
|
14
|
-
export type GooglePayButtonListenerOptions =
|
|
15
|
-
/**
|
|
14
|
+
export type GooglePayButtonListenerOptions = {
|
|
15
|
+
/**
|
|
16
|
+
* Major-currency decimal string shown in the Google Pay sheet
|
|
17
|
+
* (e.g. `"50.00"` for $50.00). Converted to cents in
|
|
18
|
+
* `paymentIntentCreateAttributes.amount`.
|
|
19
|
+
*/
|
|
16
20
|
amount: string;
|
|
17
21
|
/** A user-visible merchant name. */
|
|
18
22
|
merchantName: string;
|
|
19
23
|
/**
|
|
20
|
-
*
|
|
21
|
-
*
|
|
24
|
+
* Painted Google Pay button height. CSS length (e.g. `"48px"`).
|
|
25
|
+
* @default "48px"
|
|
26
|
+
*/
|
|
27
|
+
height?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Native Google Pay button attributes and inner style. Omitted fields
|
|
30
|
+
* keep Amos paint defaults (`buttonType: "plain"`,
|
|
31
|
+
* `buttonSizeMode: "fill"`). The button fills the iframe — size the
|
|
32
|
+
* mount slot, not the button. Compact: `buttonSizeMode: "static"` and
|
|
33
|
+
* `style.width`.
|
|
22
34
|
*/
|
|
23
|
-
|
|
35
|
+
buttonProps?: GooglePayButtonElementProps;
|
|
24
36
|
/**
|
|
25
37
|
* Called whenever the iframe asks the host page to resize it. Update
|
|
26
38
|
* the iframe's `height` style here.
|
|
@@ -54,10 +66,8 @@ export type GooglePayButtonController = {
|
|
|
54
66
|
/**
|
|
55
67
|
* Update one or more listener options without re-attaching the
|
|
56
68
|
* message listener. Pass `amount` or `merchantName` to push the new
|
|
57
|
-
* value into the iframe; pass `
|
|
58
|
-
*
|
|
59
|
-
* `buttonLocale`, `buttonBorderType`, or `style` to restyle the
|
|
60
|
-
* Google Pay button.
|
|
69
|
+
* value into the iframe; pass `height` or `buttonProps` to restyle
|
|
70
|
+
* the Google Pay button.
|
|
61
71
|
*/
|
|
62
72
|
update: (patch: Partial<GooglePayButtonListenerOptions>) => void;
|
|
63
73
|
/**
|
|
@@ -73,7 +83,7 @@ export type GooglePayButtonController = {
|
|
|
73
83
|
* The iframe is expected to have already been added to the DOM with the
|
|
74
84
|
* correct `src` (see {@link getGooglePayButtonSrc}).
|
|
75
85
|
*/
|
|
76
|
-
export declare function attachGooglePayButtonListeners(iframe: HTMLIFrameElement, options: GooglePayButtonListenerOptions): GooglePayButtonController;
|
|
86
|
+
export declare function attachGooglePayButtonListeners(iframe: HTMLIFrameElement, { height, ...options }: GooglePayButtonListenerOptions): GooglePayButtonController;
|
|
77
87
|
/**
|
|
78
88
|
* Result of {@link formatGooglePayPaymentData}.
|
|
79
89
|
*/
|
package/dist/index.d.ts
CHANGED
|
@@ -9,5 +9,5 @@ export type { AmosApplePayButtonMountController, AmosApplePayButtonOptions, Amos
|
|
|
9
9
|
export { mountAmosApplePayButton, mountAmosBankAccountPaymentMethodForm, mountAmosCreditCardPaymentMethodForm, mountAmosGooglePayButton, } from './mount';
|
|
10
10
|
export type { BillingAddressRequirement, CreditCardAdditionalFields, PaymentMethodFormController, PaymentMethodFormListenerOptions, } from './payment-method-form';
|
|
11
11
|
export { attachPaymentMethodFormListeners, getBankAccountFormInitialHeight, getBankAccountFormSrc, getCreditCardFormInitialHeight, getCreditCardFormSrc, } from './payment-method-form';
|
|
12
|
-
export type { Appearance, AppearanceLabels, ApplePayButtonElementProps,
|
|
13
|
-
export { createMessage
|
|
12
|
+
export type { Appearance, AppearanceLabels, ApplePayButtonElementProps, ConfirmationIncompleteReason, ConfirmationResult, GooglePayButtonElementProps, Message, PaymentMethodFormValidityChangeEvent, ThemeVariable, } from './types';
|
|
13
|
+
export { createMessage } from './types';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`data-amos-apple-pay-waiting`;function t({onCancel:t}){let n=document.querySelector(`[${e}]`);if(n)return n;let r=document.createElement(`div`);r.setAttribute(e,`true`),r.setAttribute(`role`,`dialog`),r.setAttribute(`aria-modal`,`true`),r.setAttribute(`aria-labelledby`,`amos-apple-pay-waiting-title`),Object.assign(r.style,{position:`fixed`,inset:`0`,zIndex:`2147483646`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:`24px`,boxSizing:`border-box`,background:`rgba(0, 0, 0, 0.55)`,fontFamily:`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`});let i=document.createElement(`div`);Object.assign(i.style,{width:`100%`,maxWidth:`360px`,borderRadius:`12px`,background:`#fff`,padding:`28px 24px 20px`,boxSizing:`border-box`,textAlign:`center`,boxShadow:`0 12px 40px rgba(0, 0, 0, 0.25)`});let a=document.createElement(`div`);a.setAttribute(`aria-hidden`,`true`),Object.assign(a.style,{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,gap:`6px`,marginBottom:`16px`,fontSize:`28px`,fontWeight:`600`,letterSpacing:`-0.02em`,color:`#000`,lineHeight:`1`}),a.innerHTML=`<svg width="22" height="26" viewBox="0 0 814 1000" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg><span>Pay</span>`;let o=document.createElement(`p`);o.id=`amos-apple-pay-waiting-title`,Object.assign(o.style,{margin:`0 0 20px`,fontSize:`15px`,lineHeight:`1.45`,color:`#1a1a1a`}),o.textContent=`Complete your payment in the open Apple Pay window, or close Apple Pay to continue paying another way.`;let s=document.createElement(`button`);return s.type=`button`,s.textContent=`Cancel payment`,Object.assign(s.style,{display:`block`,width:`100%`,border:`none`,borderRadius:`8px`,padding:`12px 16px`,background:`#2c2c2e`,color:`#fff`,fontSize:`15px`,fontWeight:`500`,cursor:`pointer`}),s.addEventListener(`click`,t),i.append(a,o,s),r.append(i),document.body.append(r),r}function n(){document.querySelector(`[${e}]`)?.remove()}function r(e){let[t=``,n=``,r=``]=e?.split(`.`)??[],i=typeof atob==`function`?atob:e=>Buffer.from(e,`base64`).toString(`utf8`);return{header:JSON.parse(i(t)),payload:JSON.parse(i(n)),signature:r}}function i(e){let{env:t=`sandbox`}=r(e).payload;switch(t){case`production`:return`https://embed.amos.com`;case`sandbox`:return`https://embed-sandbox.amos.com`;default:return`https://embed-sandbox.amos.com`}}function a(e){
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`data-amos-apple-pay-waiting`;function t({onCancel:t}){let n=document.querySelector(`[${e}]`);if(n)return n;let r=document.createElement(`div`);r.setAttribute(e,`true`),r.setAttribute(`role`,`dialog`),r.setAttribute(`aria-modal`,`true`),r.setAttribute(`aria-labelledby`,`amos-apple-pay-waiting-title`),Object.assign(r.style,{position:`fixed`,inset:`0`,zIndex:`2147483646`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:`24px`,boxSizing:`border-box`,background:`rgba(0, 0, 0, 0.55)`,fontFamily:`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`});let i=document.createElement(`div`);Object.assign(i.style,{width:`100%`,maxWidth:`360px`,borderRadius:`12px`,background:`#fff`,padding:`28px 24px 20px`,boxSizing:`border-box`,textAlign:`center`,boxShadow:`0 12px 40px rgba(0, 0, 0, 0.25)`});let a=document.createElement(`div`);a.setAttribute(`aria-hidden`,`true`),Object.assign(a.style,{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,gap:`6px`,marginBottom:`16px`,fontSize:`28px`,fontWeight:`600`,letterSpacing:`-0.02em`,color:`#000`,lineHeight:`1`}),a.innerHTML=`<svg width="22" height="26" viewBox="0 0 814 1000" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg><span>Pay</span>`;let o=document.createElement(`p`);o.id=`amos-apple-pay-waiting-title`,Object.assign(o.style,{margin:`0 0 20px`,fontSize:`15px`,lineHeight:`1.45`,color:`#1a1a1a`}),o.textContent=`Complete your payment in the open Apple Pay window, or close Apple Pay to continue paying another way.`;let s=document.createElement(`button`);return s.type=`button`,s.textContent=`Cancel payment`,Object.assign(s.style,{display:`block`,width:`100%`,border:`none`,borderRadius:`8px`,padding:`12px 16px`,background:`#2c2c2e`,color:`#fff`,fontSize:`15px`,fontWeight:`500`,cursor:`pointer`}),s.addEventListener(`click`,t),i.append(a,o,s),r.append(i),document.body.append(r),r}function n(){document.querySelector(`[${e}]`)?.remove()}function r(e){let[t=``,n=``,r=``]=e?.split(`.`)??[],i=typeof atob==`function`?atob:e=>Buffer.from(e,`base64`).toString(`utf8`);return{header:JSON.parse(i(t)),payload:JSON.parse(i(n)),signature:r}}function i(e){let{env:t=`sandbox`}=r(e).payload;switch(t){case`production`:return`https://embed.amos.com`;case`sandbox`:return`https://embed-sandbox.amos.com`;default:return`https://embed-sandbox.amos.com`}}function a(e){return e}function o(e){return new URL(e.src).origin}function s(e){e?.contentWindow&&e.contentWindow.postMessage(a({type:`PARENT_ACKNOWLEDGED_IFRAME_READY`}),o(e))}function c({iframe:e,appearance:t={}}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`UPDATE_APPEARANCE`,appearance:t}),o(e))}function l({iframe:e,props:t,height:n}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`UPDATE_APPLE_PAY_BUTTON`,height:n,props:t}),o(e))}function u({iframe:e,props:t,height:n}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`UPDATE_GOOGLE_PAY_BUTTON`,height:n,props:t}),o(e))}function d({iframe:e,amount:t}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`UPDATE_AMOUNT`,amount:t}),o(e))}function f({iframe:e,merchantName:t}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`UPDATE_MERCHANT_NAME`,merchantName:t}),o(e))}function p({iframe:e}){let t=crypto.randomUUID();return new Promise(n=>{e?.contentWindow&&e.contentWindow.postMessage(a({type:`VALIDATE_FORM`,requestId:t}),o(e));let r=setTimeout(()=>{window.removeEventListener(`message`,i),n(!1)},5e3);function i(e){e.data.type===`VALIDATE_FORM`&&e.data.requestId===t&&(window.removeEventListener(`message`,i),clearTimeout(r),n(e.data.isValid??!1))}window.addEventListener(`message`,i)})}function m({iframe:e}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`RESET_FORM`}),o(e))}function h({iframe:e,token:t}){if(!e?.contentWindow)return;let{payment_intent_id:n}=r(t).payload;e.contentWindow.postMessage(a({type:`CONFIRM_PAYMENT_INTENT`,token:t,id:n??void 0}),o(e))}function g({iframe:e,token:t}){if(!e?.contentWindow)return;let{setup_intent_id:n}=r(t).payload;e.contentWindow.postMessage(a({type:`CONFIRM_SETUP_INTENT`,token:t,id:n??void 0}),o(e))}function _({iframe:e,result:t}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`CONFIRMATION_RESULT`,result:t}),o(e))}function v(e){return`${i(e)}/iframe/apple-pay?token=${e}`}function y(){return`48px`}function b(e){e.contentWindow?.postMessage(a({type:`APPLE_PAY_CANCEL`}),o(e))}function x(e,{height:r=`48px`,...i}){let a={...i,height:r};function o(){d({iframe:e,amount:a.amount})}function u(){f({iframe:e,merchantName:a.merchantName})}function p(){l({iframe:e,height:a.height??`48px`,props:a.buttonProps??{}})}function m(r){if(r.source===e.contentWindow)switch(r.data.type){case`IFRAME_READY`:s(e),c({iframe:e,appearance:{}}),o(),u(),p();break;case`UPDATE_HEIGHT`:a.onHeightChange?.(r.data.height);break;case`UPDATE_APPEARANCE`:c({iframe:e,appearance:r.data.appearance});break;case`UPDATED_APPEARANCE`:a.onAppearanceReady?.();break;case`APPLE_PAY_WINDOW_OPEN`:t({onCancel:()=>{b(e),n()}});break;case`APPLE_PAY_WINDOW_CLOSE`:n();break;case`CREATE_PAYMENT_INTENT`:a.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:r.data.paymentIntentCreateAttributes,customerCreateAttributes:r.data.customerCreateAttributes}).then(t=>{h({iframe:e,token:t})}).catch(e=>{n(),a.onResult({status:`failed`,errorMessage:e instanceof Error?e.message:`Unknown error`})});break;case`CONFIRMATION_RESULT`:n(),a.onResult(r.data.result)}}return window.addEventListener(`message`,m),{update(e){let t=`amount`in e,n=`merchantName`in e,r=`height`in e||`buttonProps`in e;a={...a,...e},t&&o(),n&&u(),r&&p()},destroy(){window.removeEventListener(`message`,m),n()}}}function S(e){return`${i(e)}/iframe/google-pay?token=${e}`}function C(){return`48px`}function w(e,{height:t=`48px`,...n}){let r={...n,height:t};function i(){d({iframe:e,amount:r.amount})}function a(){f({iframe:e,merchantName:r.merchantName})}function o(){u({iframe:e,height:r.height??`48px`,props:r.buttonProps??{}})}function l(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:s(e),c({iframe:e,appearance:{}}),i(),a(),o();break;case`UPDATE_HEIGHT`:r.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:c({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:r.onAppearanceReady?.();break;case`CREATE_PAYMENT_INTENT`:r.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:t.data.paymentIntentCreateAttributes,customerCreateAttributes:t.data.customerCreateAttributes}).then(t=>{h({iframe:e,token:t})}).catch(e=>{r.onResult({status:`failed`,errorMessage:e instanceof Error?e.message:`Unknown error`})});break;case`CONFIRMATION_RESULT`:r.onResult(t.data.result)}}return window.addEventListener(`message`,l),{update(e){let t=`amount`in e,n=`merchantName`in e,s=`height`in e||`buttonProps`in e;r={...r,...e},t&&i(),n&&a(),s&&o()},destroy(){window.removeEventListener(`message`,l)}}}function T({paymentData:e}){return{paymentMethod:{type:`googlepay`,billing_address_attributes:{name:e.shippingAddress?.name,address_line1:e.shippingAddress?.address1,address_line2:e.shippingAddress?.address2,city:e.shippingAddress?.locality,state:e.shippingAddress?.administrativeArea,postal_code:e.shippingAddress?.postalCode,country:e.shippingAddress?.countryCode,email:e.email,phone:e.shippingAddress?.phoneNumber},card_profile_attributes:{wallet_payload:e.paymentMethodData.tokenizationData.token}}}}var E=`amos-js-form-skeleton-styles`,D={"--accent":`oklch(0.97 0 0)`,"--radius":`0.625rem`,"--input-height":`2.25rem`,"--floating-input-height":`3.25rem`,"--field-gap":`1rem`,"--control-gap":`0.5rem`,"--label-font-size":`0.875rem`},O=`
|
|
2
2
|
.amos-js-form-skeleton {
|
|
3
3
|
box-sizing: border-box;
|
|
4
4
|
container-type: inline-size;
|
|
@@ -61,4 +61,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`data-a
|
|
|
61
61
|
animation: none;
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
`;function
|
|
64
|
+
`;function k(){if(document.getElementById(E))return;let e=document.createElement(`style`);e.id=E,e.textContent=O,document.head.appendChild(e)}function A(e,t){for(let[t,n]of Object.entries(D))e.style.setProperty(t,n);let n=t?.themeVariables;if(n)for(let[t,r]of Object.entries(n))typeof r==`string`&&r.trim()!==``&&e.style.setProperty(t,r.trim())}function j(e,t){let n=document.createElement(`div`);if(n.className=e,t)for(let e of t)n.appendChild(e);return n}function M(e,t){let n=j(`amos-js-form-skeleton-field`);t!==void 0&&(n.style.flexGrow=String(t)),e===`above`&&n.appendChild(j(`amos-js-form-skeleton-label`));let r=j(`amos-js-form-skeleton-input`);return e===`floating`&&r.classList.add(`amos-js-form-skeleton-input-floating`),n.appendChild(r),n}function N(e,t){return j(t?`amos-js-form-skeleton-row-stack`:`amos-js-form-skeleton-row`,e)}function P({labels:e,requirement:t,wrapCountryZip:n}){return t===`full`?[M(e),M(e),N([M(e,1.4),M(e,.7),M(e,.8)],!1),M(e)]:[N([M(e),M(e)],n)]}function F(e){let t=e.appearance?.labels??`above`,n=e.billingAddressRequirement??`country`;if(e.kind===`card`){let r=[M(t),N([M(t),M(t)],!1)];return e.additionalFields?.cardholderName&&r.push(M(t)),r.push(...P({labels:t,requirement:n,wrapCountryZip:!1})),r}return[M(t),N([M(t),M(t)],!0),M(t),N([M(`above`),M(`above`)],!0),...P({labels:t,requirement:n,wrapCountryZip:!0})]}function I(e){k();let t=j(`amos-js-form-skeleton`);t.setAttribute(`aria-hidden`,`true`);function n(e){A(t,e.appearance),t.replaceChildren(...F(e))}return n(e),{element:t,update:n}}var L={country:212,full:452},R=80,z={country:400,full:640};function B(e,t={cardholderName:!1},n=`country`){let r=Object.entries(t).filter(([,e])=>e).map(([e])=>e).join(`,`),a=new URLSearchParams({token:e,additionalFields:r,billingAddressRequirement:n});return`${i(e)}/iframe/card?${a}`}function V(e,t=`country`){let n=new URLSearchParams({token:e,billingAddressRequirement:t});return`${i(e)}/iframe/bank?${n}`}function H(e={cardholderName:!1},t=`country`){return`${(L[t]??L.country)+(e.cardholderName?R:0)}px`}function U(e=`country`){return`${z[e]??z.country}px`}function W(e,t){let n={...t};function r(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:s(e),c({iframe:e,appearance:n.appearance});break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:c({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`FORM_VALIDITY_CHANGE`:n.onValidityChange?.({isValid:t.data.isValid});break;case`CONFIRMATION_RESULT`:n.onResult(t.data.result)}}return window.addEventListener(`message`,r),{update(t){let r=`appearance`in t;n={...n,...t},r&&c({iframe:e,appearance:n.appearance})},destroy(){window.removeEventListener(`message`,r)}}}function G(e){if(typeof e==`string`){let t=document.querySelector(e);if(!(t instanceof HTMLElement))throw Error(`[amos-js] Container "${e}" did not match any HTMLElement.`);return t}return e}var K={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`},q={width:`100%`,transition:`height 200ms ease-in-out`,margin:`0`,opacity:`0`,border:`0`},J={position:`absolute`,top:`0`,left:`-4px`,width:`calc(100% + 8px)`,height:`100%`,margin:`0`,transition:`none`,pointerEvents:`none`};function Y({src:e,title:t,name:n,height:r,allow:i,className:a,style:o=K}){let s=document.createElement(`iframe`);return s.src=e,s.title=t,s.name=n,s.setAttribute(`role`,`presentation`),s.scrolling=`no`,i&&(s.allow=i),a!=null&&(s.className=a),Object.assign(s.style,o,{height:r}),s}function X({host:e,iframe:t,listenerOptions:n,skeletonOptions:r}){let i=document.createElement(`div`);i.style.position=`relative`,i.style.width=`100%`,i.setAttribute(`aria-busy`,`true`);let a=I(r);Object.assign(t.style,J),i.append(a.element,t),e.appendChild(i);let o=!1,s=!1,c,l=r.appearance,u,d;function f(){return i.getBoundingClientRect().height}function p(){return c?Number.parseFloat(c):NaN}function m(){if(o)return;o=!0,d!==void 0&&(clearTimeout(d),d=void 0);let e=f(),n=p(),r=Number.isFinite(n)?Math.max(n,e):e;t.style.transition=`none`,t.style.position=``,t.style.top=``,t.style.left=``,t.style.margin=K.margin??``,t.style.height=`${r}px`,t.style.opacity=`1`,t.style.pointerEvents=``,a.element.remove(),i.removeAttribute(`aria-busy`),u=setTimeout(()=>{t.style.transition=`height 200ms ease-in-out`},400)}function h(){if(o||!s)return;let e=p(),t=f();Number.isFinite(e)&&e>=t-2&&m()}let g=W(t,{...n,onHeightChange:e=>{c=e,o?t.style.height=e:h(),n.onHeightChange?.(e)},onAppearanceReady:()=>{s=!0,h(),!o&&d===void 0&&(d=setTimeout(()=>{m()},1500)),n.onAppearanceReady?.()}});return{iframe:t,update(e){g.update(e),!o&&`appearance`in e&&(l=e.appearance,a.update({...r,appearance:l}))},destroy(){u!==void 0&&clearTimeout(u),d!==void 0&&clearTimeout(d),g.destroy(),i.remove()}}}function Z(e,t){let n=G(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t;return X({host:n,iframe:Y({src:B(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:H(i,a)}),listenerOptions:o,skeletonOptions:{kind:`card`,appearance:o.appearance,additionalFields:i,billingAddressRequirement:a}})}function Q(e,t){let n=G(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t;return X({host:n,iframe:Y({src:V(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:U(i)}),listenerOptions:a,skeletonOptions:{kind:`bank`,appearance:a.appearance,billingAddressRequirement:i}})}function $(e,t){let n=G(e),{renderToken:r,iframeClassName:i,iframeStyle:a,...o}=t,s=Y({src:S(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:o.height??C(),allow:`payment`,className:i,style:q});Object.assign(s.style,a),n.appendChild(s);let c=w(s,{...o,onHeightChange:e=>{s.style.height=e,o.onHeightChange?.(e)},onAppearanceReady:()=>{s.style.opacity=`1`,o.onAppearanceReady?.()}});return{iframe:s,update:c.update,destroy(){c.destroy(),s.remove()}}}function ee(e,t){let n=G(e),{renderToken:r,iframeClassName:i,iframeStyle:a,...o}=t,s=Y({src:v(r),title:`Secure Apple Pay button powered by Amos`,name:`amos-apple-pay-button`,height:o.height??y(),allow:`payment`,className:i,style:q});Object.assign(s.style,a),n.appendChild(s);let c=x(s,{...o,onHeightChange:e=>{s.style.height=e,o.onHeightChange?.(e)},onAppearanceReady:()=>{s.style.opacity=`1`,o.onAppearanceReady?.()}});return{iframe:s,update:c.update,destroy(){c.destroy(),s.remove()}}}exports.attachApplePayButtonListeners=x,exports.attachGooglePayButtonListeners=w,exports.attachPaymentMethodFormListeners=W,exports.confirmPaymentIntent=h,exports.confirmSetupIntent=g,exports.createMessage=a,exports.decodeJwt=r,exports.formatGooglePayPaymentData=T,exports.getApplePayButtonInitialHeight=y,exports.getApplePayButtonSrc=v,exports.getBankAccountFormInitialHeight=U,exports.getBankAccountFormSrc=V,exports.getCreditCardFormInitialHeight=H,exports.getCreditCardFormSrc=B,exports.getEmbedOrigin=i,exports.getGooglePayButtonInitialHeight=C,exports.getGooglePayButtonSrc=S,exports.mountAmosApplePayButton=ee,exports.mountAmosBankAccountPaymentMethodForm=Q,exports.mountAmosCreditCardPaymentMethodForm=Z,exports.mountAmosGooglePayButton=$,exports.resetForm=m,exports.sendConfirmationResult=_,exports.sendParentReadyMessage=s,exports.updateAmount=d,exports.updateAppearance=c,exports.updateApplePayButton=l,exports.updateGooglePayButton=u,exports.updateMerchantName=f,exports.validateForm=p;
|