@amos.com/amos-js 0.4.1 → 0.5.0

package/README.md

@@ -96,7 +96,7 @@ The following flow is for credit card and bank account payment method types only
 
 ### Google Pay
 
-Google Pay (and soon, Apple Pay) is a form of express checkout. The Google Pay button is an alternative to the "Pay now" button in your payment forms. Users can make a payment with either flow.
+Google Pay and Apple Pay are forms of express checkout. Their buttons are alternatives to the "Pay now" button in your payment forms. Users can make a payment with either flow.
 
 The key differences between the express and non-express payment flows are:
 
@@ -266,6 +266,10 @@ Mount the secure Google Pay button (express checkout) into a container element.
 
 - `iframe`, `update(patch)`, `destroy()`. Use `update({ amount, merchantName })` to push new values into the iframe.
 
+### `mountAmosApplePayButton(container, options)`
+
+Mount the secure Apple Pay button (express checkout). Same options and return shape as `mountAmosGooglePayButton`.
+
 ### `validateForm({ iframe })`
 
 Validates the embedded card/bank iframe form. Returns `Promise<boolean>` (resolves to `false` after 5 seconds if the iframe does not respond).

package/dist/apple-pay.d.ts

@@ -0,0 +1,78 @@
+import { components } from '@amos.com/node';
+import { Appearance } from './types';
+/**
+ * Build the iframe `src` URL for the embedded Apple Pay button.
+ */
+export declare function getApplePayButtonSrc(renderToken: string): string;
+/**
+ * Default iframe pixel height for the Apple Pay button.
+ */
+export declare function getApplePayButtonInitialHeight(): string;
+/**
+ * Options accepted by {@link attachApplePayButtonListeners}.
+ */
+export type ApplePayButtonListenerOptions = {
+    /** The amount of the payment, in the same format passed in props. */
+    amount: string;
+    /** A user-visible merchant name. */
+    merchantName: string;
+    /**
+     * Custom appearance to apply when the iframe first becomes ready and
+     * whenever the appearance changes.
+     */
+    appearance?: Appearance;
+    /**
+     * Called whenever the iframe asks the host page to resize it. Update
+     * the iframe's `height` style here.
+     */
+    onHeightChange?: (height: string) => void;
+    /**
+     * Called once the iframe has applied the requested appearance and is
+     * ready to be revealed.
+     */
+    onAppearanceReady?: () => void;
+    /**
+     * Called when the user initiates a payment intent request via the
+     * Apple Pay button. Your implementation should create a payment
+     * intent on your server and resolve with the resulting embed token.
+     */
+    onInitiatePaymentIntentRequest: ({ paymentIntentCreateAttributes, customerCreateAttributes, }: {
+        paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+        customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+    }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
+    /**
+     * Called when payment intent confirmation succeeds.
+     */
+    onPaymentIntentConfirmationSucceeded: (paymentIntent: components["schemas"]["PaymentIntent"]) => void;
+    /**
+     * Called when payment intent confirmation fails.
+     */
+    onConfirmationFailed: (errorMessage: string) => void;
+};
+/**
+ * Controller returned by {@link attachApplePayButtonListeners} and
+ * {@link mountAmosApplePayButton}.
+ */
+export type ApplePayButtonController = {
+    /**
+     * Update one or more listener options without re-attaching the
+     * message listener. Pass `amount` or `merchantName` to push the new
+     * value into the iframe; pass `appearance` to update theme variables.
+     */
+    update: (patch: Partial<ApplePayButtonListenerOptions>) => void;
+    /**
+     * Detach the iframe message listener.
+     */
+    destroy: () => void;
+};
+/**
+ * Wire up the host-page side of the Apple Pay iframe message protocol
+ * on an existing `<iframe>` element. Returns a controller for updating
+ * options and tearing down the listener.
+ *
+ * The iframe is expected to have already been added to the DOM with the
+ * correct `src` (see {@link getApplePayButtonSrc}).
+ *
+ * Uses the same postMessage protocol as Google Pay express checkout.
+ */
+export declare function attachApplePayButtonListeners(iframe: HTMLIFrameElement, options: ApplePayButtonListenerOptions): ApplePayButtonController;

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="googlepay" />
+export type { ApplePayButtonController, ApplePayButtonListenerOptions, } from './apple-pay';
+export { attachApplePayButtonListeners, getApplePayButtonInitialHeight, getApplePayButtonSrc, } from './apple-pay';
 export type { FormattedGooglePayPaymentData, GooglePayButtonController, GooglePayButtonListenerOptions, } from './google-pay';
 export { attachGooglePayButtonListeners, formatGooglePayPaymentData, getGooglePayButtonInitialHeight, getGooglePayButtonSrc, } from './google-pay';
 export { decodeJwt, getEmbedOrigin } from './jwt';
 export { confirmPaymentIntent, confirmSetupIntent, sendConfirmationFailed, sendParentReadyMessage, updateAmount, updateAppearance, updateMerchantName, validateForm, } from './messaging';
-export type { AmosBankAccountPaymentMethodFormOptions, AmosCreditCardPaymentMethodFormOptions, AmosGooglePayButtonMountController, AmosGooglePayButtonOptions, AmosPaymentMethodFormMountController, } from './mount';
-export { mountAmosBankAccountPaymentMethodForm, mountAmosCreditCardPaymentMethodForm, mountAmosGooglePayButton, } from './mount';
+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';
 export { attachPaymentMethodFormListeners, getBankAccountFormInitialHeight, getBankAccountFormSrc, getCreditCardFormInitialHeight, getCreditCardFormSrc, } from './payment-method-form';
 export type { Appearance, AppearanceLabels, Message, ThemeVariable, } from './types';

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({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 c({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 l({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 u({iframe:e,errorMessage:t}){e?.contentWindow?.postMessage(n({type:`CONFIRMATION_FAILED`,errorMessage:t}),`*`)}function d(e){return`${t(e)}/iframe/google-pay?token=${e}`}function f(){return`40px`}function p(e,t){let n={...t};function s(){a({iframe:e,amount:n.amount})}function l(){o({iframe:e,merchantName:n.merchantName})}function d(t){switch(t.data.type){case`IFRAME_READY`:r(e),i({iframe:e,appearance:n.appearance}),s(),l();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=>{c({iframe:e,token:t})}).catch(t=>{u({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`,d),{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&&l()},destroy(){window.removeEventListener(`message`,d)}}}function m({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 h={country:212,full:452},g=80,_={country:400,full:640};function v(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 y(e,n=`country`){let r=new URLSearchParams({token:e,billingAddressRequirement:n});return`${t(e)}/iframe/bank?${r}`}function b(e={cardholderName:!1},t=`country`){return`${(h[t]??h.country)+(e.cardholderName?g:0)}px`}function x(e=`country`){return`${_[e]??_.country}px`}function S(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 C(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 w={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`};function T({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,w,{height:r}),a}function E(e,t){let n=C(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t,s=T({src:v(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:b(i,a)});n.appendChild(s);let c=S(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 D(e,t){let n=C(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t,o=T({src:y(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:x(i)});n.appendChild(o);let s=S(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 O(e,t){let n=C(e),{renderToken:r,...i}=t,a=T({src:d(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:f(),allow:`payment`});n.appendChild(a);let o=p(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.attachGooglePayButtonListeners=p,exports.attachPaymentMethodFormListeners=S,exports.confirmPaymentIntent=c,exports.confirmSetupIntent=l,exports.createMessage=n,exports.decodeJwt=e,exports.formatGooglePayPaymentData=m,exports.getBankAccountFormInitialHeight=x,exports.getBankAccountFormSrc=y,exports.getCreditCardFormInitialHeight=b,exports.getCreditCardFormSrc=v,exports.getEmbedOrigin=t,exports.getGooglePayButtonInitialHeight=f,exports.getGooglePayButtonSrc=d,exports.mountAmosBankAccountPaymentMethodForm=D,exports.mountAmosCreditCardPaymentMethodForm=E,exports.mountAmosGooglePayButton=O,exports.sendConfirmationFailed=u,exports.sendParentReadyMessage=r,exports.updateAmount=a,exports.updateAppearance=i,exports.updateMerchantName=o,exports.validateForm=s;
+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({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 c({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 l({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 u({iframe:e,errorMessage:t}){e?.contentWindow?.postMessage(n({type:`CONFIRMATION_FAILED`,errorMessage:t}),`*`)}function d(e){return`${t(e)}/iframe/apple-pay?token=${e}`}function f(){return`40px`}function p(e,t){let n={...t};function s(){a({iframe:e,amount:n.amount})}function l(){o({iframe:e,merchantName:n.merchantName})}function d(t){switch(t.data.type){case`IFRAME_READY`:r(e),i({iframe:e,appearance:n.appearance}),s(),l();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=>{c({iframe:e,token:t})}).catch(t=>{u({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`,d),{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&&l()},destroy(){window.removeEventListener(`message`,d)}}}function m(e){return`${t(e)}/iframe/google-pay?token=${e}`}function h(){return`40px`}function g(e,t){let n={...t};function s(){a({iframe:e,amount:n.amount})}function l(){o({iframe:e,merchantName:n.merchantName})}function d(t){switch(t.data.type){case`IFRAME_READY`:r(e),i({iframe:e,appearance:n.appearance}),s(),l();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=>{c({iframe:e,token:t})}).catch(t=>{u({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`,d),{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&&l()},destroy(){window.removeEventListener(`message`,d)}}}function _({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 v={country:212,full:452},y=80,b={country:400,full:640};function x(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 S(e,n=`country`){let r=new URLSearchParams({token:e,billingAddressRequirement:n});return`${t(e)}/iframe/bank?${r}`}function C(e={cardholderName:!1},t=`country`){return`${(v[t]??v.country)+(e.cardholderName?y:0)}px`}function w(e=`country`){return`${b[e]??b.country}px`}function T(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 E(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 D={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`};function O({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,D,{height:r}),a}function k(e,t){let n=E(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t,s=O({src:x(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:C(i,a)});n.appendChild(s);let c=T(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 A(e,t){let n=E(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t,o=O({src:S(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:w(i)});n.appendChild(o);let s=T(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 j(e,t){let n=E(e),{renderToken:r,...i}=t,a=O({src:m(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:h(),allow:`payment`});n.appendChild(a);let o=g(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 M(e,t){let n=E(e),{renderToken:r,...i}=t,a=O({src:d(r),title:`Secure Apple Pay button powered by Amos`,name:`amos-apple-pay-button`,height:f(),allow:`payment`});n.appendChild(a);let o=p(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=p,exports.attachGooglePayButtonListeners=g,exports.attachPaymentMethodFormListeners=T,exports.confirmPaymentIntent=c,exports.confirmSetupIntent=l,exports.createMessage=n,exports.decodeJwt=e,exports.formatGooglePayPaymentData=_,exports.getApplePayButtonInitialHeight=f,exports.getApplePayButtonSrc=d,exports.getBankAccountFormInitialHeight=w,exports.getBankAccountFormSrc=S,exports.getCreditCardFormInitialHeight=C,exports.getCreditCardFormSrc=x,exports.getEmbedOrigin=t,exports.getGooglePayButtonInitialHeight=h,exports.getGooglePayButtonSrc=m,exports.mountAmosApplePayButton=M,exports.mountAmosBankAccountPaymentMethodForm=A,exports.mountAmosCreditCardPaymentMethodForm=k,exports.mountAmosGooglePayButton=j,exports.sendConfirmationFailed=u,exports.sendParentReadyMessage=r,exports.updateAmount=a,exports.updateAppearance=i,exports.updateMerchantName=o,exports.validateForm=s;

package/dist/index.mjs

@@ -82,9 +82,9 @@ function u({ iframe: e, errorMessage: t }) {
 	}), "*");
 }
 //#endregion
-//#region src/google-pay.ts
+//#region src/apple-pay.ts
 function d(e) {
-	return `${t(e)}/iframe/google-pay?token=${e}`;
+	return `${t(e)}/iframe/apple-pay?token=${e}`;
 }
 function f() {
 	return "40px";
@@ -163,7 +163,89 @@ function p(e, t) {
 		}
 	};
 }
-function m({ paymentData: e }) {
+//#endregion
+//#region src/google-pay.ts
+function m(e) {
+	return `${t(e)}/iframe/google-pay?token=${e}`;
+}
+function h() {
+	return "40px";
+}
+function g(e, t) {
+	let n = { ...t };
+	function s() {
+		a({
+			iframe: e,
+			amount: n.amount
+		});
+	}
+	function l() {
+		o({
+			iframe: e,
+			merchantName: n.merchantName
+		});
+	}
+	function d(t) {
+		switch (t.data.type) {
+			case "IFRAME_READY":
+				r(e), i({
+					iframe: e,
+					appearance: n.appearance
+				}), s(), l();
+				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) => {
+					c({
+						iframe: e,
+						token: t
+					});
+				}).catch((t) => {
+					u({
+						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", d), {
+		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 && l();
+		},
+		destroy() {
+			window.removeEventListener("message", d);
+		}
+	};
+}
+function _({ paymentData: e }) {
 	return { paymentMethod: {
 		type: "googlepay",
 		billing_address_attributes: {
@@ -195,14 +277,14 @@ function m({ paymentData: e }) {
 }
 //#endregion
 //#region src/payment-method-form.ts
-var h = {
+var v = {
 	country: 212,
 	full: 452
-}, g = 80, _ = {
+}, y = 80, b = {
 	country: 400,
 	full: 640
 };
-function v(e, n = { cardholderName: !1 }, r = "country") {
+function x(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,
@@ -210,20 +292,20 @@ function v(e, n = { cardholderName: !1 }, r = "country") {
 	});
 	return `${t(e)}/iframe/card?${a}`;
 }
-function y(e, n = "country") {
+function S(e, n = "country") {
 	let r = new URLSearchParams({
 		token: e,
 		billingAddressRequirement: n
 	});
 	return `${t(e)}/iframe/bank?${r}`;
 }
-function b(e = { cardholderName: !1 }, t = "country") {
-	return `${(h[t] ?? h.country) + (e.cardholderName ? g : 0)}px`;
+function C(e = { cardholderName: !1 }, t = "country") {
+	return `${(v[t] ?? v.country) + (e.cardholderName ? y : 0)}px`;
 }
-function x(e = "country") {
-	return `${_[e] ?? _.country}px`;
+function w(e = "country") {
+	return `${b[e] ?? b.country}px`;
 }
-function S(e, t) {
+function T(e, t) {
 	let n = { ...t };
 	function a(t) {
 		switch (t.data.type) {
@@ -274,7 +356,7 @@ function S(e, t) {
 }
 //#endregion
 //#region src/mount.ts
-function C(e) {
+function E(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.`);
@@ -282,26 +364,26 @@ function C(e) {
 	}
 	return e;
 }
-var w = {
+var D = {
 	width: "calc(100% + 8px)",
 	transition: "opacity 150ms ease-in, height 200ms ease-in-out",
 	margin: "0 -4px",
 	opacity: "0",
 	border: "0"
 };
-function T({ src: e, title: t, name: n, height: r, allow: i }) {
+function O({ 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, w, { height: r }), a;
+	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, D, { height: r }), a;
 }
-function E(e, t) {
-	let n = C(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t, s = T({
-		src: v(r, i, a),
+function k(e, t) {
+	let n = E(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t, s = O({
+		src: x(r, i, a),
 		title: "Secure credit card payment method form powered by Amos",
 		name: "amos-credit-card-payment-method-form",
-		height: b(i, a)
+		height: C(i, a)
 	});
 	n.appendChild(s);
-	let c = S(s, {
+	let c = T(s, {
 		...o,
 		onHeightChange: (e) => {
 			s.style.height = e, o.onHeightChange?.(e);
@@ -318,15 +400,15 @@ function E(e, t) {
 		}
 	};
 }
-function D(e, t) {
-	let n = C(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t, o = T({
-		src: y(r, i),
+function A(e, t) {
+	let n = E(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t, o = O({
+		src: S(r, i),
 		title: "Secure bank account payment method form powered by Amos",
 		name: "amos-bank-account-payment-method-form",
-		height: x(i)
+		height: w(i)
 	});
 	n.appendChild(o);
-	let s = S(o, {
+	let s = T(o, {
 		...a,
 		onHeightChange: (e) => {
 			o.style.height = e, a.onHeightChange?.(e);
@@ -343,11 +425,37 @@ function D(e, t) {
 		}
 	};
 }
-function O(e, t) {
-	let n = C(e), { renderToken: r, ...i } = t, a = T({
-		src: d(r),
+function j(e, t) {
+	let n = E(e), { renderToken: r, ...i } = t, a = O({
+		src: m(r),
 		title: "Secure Google Pay button powered by Amos",
 		name: "amos-google-pay-button",
+		height: h(),
+		allow: "payment"
+	});
+	n.appendChild(a);
+	let o = g(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 M(e, t) {
+	let n = E(e), { renderToken: r, ...i } = t, a = O({
+		src: d(r),
+		title: "Secure Apple Pay button powered by Amos",
+		name: "amos-apple-pay-button",
 		height: f(),
 		allow: "payment"
 	});
@@ -370,4 +478,4 @@ function O(e, t) {
 	};
 }
 //#endregion
-export { p as attachGooglePayButtonListeners, S as attachPaymentMethodFormListeners, c as confirmPaymentIntent, l as confirmSetupIntent, n as createMessage, e as decodeJwt, m as formatGooglePayPaymentData, x as getBankAccountFormInitialHeight, y as getBankAccountFormSrc, b as getCreditCardFormInitialHeight, v as getCreditCardFormSrc, t as getEmbedOrigin, f as getGooglePayButtonInitialHeight, d as getGooglePayButtonSrc, D as mountAmosBankAccountPaymentMethodForm, E as mountAmosCreditCardPaymentMethodForm, O as mountAmosGooglePayButton, u as sendConfirmationFailed, r as sendParentReadyMessage, a as updateAmount, i as updateAppearance, o as updateMerchantName, s as validateForm };
+export { p as attachApplePayButtonListeners, g as attachGooglePayButtonListeners, T as attachPaymentMethodFormListeners, c as confirmPaymentIntent, l as confirmSetupIntent, n as createMessage, e as decodeJwt, _ as formatGooglePayPaymentData, f as getApplePayButtonInitialHeight, d as getApplePayButtonSrc, w as getBankAccountFormInitialHeight, S as getBankAccountFormSrc, C as getCreditCardFormInitialHeight, x as getCreditCardFormSrc, t as getEmbedOrigin, h as getGooglePayButtonInitialHeight, m as getGooglePayButtonSrc, M as mountAmosApplePayButton, A as mountAmosBankAccountPaymentMethodForm, k as mountAmosCreditCardPaymentMethodForm, j as mountAmosGooglePayButton, u as sendConfirmationFailed, r as sendParentReadyMessage, a as updateAmount, i as updateAppearance, o as updateMerchantName, s as validateForm };

package/dist/mount.d.ts

@@ -1,3 +1,4 @@
+import { ApplePayButtonController, ApplePayButtonListenerOptions } from './apple-pay';
 import { GooglePayButtonController, GooglePayButtonListenerOptions } from './google-pay';
 import { BillingAddressRequirement, CreditCardAdditionalFields, PaymentMethodFormController, PaymentMethodFormListenerOptions } from './payment-method-form';
 type Container = HTMLElement | string;
@@ -104,4 +105,31 @@ export type AmosGooglePayButtonMountController = GooglePayButtonController & {
  * iframe, an `update()` method, and a `destroy()` method.
  */
 export declare function mountAmosGooglePayButton(container: Container, options: AmosGooglePayButtonOptions): AmosGooglePayButtonMountController;
+/**
+ * Options accepted by {@link mountAmosApplePayButton}.
+ */
+export type AmosApplePayButtonOptions = ApplePayButtonListenerOptions & {
+    /**
+     * The Amos render token for the Apple Pay button.
+     *
+     * It is safe to pass this to the client. Create this on
+     * https://dashboard.amos.com.
+     */
+    renderToken: string;
+};
+/**
+ * Controller returned by {@link mountAmosApplePayButton}.
+ */
+export type AmosApplePayButtonMountController = ApplePayButtonController & {
+    /**
+     * The underlying `<iframe>` element.
+     */
+    iframe: HTMLIFrameElement;
+};
+/**
+ * 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.
+ */
+export declare function mountAmosApplePayButton(container: Container, options: AmosApplePayButtonOptions): AmosApplePayButtonMountController;
 export {};

package/package.json

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

package/src/apple-pay.ts

@@ -0,0 +1,187 @@
+import type { components } from "@amos.com/node";
+import { getEmbedOrigin } from "./jwt";
+import {
+  confirmPaymentIntent,
+  sendConfirmationFailed,
+  sendParentReadyMessage,
+  updateAmount as sendUpdateAmount,
+  updateAppearance as sendUpdateAppearance,
+  updateMerchantName as sendUpdateMerchantName,
+} from "./messaging";
+import type { Appearance, Message } from "./types";
+
+/**
+ * Build the iframe `src` URL for the embedded Apple Pay button.
+ */
+export function getApplePayButtonSrc(renderToken: string): string {
+  return `${getEmbedOrigin(renderToken)}/iframe/apple-pay?token=${renderToken}`;
+}
+
+/**
+ * Default iframe pixel height for the Apple Pay button.
+ */
+export function getApplePayButtonInitialHeight(): string {
+  return "40px";
+}
+
+/**
+ * Options accepted by {@link attachApplePayButtonListeners}.
+ */
+export type ApplePayButtonListenerOptions = {
+  /** The amount of the payment, in the same format passed in props. */
+  amount: string;
+  /** A user-visible merchant name. */
+  merchantName: string;
+  /**
+   * Custom appearance to apply when the iframe first becomes ready and
+   * whenever the appearance changes.
+   */
+  appearance?: Appearance;
+  /**
+   * Called whenever the iframe asks the host page to resize it. Update
+   * the iframe's `height` style here.
+   */
+  onHeightChange?: (height: string) => void;
+  /**
+   * Called once the iframe has applied the requested appearance and is
+   * ready to be revealed.
+   */
+  onAppearanceReady?: () => void;
+  /**
+   * Called when the user initiates a payment intent request via the
+   * Apple Pay button. Your implementation should create a payment
+   * intent on your server and resolve with the resulting embed token.
+   */
+  onInitiatePaymentIntentRequest: ({
+    paymentIntentCreateAttributes,
+    customerCreateAttributes,
+  }: {
+    paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+  }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
+  /**
+   * Called when payment intent confirmation succeeds.
+   */
+  onPaymentIntentConfirmationSucceeded: (
+    paymentIntent: components["schemas"]["PaymentIntent"],
+  ) => void;
+  /**
+   * Called when payment intent confirmation fails.
+   */
+  onConfirmationFailed: (errorMessage: string) => void;
+};
+
+/**
+ * Controller returned by {@link attachApplePayButtonListeners} and
+ * {@link mountAmosApplePayButton}.
+ */
+export type ApplePayButtonController = {
+  /**
+   * Update one or more listener options without re-attaching the
+   * message listener. Pass `amount` or `merchantName` to push the new
+   * value into the iframe; pass `appearance` to update theme variables.
+   */
+  update: (patch: Partial<ApplePayButtonListenerOptions>) => void;
+  /**
+   * Detach the iframe message listener.
+   */
+  destroy: () => void;
+};
+
+/**
+ * Wire up the host-page side of the Apple Pay iframe message protocol
+ * on an existing `<iframe>` element. Returns a controller for updating
+ * options and tearing down the listener.
+ *
+ * The iframe is expected to have already been added to the DOM with the
+ * correct `src` (see {@link getApplePayButtonSrc}).
+ *
+ * Uses the same postMessage protocol as Google Pay express checkout.
+ */
+export function attachApplePayButtonListeners(
+  iframe: HTMLIFrameElement,
+  options: ApplePayButtonListenerOptions,
+): ApplePayButtonController {
+  let current = { ...options };
+
+  function pushAmount() {
+    sendUpdateAmount({ iframe, amount: current.amount });
+  }
+
+  function pushMerchantName() {
+    sendUpdateMerchantName({ iframe, merchantName: current.merchantName });
+  }
+
+  function handleMessage(event: MessageEvent<Message>) {
+    switch (event.data.type) {
+      case "IFRAME_READY":
+        sendParentReadyMessage(iframe);
+        sendUpdateAppearance({ iframe, appearance: current.appearance });
+        pushAmount();
+        pushMerchantName();
+        break;
+
+      case "UPDATE_HEIGHT":
+        current.onHeightChange?.(event.data.height);
+        break;
+
+      case "UPDATE_APPEARANCE":
+        sendUpdateAppearance({ iframe, appearance: event.data.appearance });
+        break;
+
+      case "UPDATED_APPEARANCE":
+        current.onAppearanceReady?.();
+        break;
+
+      case "CREATE_PAYMENT_INTENT":
+        current
+          .onInitiatePaymentIntentRequest({
+            paymentIntentCreateAttributes:
+              event.data.paymentIntentCreateAttributes,
+            customerCreateAttributes: event.data.customerCreateAttributes,
+          })
+          .then((token) => {
+            confirmPaymentIntent({ iframe, token });
+          })
+          .catch((error: unknown) => {
+            sendConfirmationFailed({
+              iframe,
+              errorMessage:
+                error instanceof Error ? error.message : "Unknown error",
+            });
+          });
+        break;
+
+      case "PAYMENT_INTENT_CONFIRMATION_SUCCEEDED":
+        current.onPaymentIntentConfirmationSucceeded(event.data.paymentIntent);
+        break;
+
+      case "CONFIRMATION_FAILED":
+        current.onConfirmationFailed(event.data.errorMessage);
+        break;
+    }
+  }
+
+  window.addEventListener("message", handleMessage);
+
+  return {
+    update(patch) {
+      const hadAppearance = "appearance" in patch;
+      const hadAmount = "amount" in patch;
+      const hadMerchantName = "merchantName" in patch;
+      current = { ...current, ...patch };
+      if (hadAppearance) {
+        sendUpdateAppearance({ iframe, appearance: current.appearance });
+      }
+      if (hadAmount) {
+        pushAmount();
+      }
+      if (hadMerchantName) {
+        pushMerchantName();
+      }
+    },
+    destroy() {
+      window.removeEventListener("message", handleMessage);
+    },
+  };
+}

package/src/index.ts

@@ -1,5 +1,15 @@
 /// <reference types="googlepay" />
 
+export type {
+  ApplePayButtonController,
+  ApplePayButtonListenerOptions,
+} from "./apple-pay";
+export {
+  attachApplePayButtonListeners,
+  getApplePayButtonInitialHeight,
+  getApplePayButtonSrc,
+} from "./apple-pay";
+
 export type {
   FormattedGooglePayPaymentData,
   GooglePayButtonController,
@@ -25,6 +35,8 @@ export {
   validateForm,
 } from "./messaging";
 export type {
+  AmosApplePayButtonMountController,
+  AmosApplePayButtonOptions,
   AmosBankAccountPaymentMethodFormOptions,
   AmosCreditCardPaymentMethodFormOptions,
   AmosGooglePayButtonMountController,
@@ -32,6 +44,7 @@ export type {
   AmosPaymentMethodFormMountController,
 } from "./mount";
 export {
+  mountAmosApplePayButton,
   mountAmosBankAccountPaymentMethodForm,
   mountAmosCreditCardPaymentMethodForm,
   mountAmosGooglePayButton,

package/src/mount.ts

@@ -1,3 +1,10 @@
+import {
+  attachApplePayButtonListeners,
+  type ApplePayButtonController,
+  type ApplePayButtonListenerOptions,
+  getApplePayButtonInitialHeight,
+  getApplePayButtonSrc,
+} from "./apple-pay";
 import {
   attachGooglePayButtonListeners,
   type GooglePayButtonController,
@@ -301,3 +308,69 @@ export function mountAmosGooglePayButton(
     },
   };
 }
+
+/**
+ * Options accepted by {@link mountAmosApplePayButton}.
+ */
+export type AmosApplePayButtonOptions = ApplePayButtonListenerOptions & {
+  /**
+   * The Amos render token for the Apple Pay button.
+   *
+   * It is safe to pass this to the client. Create this on
+   * https://dashboard.amos.com.
+   */
+  renderToken: string;
+};
+
+/**
+ * Controller returned by {@link mountAmosApplePayButton}.
+ */
+export type AmosApplePayButtonMountController = ApplePayButtonController & {
+  /**
+   * The underlying `<iframe>` element.
+   */
+  iframe: HTMLIFrameElement;
+};
+
+/**
+ * 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.
+ */
+export function mountAmosApplePayButton(
+  container: Container,
+  options: AmosApplePayButtonOptions,
+): AmosApplePayButtonMountController {
+  const host = resolveContainer(container);
+  const { renderToken, ...listenerOptions } = options;
+
+  const iframe = createIframe({
+    src: getApplePayButtonSrc(renderToken),
+    title: "Secure Apple Pay button powered by Amos",
+    name: "amos-apple-pay-button",
+    height: getApplePayButtonInitialHeight(),
+    allow: "payment",
+  });
+  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 {
+    iframe,
+    update: controller.update,
+    destroy() {
+      controller.destroy();
+      iframe.remove();
+    },
+  };
+}