@amos.com/amos-js 0.9.16 → 0.9.17

package/README.md

@@ -14,7 +14,7 @@ npm install @amos.com/amos-js
 
 - **Types** for the `postMessage` protocol used between your page and the Amos iframe (`Message`, `Appearance`, `ThemeVariable`). OpenAPI schema types (for example `components["schemas"]["PaymentIntent"]`) come from `@amos.com/node`.
 - **Iframe-targeted helpers** to validate the form, confirm a payment intent, confirm a setup intent, update appearance, etc.
-- **Mount functions** (`mountAmosCreditCardPaymentMethodForm`, `mountAmosBankAccountPaymentMethodForm`, `mountAmosGooglePayButton`, `mountAmosApplePayButton`) that create the iframe, wire up its message protocol, manage its height/opacity, show a field-shaped loading skeleton for card/bank forms, and return a small controller for updating options and tearing it down.
+- **Mount functions** (`mountAmosCreditCardPaymentMethodForm`, `mountAmosBankAccountPaymentMethodForm`, `mountAmosGooglePayButton`, `mountAmosApplePayButton`) that create the iframe, wire up its message protocol, manage its height/opacity, show a loading skeleton (field-shaped for card/bank forms, button-shaped for Google Pay / Apple Pay), and return a small controller for updating options and tearing it down.
 - **Lower-level building blocks** (`getCreditCardFormSrc`, `attachPaymentMethodFormListeners`, `attachGooglePayButtonListeners`, `attachApplePayButtonListeners`, ...) for integrators (such as `@amos.com/react-amos-js`) that want to render the iframe element themselves.
 
 > **Note:** A server-side SDK (for example `@amos.com/node`) must be used alongside `@amos.com/amos-js` for end-to-end payment processing. `@amos.com/amos-js` is the client-side half.
@@ -295,7 +295,7 @@ Same shape as `mountAmosCreditCardPaymentMethodForm`, minus `additionalFields`.
 
 ### `mountAmosGooglePayButton(container, options)`
 
-Mount the secure Google Pay button (express checkout) into a container element.
+Mount the secure Google Pay button (express checkout) into a container element. A button-shaped skeleton is shown immediately and replaced by the iframe once appearance is applied.
 
 **Required `options`:**
 
@@ -328,11 +328,11 @@ The wallet iframe is flush with its mount container (`width: 100%`, zero margin)
 
 **Returns** `AmosGooglePayButtonMountController`:
 
-- `iframe`, `update(patch)`, `destroy()`. Use `update({ amount, merchantName })` to push new values into the iframe. Use `update({ height, buttonProps })` to restyle the button.
+- `iframe`, `update(patch)`, `destroy()`. `destroy()` removes the iframe and any loading skeleton. Use `update({ amount, merchantName })` to push new values into the iframe. Use `update({ height, buttonProps })` to restyle the button.
 
 ### `mountAmosApplePayButton(container, options)`
 
-Mount the secure Apple Pay button (express checkout). Same required options and return shape as `mountAmosGooglePayButton`.
+Mount the secure Apple Pay button (express checkout). Same required options and return shape as `mountAmosGooglePayButton`. A button-shaped skeleton is shown immediately and replaced by the iframe once appearance is applied.
 
 **Optional visual options:**
 

package/dist/form-skeleton.d.ts

@@ -1,5 +1,7 @@
 import { BillingAddressRequirement, CreditCardAdditionalFields } from './payment-method-form';
 import { Appearance } from './types';
+export declare const SKELETON_STYLES = "\n.amos-js-form-skeleton {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  margin: 0 -4px;\n  padding-block: 0.25rem;\n  pointer-events: none;\n  width: calc(100% + 8px);\n}\n.amos-js-form-skeleton-field {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  min-width: 0;\n  width: 100%;\n}\n.amos-js-form-skeleton-label {\n  flex-shrink: 0;\n  font-size: var(--label-font-size);\n  height: 1.75rem;\n  line-height: 1.75rem;\n}\n.amos-js-form-skeleton-input {\n  animation: amos-js-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  background: var(--accent);\n  border-radius: calc(var(--radius) * 0.8);\n  box-sizing: border-box;\n  height: var(--input-height);\n  width: 100%;\n}\n.amos-js-form-skeleton-input-floating {\n  height: var(--floating-input-height);\n}\n.amos-js-form-skeleton-row {\n  align-items: flex-start;\n  display: flex;\n  gap: var(--control-gap);\n  width: 100%;\n}\n.amos-js-form-skeleton-row-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  width: 100%;\n}\n@container (min-width: 24rem) {\n  .amos-js-form-skeleton-row-stack {\n    align-items: flex-start;\n    flex-direction: row;\n    gap: var(--control-gap);\n  }\n}\n.amos-js-wallet-skeleton {\n  flex: none;\n  width: 100%;\n}\n@keyframes amos-js-skeleton-pulse {\n  50% { opacity: 0.5; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .amos-js-form-skeleton-input {\n    animation: none;\n  }\n}\n";
+export declare function ensureSkeletonStyles(): void;
 export type PaymentMethodFormSkeletonKind = "card" | "bank";
 export type PaymentMethodFormSkeletonOptions = {
     kind: PaymentMethodFormSkeletonKind;
@@ -18,3 +20,32 @@ export type PaymentMethodFormSkeleton = {
  * ready.
  */
 export declare function createPaymentMethodFormSkeleton(options: PaymentMethodFormSkeletonOptions): PaymentMethodFormSkeleton;
+export type WalletButtonSkeletonOptions = {
+    /** Painted height of the wallet button slot (CSS length). */
+    height: string;
+    /** Corner radius matching the iframe / native button. */
+    borderRadius?: string;
+};
+export type WalletButtonSkeleton = {
+    element: HTMLElement;
+    update: (options: WalletButtonSkeletonOptions) => void;
+};
+/**
+ * Host-page placeholder for Google Pay / Apple Pay: a pulsing bar at
+ * the button's height. Shown immediately while the iframe loads, then
+ * removed when appearance is ready.
+ */
+export declare function createWalletButtonSkeleton(options: WalletButtonSkeletonOptions): WalletButtonSkeleton;
+/**
+ * Corner radius for a wallet-button skeleton. Prefers host iframe
+ * chrome, then native Google / Apple button radius, then 4px.
+ */
+export declare function resolveWalletButtonSkeletonBorderRadius({ iframeStyle, buttonProps, }: {
+    iframeStyle?: {
+        borderRadius?: string | number;
+    };
+    buttonProps?: {
+        buttonRadius?: number;
+        style?: Record<string, string | number | undefined>;
+    };
+}): string;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="googlepay" />
 export type { ApplePayButtonController, ApplePayButtonListenerOptions, } from './apple-pay';
 export { attachApplePayButtonListeners, getApplePayButtonInitialHeight, getApplePayButtonSrc, } from './apple-pay';
+export type { PaymentMethodFormSkeleton, PaymentMethodFormSkeletonKind, PaymentMethodFormSkeletonOptions, WalletButtonSkeleton, WalletButtonSkeletonOptions, } from './form-skeleton';
+export { createPaymentMethodFormSkeleton, createWalletButtonSkeleton, ensureSkeletonStyles, resolveWalletButtonSkeletonBorderRadius, SKELETON_STYLES, } from './form-skeleton';
 export type { FormattedGooglePayPaymentData, GooglePayButtonController, GooglePayButtonListenerOptions, } from './google-pay';
 export { attachGooglePayButtonListeners, formatGooglePayPaymentData, getGooglePayButtonInitialHeight, getGooglePayButtonSrc, } from './google-pay';
 export { decodeJwt, getEmbedOrigin } from './jwt';

package/dist/index.js

@@ -1,4 +1,4 @@
-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=`
+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 ee(e){e.contentWindow?.postMessage(a({type:`APPLE_PAY_CANCEL`}),o(e))}function b(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:()=>{ee(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()}}}var x=`amos-js-form-skeleton-styles`,S={"--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`},C=`
 .amos-js-form-skeleton {
   box-sizing: border-box;
   container-type: inline-size;
@@ -53,6 +53,10 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`data-a
     gap: var(--control-gap);
   }
 }
