@amos.com/amos-js 0.9.13 → 0.9.15
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 +67 -74
- package/dist/apple-pay.d.ts +14 -9
- package/dist/google-pay.d.ts +16 -10
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/index.mjs +214 -237
- package/dist/messaging.d.ts +4 -2
- package/dist/mount.d.ts +14 -0
- package/dist/types.d.ts +25 -81
- package/package.json +1 -1
- package/src/apple-pay.ts +25 -23
- package/src/google-pay.ts +27 -27
- package/src/index.ts +1 -9
- package/src/messaging.ts +8 -4
- package/src/mount.ts +29 -4
- package/src/types.ts +43 -179
package/README.md
CHANGED
|
@@ -179,7 +179,7 @@ In short, your app orchestrates the payment flow, while sensitive payment data s
|
|
|
179
179
|
|
|
180
180
|
## Appearance
|
|
181
181
|
|
|
182
|
-
|
|
182
|
+
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
183
|
|
|
184
184
|
```ts
|
|
185
185
|
form.update({
|
|
@@ -199,55 +199,57 @@ form.update({
|
|
|
199
199
|
|
|
200
200
|
Set `labels` to control how field labels are rendered in card and bank account forms:
|
|
201
201
|
|
|
202
|
-
| Value
|
|
203
|
-
|
|
|
204
|
-
| `above` (default) | Label text above each input
|
|
205
|
-
| `floating`
|
|
206
|
-
| `placeholder`
|
|
202
|
+
| Value | Behavior |
|
|
203
|
+
| ----------------- | --------------------------------------------------------- |
|
|
204
|
+
| `above` (default) | Label text above each input |
|
|
205
|
+
| `floating` | Label inside the control; moves up when focused or filled |
|
|
206
|
+
| `placeholder` | No visible label; placeholder and `aria-label` only |
|
|
207
207
|
|
|
208
208
|
Radio groups (e.g. account type) always use an above-style group label regardless of this setting.
|
|
209
209
|
|
|
210
210
|
### Available theme variables
|
|
211
211
|
|
|
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-font-
|
|
240
|
-
| `--floating-label-
|
|
241
|
-
| `--floating-label-
|
|
242
|
-
| `--label-
|
|
243
|
-
| `--label-
|
|
244
|
-
| `--
|
|
245
|
-
| `--
|
|
246
|
-
| `--
|
|
247
|
-
| `--
|
|
248
|
-
| `--
|
|
249
|
-
| `--
|
|
250
|
-
| `--
|
|
212
|
+
| Variable | Purpose | Default |
|
|
213
|
+
| ---------------------------------- | -------------------------------------------------------- | ------------------------------- |
|
|
214
|
+
| `--background` | Page body and base surface color | `oklch(1 0 0)` |
|
|
215
|
+
| `--foreground` | Default text color | `oklch(0.145 0 0)` |
|
|
216
|
+
| `--primary` | Button fill and input text-selection highlight | `oklch(0.205 0 0)` |
|
|
217
|
+
| `--primary-foreground` | Text on primary-colored surfaces | `oklch(0.985 0 0)` |
|
|
218
|
+
| `--secondary` | Secondary button fill | `oklch(0.97 0 0)` |
|
|
219
|
+
| `--secondary-foreground` | Text on secondary-colored surfaces | `oklch(0.205 0 0)` |
|
|
220
|
+
| `--muted` | Muted surface color | `oklch(0.97 0 0)` |
|
|
221
|
+
| `--muted-foreground` | Placeholder text, helper labels, muted icons | `oklch(0.556 0 0)` |
|
|
222
|
+
| `--accent` | Hover/focus highlight for interactive items | `oklch(0.97 0 0)` |
|
|
223
|
+
| `--accent-foreground` | Text on accent-highlighted items | `oklch(0.205 0 0)` |
|
|
224
|
+
| `--destructive` | Error/invalid state borders, icons, and field error text | `oklch(0.577 0.245 27.325)` |
|
|
225
|
+
| `--destructive-foreground` | Text on destructive-colored surfaces | `oklch(0.45 0.24 27.325)` |
|
|
226
|
+
| `--border` | General border color | `oklch(0.922 0 0)` |
|
|
227
|
+
| `--popover` | Dropdown / popover panel background | `oklch(1 0 0)` |
|
|
228
|
+
| `--popover-foreground` | Dropdown / popover panel text color | `oklch(0.145 0 0)` |
|
|
229
|
+
| `--input` | Input field border color | `oklch(0.922 0 0)` |
|
|
230
|
+
| `--input-background` | Input field background fill | `var(--background)` |
|
|
231
|
+
| `--input-height` | Height of text inputs and form controls | `2.25rem` |
|
|
232
|
+
| `--input-font-size` | Font size of text inputs and dropdown fields | `0.875rem` |
|
|
233
|
+
| `--input-font-weight` | Font weight of typed input values | `400` |
|
|
234
|
+
| `--input-padding` | Horizontal padding inside inputs | `0.75rem` |
|
|
235
|
+
| `--input-border-width` | Input field border width | `1px` |
|
|
236
|
+
| `--input-shadow` | Input field box shadow | `0 1px 2px 0 rgb(0 0 0 / 0.05)` |
|
|
237
|
+
| `--floating-input-height` | Height of inputs when labels are floating | `3.25rem` |
|
|
238
|
+
| `--floating-label-font-size` | Font size of floating labels when focused or filled | `0.75rem` |
|
|
239
|
+
| `--floating-label-empty-font-size` | Font size of floating labels when empty (unfocused) | `var(--input-font-size)` |
|
|
240
|
+
| `--floating-label-font-weight` | Font weight of floating labels | `500` |
|
|
241
|
+
| `--floating-label-color` | Color of floating labels when empty (unfocused) | `var(--muted-foreground)` |
|
|
242
|
+
| `--floating-label-floated-color` | Color of floating labels when focused or filled | `var(--floating-label-color)` |
|
|
243
|
+
| `--floating-label-offset` | Top offset of the shrunk floating label | `0.625rem` |
|
|
244
|
+
| `--label-font-size` | Font size of above-style field labels | `0.875rem` |
|
|
245
|
+
| `--label-font-weight` | Font weight of above-style field labels | `500` |
|
|
246
|
+
| `--field-gap` | Vertical gap between stacked form fields | `1rem` |
|
|
247
|
+
| `--control-gap` | Horizontal gap between side-by-side controls | `0.5rem` |
|
|
248
|
+
| `--error-font-size` | Font size of field-level error messages | `0.875rem` |
|
|
249
|
+
| `--radio-size` | Size of radio buttons on the bank account form | `1rem` |
|
|
250
|
+
| `--ring` | Focus ring and outline color | `oklch(0.708 0 0)` |
|
|
251
|
+
| `--ring-width` | Focus ring width | `3px` |
|
|
252
|
+
| `--radius` | Base border-radius (derived into sm/md/lg/xl) | `0.625rem` |
|
|
251
253
|
|
|
252
254
|
## API reference
|
|
253
255
|
|
|
@@ -266,7 +268,6 @@ Mount the secure credit-card payment method form into a container element (an `H
|
|
|
266
268
|
- `additionalFields` (`{ cardholderName: boolean }`, defaults to `{ cardholderName: false }`)
|
|
267
269
|
- `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.
|
|
268
270
|
|
|
269
|
-
|
|
270
271
|
- `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.
|
|
271
272
|
- `onHeightChange`, `onAppearanceReady` (advanced — override the default iframe styling logic). The skeleton is removed and the iframe faded in when `onAppearanceReady` fires.
|
|
272
273
|
|
|
@@ -293,55 +294,47 @@ Mount the secure Google Pay button (express checkout) into a container element.
|
|
|
293
294
|
|
|
294
295
|
- `onResult` (`(result: ConfirmationResult) => void`) — required. Called when the interactive confirmation attempt finishes (`succeeded`, `failed`, or `incomplete` with `reason`). Not settlement proof; verify via webhooks.
|
|
295
296
|
|
|
296
|
-
**Optional `options`:** `
|
|
297
|
+
**Optional `options`:** `onHeightChange`, `onAppearanceReady`, plus:
|
|
297
298
|
|
|
298
|
-
- `
|
|
299
|
-
- `
|
|
300
|
-
- `buttonColor` (`"default" | "black" | "white"`)
|
|
301
|
-
- `buttonRadius` (`number`, 0–20)
|
|
302
|
-
- `buttonSizeMode` (`"static" | "fill"`)
|
|
303
|
-
- `buttonLocale` (`string`, e.g. `"en"`)
|
|
304
|
-
- `buttonBorderType` (`"no_border" | "default_border"`)
|
|
305
|
-
- `style` (`{ [property: string]: string | number }`) — applied to the Google Pay button inside the iframe (e.g. `{ height: "48px" }`)
|
|
299
|
+
- `height` (`string`, defaults to `"48px"`) — painted button height. CSS length (e.g. `"48px"`).
|
|
300
|
+
- `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" } }`.
|
|
306
301
|
|
|
307
|
-
|
|
302
|
+
- `iframeClassName` / `iframeStyle` — applied to the host-page `<iframe>` element. Use CSS values with units (`{ borderRadius: "8px" }`).
|
|
308
303
|
|
|
309
304
|
```ts
|
|
310
305
|
mountAmosGooglePayButton("#google-pay", {
|
|
311
306
|
// ...required options
|
|
312
|
-
|
|
313
|
-
|
|
307
|
+
buttonProps: {
|
|
308
|
+
buttonType: "donate",
|
|
309
|
+
buttonBorderType: "no_border",
|
|
310
|
+
},
|
|
311
|
+
iframeStyle: { borderRadius: "8px" },
|
|
314
312
|
});
|
|
315
313
|
```
|
|
316
314
|
|
|
317
|
-
The wallet iframe
|
|
318
|
-
zero margin). `style` targets the button inside that iframe. For advanced host
|
|
319
|
-
layout overrides, use the returned controller's `iframe` element.
|
|
315
|
+
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.
|
|
320
316
|
|
|
321
317
|
**Returns** `AmosGooglePayButtonMountController`:
|
|
322
318
|
|
|
323
|
-
- `iframe`, `update(patch)`, `destroy()`. Use `update({ amount, merchantName })` to push new values into the iframe. Use `update({
|
|
319
|
+
- `iframe`, `update(patch)`, `destroy()`. Use `update({ amount, merchantName })` to push new values into the iframe. Use `update({ height, buttonProps })` to restyle the button.
|
|
324
320
|
|
|
325
321
|
### `mountAmosApplePayButton(container, options)`
|
|
326
322
|
|
|
327
323
|
Mount the secure Apple Pay button (express checkout). Same required options and return shape as `mountAmosGooglePayButton`.
|
|
328
324
|
|
|
329
|
-
**Optional visual options
|
|
325
|
+
**Optional visual options:**
|
|
326
|
+
|
|
327
|
+
- `height` (`string`, defaults to `"48px"`) — painted button height. CSS length (e.g. `"48px"`). Apple ignores CSS `height`; Amos maps this for you.
|
|
328
|
+
- `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.
|
|
330
329
|
|
|
331
|
-
- `
|
|
332
|
-
- `buttonstyle` (`"black" | "white" | "white-outline"`, defaults to `"black"`)
|
|
333
|
-
- `type` (`"plain" | "buy" | "set-up" | "donate" | "check-out" | "book" | "subscribe" | "reload" | "add-money" | "top-up" | "order" | "rent" | "support" | "contribute" | "tip"`, defaults to `"plain"`)
|
|
334
|
-
- `locale` (`string`, BCP 47, defaults to `"en-US"`)
|
|
335
|
-
- `style` — applied to the `<apple-pay-button>` inside the iframe. Apple sizes the button with CSS custom properties, not CSS `height`:
|
|
330
|
+
- `iframeClassName` / `iframeStyle` — host-page `<iframe>` chrome.
|
|
336
331
|
|
|
337
332
|
```ts
|
|
338
333
|
button.update({
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
style: {
|
|
344
|
-
"--apple-pay-button-height": "48px",
|
|
334
|
+
buttonProps: {
|
|
335
|
+
buttonstyle: "white-outline",
|
|
336
|
+
type: "buy",
|
|
337
|
+
locale: "en-GB",
|
|
345
338
|
},
|
|
346
339
|
});
|
|
347
340
|
```
|
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,22 @@ export declare function getApplePayButtonInitialHeight(): string;
|
|
|
11
11
|
/**
|
|
12
12
|
* Options accepted by {@link attachApplePayButtonListeners}.
|
|
13
13
|
*/
|
|
14
|
-
export type ApplePayButtonListenerOptions =
|
|
14
|
+
export type ApplePayButtonListenerOptions = {
|
|
15
15
|
/** The amount of the payment, in the same format passed in props. */
|
|
16
16
|
amount: string;
|
|
17
17
|
/** A user-visible merchant name. */
|
|
18
18
|
merchantName: string;
|
|
19
19
|
/**
|
|
20
|
-
*
|
|
21
|
-
*
|
|
20
|
+
* Painted Apple Pay button height. CSS length (e.g. `"48px"`).
|
|
21
|
+
* @default "48px"
|
|
22
22
|
*/
|
|
23
|
-
|
|
23
|
+
height?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Native `<apple-pay-button>` attributes and inner style. Omitted
|
|
26
|
+
* fields keep Apple's defaults (`black` / `plain` / `en-US`). The
|
|
27
|
+
* button fills the iframe — size the mount slot, not the button.
|
|
28
|
+
*/
|
|
29
|
+
buttonProps?: ApplePayButtonElementProps;
|
|
24
30
|
/**
|
|
25
31
|
* Called whenever the iframe asks the host page to resize it. Update
|
|
26
32
|
* the iframe's `height` style here.
|
|
@@ -54,9 +60,8 @@ export type ApplePayButtonController = {
|
|
|
54
60
|
/**
|
|
55
61
|
* Update one or more listener options without re-attaching the
|
|
56
62
|
* message listener. Pass `amount` or `merchantName` to push the new
|
|
57
|
-
* value into the iframe; pass `
|
|
58
|
-
*
|
|
59
|
-
* Apple Pay button.
|
|
63
|
+
* value into the iframe; pass `height` or `buttonProps` to restyle
|
|
64
|
+
* the Apple Pay button.
|
|
60
65
|
*/
|
|
61
66
|
update: (patch: Partial<ApplePayButtonListenerOptions>) => void;
|
|
62
67
|
/**
|
|
@@ -77,4 +82,4 @@ export type ApplePayButtonController = {
|
|
|
77
82
|
* Apple Pay Code is open in a separate window, this host paints a
|
|
78
83
|
* waiting overlay and can cancel via {@link Message} `APPLE_PAY_CANCEL`.
|
|
79
84
|
*/
|
|
80
|
-
export declare function attachApplePayButtonListeners(iframe: HTMLIFrameElement, options: ApplePayButtonListenerOptions): ApplePayButtonController;
|
|
85
|
+
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,24 @@ export declare function getGooglePayButtonInitialHeight(): string;
|
|
|
11
11
|
/**
|
|
12
12
|
* Options accepted by {@link attachGooglePayButtonListeners}.
|
|
13
13
|
*/
|
|
14
|
-
export type GooglePayButtonListenerOptions =
|
|
14
|
+
export type GooglePayButtonListenerOptions = {
|
|
15
15
|
/** The amount of the payment, in the same format passed in props. */
|
|
16
16
|
amount: string;
|
|
17
17
|
/** A user-visible merchant name. */
|
|
18
18
|
merchantName: string;
|
|
19
19
|
/**
|
|
20
|
-
*
|
|
21
|
-
*
|
|
20
|
+
* Painted Google Pay button height. CSS length (e.g. `"48px"`).
|
|
21
|
+
* @default "48px"
|
|
22
22
|
*/
|
|
23
|
-
|
|
23
|
+
height?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Native Google Pay button attributes and inner style. Omitted fields
|
|
26
|
+
* keep Amos paint defaults (`buttonType: "plain"`,
|
|
27
|
+
* `buttonSizeMode: "fill"`). The button fills the iframe — size the
|
|
28
|
+
* mount slot, not the button. Compact: `buttonSizeMode: "static"` and
|
|
29
|
+
* `style.width`.
|
|
30
|
+
*/
|
|
31
|
+
buttonProps?: GooglePayButtonElementProps;
|
|
24
32
|
/**
|
|
25
33
|
* Called whenever the iframe asks the host page to resize it. Update
|
|
26
34
|
* the iframe's `height` style here.
|
|
@@ -54,10 +62,8 @@ export type GooglePayButtonController = {
|
|
|
54
62
|
/**
|
|
55
63
|
* Update one or more listener options without re-attaching the
|
|
56
64
|
* 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.
|
|
65
|
+
* value into the iframe; pass `height` or `buttonProps` to restyle
|
|
66
|
+
* the Google Pay button.
|
|
61
67
|
*/
|
|
62
68
|
update: (patch: Partial<GooglePayButtonListenerOptions>) => void;
|
|
63
69
|
/**
|
|
@@ -73,7 +79,7 @@ export type GooglePayButtonController = {
|
|
|
73
79
|
* The iframe is expected to have already been added to the DOM with the
|
|
74
80
|
* correct `src` (see {@link getGooglePayButtonSrc}).
|
|
75
81
|
*/
|
|
76
|
-
export declare function attachGooglePayButtonListeners(iframe: HTMLIFrameElement, options: GooglePayButtonListenerOptions): GooglePayButtonController;
|
|
82
|
+
export declare function attachGooglePayButtonListeners(iframe: HTMLIFrameElement, { height, ...options }: GooglePayButtonListenerOptions): GooglePayButtonController;
|
|
77
83
|
/**
|
|
78
84
|
* Result of {@link formatGooglePayPaymentData}.
|
|
79
85
|
*/
|
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;
|