@amos.com/amos-js 0.6.1 → 0.7.1

package/dist/apple-pay-waiting-overlay.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Create (or return existing) full-viewport waiting UI on the host page while
+ * Apple Pay Code runs in a separate window. Cancel invokes `onCancel`.
+ */
+export declare function showApplePayWaitingOverlay({ onCancel, }: {
+    onCancel: () => void;
+}): HTMLElement;
+/** Remove the host-page Apple Pay waiting overlay if present. */
+export declare function hideApplePayWaitingOverlay(): void;

package/dist/apple-pay.d.ts

@@ -74,8 +74,8 @@ export type ApplePayButtonController = {
  * correct `src` (see {@link getApplePayButtonSrc}).
  *
  * The Apple Pay button and `ApplePaySession` run inside the Amos embed
- * iframe (so only Amos domains need Apple merchant registration). On
- * `EXPAND_IFRAME`, the parent temporarily overlays that iframe
- * full-viewport for Chrome's in-iframe QR handoff UI.
+ * iframe so only Amos domains need Apple merchant registration. While
+ * Apple Pay Code is open in a separate window, this host paints a
+ * waiting overlay and can cancel via {@link Message} `APPLE_PAY_CANCEL`.
  */
 export declare function attachApplePayButtonListeners(iframe: HTMLIFrameElement, options: ApplePayButtonListenerOptions): ApplePayButtonController;

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { attachApplePayButtonListeners, getApplePayButtonInitialHeight, getApple
 export type { FormattedGooglePayPaymentData, GooglePayButtonController, GooglePayButtonListenerOptions, } from './google-pay';
 export { attachGooglePayButtonListeners, formatGooglePayPaymentData, getGooglePayButtonInitialHeight, getGooglePayButtonSrc, } from './google-pay';
 export { decodeJwt, getEmbedOrigin } from './jwt';
-export { confirmPaymentIntent, confirmSetupIntent, hasNativeApplePaySession, sendConfirmationFailed, sendParentReadyMessage, updateAmount, updateAppearance, updateMerchantName, updateNativeApplePaySession, validateForm, } from './messaging';
+export { confirmPaymentIntent, confirmSetupIntent, sendConfirmationFailed, sendParentReadyMessage, updateAmount, updateAppearance, updateMerchantName, validateForm, } from './messaging';
 export type { AmosApplePayButtonMountController, AmosApplePayButtonOptions, AmosBankAccountPaymentMethodFormOptions, AmosCreditCardPaymentMethodFormOptions, AmosGooglePayButtonMountController, AmosGooglePayButtonOptions, AmosPaymentMethodFormMountController, } from './mount';
 export { mountAmosApplePayButton, mountAmosBankAccountPaymentMethodForm, mountAmosCreditCardPaymentMethodForm, mountAmosGooglePayButton, } from './mount';
 export type { BillingAddressRequirement, CreditCardAdditionalFields, PaymentMethodFormController, PaymentMethodFormListenerOptions, } from './payment-method-form';

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(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 t(t){let{env:n=`sandbox`}=e(t).payload;switch(n){case`production`:return`https://embed.amos.com`;case`sandbox`:return`https://embed-sandbox.amos.com`;default:return`https://embed-sandbox.amos.com`}}function n(e){return e}function r(e){e?.contentWindow?.postMessage(n({type:`PARENT_ACKNOWLEDGED_IFRAME_READY`}),`*`)}function i({iframe:e,appearance:t={}}){e?.contentWindow?.postMessage(n({type:`UPDATE_APPEARANCE`,appearance:t}),`*`)}function a({iframe:e,amount:t}){e?.contentWindow?.postMessage(n({type:`UPDATE_AMOUNT`,amount:t}),`*`)}function o({iframe:e,merchantName:t}){e?.contentWindow?.postMessage(n({type:`UPDATE_MERCHANT_NAME`,merchantName:t}),`*`)}function s(){return`ApplePaySession`in globalThis}function c({iframe:e,hasNativeApplePaySession:t}){e?.contentWindow?.postMessage(n({type:`UPDATE_NATIVE_APPLE_PAY_SESSION`,hasNativeApplePaySession:t}),`*`)}function l({iframe:e}){let t=crypto.randomUUID();return new Promise(r=>{e?.contentWindow?.postMessage(n({type:`VALIDATE_FORM`,requestId:t}),`*`);let i=setTimeout(()=>{window.removeEventListener(`message`,a),r(!1)},5e3);function a(e){e.data.type===`VALIDATE_FORM`&&e.data.requestId===t&&(window.removeEventListener(`message`,a),clearTimeout(i),r(e.data.isValid??!1))}window.addEventListener(`message`,a)})}function u({iframe:t,token:r}){let{payment_intent_id:i}=e(r).payload;t?.contentWindow?.postMessage(n({type:`CONFIRM_PAYMENT_INTENT`,token:r,id:i??void 0}),`*`)}function d({iframe:t,token:r}){let{setup_intent_id:i}=e(r).payload;t?.contentWindow?.postMessage(n({type:`CONFIRM_SETUP_INTENT`,token:r,id:i??void 0}),`*`)}function f({iframe:e,errorMessage:t}){e?.contentWindow?.postMessage(n({type:`CONFIRMATION_FAILED`,errorMessage:t}),`*`)}function p(e){return`${t(e)}/iframe/apple-pay?token=${e}`}function m(){return`40px`}function h(e){let t={cssText:e.style.cssText,bodyOverflow:document.body.style.overflow};return document.body.style.overflow=`hidden`,Object.assign(e.style,{position:`fixed`,inset:`0px`,width:`100vw`,height:`100vh`,maxWidth:`none`,maxHeight:`none`,margin:`0`,border:`0`,zIndex:`2147483647`,opacity:`1`,background:`#ffffff`}),t}function g(e,t){t&&(document.body.style.overflow=t.bodyOverflow,e.style.cssText=t.cssText)}function _(e,t){let n={...t},l=null;function d(){a({iframe:e,amount:n.amount})}function p(){o({iframe:e,merchantName:n.merchantName})}function m(){c({iframe:e,hasNativeApplePaySession:s()})}function _(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:r(e),i({iframe:e,appearance:n.appearance}),m(),d(),p();break;case`UPDATE_HEIGHT`:l||n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:i({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`EXPAND_IFRAME`:l||=h(e);break;case`COLLAPSE_IFRAME`:g(e,l),l=null;break;case`CREATE_PAYMENT_INTENT`:n.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:t.data.paymentIntentCreateAttributes,customerCreateAttributes:t.data.customerCreateAttributes}).then(t=>{u({iframe:e,token:t})}).catch(t=>{f({iframe:e,errorMessage:t instanceof Error?t.message:`Unknown error`})});break;case`PAYMENT_INTENT_CONFIRMATION_SUCCEEDED`:n.onPaymentIntentConfirmationSucceeded(t.data.paymentIntent);break;case`CONFIRMATION_FAILED`:n.onConfirmationFailed(t.data.errorMessage);break}}return window.addEventListener(`message`,_),{update(t){let r=`appearance`in t,a=`amount`in t,o=`merchantName`in t;n={...n,...t},r&&i({iframe:e,appearance:n.appearance}),a&&d(),o&&p()},destroy(){window.removeEventListener(`message`,_),g(e,l),l=null}}}function v(e){return`${t(e)}/iframe/google-pay?token=${e}`}function y(){return`40px`}function b(e,t){let n={...t};function s(){a({iframe:e,amount:n.amount})}function c(){o({iframe:e,merchantName:n.merchantName})}function l(t){switch(t.data.type){case`IFRAME_READY`:r(e),i({iframe:e,appearance:n.appearance}),s(),c();break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:i({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`CREATE_PAYMENT_INTENT`:n.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:t.data.paymentIntentCreateAttributes,customerCreateAttributes:t.data.customerCreateAttributes}).then(t=>{u({iframe:e,token:t})}).catch(t=>{f({iframe:e,errorMessage:t instanceof Error?t.message:`Unknown error`})});break;case`PAYMENT_INTENT_CONFIRMATION_SUCCEEDED`:n.onPaymentIntentConfirmationSucceeded(t.data.paymentIntent);break;case`CONFIRMATION_FAILED`:n.onConfirmationFailed(t.data.errorMessage);break}}return window.addEventListener(`message`,l),{update(t){let r=`appearance`in t,a=`amount`in t,o=`merchantName`in t;n={...n,...t},r&&i({iframe:e,appearance:n.appearance}),a&&s(),o&&c()},destroy(){window.removeEventListener(`message`,l)}}}function x({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_provider:`googlepay`,wallet_payload:e.paymentMethodData.tokenizationData.token,wallet_last4:e.paymentMethodData.info?.cardDetails,wallet_brand:(()=>{switch(e.paymentMethodData.info?.cardNetwork){case`AMEX`:return`american_express`;case`VISA`:return`visa`;case`MASTERCARD`:return`master`;case`DISCOVER`:return`discover`;default:return}})()}}}}var S={country:212,full:452},C=80,w={country:400,full:640};function T(e,n={cardholderName:!1},r=`country`){let i=Object.entries(n).filter(([,e])=>e).map(([e])=>e).join(`,`),a=new URLSearchParams({token:e,additionalFields:i,billingAddressRequirement:r});return`${t(e)}/iframe/card?${a}`}function E(e,n=`country`){let r=new URLSearchParams({token:e,billingAddressRequirement:n});return`${t(e)}/iframe/bank?${r}`}function D(e={cardholderName:!1},t=`country`){return`${(S[t]??S.country)+(e.cardholderName?C:0)}px`}function O(e=`country`){return`${w[e]??w.country}px`}function k(e,t){let n={...t};function a(t){switch(t.data.type){case`IFRAME_READY`:r(e),i({iframe:e,appearance:n.appearance});break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:i({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`PAYMENT_INTENT_CONFIRMATION_SUCCEEDED`:n.onPaymentIntentConfirmationSucceeded?.(t.data.paymentIntent);break;case`SETUP_INTENT_CONFIRMATION_SUCCEEDED`:n.onSetupIntentConfirmationSucceeded?.(t.data.setupIntent);break;case`CONFIRMATION_FAILED`:n.onConfirmationFailed(t.data.errorMessage);break}}return window.addEventListener(`message`,a),{update(t){let r=`appearance`in t;n={...n,...t},r&&i({iframe:e,appearance:n.appearance})},destroy(){window.removeEventListener(`message`,a)}}}function A(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 j={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`};function M({src:e,title:t,name:n,height:r,allow:i}){let a=document.createElement(`iframe`);return a.src=e,a.title=t,a.name=n,a.setAttribute(`role`,`presentation`),a.scrolling=`no`,i&&(a.allow=i),Object.assign(a.style,j,{height:r}),a}function N(e,t){let n=A(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t,s=M({src:T(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:D(i,a)});n.appendChild(s);let c=k(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 P(e,t){let n=A(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t,o=M({src:E(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:O(i)});n.appendChild(o);let s=k(o,{...a,onHeightChange:e=>{o.style.height=e,a.onHeightChange?.(e)},onAppearanceReady:()=>{o.style.opacity=`1`,a.onAppearanceReady?.()}});return{iframe:o,update:s.update,destroy(){s.destroy(),o.remove()}}}function F(e,t){let n=A(e),{renderToken:r,...i}=t,a=M({src:v(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:y(),allow:`payment`});n.appendChild(a);let o=b(a,{...i,onHeightChange:e=>{a.style.height=e,i.onHeightChange?.(e)},onAppearanceReady:()=>{a.style.opacity=`1`,i.onAppearanceReady?.()}});return{iframe:a,update:o.update,destroy(){o.destroy(),a.remove()}}}function I(e,t){let n=A(e),{renderToken:r,...i}=t,a=M({src:p(r),title:`Secure Apple Pay button powered by Amos`,name:`amos-apple-pay-button`,height:m(),allow:`payment`});n.appendChild(a);let o=_(a,{...i,onHeightChange:e=>{a.style.height=e,i.onHeightChange?.(e)},onAppearanceReady:()=>{a.style.opacity=`1`,i.onAppearanceReady?.()}});return{iframe:a,update:o.update,destroy(){o.destroy(),a.remove()}}}exports.attachApplePayButtonListeners=_,exports.attachGooglePayButtonListeners=b,exports.attachPaymentMethodFormListeners=k,exports.confirmPaymentIntent=u,exports.confirmSetupIntent=d,exports.createMessage=n,exports.decodeJwt=e,exports.formatGooglePayPaymentData=x,exports.getApplePayButtonInitialHeight=m,exports.getApplePayButtonSrc=p,exports.getBankAccountFormInitialHeight=O,exports.getBankAccountFormSrc=E,exports.getCreditCardFormInitialHeight=D,exports.getCreditCardFormSrc=T,exports.getEmbedOrigin=t,exports.getGooglePayButtonInitialHeight=y,exports.getGooglePayButtonSrc=v,exports.hasNativeApplePaySession=s,exports.mountAmosApplePayButton=I,exports.mountAmosBankAccountPaymentMethodForm=P,exports.mountAmosCreditCardPaymentMethodForm=N,exports.mountAmosGooglePayButton=F,exports.sendConfirmationFailed=f,exports.sendParentReadyMessage=r,exports.updateAmount=a,exports.updateAppearance=i,exports.updateMerchantName=o,exports.updateNativeApplePaySession=c,exports.validateForm=l;
+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 14 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.072 5.846c-.1.08-1.873 1.09-1.873 3.34 0 2.61 2.29 3.53 2.36 3.55-.04.1-.368 1.27-.766 2.52-.35 1.09-.72 2.18-1.28 2.18-.55 0-.73-.36-1.43-.36-.71 0-.93.37-1.48.37-.55 0-.93-.99-1.35-2.01-.5-1.2-.88-2.43-.88-3.85 0-2.26 1.47-3.46 2.91-3.46.57 0 1.11.38 1.49.38.37 0 .98-.45 1.7-.45.28 0 1.27.03 1.97 1.01ZM9.52 3.37c.3-.36.52-.86.52-1.36 0-.07 0-.14-.01-.2-.5.02-1.1.33-1.46.75-.28.32-.55.84-.55 1.35 0 .07.01.15.02.17.04.01.1.02.16.02.45 0 1.02-.3 1.32-.73Z"/></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){e?.contentWindow?.postMessage(a({type:`PARENT_ACKNOWLEDGED_IFRAME_READY`}),`*`)}function s({iframe:e,appearance:t={}}){e?.contentWindow?.postMessage(a({type:`UPDATE_APPEARANCE`,appearance:t}),`*`)}function c({iframe:e,amount:t}){e?.contentWindow?.postMessage(a({type:`UPDATE_AMOUNT`,amount:t}),`*`)}function l({iframe:e,merchantName:t}){e?.contentWindow?.postMessage(a({type:`UPDATE_MERCHANT_NAME`,merchantName:t}),`*`)}function u({iframe:e}){let t=crypto.randomUUID();return new Promise(n=>{e?.contentWindow?.postMessage(a({type:`VALIDATE_FORM`,requestId:t}),`*`);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 d({iframe:e,token:t}){let{payment_intent_id:n}=r(t).payload;e?.contentWindow?.postMessage(a({type:`CONFIRM_PAYMENT_INTENT`,token:t,id:n??void 0}),`*`)}function f({iframe:e,token:t}){let{setup_intent_id:n}=r(t).payload;e?.contentWindow?.postMessage(a({type:`CONFIRM_SETUP_INTENT`,token:t,id:n??void 0}),`*`)}function p({iframe:e,errorMessage:t}){e?.contentWindow?.postMessage(a({type:`CONFIRMATION_FAILED`,errorMessage:t}),`*`)}function m(e){return`${i(e)}/iframe/apple-pay?token=${e}`}function h(){return`40px`}function g(e){e.contentWindow?.postMessage(a({type:`APPLE_PAY_CANCEL`}),`*`)}function _(e,r){let i={...r};function a(){c({iframe:e,amount:i.amount})}function u(){l({iframe:e,merchantName:i.merchantName})}function f(r){if(r.source===e.contentWindow)switch(r.data.type){case`IFRAME_READY`:o(e),s({iframe:e,appearance:i.appearance}),a(),u();break;case`UPDATE_HEIGHT`:i.onHeightChange?.(r.data.height);break;case`UPDATE_APPEARANCE`:s({iframe:e,appearance:r.data.appearance});break;case`UPDATED_APPEARANCE`:i.onAppearanceReady?.();break;case`APPLE_PAY_WINDOW_OPEN`:t({onCancel:()=>{g(e),n()}});break;case`APPLE_PAY_WINDOW_CLOSE`:n();break;case`CREATE_PAYMENT_INTENT`:i.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:r.data.paymentIntentCreateAttributes,customerCreateAttributes:r.data.customerCreateAttributes}).then(t=>{d({iframe:e,token:t})}).catch(t=>{p({iframe:e,errorMessage:t instanceof Error?t.message:`Unknown error`})});break;case`PAYMENT_INTENT_CONFIRMATION_SUCCEEDED`:n(),i.onPaymentIntentConfirmationSucceeded(r.data.paymentIntent);break;case`CONFIRMATION_FAILED`:n(),i.onConfirmationFailed(r.data.errorMessage);break}}return window.addEventListener(`message`,f),{update(t){let n=`appearance`in t,r=`amount`in t,o=`merchantName`in t;i={...i,...t},n&&s({iframe:e,appearance:i.appearance}),r&&a(),o&&u()},destroy(){window.removeEventListener(`message`,f),n()}}}function v(e){return`${i(e)}/iframe/google-pay?token=${e}`}function y(){return`40px`}function b(e,t){let n={...t};function r(){c({iframe:e,amount:n.amount})}function i(){l({iframe:e,merchantName:n.merchantName})}function a(t){switch(t.data.type){case`IFRAME_READY`:o(e),s({iframe:e,appearance:n.appearance}),r(),i();break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:s({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`CREATE_PAYMENT_INTENT`:n.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:t.data.paymentIntentCreateAttributes,customerCreateAttributes:t.data.customerCreateAttributes}).then(t=>{d({iframe:e,token:t})}).catch(t=>{p({iframe:e,errorMessage:t instanceof Error?t.message:`Unknown error`})});break;case`PAYMENT_INTENT_CONFIRMATION_SUCCEEDED`:n.onPaymentIntentConfirmationSucceeded(t.data.paymentIntent);break;case`CONFIRMATION_FAILED`:n.onConfirmationFailed(t.data.errorMessage);break}}return window.addEventListener(`message`,a),{update(t){let a=`appearance`in t,o=`amount`in t,c=`merchantName`in t;n={...n,...t},a&&s({iframe:e,appearance:n.appearance}),o&&r(),c&&i()},destroy(){window.removeEventListener(`message`,a)}}}function x({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_provider:`googlepay`,wallet_payload:e.paymentMethodData.tokenizationData.token,wallet_last4:e.paymentMethodData.info?.cardDetails,wallet_brand:(()=>{switch(e.paymentMethodData.info?.cardNetwork){case`AMEX`:return`american_express`;case`VISA`:return`visa`;case`MASTERCARD`:return`master`;case`DISCOVER`:return`discover`;default:return}})()}}}}var S={country:212,full:452},C=80,w={country:400,full:640};function T(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 E(e,t=`country`){let n=new URLSearchParams({token:e,billingAddressRequirement:t});return`${i(e)}/iframe/bank?${n}`}function D(e={cardholderName:!1},t=`country`){return`${(S[t]??S.country)+(e.cardholderName?C:0)}px`}function O(e=`country`){return`${w[e]??w.country}px`}function k(e,t){let n={...t};function r(t){switch(t.data.type){case`IFRAME_READY`:o(e),s({iframe:e,appearance:n.appearance});break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:s({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`PAYMENT_INTENT_CONFIRMATION_SUCCEEDED`:n.onPaymentIntentConfirmationSucceeded?.(t.data.paymentIntent);break;case`SETUP_INTENT_CONFIRMATION_SUCCEEDED`:n.onSetupIntentConfirmationSucceeded?.(t.data.setupIntent);break;case`CONFIRMATION_FAILED`:n.onConfirmationFailed(t.data.errorMessage);break}}return window.addEventListener(`message`,r),{update(t){let r=`appearance`in t;n={...n,...t},r&&s({iframe:e,appearance:n.appearance})},destroy(){window.removeEventListener(`message`,r)}}}function A(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 j={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`};function M({src:e,title:t,name:n,height:r,allow:i}){let a=document.createElement(`iframe`);return a.src=e,a.title=t,a.name=n,a.setAttribute(`role`,`presentation`),a.scrolling=`no`,i&&(a.allow=i),Object.assign(a.style,j,{height:r}),a}function N(e,t){let n=A(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t,s=M({src:T(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:D(i,a)});n.appendChild(s);let c=k(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 P(e,t){let n=A(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t,o=M({src:E(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:O(i)});n.appendChild(o);let s=k(o,{...a,onHeightChange:e=>{o.style.height=e,a.onHeightChange?.(e)},onAppearanceReady:()=>{o.style.opacity=`1`,a.onAppearanceReady?.()}});return{iframe:o,update:s.update,destroy(){s.destroy(),o.remove()}}}function F(e,t){let n=A(e),{renderToken:r,...i}=t,a=M({src:v(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:y(),allow:`payment`});n.appendChild(a);let o=b(a,{...i,onHeightChange:e=>{a.style.height=e,i.onHeightChange?.(e)},onAppearanceReady:()=>{a.style.opacity=`1`,i.onAppearanceReady?.()}});return{iframe:a,update:o.update,destroy(){o.destroy(),a.remove()}}}function I(e,t){let n=A(e),{renderToken:r,...i}=t,a=M({src:m(r),title:`Secure Apple Pay button powered by Amos`,name:`amos-apple-pay-button`,height:h(),allow:`payment`});n.appendChild(a);let o=_(a,{...i,onHeightChange:e=>{a.style.height=e,i.onHeightChange?.(e)},onAppearanceReady:()=>{a.style.opacity=`1`,i.onAppearanceReady?.()}});return{iframe:a,update:o.update,destroy(){o.destroy(),a.remove()}}}exports.attachApplePayButtonListeners=_,exports.attachGooglePayButtonListeners=b,exports.attachPaymentMethodFormListeners=k,exports.confirmPaymentIntent=d,exports.confirmSetupIntent=f,exports.createMessage=a,exports.decodeJwt=r,exports.formatGooglePayPaymentData=x,exports.getApplePayButtonInitialHeight=h,exports.getApplePayButtonSrc=m,exports.getBankAccountFormInitialHeight=O,exports.getBankAccountFormSrc=E,exports.getCreditCardFormInitialHeight=D,exports.getCreditCardFormSrc=T,exports.getEmbedOrigin=i,exports.getGooglePayButtonInitialHeight=y,exports.getGooglePayButtonSrc=v,exports.mountAmosApplePayButton=I,exports.mountAmosBankAccountPaymentMethodForm=P,exports.mountAmosCreditCardPaymentMethodForm=N,exports.mountAmosGooglePayButton=F,exports.sendConfirmationFailed=p,exports.sendParentReadyMessage=o,exports.updateAmount=c,exports.updateAppearance=s,exports.updateMerchantName=l,exports.validateForm=u;

package/dist/index.mjs

@@ -1,5 +1,72 @@
+//#region src/apple-pay-waiting-overlay.ts
+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 14 17\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.072 5.846c-.1.08-1.873 1.09-1.873 3.34 0 2.61 2.29 3.53 2.36 3.55-.04.1-.368 1.27-.766 2.52-.35 1.09-.72 2.18-1.28 2.18-.55 0-.73-.36-1.43-.36-.71 0-.93.37-1.48.37-.55 0-.93-.99-1.35-2.01-.5-1.2-.88-2.43-.88-3.85 0-2.26 1.47-3.46 2.91-3.46.57 0 1.11.38 1.49.38.37 0 .98-.45 1.7-.45.28 0 1.27.03 1.97 1.01ZM9.52 3.37c.3-.36.52-.86.52-1.36 0-.07 0-.14-.01-.2-.5.02-1.1.33-1.46.75-.28.32-.55.84-.55 1.35 0 .07.01.15.02.17.04.01.1.02.16.02.45 0 1.02-.3 1.32-.73Z\"/></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();
+}
+//#endregion
 //#region src/jwt.ts
-function e(e) {
+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)),
@@ -7,9 +74,9 @@ function e(e) {
 		signature: r
 	};
 }
-function t(t) {
-	let { env: n = "sandbox" } = e(t).payload;
-	switch (n) {
+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";
@@ -17,230 +84,198 @@ function t(t) {
 }
 //#endregion
 //#region src/types.ts
-function n(e) {
+function a(e) {
 	return e;
 }
 //#endregion
 //#region src/messaging.ts
-function r(e) {
-	e?.contentWindow?.postMessage(n({ type: "PARENT_ACKNOWLEDGED_IFRAME_READY" }), "*");
+function o(e) {
+	e?.contentWindow?.postMessage(a({ type: "PARENT_ACKNOWLEDGED_IFRAME_READY" }), "*");
 }
-function i({ iframe: e, appearance: t = {} }) {
-	e?.contentWindow?.postMessage(n({
+function s({ iframe: e, appearance: t = {} }) {
+	e?.contentWindow?.postMessage(a({
 		type: "UPDATE_APPEARANCE",
 		appearance: t
 	}), "*");
 }
-function a({ iframe: e, amount: t }) {
-	e?.contentWindow?.postMessage(n({
+function c({ iframe: e, amount: t }) {
+	e?.contentWindow?.postMessage(a({
 		type: "UPDATE_AMOUNT",
 		amount: t
 	}), "*");
 }
-function o({ iframe: e, merchantName: t }) {
-	e?.contentWindow?.postMessage(n({
+function l({ iframe: e, merchantName: t }) {
+	e?.contentWindow?.postMessage(a({
 		type: "UPDATE_MERCHANT_NAME",
 		merchantName: t
 	}), "*");
 }
-function s() {
-	return "ApplePaySession" in globalThis;
-}
-function c({ iframe: e, hasNativeApplePaySession: t }) {
-	e?.contentWindow?.postMessage(n({
-		type: "UPDATE_NATIVE_APPLE_PAY_SESSION",
-		hasNativeApplePaySession: t
-	}), "*");
-}
-function l({ iframe: e }) {
+function u({ iframe: e }) {
 	let t = crypto.randomUUID();
-	return new Promise((r) => {
-		e?.contentWindow?.postMessage(n({
+	return new Promise((n) => {
+		e?.contentWindow?.postMessage(a({
 			type: "VALIDATE_FORM",
 			requestId: t
 		}), "*");
-		let i = setTimeout(() => {
-			window.removeEventListener("message", a), r(!1);
+		let r = setTimeout(() => {
+			window.removeEventListener("message", i), n(!1);
 		}, 5e3);
-		function a(e) {
-			e.data.type === "VALIDATE_FORM" && e.data.requestId === t && (window.removeEventListener("message", a), clearTimeout(i), r(e.data.isValid ?? !1));
+		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", a);
+		window.addEventListener("message", i);
 	});
 }
-function u({ iframe: t, token: r }) {
-	let { payment_intent_id: i } = e(r).payload;
-	t?.contentWindow?.postMessage(n({
+function d({ iframe: e, token: t }) {
+	let { payment_intent_id: n } = r(t).payload;
+	e?.contentWindow?.postMessage(a({
 		type: "CONFIRM_PAYMENT_INTENT",
-		token: r,
-		id: i ?? void 0
+		token: t,
+		id: n ?? void 0
 	}), "*");
 }
-function d({ iframe: t, token: r }) {
-	let { setup_intent_id: i } = e(r).payload;
-	t?.contentWindow?.postMessage(n({
+function f({ iframe: e, token: t }) {
+	let { setup_intent_id: n } = r(t).payload;
+	e?.contentWindow?.postMessage(a({
 		type: "CONFIRM_SETUP_INTENT",
-		token: r,
-		id: i ?? void 0
+		token: t,
+		id: n ?? void 0
 	}), "*");
 }
-function f({ iframe: e, errorMessage: t }) {
-	e?.contentWindow?.postMessage(n({
+function p({ iframe: e, errorMessage: t }) {
+	e?.contentWindow?.postMessage(a({
 		type: "CONFIRMATION_FAILED",
 		errorMessage: t
 	}), "*");
 }
 //#endregion
 //#region src/apple-pay.ts
-function p(e) {
-	return `${t(e)}/iframe/apple-pay?token=${e}`;
+function m(e) {
+	return `${i(e)}/iframe/apple-pay?token=${e}`;
 }
-function m() {
+function h() {
 	return "40px";
 }
-function h(e) {
-	let t = {
-		cssText: e.style.cssText,
-		bodyOverflow: document.body.style.overflow
-	};
-	return document.body.style.overflow = "hidden", Object.assign(e.style, {
-		position: "fixed",
-		inset: "0px",
-		width: "100vw",
-		height: "100vh",
-		maxWidth: "none",
-		maxHeight: "none",
-		margin: "0",
-		border: "0",
-		zIndex: "2147483647",
-		opacity: "1",
-		background: "#ffffff"
-	}), t;
-}
-function g(e, t) {
-	t && (document.body.style.overflow = t.bodyOverflow, e.style.cssText = t.cssText);
-}
-function _(e, t) {
-	let n = { ...t }, l = null;
-	function d() {
-		a({
-			iframe: e,
-			amount: n.amount
-		});
-	}
-	function p() {
-		o({
+function g(e) {
+	e.contentWindow?.postMessage(a({ type: "APPLE_PAY_CANCEL" }), "*");
+}
+function _(e, r) {
+	let i = { ...r };
+	function a() {
+		c({
 			iframe: e,
-			merchantName: n.merchantName
+			amount: i.amount
 		});
 	}
-	function m() {
-		c({
+	function u() {
+		l({
 			iframe: e,
-			hasNativeApplePaySession: s()
+			merchantName: i.merchantName
 		});
 	}
-	function _(t) {
-		if (t.source === e.contentWindow) switch (t.data.type) {
+	function f(r) {
+		if (r.source === e.contentWindow) switch (r.data.type) {
 			case "IFRAME_READY":
-				r(e), i({
+				o(e), s({
 					iframe: e,
-					appearance: n.appearance
-				}), m(), d(), p();
+					appearance: i.appearance
+				}), a(), u();
 				break;
 			case "UPDATE_HEIGHT":
-				l || n.onHeightChange?.(t.data.height);
+				i.onHeightChange?.(r.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				i({
+				s({
 					iframe: e,
-					appearance: t.data.appearance
+					appearance: r.data.appearance
 				});
 				break;
 			case "UPDATED_APPEARANCE":
-				n.onAppearanceReady?.();
+				i.onAppearanceReady?.();
 				break;
-			case "EXPAND_IFRAME":
-				l ||= h(e);
+			case "APPLE_PAY_WINDOW_OPEN":
+				t({ onCancel: () => {
+					g(e), n();
+				} });
 				break;
-			case "COLLAPSE_IFRAME":
-				g(e, l), l = null;
+			case "APPLE_PAY_WINDOW_CLOSE":
+				n();
 				break;
 			case "CREATE_PAYMENT_INTENT":
-				n.onInitiatePaymentIntentRequest({
-					paymentIntentCreateAttributes: t.data.paymentIntentCreateAttributes,
-					customerCreateAttributes: t.data.customerCreateAttributes
+				i.onInitiatePaymentIntentRequest({
+					paymentIntentCreateAttributes: r.data.paymentIntentCreateAttributes,
+					customerCreateAttributes: r.data.customerCreateAttributes
 				}).then((t) => {
-					u({
+					d({
 						iframe: e,
 						token: t
 					});
 				}).catch((t) => {
-					f({
+					p({
 						iframe: e,
 						errorMessage: t instanceof Error ? t.message : "Unknown error"
 					});
 				});
 				break;
 			case "PAYMENT_INTENT_CONFIRMATION_SUCCEEDED":
-				n.onPaymentIntentConfirmationSucceeded(t.data.paymentIntent);
+				n(), i.onPaymentIntentConfirmationSucceeded(r.data.paymentIntent);
 				break;
 			case "CONFIRMATION_FAILED":
-				n.onConfirmationFailed(t.data.errorMessage);
+				n(), i.onConfirmationFailed(r.data.errorMessage);
 				break;
 		}
 	}
-	return window.addEventListener("message", _), {
+	return window.addEventListener("message", f), {
 		update(t) {
-			let r = "appearance" in t, a = "amount" in t, o = "merchantName" in t;
-			n = {
-				...n,
+			let n = "appearance" in t, r = "amount" in t, o = "merchantName" in t;
+			i = {
+				...i,
 				...t
-			}, r && i({
+			}, n && s({
 				iframe: e,
-				appearance: n.appearance
-			}), a && d(), o && p();
+				appearance: i.appearance
+			}), r && a(), o && u();
 		},
 		destroy() {
-			window.removeEventListener("message", _), g(e, l), l = null;
+			window.removeEventListener("message", f), n();
 		}
 	};
 }
 //#endregion
 //#region src/google-pay.ts
 function v(e) {
-	return `${t(e)}/iframe/google-pay?token=${e}`;
+	return `${i(e)}/iframe/google-pay?token=${e}`;
 }
 function y() {
 	return "40px";
 }
 function b(e, t) {
 	let n = { ...t };
-	function s() {
-		a({
+	function r() {
+		c({
 			iframe: e,
 			amount: n.amount
 		});
 	}
-	function c() {
-		o({
+	function i() {
+		l({
 			iframe: e,
 			merchantName: n.merchantName
 		});
 	}
-	function l(t) {
+	function a(t) {
 		switch (t.data.type) {
 			case "IFRAME_READY":
-				r(e), i({
+				o(e), s({
 					iframe: e,
 					appearance: n.appearance
-				}), s(), c();
+				}), r(), i();
 				break;
 			case "UPDATE_HEIGHT":
 				n.onHeightChange?.(t.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				i({
+				s({
 					iframe: e,
 					appearance: t.data.appearance
 				});
@@ -253,12 +288,12 @@ function b(e, t) {
 					paymentIntentCreateAttributes: t.data.paymentIntentCreateAttributes,
 					customerCreateAttributes: t.data.customerCreateAttributes
 				}).then((t) => {
-					u({
+					d({
 						iframe: e,
 						token: t
 					});
 				}).catch((t) => {
-					f({
+					p({
 						iframe: e,
 						errorMessage: t instanceof Error ? t.message : "Unknown error"
 					});
@@ -272,19 +307,19 @@ function b(e, t) {
 				break;
 		}
 	}
-	return window.addEventListener("message", l), {
+	return window.addEventListener("message", a), {
 		update(t) {
-			let r = "appearance" in t, a = "amount" in t, o = "merchantName" in t;
+			let a = "appearance" in t, o = "amount" in t, c = "merchantName" in t;
 			n = {
 				...n,
 				...t
-			}, r && i({
+			}, a && s({
 				iframe: e,
 				appearance: n.appearance
-			}), a && s(), o && c();
+			}), o && r(), c && i();
 		},
 		destroy() {
-			window.removeEventListener("message", l);
+			window.removeEventListener("message", a);
 		}
 	};
 }
@@ -327,20 +362,20 @@ var S = {
 	country: 400,
 	full: 640
 };
-function T(e, n = { cardholderName: !1 }, r = "country") {
-	let i = Object.entries(n).filter(([, e]) => e).map(([e]) => e).join(","), a = new URLSearchParams({
+function T(e, t = { cardholderName: !1 }, n = "country") {
+	let r = Object.entries(t).filter(([, e]) => e).map(([e]) => e).join(","), a = new URLSearchParams({
 		token: e,
-		additionalFields: i,
-		billingAddressRequirement: r
+		additionalFields: r,
+		billingAddressRequirement: n
 	});
-	return `${t(e)}/iframe/card?${a}`;
+	return `${i(e)}/iframe/card?${a}`;
 }
-function E(e, n = "country") {
-	let r = new URLSearchParams({
+function E(e, t = "country") {
+	let n = new URLSearchParams({
 		token: e,
-		billingAddressRequirement: n
+		billingAddressRequirement: t
 	});
-	return `${t(e)}/iframe/bank?${r}`;
+	return `${i(e)}/iframe/bank?${n}`;
 }
 function D(e = { cardholderName: !1 }, t = "country") {
 	return `${(S[t] ?? S.country) + (e.cardholderName ? C : 0)}px`;
@@ -350,10 +385,10 @@ function O(e = "country") {
 }
 function k(e, t) {
 	let n = { ...t };
-	function a(t) {
+	function r(t) {
 		switch (t.data.type) {
 			case "IFRAME_READY":
-				r(e), i({
+				o(e), s({
 					iframe: e,
 					appearance: n.appearance
 				});
@@ -362,7 +397,7 @@ function k(e, t) {
 				n.onHeightChange?.(t.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				i({
+				s({
 					iframe: e,
 					appearance: t.data.appearance
 				});
@@ -381,19 +416,19 @@ function k(e, t) {
 				break;
 		}
 	}
-	return window.addEventListener("message", a), {
+	return window.addEventListener("message", r), {
 		update(t) {
 			let r = "appearance" in t;
 			n = {
 				...n,
 				...t
-			}, r && i({
+			}, r && s({
 				iframe: e,
 				appearance: n.appearance
 			});
 		},
 		destroy() {
-			window.removeEventListener("message", a);
+			window.removeEventListener("message", r);
 		}
 	};
 }
@@ -496,10 +531,10 @@ function F(e, t) {
 }
 function I(e, t) {
 	let n = A(e), { renderToken: r, ...i } = t, a = M({
-		src: p(r),
+		src: m(r),
 		title: "Secure Apple Pay button powered by Amos",
 		name: "amos-apple-pay-button",
-		height: m(),
+		height: h(),
 		allow: "payment"
 	});
 	n.appendChild(a);
@@ -521,4 +556,4 @@ function I(e, t) {
 	};
 }
 //#endregion
-export { _ as attachApplePayButtonListeners, b as attachGooglePayButtonListeners, k as attachPaymentMethodFormListeners, u as confirmPaymentIntent, d as confirmSetupIntent, n as createMessage, e as decodeJwt, x as formatGooglePayPaymentData, m as getApplePayButtonInitialHeight, p as getApplePayButtonSrc, O as getBankAccountFormInitialHeight, E as getBankAccountFormSrc, D as getCreditCardFormInitialHeight, T as getCreditCardFormSrc, t as getEmbedOrigin, y as getGooglePayButtonInitialHeight, v as getGooglePayButtonSrc, s as hasNativeApplePaySession, I as mountAmosApplePayButton, P as mountAmosBankAccountPaymentMethodForm, N as mountAmosCreditCardPaymentMethodForm, F as mountAmosGooglePayButton, f as sendConfirmationFailed, r as sendParentReadyMessage, a as updateAmount, i as updateAppearance, o as updateMerchantName, c as updateNativeApplePaySession, l as validateForm };
+export { _ as attachApplePayButtonListeners, b as attachGooglePayButtonListeners, k as attachPaymentMethodFormListeners, d as confirmPaymentIntent, f as confirmSetupIntent, a as createMessage, r as decodeJwt, x as formatGooglePayPaymentData, h as getApplePayButtonInitialHeight, m as getApplePayButtonSrc, O as getBankAccountFormInitialHeight, E as getBankAccountFormSrc, D as getCreditCardFormInitialHeight, T as getCreditCardFormSrc, i as getEmbedOrigin, y as getGooglePayButtonInitialHeight, v as getGooglePayButtonSrc, I as mountAmosApplePayButton, P as mountAmosBankAccountPaymentMethodForm, N as mountAmosCreditCardPaymentMethodForm, F as mountAmosGooglePayButton, p as sendConfirmationFailed, o as sendParentReadyMessage, c as updateAmount, s as updateAppearance, l as updateMerchantName, u as validateForm };

package/dist/messaging.d.ts

@@ -34,19 +34,6 @@ export declare function updateMerchantName({ iframe, merchantName, }: {
     iframe: Iframe;
     merchantName: string;
 }): void;
-/**
- * Whether the host page exposes a native `ApplePaySession` (Safari).
- * Non-Safari browsers load Apple's SDK inside the embed iframe instead.
- */
-export declare function hasNativeApplePaySession(): boolean;
-/**
- * Tell the Apple Pay iframe whether the parent has a native
- * `ApplePaySession`. Sent during the `IFRAME_READY` handshake.
- */
-export declare function updateNativeApplePaySession({ iframe, hasNativeApplePaySession, }: {
-    iframe: Iframe;
-    hasNativeApplePaySession: boolean;
-}): void;
 /**
  * Ask the embedded credit-card or bank-account iframe form to validate
  * its inputs.

package/dist/types.d.ts

@@ -42,14 +42,6 @@ export type Message = {
 } | {
     type: "UPDATE_MERCHANT_NAME";
     merchantName: string;
-} | {
-    /**
-     * Parent → iframe: whether the host page has a native
-     * `ApplePaySession` (Safari). When `false`, the iframe should
-     * expand for Chrome's in-iframe QR handoff UI.
-     */
-    type: "UPDATE_NATIVE_APPLE_PAY_SESSION";
-    hasNativeApplePaySession: boolean;
 } | {
     type: "UPDATE_APPEARANCE";
     appearance: Appearance;
@@ -77,15 +69,14 @@ export type Message = {
 } | {
     type: "UPDATED_APPEARANCE";
 } | {
-    /**
-     * Iframe → parent: expand the Apple Pay iframe to a full-viewport
-     * overlay so Chrome's QR handoff UI is not clipped by the button
-     * height. The Apple Pay session stays on the Amos embed origin.
-     */
-    type: "EXPAND_IFRAME";
+    /** Embed → parent: Apple Pay Code window / waiting UI should show. */
+    type: "APPLE_PAY_WINDOW_OPEN";
+} | {
+    /** Embed → parent: waiting UI should dismiss. */
+    type: "APPLE_PAY_WINDOW_CLOSE";
 } | {
-    /** Iframe → parent: restore the Apple Pay iframe to its button size. */
-    type: "COLLAPSE_IFRAME";
+    /** Parent → embed: user cancelled from the host-page waiting overlay. */
+    type: "APPLE_PAY_CANCEL";
 };
 /**
  * Identity helper that brands an object as a typed `Message`.

package/package.json

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

package/src/apple-pay-waiting-overlay.ts

@@ -0,0 +1,103 @@
+const OVERLAY_ATTRIBUTE = "data-amos-apple-pay-waiting";
+
+/**
+ * Create (or return existing) full-viewport waiting UI on the host page while
+ * Apple Pay Code runs in a separate window. Cancel invokes `onCancel`.
+ */
+export function showApplePayWaitingOverlay({
+  onCancel,
+}: {
+  onCancel: () => void;
+}): HTMLElement {
+  const existing = document.querySelector<HTMLElement>(
+    `[${OVERLAY_ATTRIBUTE}]`,
+  );
+  if (existing) {
+    return existing;
+  }
+
+  const root = document.createElement("div");
+  root.setAttribute(OVERLAY_ATTRIBUTE, "true");
+  root.setAttribute("role", "dialog");
+  root.setAttribute("aria-modal", "true");
+  root.setAttribute("aria-labelledby", "amos-apple-pay-waiting-title");
+  Object.assign(root.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',
+  } satisfies Partial<CSSStyleDeclaration>);
+
+  const card = document.createElement("div");
+  Object.assign(card.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)",
+  } satisfies Partial<CSSStyleDeclaration>);
+
+  const mark = document.createElement("div");
+  mark.setAttribute("aria-hidden", "true");
+  Object.assign(mark.style, {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "6px",
+    marginBottom: "16px",
+    fontSize: "28px",
+    fontWeight: "600",
+    letterSpacing: "-0.02em",
+    color: "#000",
+    lineHeight: "1",
+  } satisfies Partial<CSSStyleDeclaration>);
+  mark.innerHTML = `<svg width="22" height="26" viewBox="0 0 14 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.072 5.846c-.1.08-1.873 1.09-1.873 3.34 0 2.61 2.29 3.53 2.36 3.55-.04.1-.368 1.27-.766 2.52-.35 1.09-.72 2.18-1.28 2.18-.55 0-.73-.36-1.43-.36-.71 0-.93.37-1.48.37-.55 0-.93-.99-1.35-2.01-.5-1.2-.88-2.43-.88-3.85 0-2.26 1.47-3.46 2.91-3.46.57 0 1.11.38 1.49.38.37 0 .98-.45 1.7-.45.28 0 1.27.03 1.97 1.01ZM9.52 3.37c.3-.36.52-.86.52-1.36 0-.07 0-.14-.01-.2-.5.02-1.1.33-1.46.75-.28.32-.55.84-.55 1.35 0 .07.01.15.02.17.04.01.1.02.16.02.45 0 1.02-.3 1.32-.73Z"/></svg><span>Pay</span>`;
+
+  const title = document.createElement("p");
+  title.id = "amos-apple-pay-waiting-title";
+  Object.assign(title.style, {
+    margin: "0 0 20px",
+    fontSize: "15px",
+    lineHeight: "1.45",
+    color: "#1a1a1a",
+  } satisfies Partial<CSSStyleDeclaration>);
+  title.textContent =
+    "Complete your payment in the open Apple Pay window, or close Apple Pay to continue paying another way.";
+
+  const cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.textContent = "Cancel payment";
+  Object.assign(cancel.style, {
+    display: "block",
+    width: "100%",
+    border: "none",
+    borderRadius: "8px",
+    padding: "12px 16px",
+    background: "#2c2c2e",
+    color: "#fff",
+    fontSize: "15px",
+    fontWeight: "500",
+    cursor: "pointer",
+  } satisfies Partial<CSSStyleDeclaration>);
+  cancel.addEventListener("click", onCancel);
+
+  card.append(mark, title, cancel);
+  root.append(card);
+  document.body.append(root);
+  return root;
+}
+
+/** Remove the host-page Apple Pay waiting overlay if present. */
+export function hideApplePayWaitingOverlay(): void {
+  document.querySelector(`[${OVERLAY_ATTRIBUTE}]`)?.remove();
+}

package/src/apple-pay.ts

@@ -1,16 +1,18 @@
 import type { components } from "@amos.com/node";
+import {
+  hideApplePayWaitingOverlay,
+  showApplePayWaitingOverlay,
+} from "./apple-pay-waiting-overlay";
 import { getEmbedOrigin } from "./jwt";
 import {
   confirmPaymentIntent,
-  hasNativeApplePaySession,
   sendConfirmationFailed,
   sendParentReadyMessage,
   updateAmount as sendUpdateAmount,
   updateAppearance as sendUpdateAppearance,
   updateMerchantName as sendUpdateMerchantName,
-  updateNativeApplePaySession as sendUpdateNativeApplePaySession,
 } from "./messaging";
-import type { Appearance, Message } from "./types";
+import { type Appearance, createMessage, type Message } from "./types";
 
 /**
  * Build the iframe `src` URL for the embedded Apple Pay button.
@@ -90,47 +92,11 @@ export type ApplePayButtonController = {
   destroy: () => void;
 };
 
-type SavedIframeLayout = {
-  cssText: string;
-  bodyOverflow: string;
-};
-
-/**
- * Expand the Apple Pay iframe to a full-viewport overlay so Chrome's QR
- * handoff UI (rendered inside the iframe) is not clipped to the button
- * height. Safari's native sheet is OS-level and unaffected.
- */
-function expandApplePayIframe(iframe: HTMLIFrameElement): SavedIframeLayout {
-  const saved: SavedIframeLayout = {
-    cssText: iframe.style.cssText,
-    bodyOverflow: document.body.style.overflow,
-  };
-  document.body.style.overflow = "hidden";
-  Object.assign(iframe.style, {
-    position: "fixed",
-    inset: "0px",
-    width: "100vw",
-    height: "100vh",
-    maxWidth: "none",
-    maxHeight: "none",
-    margin: "0",
-    border: "0",
-    zIndex: "2147483647",
-    opacity: "1",
-    background: "#ffffff",
-  });
-  return saved;
-}
-
-function collapseApplePayIframe(
-  iframe: HTMLIFrameElement,
-  saved: SavedIframeLayout | null,
-): void {
-  if (!saved) {
-    return;
-  }
-  document.body.style.overflow = saved.bodyOverflow;
-  iframe.style.cssText = saved.cssText;
+function sendApplePayCancel(iframe: HTMLIFrameElement): void {
+  iframe.contentWindow?.postMessage(
+    createMessage({ type: "APPLE_PAY_CANCEL" }),
+    "*",
+  );
 }
 
 /**
@@ -142,16 +108,15 @@ function collapseApplePayIframe(
  * correct `src` (see {@link getApplePayButtonSrc}).
  *
  * The Apple Pay button and `ApplePaySession` run inside the Amos embed
- * iframe (so only Amos domains need Apple merchant registration). On
- * `EXPAND_IFRAME`, the parent temporarily overlays that iframe
- * full-viewport for Chrome's in-iframe QR handoff UI.
+ * iframe so only Amos domains need Apple merchant registration. While
+ * Apple Pay Code is open in a separate window, this host paints a
+ * waiting overlay and can cancel via {@link Message} `APPLE_PAY_CANCEL`.
  */
 export function attachApplePayButtonListeners(
   iframe: HTMLIFrameElement,
   options: ApplePayButtonListenerOptions,
 ): ApplePayButtonController {
   let current = { ...options };
-  let savedLayout: SavedIframeLayout | null = null;
 
   function pushAmount() {
     sendUpdateAmount({ iframe, amount: current.amount });
@@ -161,13 +126,6 @@ export function attachApplePayButtonListeners(
     sendUpdateMerchantName({ iframe, merchantName: current.merchantName });
   }
 
-  function pushNativeApplePaySession() {
-    sendUpdateNativeApplePaySession({
-      iframe,
-      hasNativeApplePaySession: hasNativeApplePaySession(),
-    });
-  }
-
   function handleMessage(event: MessageEvent<Message>) {
     // Ignore messages from other frames / windows.
     if (event.source !== iframe.contentWindow) {
@@ -178,16 +136,12 @@ export function attachApplePayButtonListeners(
       case "IFRAME_READY":
         sendParentReadyMessage(iframe);
         sendUpdateAppearance({ iframe, appearance: current.appearance });
-        pushNativeApplePaySession();
         pushAmount();
         pushMerchantName();
         break;
 
       case "UPDATE_HEIGHT":
-        // Ignore height updates while the session overlay is open.
-        if (!savedLayout) {
-          current.onHeightChange?.(event.data.height);
-        }
+        current.onHeightChange?.(event.data.height);
         break;
 
       case "UPDATE_APPEARANCE":
@@ -198,15 +152,17 @@ export function attachApplePayButtonListeners(
         current.onAppearanceReady?.();
         break;
 
-      case "EXPAND_IFRAME":
-        if (!savedLayout) {
-          savedLayout = expandApplePayIframe(iframe);
-        }
+      case "APPLE_PAY_WINDOW_OPEN":
+        showApplePayWaitingOverlay({
+          onCancel: () => {
+            sendApplePayCancel(iframe);
+            hideApplePayWaitingOverlay();
+          },
+        });
         break;
 
-      case "COLLAPSE_IFRAME":
-        collapseApplePayIframe(iframe, savedLayout);
-        savedLayout = null;
+      case "APPLE_PAY_WINDOW_CLOSE":
+        hideApplePayWaitingOverlay();
         break;
 
       case "CREATE_PAYMENT_INTENT":
@@ -229,10 +185,12 @@ export function attachApplePayButtonListeners(
         break;
 
       case "PAYMENT_INTENT_CONFIRMATION_SUCCEEDED":
+        hideApplePayWaitingOverlay();
         current.onPaymentIntentConfirmationSucceeded(event.data.paymentIntent);
         break;
 
       case "CONFIRMATION_FAILED":
+        hideApplePayWaitingOverlay();
         current.onConfirmationFailed(event.data.errorMessage);
         break;
     }
@@ -258,8 +216,7 @@ export function attachApplePayButtonListeners(
     },
     destroy() {
       window.removeEventListener("message", handleMessage);
-      collapseApplePayIframe(iframe, savedLayout);
-      savedLayout = null;
+      hideApplePayWaitingOverlay();
     },
   };
 }

package/src/index.ts

@@ -27,13 +27,11 @@ export { decodeJwt, getEmbedOrigin } from "./jwt";
 export {
   confirmPaymentIntent,
   confirmSetupIntent,
-  hasNativeApplePaySession,
   sendConfirmationFailed,
   sendParentReadyMessage,
   updateAmount,
   updateAppearance,
   updateMerchantName,
-  updateNativeApplePaySession,
   validateForm,
 } from "./messaging";
 export type {

package/src/messaging.ts

@@ -70,34 +70,6 @@ export function updateMerchantName({
   );
 }
 
-/**
- * Whether the host page exposes a native `ApplePaySession` (Safari).
- * Non-Safari browsers load Apple's SDK inside the embed iframe instead.
- */
-export function hasNativeApplePaySession(): boolean {
-  return "ApplePaySession" in globalThis;
-}
-
-/**
- * Tell the Apple Pay iframe whether the parent has a native
- * `ApplePaySession`. Sent during the `IFRAME_READY` handshake.
- */
-export function updateNativeApplePaySession({
-  iframe,
-  hasNativeApplePaySession,
-}: {
-  iframe: Iframe;
-  hasNativeApplePaySession: boolean;
-}): void {
-  iframe?.contentWindow?.postMessage(
-    createMessage({
-      type: "UPDATE_NATIVE_APPLE_PAY_SESSION",
-      hasNativeApplePaySession,
-    }),
-    "*",
-  );
-}
-
 /**
  * Ask the embedded credit-card or bank-account iframe form to validate
  * its inputs.

package/src/types.ts

@@ -155,15 +155,6 @@ export type Message =
       type: "UPDATE_MERCHANT_NAME";
       merchantName: string;
     }
-  | {
-      /**
-       * Parent → iframe: whether the host page has a native
-       * `ApplePaySession` (Safari). When `false`, the iframe should
-       * expand for Chrome's in-iframe QR handoff UI.
-       */
-      type: "UPDATE_NATIVE_APPLE_PAY_SESSION";
-      hasNativeApplePaySession: boolean;
-    }
   | {
       type: "UPDATE_APPEARANCE";
       appearance: Appearance;
@@ -202,16 +193,16 @@ export type Message =
       type: "UPDATED_APPEARANCE";
     }
   | {
-      /**
-       * Iframe → parent: expand the Apple Pay iframe to a full-viewport
-       * overlay so Chrome's QR handoff UI is not clipped by the button
-       * height. The Apple Pay session stays on the Amos embed origin.
-       */
-      type: "EXPAND_IFRAME";
+      /** Embed → parent: Apple Pay Code window / waiting UI should show. */
+      type: "APPLE_PAY_WINDOW_OPEN";
+    }
+  | {
+      /** Embed → parent: waiting UI should dismiss. */
+      type: "APPLE_PAY_WINDOW_CLOSE";
     }
   | {
-      /** Iframe → parent: restore the Apple Pay iframe to its button size. */
-      type: "COLLAPSE_IFRAME";
+      /** Parent → embed: user cancelled from the host-page waiting overlay. */
+      type: "APPLE_PAY_CANCEL";
     };
 
 /**