+.amos-js-wallet-skeleton {
+  flex: none;
+  width: 100%;
+}
 @keyframes amos-js-skeleton-pulse {
   50% { opacity: 0.5; }
 }
@@ -61,4 +65,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`data-a
     animation: none;
   }
 }
-`;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;
+`;function w(){if(document.getElementById(x))return;let e=document.createElement(`style`);e.id=x,e.textContent=C,document.head.appendChild(e)}function T(e,t){for(let[t,n]of Object.entries(S))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 E(e,t){let n=document.createElement(`div`);if(n.className=e,t)for(let e of t)n.appendChild(e);return n}function D(e,t){let n=E(`amos-js-form-skeleton-field`);t!==void 0&&(n.style.flexGrow=String(t)),e===`above`&&n.appendChild(E(`amos-js-form-skeleton-label`));let r=E(`amos-js-form-skeleton-input`);return e===`floating`&&r.classList.add(`amos-js-form-skeleton-input-floating`),n.appendChild(r),n}function O(e,t){return E(t?`amos-js-form-skeleton-row-stack`:`amos-js-form-skeleton-row`,e)}function k({labels:e,requirement:t,wrapCountryZip:n}){return t===`full`?[D(e),D(e),O([D(e,1.4),D(e,.7),D(e,.8)],!1),D(e)]:[O([D(e),D(e)],n)]}function A(e){let t=e.appearance?.labels??`above`,n=e.billingAddressRequirement??`country`;if(e.kind===`card`){let r=[D(t),O([D(t),D(t)],!1)];return e.additionalFields?.cardholderName&&r.push(D(t)),r.push(...k({labels:t,requirement:n,wrapCountryZip:!1})),r}return[D(t),O([D(t),D(t)],!0),D(t),O([D(`above`),D(`above`)],!0),...k({labels:t,requirement:n,wrapCountryZip:!0})]}function j(e){w();let t=E(`amos-js-form-skeleton`);t.setAttribute(`aria-hidden`,`true`);function n(e){T(t,e.appearance),t.replaceChildren(...A(e))}return n(e),{element:t,update:n}}function M(e){w();let t=E(`amos-js-form-skeleton-input amos-js-wallet-skeleton`);t.setAttribute(`aria-hidden`,`true`);function n(e){T(t,void 0),t.style.height=e.height,t.style.borderRadius=e.borderRadius??`4px`}return n(e),{element:t,update:n}}function N(e){if(typeof e==`number`&&Number.isFinite(e))return`${e}px`;if(typeof e==`string`&&e.trim()!==``)return e.trim()}function P({iframeStyle:e,buttonProps:t}){return N(e?.borderRadius)??N(t?.buttonRadius)??N(t?.style?.borderRadius)??N(t?.style?.[`--apple-pay-button-border-radius`])??`4px`}function F(e){return`${i(e)}/iframe/google-pay?token=${e}`}function I(){return`48px`}function L(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 R({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 z={country:212,full:452},te=80,B={country:400,full:640};function V(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 H(e,t=`country`){let n=new URLSearchParams({token:e,billingAddressRequirement:t});return`${i(e)}/iframe/bank?${n}`}function U(e={cardholderName:!1},t=`country`){return`${(z[t]??z.country)+(e.cardholderName?te:0)}px`}function W(e=`country`){return`${B[e]??B.country}px`}function G(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 K(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 q={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`},J={width:`100%`,transition:`height 200ms ease-in-out`,margin:`0`,opacity:`0`,border:`0`},Y={position:`absolute`,top:`0`,left:`0`,width:`100%`,height:`100%`,margin:`0`,opacity:`0`,transition:`none`,pointerEvents:`none`},X={position:`absolute`,top:`0`,left:`-4px`,width:`calc(100% + 8px)`,height:`100%`,margin:`0`,transition:`none`,pointerEvents:`none`};function Z({src:e,title:t,name:n,height:r,allow:i,className:a,style:o=q}){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 Q({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=j(r);Object.assign(t.style,X),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=q.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=G(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 $({host:e,iframe:t,listenerOptions:n,iframeStyle:r,attachListeners:i}){let a={height:n.height??`48px`,borderRadius:P({iframeStyle:r,buttonProps:n.buttonProps})},o=M(a),s=document.createElement(`div`);s.style.position=`relative`,s.style.width=`100%`,s.style.height=a.height,s.style.overflow=`hidden`,s.setAttribute(`aria-busy`,`true`),Object.assign(t.style,Y),t.style.height=`100%`,s.append(o.element,t),e.appendChild(s);let c=!1,l=!1,u,d=n;function f(){c||(c=!0,u!==void 0&&(clearTimeout(u),u=void 0),t.style.opacity=`1`,t.style.pointerEvents=``,o.element.remove(),s.removeAttribute(`aria-busy`))}function p(){c||!l||f()}let m=i(t,{...n,onHeightChange:e=>{d.onHeightChange?.(e)},onAppearanceReady:()=>{l=!0,p(),d.onAppearanceReady?.()}});return u=setTimeout(()=>{f()},1500),{iframe:t,update(e){d={...d,...e};let t={...e};delete t.onAppearanceReady,delete t.onHeightChange,m.update(t),a={height:d.height??a.height,borderRadius:P({iframeStyle:r,buttonProps:d.buttonProps})},s.style.height=a.height,c||o.update(a)},destroy(){u!==void 0&&clearTimeout(u),m.destroy(),s.remove()}}}function ne(e,t){let n=K(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t;return Q({host:n,iframe:Z({src:V(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:U(i,a)}),listenerOptions:o,skeletonOptions:{kind:`card`,appearance:o.appearance,additionalFields:i,billingAddressRequirement:a}})}function re(e,t){let n=K(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t;return Q({host:n,iframe:Z({src:H(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:W(i)}),listenerOptions:a,skeletonOptions:{kind:`bank`,appearance:a.appearance,billingAddressRequirement:i}})}function ie(e,t){let n=K(e),{renderToken:r,iframeClassName:i,iframeStyle:a,...o}=t,s=Z({src:F(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:o.height??I(),allow:`payment`,className:i,style:J});return Object.assign(s.style,a),$({host:n,iframe:s,listenerOptions:o,iframeStyle:a,attachListeners:L})}function ae(e,t){let n=K(e),{renderToken:r,iframeClassName:i,iframeStyle:a,...o}=t,s=Z({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:J});return Object.assign(s.style,a),$({host:n,iframe:s,listenerOptions:o,iframeStyle:a,attachListeners:b})}exports.SKELETON_STYLES=C,exports.attachApplePayButtonListeners=b,exports.attachGooglePayButtonListeners=L,exports.attachPaymentMethodFormListeners=G,exports.confirmPaymentIntent=h,exports.confirmSetupIntent=g,exports.createMessage=a,exports.createPaymentMethodFormSkeleton=j,exports.createWalletButtonSkeleton=M,exports.decodeJwt=r,exports.ensureSkeletonStyles=w,exports.formatGooglePayPaymentData=R,exports.getApplePayButtonInitialHeight=y,exports.getApplePayButtonSrc=v,exports.getBankAccountFormInitialHeight=W,exports.getBankAccountFormSrc=H,exports.getCreditCardFormInitialHeight=U,exports.getCreditCardFormSrc=V,exports.getEmbedOrigin=i,exports.getGooglePayButtonInitialHeight=I,exports.getGooglePayButtonSrc=F,exports.mountAmosApplePayButton=ae,exports.mountAmosBankAccountPaymentMethodForm=re,exports.mountAmosCreditCardPaymentMethodForm=ne,exports.mountAmosGooglePayButton=ie,exports.resetForm=m,exports.resolveWalletButtonSkeletonBorderRadius=P,exports.sendConfirmationResult=_,exports.sendParentReadyMessage=s,exports.updateAmount=d,exports.updateAppearance=c,exports.updateApplePayButton=l,exports.updateGooglePayButton=u,exports.updateMerchantName=f,exports.validateForm=p;

package/dist/index.mjs

@@ -178,10 +178,10 @@ function v(e) {
 function y() {
 	return "48px";
 }
-function b(e) {
+function ee(e) {
 	e.contentWindow?.postMessage(a({ type: "APPLE_PAY_CANCEL" }), o(e));
 }
-function x(e, { height: r = "48px", ...i }) {
+function b(e, { height: r = "48px", ...i }) {
 	let a = {
 		...i,
 		height: r
@@ -227,7 +227,7 @@ function x(e, { height: r = "48px", ...i }) {
 				break;
 			case "APPLE_PAY_WINDOW_OPEN":
 				t({ onCancel: () => {
-					b(e), n();
+					ee(e), n();
 				} });
 				break;
 			case "APPLE_PAY_WINDOW_CLOSE":
@@ -266,14 +266,114 @@ function x(e, { height: r = "48px", ...i }) {
 	};
 }
 //#endregion
+//#region src/form-skeleton.ts
+var x = "amos-js-form-skeleton-styles", S = {
+	"--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"
+}, C = "\n.amos-js-form-skeleton {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  margin: 0 -4px;\n  padding-block: 0.25rem;\n  pointer-events: none;\n  width: calc(100% + 8px);\n}\n.amos-js-form-skeleton-field {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  min-width: 0;\n  width: 100%;\n}\n.amos-js-form-skeleton-label {\n  flex-shrink: 0;\n  font-size: var(--label-font-size);\n  height: 1.75rem;\n  line-height: 1.75rem;\n}\n.amos-js-form-skeleton-input {\n  animation: amos-js-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  background: var(--accent);\n  border-radius: calc(var(--radius) * 0.8);\n  box-sizing: border-box;\n  height: var(--input-height);\n  width: 100%;\n}\n.amos-js-form-skeleton-input-floating {\n  height: var(--floating-input-height);\n}\n.amos-js-form-skeleton-row {\n  align-items: flex-start;\n  display: flex;\n  gap: var(--control-gap);\n  width: 100%;\n}\n.amos-js-form-skeleton-row-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  width: 100%;\n}\n@container (min-width: 24rem) {\n  .amos-js-form-skeleton-row-stack {\n    align-items: flex-start;\n    flex-direction: row;\n    gap: var(--control-gap);\n  }\n}\n.amos-js-wallet-skeleton {\n  flex: none;\n  width: 100%;\n}\n@keyframes amos-js-skeleton-pulse {\n  50% { opacity: 0.5; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .amos-js-form-skeleton-input {\n    animation: none;\n  }\n}\n";
+function w() {
+	if (document.getElementById(x)) return;
+	let e = document.createElement("style");
+	e.id = x, e.textContent = C, document.head.appendChild(e);
+}
+function T(e, t) {
+	for (let [t, n] of Object.entries(S)) 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 E(e, t) {
+	let n = document.createElement("div");
+	if (n.className = e, t) for (let e of t) n.appendChild(e);
+	return n;
+}
+function D(e, t) {
+	let n = E("amos-js-form-skeleton-field");
+	t !== void 0 && (n.style.flexGrow = String(t)), e === "above" && n.appendChild(E("amos-js-form-skeleton-label"));
+	let r = E("amos-js-form-skeleton-input");
+	return e === "floating" && r.classList.add("amos-js-form-skeleton-input-floating"), n.appendChild(r), n;
+}
+function O(e, t) {
+	return E(t ? "amos-js-form-skeleton-row-stack" : "amos-js-form-skeleton-row", e);
+}
+function k({ labels: e, requirement: t, wrapCountryZip: n }) {
+	return t === "full" ? [
+		D(e),
+		D(e),
+		O([
+			D(e, 1.4),
+			D(e, .7),
+			D(e, .8)
+		], !1),
+		D(e)
+	] : [O([D(e), D(e)], n)];
+}
+function A(e) {
+	let t = e.appearance?.labels ?? "above", n = e.billingAddressRequirement ?? "country";
+	if (e.kind === "card") {
+		let r = [D(t), O([D(t), D(t)], !1)];
+		return e.additionalFields?.cardholderName && r.push(D(t)), r.push(...k({
+			labels: t,
+			requirement: n,
+			wrapCountryZip: !1
+		})), r;
+	}
+	return [
+		D(t),
+		O([D(t), D(t)], !0),
+		D(t),
+		O([D("above"), D("above")], !0),
+		...k({
+			labels: t,
+			requirement: n,
+			wrapCountryZip: !0
+		})
+	];
+}
+function j(e) {
+	w();
+	let t = E("amos-js-form-skeleton");
+	t.setAttribute("aria-hidden", "true");
+	function n(e) {
+		T(t, e.appearance), t.replaceChildren(...A(e));
+	}
+	return n(e), {
+		element: t,
+		update: n
+	};
+}
+function M(e) {
+	w();
+	let t = E("amos-js-form-skeleton-input amos-js-wallet-skeleton");
+	t.setAttribute("aria-hidden", "true");
+	function n(e) {
+		T(t, void 0), t.style.height = e.height, t.style.borderRadius = e.borderRadius ?? "4px";
+	}
+	return n(e), {
+		element: t,
+		update: n
+	};
+}
+function N(e) {
+	if (typeof e == "number" && Number.isFinite(e)) return `${e}px`;
+	if (typeof e == "string" && e.trim() !== "") return e.trim();
+}
+function P({ iframeStyle: e, buttonProps: t }) {
+	return N(e?.borderRadius) ?? N(t?.buttonRadius) ?? N(t?.style?.borderRadius) ?? N(t?.style?.["--apple-pay-button-border-radius"]) ?? "4px";
+}
+//#endregion
 //#region src/google-pay.ts
-function S(e) {
+function F(e) {
 	return `${i(e)}/iframe/google-pay?token=${e}`;
 }
-function C() {
+function I() {
 	return "48px";
 }
-function w(e, { height: t = "48px", ...n }) {
+function L(e, { height: t = "48px", ...n }) {
 	let r = {
 		...n,
 		height: t
@@ -349,7 +449,7 @@ function w(e, { height: t = "48px", ...n }) {
 		}
 	};
 }
-function T({ paymentData: e }) {
+function R({ paymentData: e }) {
 	return { paymentMethod: {
 		type: "googlepay",
 		billing_address_attributes: {
@@ -367,96 +467,15 @@ function T({ paymentData: e }) {
 	} };
 }
 //#endregion
-//#region src/form-skeleton.ts
-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 = "\n.amos-js-form-skeleton {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  margin: 0 -4px;\n  padding-block: 0.25rem;\n  pointer-events: none;\n  width: calc(100% + 8px);\n}\n.amos-js-form-skeleton-field {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  min-width: 0;\n  width: 100%;\n}\n.amos-js-form-skeleton-label {\n  flex-shrink: 0;\n  font-size: var(--label-font-size);\n  height: 1.75rem;\n  line-height: 1.75rem;\n}\n.amos-js-form-skeleton-input {\n  animation: amos-js-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  background: var(--accent);\n  border-radius: calc(var(--radius) * 0.8);\n  box-sizing: border-box;\n  height: var(--input-height);\n  width: 100%;\n}\n.amos-js-form-skeleton-input-floating {\n  height: var(--floating-input-height);\n}\n.amos-js-form-skeleton-row {\n  align-items: flex-start;\n  display: flex;\n  gap: var(--control-gap);\n  width: 100%;\n}\n.amos-js-form-skeleton-row-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  width: 100%;\n}\n@container (min-width: 24rem) {\n  .amos-js-form-skeleton-row-stack {\n    align-items: flex-start;\n    flex-direction: row;\n    gap: var(--control-gap);\n  }\n}\n@keyframes amos-js-skeleton-pulse {\n  50% { opacity: 0.5; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .amos-js-form-skeleton-input {\n    animation: none;\n  }\n}\n";
-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
-	};
-}
-//#endregion
 //#region src/payment-method-form.ts
-var L = {
+var z = {
 	country: 212,
 	full: 452
-}, R = 80, z = {
+}, te = 80, B = {
 	country: 400,
 	full: 640
 };
-function B(e, t = { cardholderName: !1 }, n = "country") {
+function V(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,
@@ -464,20 +483,20 @@ function B(e, t = { cardholderName: !1 }, n = "country") {
 	});
 	return `${i(e)}/iframe/card?${a}`;
 }
-function V(e, t = "country") {
+function H(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 = { cardholderName: !1 }, t = "country") {
+	return `${(z[t] ?? z.country) + (e.cardholderName ? te : 0)}px`;
 }
-function U(e = "country") {
-	return `${z[e] ?? z.country}px`;
+function W(e = "country") {
+	return `${B[e] ?? B.country}px`;
 }
-function W(e, t) {
+function G(e, t) {
 	let n = { ...t };
 	function r(t) {
 		if (t.source === e.contentWindow) switch (t.data.type) {
@@ -523,7 +542,7 @@ function W(e, t) {
 }
 //#endregion
 //#region src/mount.ts
-function G(e) {
+function K(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.`);
@@ -531,19 +550,29 @@ function G(e) {
 	}
 	return e;
 }
-var K = {
+var q = {
 	width: "calc(100% + 8px)",
 	transition: "opacity 150ms ease-in, height 200ms ease-in-out",
 	margin: "0 -4px",
 	opacity: "0",
 	border: "0"
-}, q = {
+}, J = {
 	width: "100%",
 	transition: "height 200ms ease-in-out",
 	margin: "0",
 	opacity: "0",
 	border: "0"
-}, J = {
+}, Y = {
+	position: "absolute",
+	top: "0",
+	left: "0",
+	width: "100%",
+	height: "100%",
+	margin: "0",
+	opacity: "0",
+	transition: "none",
+	pointerEvents: "none"
+}, X = {
 	position: "absolute",
 	top: "0",
 	left: "-4px",
@@ -553,15 +582,15 @@ var K = {
 	transition: "none",
 	pointerEvents: "none"
 };
-function Y({ src: e, title: t, name: n, height: r, allow: i, className: a, style: o = K }) {
+function Z({ src: e, title: t, name: n, height: r, allow: i, className: a, style: o = q }) {
 	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 }) {
+function Q({ 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 a = j(r);
+	Object.assign(t.style, X), 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;
@@ -573,7 +602,7 @@ function X({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
 		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 = "none", t.style.position = "", t.style.top = "", t.style.left = "", t.style.margin = q.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);
 	}
@@ -582,7 +611,7 @@ function X({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
 		let e = p(), t = f();
 		Number.isFinite(e) && e >= t - 2 && m();
 	}
-	let g = W(t, {
+	let g = G(t, {
 		...n,
 		onHeightChange: (e) => {
 			c = e, o ? t.style.height = e : h(), n.onHeightChange?.(e);
@@ -606,15 +635,63 @@ function X({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
 		}
 	};
 }
-function Z(e, t) {
-	let n = G(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t;
-	return X({
+function $({ host: e, iframe: t, listenerOptions: n, iframeStyle: r, attachListeners: i }) {
+	let a = {
+		height: n.height ?? "48px",
+		borderRadius: P({
+			iframeStyle: r,
+			buttonProps: n.buttonProps
+		})
+	}, o = M(a), s = document.createElement("div");
+	s.style.position = "relative", s.style.width = "100%", s.style.height = a.height, s.style.overflow = "hidden", s.setAttribute("aria-busy", "true"), Object.assign(t.style, Y), t.style.height = "100%", s.append(o.element, t), e.appendChild(s);
+	let c = !1, l = !1, u, d = n;
+	function f() {
+		c || (c = !0, u !== void 0 && (clearTimeout(u), u = void 0), t.style.opacity = "1", t.style.pointerEvents = "", o.element.remove(), s.removeAttribute("aria-busy"));
+	}
+	function p() {
+		c || !l || f();
+	}
+	let m = i(t, {
+		...n,
+		onHeightChange: (e) => {
+			d.onHeightChange?.(e);
+		},
+		onAppearanceReady: () => {
+			l = !0, p(), d.onAppearanceReady?.();
+		}
+	});
+	return u = setTimeout(() => {
+		f();
+	}, 1500), {
+		iframe: t,
+		update(e) {
+			d = {
+				...d,
+				...e
+			};
+			let t = { ...e };
+			delete t.onAppearanceReady, delete t.onHeightChange, m.update(t), a = {
+				height: d.height ?? a.height,
+				borderRadius: P({
+					iframeStyle: r,
+					buttonProps: d.buttonProps
+				})
+			}, s.style.height = a.height, c || o.update(a);
+		},
+		destroy() {
+			u !== void 0 && clearTimeout(u), m.destroy(), s.remove();
+		}
+	};
+}
+function ne(e, t) {
+	let n = K(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t;
+	return Q({
 		host: n,
-		iframe: Y({
-			src: B(r, i, a),
+		iframe: Z({
+			src: V(r, i, a),
 			title: "Secure credit card payment method form powered by Amos",
 			name: "amos-credit-card-payment-method-form",
-			height: H(i, a)
+			height: U(i, a)
 		}),
 		listenerOptions: o,
 		skeletonOptions: {
@@ -625,15 +702,15 @@ function Z(e, t) {
 		}
 	});
 }
-function Q(e, t) {
-	let n = G(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t;
-	return X({
+function re(e, t) {
+	let n = K(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t;
+	return Q({
 		host: n,
-		iframe: Y({
-			src: V(r, i),
+		iframe: Z({
+			src: H(r, i),
 			title: "Secure bank account payment method form powered by Amos",
 			name: "amos-bank-account-payment-method-form",
-			height: U(i)
+			height: W(i)
 		}),
 		listenerOptions: a,
 		skeletonOptions: {
@@ -643,61 +720,41 @@ function Q(e, t) {
 		}
 	});
 }
-function $(e, t) {
-	let n = G(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Y({
-		src: S(r),
+function ie(e, t) {
+	let n = K(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Z({
+		src: F(r),
 		title: "Secure Google Pay button powered by Amos",
 		name: "amos-google-pay-button",
-		height: o.height ?? C(),
+		height: o.height ?? I(),
 		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?.();
-		}
+		style: J
 	});
-	return {
+	return Object.assign(s.style, a), $({
+		host: n,
 		iframe: s,
-		update: c.update,
-		destroy() {
-			c.destroy(), s.remove();
-		}
-	};
+		listenerOptions: o,
+		iframeStyle: a,
+		attachListeners: L
+	});
 }
-function ee(e, t) {
-	let n = G(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Y({
+function ae(e, t) {
+	let n = K(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Z({
 		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
+		style: J
 	});
-	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 {
+	return Object.assign(s.style, a), $({
+		host: n,
 		iframe: s,
-		update: c.update,
-		destroy() {
-			c.destroy(), s.remove();
-		}
-	};
+		listenerOptions: o,
+		iframeStyle: a,
+		attachListeners: b
+	});
 }
 //#endregion
-export { x as attachApplePayButtonListeners, w as attachGooglePayButtonListeners, W as attachPaymentMethodFormListeners, h as confirmPaymentIntent, g as confirmSetupIntent, a as createMessage, r as decodeJwt, T as formatGooglePayPaymentData, y as getApplePayButtonInitialHeight, v as getApplePayButtonSrc, U as getBankAccountFormInitialHeight, V as getBankAccountFormSrc, H as getCreditCardFormInitialHeight, B as getCreditCardFormSrc, i as getEmbedOrigin, C as getGooglePayButtonInitialHeight, S as getGooglePayButtonSrc, ee as mountAmosApplePayButton, Q as mountAmosBankAccountPaymentMethodForm, Z as mountAmosCreditCardPaymentMethodForm, $ as mountAmosGooglePayButton, m as resetForm, _ as sendConfirmationResult, s as sendParentReadyMessage, d as updateAmount, c as updateAppearance, l as updateApplePayButton, u as updateGooglePayButton, f as updateMerchantName, p as validateForm };
+export { C as SKELETON_STYLES, b as attachApplePayButtonListeners, L as attachGooglePayButtonListeners, G as attachPaymentMethodFormListeners, h as confirmPaymentIntent, g as confirmSetupIntent, a as createMessage, j as createPaymentMethodFormSkeleton, M as createWalletButtonSkeleton, r as decodeJwt, w as ensureSkeletonStyles, R as formatGooglePayPaymentData, y as getApplePayButtonInitialHeight, v as getApplePayButtonSrc, W as getBankAccountFormInitialHeight, H as getBankAccountFormSrc, U as getCreditCardFormInitialHeight, V as getCreditCardFormSrc, i as getEmbedOrigin, I as getGooglePayButtonInitialHeight, F as getGooglePayButtonSrc, ae as mountAmosApplePayButton, re as mountAmosBankAccountPaymentMethodForm, ne as mountAmosCreditCardPaymentMethodForm, ie as mountAmosGooglePayButton, m as resetForm, P as resolveWalletButtonSkeletonBorderRadius, _ as sendConfirmationResult, s as sendParentReadyMessage, d as updateAmount, c as updateAppearance, l as updateApplePayButton, u as updateGooglePayButton, f as updateMerchantName, p as validateForm };

package/dist/mount.d.ts

@@ -116,6 +116,9 @@ export type AmosGooglePayButtonMountController = GooglePayButtonController & {
  * Mount the secure Google Pay button (express checkout) into a
  * container element. Returns a controller exposing the underlying
  * iframe, an `update()` method, and a `destroy()` method.
+ *
+ * A button-shaped skeleton is shown immediately and replaced by the
+ * iframe once appearance is applied.
  */
 export declare function mountAmosGooglePayButton(container: Container, options: AmosGooglePayButtonOptions): AmosGooglePayButtonMountController;
 /**
@@ -150,6 +153,9 @@ export type AmosApplePayButtonMountController = ApplePayButtonController & {
  * Mount the secure Apple Pay button (express checkout) into a
  * container element. Returns a controller exposing the underlying
  * iframe, an `update()` method, and a `destroy()` method.
+ *
+ * A button-shaped skeleton is shown immediately and replaced by the
+ * iframe once appearance is applied.
  */
 export declare function mountAmosApplePayButton(container: Container, options: AmosApplePayButtonOptions): AmosApplePayButtonMountController;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/amos-js",
-  "version": "0.9.16",
+  "version": "0.9.17",
   "main": "dist/index.js",
   "repository": {
     "type": "git",

package/src/form-skeleton.ts

@@ -16,7 +16,7 @@ const SKELETON_THEME_DEFAULTS: Record<string, string> = {
   "--label-font-size": "0.875rem",
 };
 
-const SKELETON_STYLES = `
+export const SKELETON_STYLES = `
 .amos-js-form-skeleton {
   box-sizing: border-box;
   container-type: inline-size;
@@ -71,6 +71,10 @@ const SKELETON_STYLES = `
     gap: var(--control-gap);
   }
 }
+.amos-js-wallet-skeleton {
+  flex: none;
+  width: 100%;
+}
 @keyframes amos-js-skeleton-pulse {
   50% { opacity: 0.5; }
 }
@@ -81,7 +85,7 @@ const SKELETON_STYLES = `
 }
 `;
 
-function ensureSkeletonStyles(): void {
+export function ensureSkeletonStyles(): void {
   if (document.getElementById(STYLE_ID)) {
     return;
   }
@@ -242,3 +246,74 @@ export function createPaymentMethodFormSkeleton(
     update: render,
   };
 }
+
+export type WalletButtonSkeletonOptions = {
+  /** Painted height of the wallet button slot (CSS length). */
+  height: string;
+  /** Corner radius matching the iframe / native button. */
+  borderRadius?: string;
+};
+
+export type WalletButtonSkeleton = {
+  element: HTMLElement;
+  update: (options: WalletButtonSkeletonOptions) => void;
+};
+
+/**
+ * Host-page placeholder for Google Pay / Apple Pay: a pulsing bar at
+ * the button's height. Shown immediately while the iframe loads, then
+ * removed when appearance is ready.
+ */
+export function createWalletButtonSkeleton(
+  options: WalletButtonSkeletonOptions,
+): WalletButtonSkeleton {
+  ensureSkeletonStyles();
+  const element = div("amos-js-form-skeleton-input amos-js-wallet-skeleton");
+  element.setAttribute("aria-hidden", "true");
+
+  function render(next: WalletButtonSkeletonOptions): void {
+    applyTheme(element, undefined);
+    element.style.height = next.height;
+    element.style.borderRadius = next.borderRadius ?? "4px";
+  }
+
+  render(options);
+
+  return {
+    element,
+    update: render,
+  };
+}
+
+function cssLength(value: unknown): string | undefined {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return `${value}px`;
+  }
+  if (typeof value === "string" && value.trim() !== "") {
+    return value.trim();
+  }
+  return undefined;
+}
+
+/**
+ * Corner radius for a wallet-button skeleton. Prefers host iframe
+ * chrome, then native Google / Apple button radius, then 4px.
+ */
+export function resolveWalletButtonSkeletonBorderRadius({
+  iframeStyle,
+  buttonProps,
+}: {
+  iframeStyle?: { borderRadius?: string | number };
+  buttonProps?: {
+    buttonRadius?: number;
+    style?: Record<string, string | number | undefined>;
+  };
+}): string {
+  return (
+    cssLength(iframeStyle?.borderRadius) ??
+    cssLength(buttonProps?.buttonRadius) ??
+    cssLength(buttonProps?.style?.["borderRadius"]) ??
+    cssLength(buttonProps?.style?.["--apple-pay-button-border-radius"]) ??
+    "4px"
+  );
+}

package/src/index.ts

@@ -9,7 +9,20 @@ export {
   getApplePayButtonInitialHeight,
   getApplePayButtonSrc,
 } from "./apple-pay";
-
+export type {
+  PaymentMethodFormSkeleton,
+  PaymentMethodFormSkeletonKind,
+  PaymentMethodFormSkeletonOptions,
+  WalletButtonSkeleton,
+  WalletButtonSkeletonOptions,
+} from "./form-skeleton";
+export {
+  createPaymentMethodFormSkeleton,
+  createWalletButtonSkeleton,
+  ensureSkeletonStyles,
+  resolveWalletButtonSkeletonBorderRadius,
+  SKELETON_STYLES,
+} from "./form-skeleton";
 export type {
   FormattedGooglePayPaymentData,
   GooglePayButtonController,
@@ -21,7 +34,6 @@ export {
   getGooglePayButtonInitialHeight,
   getGooglePayButtonSrc,
 } from "./google-pay";
-
 export { decodeJwt, getEmbedOrigin } from "./jwt";
 
 export {

package/src/mount.ts

@@ -7,7 +7,11 @@ import {
 } from "./apple-pay";
 import {
   createPaymentMethodFormSkeleton,
+  createWalletButtonSkeleton,
   type PaymentMethodFormSkeletonOptions,
+  resolveWalletButtonSkeletonBorderRadius,
+  type WalletButtonSkeleton,
+  type WalletButtonSkeletonOptions,
 } from "./form-skeleton";
 import {
   attachGooglePayButtonListeners,
@@ -59,6 +63,19 @@ const WALLET_IFRAME_STYLE: Partial<CSSStyleDeclaration> = {
   border: "0",
 };
 
+const WALLET_SKELETON_IFRAME_STYLE: Partial<CSSStyleDeclaration> = {
+  position: "absolute",
+  top: "0",
+  left: "0",
+  width: "100%",
+  height: "100%",
+  margin: "0",
+  opacity: "0",
+  // Do not interpolate opacity while the skeleton is showing.
+  transition: "none",
+  pointerEvents: "none",
+};
+
 const SKELETON_IFRAME_STYLE: Partial<CSSStyleDeclaration> = {
   position: "absolute",
   top: "0",
@@ -231,6 +248,141 @@ function mountPaymentMethodFormWithSkeleton({
   };
 }
 
+type WalletListenerOptions = {
+  height?: string;
+  onHeightChange?: (height: string) => void;
+  onAppearanceReady?: () => void;
+  buttonProps?: {
+    buttonRadius?: number;
+    style?: Record<string, string | number | undefined>;
+  };
+};
+
+type WalletListenerController<TOptions> = {
+  update: (patch: Partial<TOptions>) => void;
+  destroy: () => void;
+};
+
+function mountWalletButtonWithSkeleton<TOptions extends WalletListenerOptions>({
+  host,
+  iframe,
+  listenerOptions,
+  iframeStyle,
+  attachListeners,
+}: {
+  host: HTMLElement;
+  iframe: HTMLIFrameElement;
+  listenerOptions: TOptions;
+  iframeStyle?: Partial<CSSStyleDeclaration>;
+  attachListeners: (
+    iframe: HTMLIFrameElement,
+    options: TOptions,
+  ) => WalletListenerController<TOptions>;
+}): {
+  iframe: HTMLIFrameElement;
+  update: (patch: Partial<TOptions>) => void;
+  destroy: () => void;
+} {
+  const initialHeight = listenerOptions.height ?? "48px";
+  let skeletonOptions: WalletButtonSkeletonOptions = {
+    height: initialHeight,
+    borderRadius: resolveWalletButtonSkeletonBorderRadius({
+      iframeStyle,
+      buttonProps: listenerOptions.buttonProps,
+    }),
+  };
+  const skeleton: WalletButtonSkeleton =
+    createWalletButtonSkeleton(skeletonOptions);
+
+  const wrapper = document.createElement("div");
+  wrapper.style.position = "relative";
+  wrapper.style.width = "100%";
+  wrapper.style.height = skeletonOptions.height;
+  wrapper.style.overflow = "hidden";
+  wrapper.setAttribute("aria-busy", "true");
+
+  Object.assign(iframe.style, WALLET_SKELETON_IFRAME_STYLE);
+  iframe.style.height = "100%";
+
+  wrapper.append(skeleton.element, iframe);
+  host.appendChild(wrapper);
+
+  let revealed = false;
+  let appearanceReady = false;
+  let fallbackRevealTimer: ReturnType<typeof setTimeout> | undefined;
+  let currentOptions = listenerOptions;
+
+  function reveal(): void {
+    if (revealed) {
+      return;
+    }
+    revealed = true;
+    if (fallbackRevealTimer !== undefined) {
+      clearTimeout(fallbackRevealTimer);
+      fallbackRevealTimer = undefined;
+    }
+
+    iframe.style.opacity = "1";
+    iframe.style.pointerEvents = "";
+    skeleton.element.remove();
+    wrapper.removeAttribute("aria-busy");
+  }
+
+  function tryReveal(): void {
+    if (revealed || !appearanceReady) {
+      return;
+    }
+    reveal();
+  }
+
+  const controller = attachListeners(iframe, {
+    ...listenerOptions,
+    onHeightChange: (height) => {
+      currentOptions.onHeightChange?.(height);
+    },
+    onAppearanceReady: () => {
+      appearanceReady = true;
+      tryReveal();
+      currentOptions.onAppearanceReady?.();
+    },
+  } as TOptions);
+
+  fallbackRevealTimer = setTimeout(() => {
+    reveal();
+  }, 1500);
+
+  return {
+    iframe,
+    update(patch) {
+      currentOptions = { ...currentOptions, ...patch };
+      // Keep the wrapped reveal listeners. Forwarding these would replace
+      // them and leave the iframe at opacity 0.
+      const rest = { ...patch };
+      delete rest.onAppearanceReady;
+      delete rest.onHeightChange;
+      controller.update(rest);
+      skeletonOptions = {
+        height: currentOptions.height ?? skeletonOptions.height,
+        borderRadius: resolveWalletButtonSkeletonBorderRadius({
+          iframeStyle,
+          buttonProps: currentOptions.buttonProps,
+        }),
+      };
+      wrapper.style.height = skeletonOptions.height;
+      if (!revealed) {
+        skeleton.update(skeletonOptions);
+      }
+    },
+    destroy() {
+      if (fallbackRevealTimer !== undefined) {
+        clearTimeout(fallbackRevealTimer);
+      }
+      controller.destroy();
+      wrapper.remove();
+    },
+  };
+}
+
 /**
  * Options accepted by {@link mountAmosCreditCardPaymentMethodForm}.
  */
@@ -420,6 +572,9 @@ export type AmosGooglePayButtonMountController = GooglePayButtonController & {
  * Mount the secure Google Pay button (express checkout) into a
  * container element. Returns a controller exposing the underlying
  * iframe, an `update()` method, and a `destroy()` method.
+ *
+ * A button-shaped skeleton is shown immediately and replaced by the
+ * iframe once appearance is applied.
  */
 export function mountAmosGooglePayButton(
   container: Container,
@@ -439,28 +594,14 @@ export function mountAmosGooglePayButton(
     style: WALLET_IFRAME_STYLE,
   });
   Object.assign(iframe.style, iframeStyle);
-  host.appendChild(iframe);
 
-  const controller = attachGooglePayButtonListeners(iframe, {
-    ...listenerOptions,
-    onHeightChange: (height) => {
-      iframe.style.height = height;
-      listenerOptions.onHeightChange?.(height);
-    },
-    onAppearanceReady: () => {
-      iframe.style.opacity = "1";
-      listenerOptions.onAppearanceReady?.();
-    },
-  });
-
-  return {
+  return mountWalletButtonWithSkeleton({
+    host,
     iframe,
-    update: controller.update,
-    destroy() {
-      controller.destroy();
-      iframe.remove();
-    },
-  };
+    listenerOptions,
+    iframeStyle,
+    attachListeners: attachGooglePayButtonListeners,
+  });
 }
 
 /**
@@ -497,6 +638,9 @@ export type AmosApplePayButtonMountController = ApplePayButtonController & {
  * Mount the secure Apple Pay button (express checkout) into a
  * container element. Returns a controller exposing the underlying
  * iframe, an `update()` method, and a `destroy()` method.
+ *
+ * A button-shaped skeleton is shown immediately and replaced by the
+ * iframe once appearance is applied.
  */
 export function mountAmosApplePayButton(
   container: Container,
@@ -516,26 +660,12 @@ export function mountAmosApplePayButton(
     style: WALLET_IFRAME_STYLE,
   });
   Object.assign(iframe.style, iframeStyle);
-  host.appendChild(iframe);
-
-  const controller = attachApplePayButtonListeners(iframe, {
-    ...listenerOptions,
-    onHeightChange: (height) => {
-      iframe.style.height = height;
-      listenerOptions.onHeightChange?.(height);
-    },
-    onAppearanceReady: () => {
-      iframe.style.opacity = "1";
-      listenerOptions.onAppearanceReady?.();
-    },
-  });
 
-  return {
+  return mountWalletButtonWithSkeleton({
+    host,
     iframe,
-    update: controller.update,
-    destroy() {
-      controller.destroy();
-      iframe.remove();
-    },
-  };
+    listenerOptions,
+    iframeStyle,
+    attachListeners: attachApplePayButtonListeners,
+  });
 }