@amos.com/amos-js 0.9.9 → 0.9.10

package/README.md

@@ -289,15 +289,43 @@ Mount the secure Google Pay button (express checkout) into a container element.
 
 - `onResult` (`(result: ConfirmationResult) => void`) — required. Called when the interactive confirmation attempt finishes (`succeeded`, `failed`, or `incomplete` with `reason`). Not settlement proof; verify via webhooks.
 
-**Optional `options`:** `appearance`, `onHeightChange`, `onAppearanceReady`.
+**Optional `options`:** `appearance`, `onHeightChange`, `onAppearanceReady`, plus Google Pay button visual options using the same names as `@google-pay/button-react`:
+
+- `buttonType` (`"book" | "buy" | "checkout" | "donate" | "order" | "pay" | "plain" | "subscribe" | "short" | "long"`, defaults to `"short"`)
+- `buttonColor` (`"default" | "black" | "white"`)
+- `buttonRadius` (`number`, 0–20)
+- `buttonSizeMode` (`"static" | "fill"`)
+- `buttonLocale` (`string`, e.g. `"en"`)
+- `buttonBorderType` (`"no_border" | "default_border"`)
+- `style` (`{ [property: string]: string | number }`) — applied to the Google Pay button inside the iframe (e.g. `{ height: "48px", width: "100%" }`). Combined with `buttonSizeMode: "fill"` to stretch the button.
 
 **Returns** `AmosGooglePayButtonMountController`:
 
-- `iframe`, `update(patch)`, `destroy()`. Use `update({ amount, merchantName })` to push new values into the iframe.
+- `iframe`, `update(patch)`, `destroy()`. Use `update({ amount, merchantName })` to push new values into the iframe. Use `update({ buttonType, style, ... })` to restyle the button.
 
 ### `mountAmosApplePayButton(container, options)`
 
-Mount the secure Apple Pay button (express checkout). Same options and return shape as `mountAmosGooglePayButton`.
+Mount the secure Apple Pay button (express checkout). Same required options and return shape as `mountAmosGooglePayButton`.
+
+**Optional visual options** use Apple's `<apple-pay-button>` attribute names:
+
+- `buttonstyle` (`"black" | "white" | "white-outline"`, defaults to `"black"`)
+- `type` (`"plain" | "buy" | "set-up" | "donate" | "check-out" | "book" | "subscribe" | "reload" | "add-money" | "top-up" | "order" | "rent" | "support" | "contribute" | "tip"`, defaults to `"plain"`)
+- `locale` (`string`, BCP 47, defaults to `"en-US"`)
+- `style` — applied to the `<apple-pay-button>` inside the iframe. Apple sizes the button with CSS custom properties, not CSS `height`:
+
+```ts
+button.update({
+  buttonstyle: "white-outline",
+  type: "buy",
+  locale: "en-GB",
+  style: {
+    "--apple-pay-button-height": "48px",
+    "--apple-pay-button-width": "100%",
+    width: "100%",
+  },
+});
+```
 
 ### `validateForm({ iframe })`
 

package/dist/apple-pay.d.ts

@@ -1,5 +1,5 @@
 import { components } from '@amos.com/node';
-import { Appearance, ConfirmationResult } from './types';
+import { Appearance, ApplePayButtonElementProps, ConfirmationResult } from './types';
 /**
  * Build the iframe `src` URL for the embedded Apple Pay button.
  */
@@ -11,7 +11,7 @@ export declare function getApplePayButtonInitialHeight(): string;
 /**
  * Options accepted by {@link attachApplePayButtonListeners}.
  */
-export type ApplePayButtonListenerOptions = {
+export type ApplePayButtonListenerOptions = ApplePayButtonElementProps & {
     /** The amount of the payment, in the same format passed in props. */
     amount: string;
     /** A user-visible merchant name. */
@@ -54,7 +54,9 @@ 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.
+     * value into the iframe; pass `appearance` to update theme variables;
+     * pass `buttonstyle`, `type`, `locale`, or `style` to restyle the
+     * Apple Pay button.
      */
     update: (patch: Partial<ApplePayButtonListenerOptions>) => void;
     /**

package/dist/google-pay.d.ts

@@ -1,5 +1,5 @@
 import { components } from '@amos.com/node';
-import { Appearance, ConfirmationResult } from './types';
+import { Appearance, ConfirmationResult, GooglePayButtonElementProps } from './types';
 /**
  * Build the iframe `src` URL for the embedded Google Pay button.
  */
@@ -11,7 +11,7 @@ export declare function getGooglePayButtonInitialHeight(): string;
 /**
  * Options accepted by {@link attachGooglePayButtonListeners}.
  */
-export type GooglePayButtonListenerOptions = {
+export type GooglePayButtonListenerOptions = GooglePayButtonElementProps & {
     /** The amount of the payment, in the same format passed in props. */
     amount: string;
     /** A user-visible merchant name. */
@@ -54,7 +54,10 @@ export type GooglePayButtonController = {
     /**
      * 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.
+     * value into the iframe; pass `appearance` to update theme variables;
+     * pass `buttonType`, `buttonColor`, `buttonRadius`, `buttonSizeMode`,
+     * `buttonLocale`, `buttonBorderType`, or `style` to restyle the
+     * Google Pay button.
      */
     update: (patch: Partial<GooglePayButtonListenerOptions>) => void;
     /**

package/dist/index.d.ts

@@ -4,10 +4,10 @@ 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, resetForm, sendConfirmationResult, sendParentReadyMessage, updateAmount, updateAppearance, updateMerchantName, validateForm, } from './messaging';
+export { confirmPaymentIntent, confirmSetupIntent, resetForm, sendConfirmationResult, sendParentReadyMessage, updateAmount, updateAppearance, updateApplePayButton, updateGooglePayButton, 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';
 export { attachPaymentMethodFormListeners, getBankAccountFormInitialHeight, getBankAccountFormSrc, getCreditCardFormInitialHeight, getCreditCardFormSrc, } from './payment-method-form';
-export type { Appearance, AppearanceLabels, ConfirmationIncompleteReason, ConfirmationResult, Message, ThemeVariable, } from './types';
-export { createMessage } from './types';
+export type { Appearance, AppearanceLabels, ApplePayButtonElementProps, ApplePayButtonStyle, ApplePayButtonType, ConfirmationIncompleteReason, ConfirmationResult, GooglePayButtonElementProps, Message, ThemeVariable, WalletButtonStyle, } from './types';
+export { createMessage, pickApplePayButtonElementProps, pickGooglePayButtonElementProps, serializeWalletButtonStyle, } from './types';

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`data-amos-apple-pay-waiting`;function t({onCancel:t}){let n=document.querySelector(`[${e}]`);if(n)return n;let r=document.createElement(`div`);r.setAttribute(e,`true`),r.setAttribute(`role`,`dialog`),r.setAttribute(`aria-modal`,`true`),r.setAttribute(`aria-labelledby`,`amos-apple-pay-waiting-title`),Object.assign(r.style,{position:`fixed`,inset:`0`,zIndex:`2147483646`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:`24px`,boxSizing:`border-box`,background:`rgba(0, 0, 0, 0.55)`,fontFamily:`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`});let i=document.createElement(`div`);Object.assign(i.style,{width:`100%`,maxWidth:`360px`,borderRadius:`12px`,background:`#fff`,padding:`28px 24px 20px`,boxSizing:`border-box`,textAlign:`center`,boxShadow:`0 12px 40px rgba(0, 0, 0, 0.25)`});let a=document.createElement(`div`);a.setAttribute(`aria-hidden`,`true`),Object.assign(a.style,{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,gap:`6px`,marginBottom:`16px`,fontSize:`28px`,fontWeight:`600`,letterSpacing:`-0.02em`,color:`#000`,lineHeight:`1`}),a.innerHTML=`<svg width="22" height="26" viewBox="0 0 814 1000" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg><span>Pay</span>`;let o=document.createElement(`p`);o.id=`amos-apple-pay-waiting-title`,Object.assign(o.style,{margin:`0 0 20px`,fontSize:`15px`,lineHeight:`1.45`,color:`#1a1a1a`}),o.textContent=`Complete your payment in the open Apple Pay window, or close Apple Pay to continue paying another way.`;let s=document.createElement(`button`);return s.type=`button`,s.textContent=`Cancel payment`,Object.assign(s.style,{display:`block`,width:`100%`,border:`none`,borderRadius:`8px`,padding:`12px 16px`,background:`#2c2c2e`,color:`#fff`,fontSize:`15px`,fontWeight:`500`,cursor:`pointer`}),s.addEventListener(`click`,t),i.append(a,o,s),r.append(i),document.body.append(r),r}function n(){document.querySelector(`[${e}]`)?.remove()}function r(e){let[t=``,n=``,r=``]=e?.split(`.`)??[],i=typeof atob==`function`?atob:e=>Buffer.from(e,`base64`).toString(`utf8`);return{header:JSON.parse(i(t)),payload:JSON.parse(i(n)),signature:r}}function i(e){let{env:t=`sandbox`}=r(e).payload;switch(t){case`production`:return`https://embed.amos.com`;case`sandbox`:return`https://embed-sandbox.amos.com`;default:return`https://embed-sandbox.amos.com`}}function a(e){return e}function o(e){return new URL(e.src).origin}function s(e){e?.contentWindow&&e.contentWindow.postMessage(a({type:`PARENT_ACKNOWLEDGED_IFRAME_READY`}),o(e))}function c({iframe:e,appearance:t={}}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`UPDATE_APPEARANCE`,appearance:t}),o(e))}function l({iframe:e,amount:t}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`UPDATE_AMOUNT`,amount:t}),o(e))}function u({iframe:e,merchantName:t}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`UPDATE_MERCHANT_NAME`,merchantName:t}),o(e))}function d({iframe:e}){let t=crypto.randomUUID();return new Promise(n=>{e?.contentWindow&&e.contentWindow.postMessage(a({type:`VALIDATE_FORM`,requestId:t}),o(e));let r=setTimeout(()=>{window.removeEventListener(`message`,i),n(!1)},5e3);function i(e){e.data.type===`VALIDATE_FORM`&&e.data.requestId===t&&(window.removeEventListener(`message`,i),clearTimeout(r),n(e.data.isValid??!1))}window.addEventListener(`message`,i)})}function f({iframe:e}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`RESET_FORM`}),o(e))}function p({iframe:e,token:t}){if(!e?.contentWindow)return;let{payment_intent_id:n}=r(t).payload;e.contentWindow.postMessage(a({type:`CONFIRM_PAYMENT_INTENT`,token:t,id:n??void 0}),o(e))}function m({iframe:e,token:t}){if(!e?.contentWindow)return;let{setup_intent_id:n}=r(t).payload;e.contentWindow.postMessage(a({type:`CONFIRM_SETUP_INTENT`,token:t,id:n??void 0}),o(e))}function h({iframe:e,result:t}){e?.contentWindow&&e.contentWindow.postMessage(a({type:`CONFIRMATION_RESULT`,result:t}),o(e))}function g(e){return`${i(e)}/iframe/apple-pay?token=${e}`}function _(){return`40px`}function v(e){e.contentWindow?.postMessage(a({type:`APPLE_PAY_CANCEL`}),o(e))}function y(e,r){let i={...r};function a(){l({iframe:e,amount:i.amount})}function o(){u({iframe:e,merchantName:i.merchantName})}function d(r){if(r.source===e.contentWindow)switch(r.data.type){case`IFRAME_READY`:s(e),c({iframe:e,appearance:i.appearance}),a(),o();break;case`UPDATE_HEIGHT`:i.onHeightChange?.(r.data.height);break;case`UPDATE_APPEARANCE`:c({iframe:e,appearance:r.data.appearance});break;case`UPDATED_APPEARANCE`:i.onAppearanceReady?.();break;case`APPLE_PAY_WINDOW_OPEN`:t({onCancel:()=>{v(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=>{p({iframe:e,token:t})}).catch(e=>{n(),i.onResult({status:`failed`,errorMessage:e instanceof Error?e.message:`Unknown error`})});break;case`CONFIRMATION_RESULT`:n(),i.onResult(r.data.result)}}return window.addEventListener(`message`,d),{update(t){let n=`appearance`in t,r=`amount`in t,s=`merchantName`in t;i={...i,...t},n&&c({iframe:e,appearance:i.appearance}),r&&a(),s&&o()},destroy(){window.removeEventListener(`message`,d),n()}}}function b(e){return`${i(e)}/iframe/google-pay?token=${e}`}function x(){return`40px`}function S(e,t){let n={...t};function r(){l({iframe:e,amount:n.amount})}function i(){u({iframe:e,merchantName:n.merchantName})}function a(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:s(e),c({iframe:e,appearance:n.appearance}),r(),i();break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:c({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`CREATE_PAYMENT_INTENT`:n.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:t.data.paymentIntentCreateAttributes,customerCreateAttributes:t.data.customerCreateAttributes}).then(t=>{p({iframe:e,token:t})}).catch(e=>{n.onResult({status:`failed`,errorMessage:e instanceof Error?e.message:`Unknown error`})});break;case`CONFIRMATION_RESULT`:n.onResult(t.data.result)}}return window.addEventListener(`message`,a),{update(t){let a=`appearance`in t,o=`amount`in t,s=`merchantName`in t;n={...n,...t},a&&c({iframe:e,appearance:n.appearance}),o&&r(),s&&i()},destroy(){window.removeEventListener(`message`,a)}}}function C({paymentData:e}){return{paymentMethod:{type:`googlepay`,billing_address_attributes:{name:e.shippingAddress?.name,address_line1:e.shippingAddress?.address1,address_line2:e.shippingAddress?.address2,city:e.shippingAddress?.locality,state:e.shippingAddress?.administrativeArea,postal_code:e.shippingAddress?.postalCode,country:e.shippingAddress?.countryCode,email:e.email,phone:e.shippingAddress?.phoneNumber},card_profile_attributes:{wallet_payload:e.paymentMethodData.tokenizationData.token}}}}var w={country:212,full:452},T=80,E={country:400,full:640};function D(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 O(e,t=`country`){let n=new URLSearchParams({token:e,billingAddressRequirement:t});return`${i(e)}/iframe/bank?${n}`}function k(e={cardholderName:!1},t=`country`){return`${(w[t]??w.country)+(e.cardholderName?T:0)}px`}function A(e=`country`){return`${E[e]??E.country}px`}function j(e,t){let n={...t};function r(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:s(e),c({iframe:e,appearance:n.appearance});break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:c({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`CONFIRMATION_RESULT`:n.onResult(t.data.result)}}return window.addEventListener(`message`,r),{update(t){let r=`appearance`in t;n={...n,...t},r&&c({iframe:e,appearance:n.appearance})},destroy(){window.removeEventListener(`message`,r)}}}function M(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 N={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`};function P({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,N,{height:r}),a}function F(e,t){let n=M(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t,s=P({src:D(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:k(i,a)});n.appendChild(s);let c=j(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 I(e,t){let n=M(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t,o=P({src:O(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:A(i)});n.appendChild(o);let s=j(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 L(e,t){let n=M(e),{renderToken:r,...i}=t,a=P({src:b(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:x(),allow:`payment`});n.appendChild(a);let o=S(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 R(e,t){let n=M(e),{renderToken:r,...i}=t,a=P({src:g(r),title:`Secure Apple Pay button powered by Amos`,name:`amos-apple-pay-button`,height:_(),allow:`payment`});n.appendChild(a);let o=y(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=y,exports.attachGooglePayButtonListeners=S,exports.attachPaymentMethodFormListeners=j,exports.confirmPaymentIntent=p,exports.confirmSetupIntent=m,exports.createMessage=a,exports.decodeJwt=r,exports.formatGooglePayPaymentData=C,exports.getApplePayButtonInitialHeight=_,exports.getApplePayButtonSrc=g,exports.getBankAccountFormInitialHeight=A,exports.getBankAccountFormSrc=O,exports.getCreditCardFormInitialHeight=k,exports.getCreditCardFormSrc=D,exports.getEmbedOrigin=i,exports.getGooglePayButtonInitialHeight=x,exports.getGooglePayButtonSrc=b,exports.mountAmosApplePayButton=R,exports.mountAmosBankAccountPaymentMethodForm=I,exports.mountAmosCreditCardPaymentMethodForm=F,exports.mountAmosGooglePayButton=L,exports.resetForm=f,exports.sendConfirmationResult=h,exports.sendParentReadyMessage=s,exports.updateAmount=l,exports.updateAppearance=c,exports.updateMerchantName=u,exports.validateForm=d;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`data-amos-apple-pay-waiting`;function t({onCancel:t}){let n=document.querySelector(`[${e}]`);if(n)return n;let r=document.createElement(`div`);r.setAttribute(e,`true`),r.setAttribute(`role`,`dialog`),r.setAttribute(`aria-modal`,`true`),r.setAttribute(`aria-labelledby`,`amos-apple-pay-waiting-title`),Object.assign(r.style,{position:`fixed`,inset:`0`,zIndex:`2147483646`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:`24px`,boxSizing:`border-box`,background:`rgba(0, 0, 0, 0.55)`,fontFamily:`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`});let i=document.createElement(`div`);Object.assign(i.style,{width:`100%`,maxWidth:`360px`,borderRadius:`12px`,background:`#fff`,padding:`28px 24px 20px`,boxSizing:`border-box`,textAlign:`center`,boxShadow:`0 12px 40px rgba(0, 0, 0, 0.25)`});let a=document.createElement(`div`);a.setAttribute(`aria-hidden`,`true`),Object.assign(a.style,{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,gap:`6px`,marginBottom:`16px`,fontSize:`28px`,fontWeight:`600`,letterSpacing:`-0.02em`,color:`#000`,lineHeight:`1`}),a.innerHTML=`<svg width="22" height="26" viewBox="0 0 814 1000" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg><span>Pay</span>`;let o=document.createElement(`p`);o.id=`amos-apple-pay-waiting-title`,Object.assign(o.style,{margin:`0 0 20px`,fontSize:`15px`,lineHeight:`1.45`,color:`#1a1a1a`}),o.textContent=`Complete your payment in the open Apple Pay window, or close Apple Pay to continue paying another way.`;let s=document.createElement(`button`);return s.type=`button`,s.textContent=`Cancel payment`,Object.assign(s.style,{display:`block`,width:`100%`,border:`none`,borderRadius:`8px`,padding:`12px 16px`,background:`#2c2c2e`,color:`#fff`,fontSize:`15px`,fontWeight:`500`,cursor:`pointer`}),s.addEventListener(`click`,t),i.append(a,o,s),r.append(i),document.body.append(r),r}function n(){document.querySelector(`[${e}]`)?.remove()}function r(e){let[t=``,n=``,r=``]=e?.split(`.`)??[],i=typeof atob==`function`?atob:e=>Buffer.from(e,`base64`).toString(`utf8`);return{header:JSON.parse(i(t)),payload:JSON.parse(i(n)),signature:r}}function i(e){let{env:t=`sandbox`}=r(e).payload;switch(t){case`production`:return`https://embed.amos.com`;case`sandbox`:return`https://embed-sandbox.amos.com`;default:return`https://embed-sandbox.amos.com`}}function a(e){if(!e||typeof e!=`object`)return;let t={};for(let[n,r]of Object.entries(e)){if(typeof r==`string`){if(r.length===0)continue;t[n]=r;continue}typeof r==`number`&&Number.isFinite(r)&&(t[n]=r)}return Object.keys(t).length>0?t:void 0}function o(e){let t={};if(e.buttonstyle!==void 0&&(t.buttonstyle=e.buttonstyle),e.type!==void 0&&(t.type=e.type),e.locale!==void 0&&(t.locale=e.locale),e.style!==void 0){let n=a(e.style);n&&(t.style=n)}return t}function s(e){let t={};if(e.buttonType!==void 0&&(t.buttonType=e.buttonType),e.buttonColor!==void 0&&(t.buttonColor=e.buttonColor),e.buttonRadius!==void 0&&(t.buttonRadius=e.buttonRadius),e.buttonSizeMode!==void 0&&(t.buttonSizeMode=e.buttonSizeMode),e.buttonLocale!==void 0&&(t.buttonLocale=e.buttonLocale),e.buttonBorderType!==void 0&&(t.buttonBorderType=e.buttonBorderType),e.style!==void 0){let n=a(e.style);n&&(t.style=n)}return t}function c(e){return e}function l(e){return new URL(e.src).origin}function u(e){e?.contentWindow&&e.contentWindow.postMessage(c({type:`PARENT_ACKNOWLEDGED_IFRAME_READY`}),l(e))}function d({iframe:e,appearance:t={}}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_APPEARANCE`,appearance:t}),l(e))}function f({iframe:e,props:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_APPLE_PAY_BUTTON`,props:o(t)}),l(e))}function p({iframe:e,props:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_GOOGLE_PAY_BUTTON`,props:s(t)}),l(e))}function m({iframe:e,amount:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_AMOUNT`,amount:t}),l(e))}function h({iframe:e,merchantName:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_MERCHANT_NAME`,merchantName:t}),l(e))}function g({iframe:e}){let t=crypto.randomUUID();return new Promise(n=>{e?.contentWindow&&e.contentWindow.postMessage(c({type:`VALIDATE_FORM`,requestId:t}),l(e));let r=setTimeout(()=>{window.removeEventListener(`message`,i),n(!1)},5e3);function i(e){e.data.type===`VALIDATE_FORM`&&e.data.requestId===t&&(window.removeEventListener(`message`,i),clearTimeout(r),n(e.data.isValid??!1))}window.addEventListener(`message`,i)})}function _({iframe:e}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`RESET_FORM`}),l(e))}function v({iframe:e,token:t}){if(!e?.contentWindow)return;let{payment_intent_id:n}=r(t).payload;e.contentWindow.postMessage(c({type:`CONFIRM_PAYMENT_INTENT`,token:t,id:n??void 0}),l(e))}function y({iframe:e,token:t}){if(!e?.contentWindow)return;let{setup_intent_id:n}=r(t).payload;e.contentWindow.postMessage(c({type:`CONFIRM_SETUP_INTENT`,token:t,id:n??void 0}),l(e))}function b({iframe:e,result:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`CONFIRMATION_RESULT`,result:t}),l(e))}function x(e){return`${i(e)}/iframe/apple-pay?token=${e}`}function S(){return`40px`}function C(e){e.contentWindow?.postMessage(c({type:`APPLE_PAY_CANCEL`}),l(e))}function w(e,r){let i={...r};function a(){m({iframe:e,amount:i.amount})}function o(){h({iframe:e,merchantName:i.merchantName})}function s(){f({iframe:e,props:i})}function c(r){if(r.source===e.contentWindow)switch(r.data.type){case`IFRAME_READY`:u(e),d({iframe:e,appearance:i.appearance}),a(),o(),s();break;case`UPDATE_HEIGHT`:i.onHeightChange?.(r.data.height);break;case`UPDATE_APPEARANCE`:d({iframe:e,appearance:r.data.appearance});break;case`UPDATED_APPEARANCE`:i.onAppearanceReady?.();break;case`APPLE_PAY_WINDOW_OPEN`:t({onCancel:()=>{C(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=>{v({iframe:e,token:t})}).catch(e=>{n(),i.onResult({status:`failed`,errorMessage:e instanceof Error?e.message:`Unknown error`})});break;case`CONFIRMATION_RESULT`:n(),i.onResult(r.data.result)}}return window.addEventListener(`message`,c),{update(t){let n=`appearance`in t,r=`amount`in t,c=`merchantName`in t,l=`buttonstyle`in t||`type`in t||`locale`in t||`style`in t;i={...i,...t},n&&d({iframe:e,appearance:i.appearance}),r&&a(),c&&o(),l&&s()},destroy(){window.removeEventListener(`message`,c),n()}}}function T(e){return`${i(e)}/iframe/google-pay?token=${e}`}function E(){return`40px`}function D(e,t){let n={...t};function r(){m({iframe:e,amount:n.amount})}function i(){h({iframe:e,merchantName:n.merchantName})}function a(){p({iframe:e,props:n})}function o(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:u(e),d({iframe:e,appearance:n.appearance}),r(),i(),a();break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:d({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=>{v({iframe:e,token:t})}).catch(e=>{n.onResult({status:`failed`,errorMessage:e instanceof Error?e.message:`Unknown error`})});break;case`CONFIRMATION_RESULT`:n.onResult(t.data.result)}}return window.addEventListener(`message`,o),{update(t){let o=`appearance`in t,s=`amount`in t,c=`merchantName`in t,l=`buttonType`in t||`buttonColor`in t||`buttonRadius`in t||`buttonSizeMode`in t||`buttonLocale`in t||`buttonBorderType`in t||`style`in t;n={...n,...t},o&&d({iframe:e,appearance:n.appearance}),s&&r(),c&&i(),l&&a()},destroy(){window.removeEventListener(`message`,o)}}}function O({paymentData:e}){return{paymentMethod:{type:`googlepay`,billing_address_attributes:{name:e.shippingAddress?.name,address_line1:e.shippingAddress?.address1,address_line2:e.shippingAddress?.address2,city:e.shippingAddress?.locality,state:e.shippingAddress?.administrativeArea,postal_code:e.shippingAddress?.postalCode,country:e.shippingAddress?.countryCode,email:e.email,phone:e.shippingAddress?.phoneNumber},card_profile_attributes:{wallet_payload:e.paymentMethodData.tokenizationData.token}}}}var k={country:212,full:452},A=80,j={country:400,full:640};function M(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 N(e,t=`country`){let n=new URLSearchParams({token:e,billingAddressRequirement:t});return`${i(e)}/iframe/bank?${n}`}function P(e={cardholderName:!1},t=`country`){return`${(k[t]??k.country)+(e.cardholderName?A:0)}px`}function F(e=`country`){return`${j[e]??j.country}px`}function I(e,t){let n={...t};function r(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:u(e),d({iframe:e,appearance:n.appearance});break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:d({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`CONFIRMATION_RESULT`:n.onResult(t.data.result)}}return window.addEventListener(`message`,r),{update(t){let r=`appearance`in t;n={...n,...t},r&&d({iframe:e,appearance:n.appearance})},destroy(){window.removeEventListener(`message`,r)}}}function L(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 R={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`};function z({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,R,{height:r}),a}function B(e,t){let n=L(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t,s=z({src:M(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:P(i,a)});n.appendChild(s);let c=I(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 V(e,t){let n=L(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t,o=z({src:N(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:F(i)});n.appendChild(o);let s=I(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 H(e,t){let n=L(e),{renderToken:r,...i}=t,a=z({src:T(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:E(),allow:`payment`});n.appendChild(a);let o=D(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 U(e,t){let n=L(e),{renderToken:r,...i}=t,a=z({src:x(r),title:`Secure Apple Pay button powered by Amos`,name:`amos-apple-pay-button`,height:S(),allow:`payment`});n.appendChild(a);let o=w(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=w,exports.attachGooglePayButtonListeners=D,exports.attachPaymentMethodFormListeners=I,exports.confirmPaymentIntent=v,exports.confirmSetupIntent=y,exports.createMessage=c,exports.decodeJwt=r,exports.formatGooglePayPaymentData=O,exports.getApplePayButtonInitialHeight=S,exports.getApplePayButtonSrc=x,exports.getBankAccountFormInitialHeight=F,exports.getBankAccountFormSrc=N,exports.getCreditCardFormInitialHeight=P,exports.getCreditCardFormSrc=M,exports.getEmbedOrigin=i,exports.getGooglePayButtonInitialHeight=E,exports.getGooglePayButtonSrc=T,exports.mountAmosApplePayButton=U,exports.mountAmosBankAccountPaymentMethodForm=V,exports.mountAmosCreditCardPaymentMethodForm=B,exports.mountAmosGooglePayButton=H,exports.pickApplePayButtonElementProps=o,exports.pickGooglePayButtonElementProps=s,exports.resetForm=_,exports.sendConfirmationResult=b,exports.sendParentReadyMessage=u,exports.serializeWalletButtonStyle=a,exports.updateAmount=m,exports.updateAppearance=d,exports.updateApplePayButton=f,exports.updateGooglePayButton=p,exports.updateMerchantName=h,exports.validateForm=g;

package/dist/index.mjs

@@ -85,41 +85,82 @@ function i(e) {
 //#endregion
 //#region src/types.ts
 function a(e) {
+	if (!e || typeof e != "object") return;
+	let t = {};
+	for (let [n, r] of Object.entries(e)) {
+		if (typeof r == "string") {
+			if (r.length === 0) continue;
+			t[n] = r;
+			continue;
+		}
+		typeof r == "number" && Number.isFinite(r) && (t[n] = r);
+	}
+	return Object.keys(t).length > 0 ? t : void 0;
+}
+function o(e) {
+	let t = {};
+	if (e.buttonstyle !== void 0 && (t.buttonstyle = e.buttonstyle), e.type !== void 0 && (t.type = e.type), e.locale !== void 0 && (t.locale = e.locale), e.style !== void 0) {
+		let n = a(e.style);
+		n && (t.style = n);
+	}
+	return t;
+}
+function s(e) {
+	let t = {};
+	if (e.buttonType !== void 0 && (t.buttonType = e.buttonType), e.buttonColor !== void 0 && (t.buttonColor = e.buttonColor), e.buttonRadius !== void 0 && (t.buttonRadius = e.buttonRadius), e.buttonSizeMode !== void 0 && (t.buttonSizeMode = e.buttonSizeMode), e.buttonLocale !== void 0 && (t.buttonLocale = e.buttonLocale), e.buttonBorderType !== void 0 && (t.buttonBorderType = e.buttonBorderType), e.style !== void 0) {
+		let n = a(e.style);
+		n && (t.style = n);
+	}
+	return t;
+}
+function c(e) {
 	return e;
 }
 //#endregion
 //#region src/messaging.ts
-function o(e) {
+function l(e) {
 	return new URL(e.src).origin;
 }
-function s(e) {
-	e?.contentWindow && e.contentWindow.postMessage(a({ type: "PARENT_ACKNOWLEDGED_IFRAME_READY" }), o(e));
+function u(e) {
+	e?.contentWindow && e.contentWindow.postMessage(c({ type: "PARENT_ACKNOWLEDGED_IFRAME_READY" }), l(e));
 }
-function c({ iframe: e, appearance: t = {} }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function d({ iframe: e, appearance: t = {} }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
 		type: "UPDATE_APPEARANCE",
 		appearance: t
-	}), o(e));
-}
-function l({ iframe: e, amount: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+	}), l(e));
+}
+function f({ iframe: e, props: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
+		type: "UPDATE_APPLE_PAY_BUTTON",
+		props: o(t)
+	}), l(e));
+}
+function p({ iframe: e, props: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
+		type: "UPDATE_GOOGLE_PAY_BUTTON",
+		props: s(t)
+	}), l(e));
+}
+function m({ iframe: e, amount: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
 		type: "UPDATE_AMOUNT",
 		amount: t
-	}), o(e));
+	}), l(e));
 }
-function u({ iframe: e, merchantName: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function h({ iframe: e, merchantName: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
 		type: "UPDATE_MERCHANT_NAME",
 		merchantName: t
-	}), o(e));
+	}), l(e));
 }
-function d({ iframe: e }) {
+function g({ iframe: e }) {
 	let t = crypto.randomUUID();
 	return new Promise((n) => {
-		e?.contentWindow && e.contentWindow.postMessage(a({
+		e?.contentWindow && e.contentWindow.postMessage(c({
 			type: "VALIDATE_FORM",
 			requestId: t
-		}), o(e));
+		}), l(e));
 		let r = setTimeout(() => {
 			window.removeEventListener("message", i), n(!1);
 		}, 5e3);
@@ -129,71 +170,77 @@ function d({ iframe: e }) {
 		window.addEventListener("message", i);
 	});
 }
-function f({ iframe: e }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({ type: "RESET_FORM" }), o(e));
+function _({ iframe: e }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({ type: "RESET_FORM" }), l(e));
 }
-function p({ iframe: e, token: t }) {
+function v({ iframe: e, token: t }) {
 	if (!e?.contentWindow) return;
 	let { payment_intent_id: n } = r(t).payload;
-	e.contentWindow.postMessage(a({
+	e.contentWindow.postMessage(c({
 		type: "CONFIRM_PAYMENT_INTENT",
 		token: t,
 		id: n ?? void 0
-	}), o(e));
+	}), l(e));
 }
-function m({ iframe: e, token: t }) {
+function y({ iframe: e, token: t }) {
 	if (!e?.contentWindow) return;
 	let { setup_intent_id: n } = r(t).payload;
-	e.contentWindow.postMessage(a({
+	e.contentWindow.postMessage(c({
 		type: "CONFIRM_SETUP_INTENT",
 		token: t,
 		id: n ?? void 0
-	}), o(e));
+	}), l(e));
 }
-function h({ iframe: e, result: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function b({ iframe: e, result: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
 		type: "CONFIRMATION_RESULT",
 		result: t
-	}), o(e));
+	}), l(e));
 }
 //#endregion
 //#region src/apple-pay.ts
-function g(e) {
+function x(e) {
 	return `${i(e)}/iframe/apple-pay?token=${e}`;
 }
-function _() {
+function S() {
 	return "40px";
 }
-function v(e) {
-	e.contentWindow?.postMessage(a({ type: "APPLE_PAY_CANCEL" }), o(e));
+function C(e) {
+	e.contentWindow?.postMessage(c({ type: "APPLE_PAY_CANCEL" }), l(e));
 }
-function y(e, r) {
+function w(e, r) {
 	let i = { ...r };
 	function a() {
-		l({
+		m({
 			iframe: e,
 			amount: i.amount
 		});
 	}
 	function o() {
-		u({
+		h({
 			iframe: e,
 			merchantName: i.merchantName
 		});
 	}
-	function d(r) {
+	function s() {
+		f({
+			iframe: e,
+			props: i
+		});
+	}
+	function c(r) {
 		if (r.source === e.contentWindow) switch (r.data.type) {
 			case "IFRAME_READY":
-				s(e), c({
+				u(e), d({
 					iframe: e,
 					appearance: i.appearance
-				}), a(), o();
+				}), a(), o(), s();
 				break;
 			case "UPDATE_HEIGHT":
 				i.onHeightChange?.(r.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				c({
+				d({
 					iframe: e,
 					appearance: r.data.appearance
 				});
@@ -203,7 +250,7 @@ function y(e, r) {
 				break;
 			case "APPLE_PAY_WINDOW_OPEN":
 				t({ onCancel: () => {
-					v(e), n();
+					C(e), n();
 				} });
 				break;
 			case "APPLE_PAY_WINDOW_CLOSE":
@@ -214,7 +261,7 @@ function y(e, r) {
 					paymentIntentCreateAttributes: r.data.paymentIntentCreateAttributes,
 					customerCreateAttributes: r.data.customerCreateAttributes
 				}).then((t) => {
-					p({
+					v({
 						iframe: e,
 						token: t
 					});
@@ -228,57 +275,63 @@ function y(e, r) {
 			case "CONFIRMATION_RESULT": n(), i.onResult(r.data.result);
 		}
 	}
-	return window.addEventListener("message", d), {
+	return window.addEventListener("message", c), {
 		update(t) {
-			let n = "appearance" in t, r = "amount" in t, s = "merchantName" in t;
+			let n = "appearance" in t, r = "amount" in t, c = "merchantName" in t, l = "buttonstyle" in t || "type" in t || "locale" in t || "style" in t;
 			i = {
 				...i,
 				...t
-			}, n && c({
+			}, n && d({
 				iframe: e,
 				appearance: i.appearance
-			}), r && a(), s && o();
+			}), r && a(), c && o(), l && s();
 		},
 		destroy() {
-			window.removeEventListener("message", d), n();
+			window.removeEventListener("message", c), n();
 		}
 	};
 }
 //#endregion
 //#region src/google-pay.ts
-function b(e) {
+function T(e) {
 	return `${i(e)}/iframe/google-pay?token=${e}`;
 }
-function x() {
+function E() {
 	return "40px";
 }
-function S(e, t) {
+function D(e, t) {
 	let n = { ...t };
 	function r() {
-		l({
+		m({
 			iframe: e,
 			amount: n.amount
 		});
 	}
 	function i() {
-		u({
+		h({
 			iframe: e,
 			merchantName: n.merchantName
 		});
 	}
-	function a(t) {
+	function a() {
+		p({
+			iframe: e,
+			props: n
+		});
+	}
+	function o(t) {
 		if (t.source === e.contentWindow) switch (t.data.type) {
 			case "IFRAME_READY":
-				s(e), c({
+				u(e), d({
 					iframe: e,
 					appearance: n.appearance
-				}), r(), i();
+				}), r(), i(), a();
 				break;
 			case "UPDATE_HEIGHT":
 				n.onHeightChange?.(t.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				c({
+				d({
 					iframe: e,
 					appearance: t.data.appearance
 				});
@@ -291,7 +344,7 @@ function S(e, t) {
 					paymentIntentCreateAttributes: t.data.paymentIntentCreateAttributes,
 					customerCreateAttributes: t.data.customerCreateAttributes
 				}).then((t) => {
-					p({
+					v({
 						iframe: e,
 						token: t
 					});
@@ -305,23 +358,23 @@ function S(e, t) {
 			case "CONFIRMATION_RESULT": n.onResult(t.data.result);
 		}
 	}
-	return window.addEventListener("message", a), {
+	return window.addEventListener("message", o), {
 		update(t) {
-			let a = "appearance" in t, o = "amount" in t, s = "merchantName" in t;
+			let o = "appearance" in t, s = "amount" in t, c = "merchantName" in t, l = "buttonType" in t || "buttonColor" in t || "buttonRadius" in t || "buttonSizeMode" in t || "buttonLocale" in t || "buttonBorderType" in t || "style" in t;
 			n = {
 				...n,
 				...t
-			}, a && c({
+			}, o && d({
 				iframe: e,
 				appearance: n.appearance
-			}), o && r(), s && i();
+			}), s && r(), c && i(), l && a();
 		},
 		destroy() {
-			window.removeEventListener("message", a);
+			window.removeEventListener("message", o);
 		}
 	};
 }
-function C({ paymentData: e }) {
+function O({ paymentData: e }) {
 	return { paymentMethod: {
 		type: "googlepay",
 		billing_address_attributes: {
@@ -340,14 +393,14 @@ function C({ paymentData: e }) {
 }
 //#endregion
 //#region src/payment-method-form.ts
-var w = {
+var k = {
 	country: 212,
 	full: 452
-}, T = 80, E = {
+}, A = 80, j = {
 	country: 400,
 	full: 640
 };
-function D(e, t = { cardholderName: !1 }, n = "country") {
+function M(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,
@@ -355,25 +408,25 @@ function D(e, t = { cardholderName: !1 }, n = "country") {
 	});
 	return `${i(e)}/iframe/card?${a}`;
 }
-function O(e, t = "country") {
+function N(e, t = "country") {
 	let n = new URLSearchParams({
 		token: e,
 		billingAddressRequirement: t
 	});
 	return `${i(e)}/iframe/bank?${n}`;
 }
-function k(e = { cardholderName: !1 }, t = "country") {
-	return `${(w[t] ?? w.country) + (e.cardholderName ? T : 0)}px`;
+function P(e = { cardholderName: !1 }, t = "country") {
+	return `${(k[t] ?? k.country) + (e.cardholderName ? A : 0)}px`;
 }
-function A(e = "country") {
-	return `${E[e] ?? E.country}px`;
+function F(e = "country") {
+	return `${j[e] ?? j.country}px`;
 }
-function j(e, t) {
+function I(e, t) {
 	let n = { ...t };
 	function r(t) {
 		if (t.source === e.contentWindow) switch (t.data.type) {
 			case "IFRAME_READY":
-				s(e), c({
+				u(e), d({
 					iframe: e,
 					appearance: n.appearance
 				});
@@ -382,7 +435,7 @@ function j(e, t) {
 				n.onHeightChange?.(t.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				c({
+				d({
 					iframe: e,
 					appearance: t.data.appearance
 				});
@@ -399,7 +452,7 @@ function j(e, t) {
 			n = {
 				...n,
 				...t
-			}, r && c({
+			}, r && d({
 				iframe: e,
 				appearance: n.appearance
 			});
@@ -411,7 +464,7 @@ function j(e, t) {
 }
 //#endregion
 //#region src/mount.ts
-function M(e) {
+function L(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.`);
@@ -419,26 +472,26 @@ function M(e) {
 	}
 	return e;
 }
-var N = {
+var R = {
 	width: "calc(100% + 8px)",
 	transition: "opacity 150ms ease-in, height 200ms ease-in-out",
 	margin: "0 -4px",
 	opacity: "0",
 	border: "0"
 };
-function P({ src: e, title: t, name: n, height: r, allow: i }) {
+function z({ 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, N, { 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, R, { height: r }), a;
 }
-function F(e, t) {
-	let n = M(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t, s = P({
-		src: D(r, i, a),
+function B(e, t) {
+	let n = L(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t, s = z({
+		src: M(r, i, a),
 		title: "Secure credit card payment method form powered by Amos",
 		name: "amos-credit-card-payment-method-form",
-		height: k(i, a)
+		height: P(i, a)
 	});
 	n.appendChild(s);
-	let c = j(s, {
+	let c = I(s, {
 		...o,
 		onHeightChange: (e) => {
 			s.style.height = e, o.onHeightChange?.(e);
@@ -455,15 +508,15 @@ function F(e, t) {
 		}
 	};
 }
-function I(e, t) {
-	let n = M(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t, o = P({
-		src: O(r, i),
+function V(e, t) {
+	let n = L(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t, o = z({
+		src: N(r, i),
 		title: "Secure bank account payment method form powered by Amos",
 		name: "amos-bank-account-payment-method-form",
-		height: A(i)
+		height: F(i)
 	});
 	n.appendChild(o);
-	let s = j(o, {
+	let s = I(o, {
 		...a,
 		onHeightChange: (e) => {
 			o.style.height = e, a.onHeightChange?.(e);
@@ -480,16 +533,16 @@ function I(e, t) {
 		}
 	};
 }
-function L(e, t) {
-	let n = M(e), { renderToken: r, ...i } = t, a = P({
-		src: b(r),
+function H(e, t) {
+	let n = L(e), { renderToken: r, ...i } = t, a = z({
+		src: T(r),
 		title: "Secure Google Pay button powered by Amos",
 		name: "amos-google-pay-button",
-		height: x(),
+		height: E(),
 		allow: "payment"
 	});
 	n.appendChild(a);
-	let o = S(a, {
+	let o = D(a, {
 		...i,
 		onHeightChange: (e) => {
 			a.style.height = e, i.onHeightChange?.(e);
@@ -506,16 +559,16 @@ function L(e, t) {
 		}
 	};
 }
-function R(e, t) {
-	let n = M(e), { renderToken: r, ...i } = t, a = P({
-		src: g(r),
+function U(e, t) {
+	let n = L(e), { renderToken: r, ...i } = t, a = z({
+		src: x(r),
 		title: "Secure Apple Pay button powered by Amos",
 		name: "amos-apple-pay-button",
-		height: _(),
+		height: S(),
 		allow: "payment"
 	});
 	n.appendChild(a);
-	let o = y(a, {
+	let o = w(a, {
 		...i,
 		onHeightChange: (e) => {
 			a.style.height = e, i.onHeightChange?.(e);
@@ -533,4 +586,4 @@ function R(e, t) {
 	};
 }
 //#endregion
-export { y as attachApplePayButtonListeners, S as attachGooglePayButtonListeners, j as attachPaymentMethodFormListeners, p as confirmPaymentIntent, m as confirmSetupIntent, a as createMessage, r as decodeJwt, C as formatGooglePayPaymentData, _ as getApplePayButtonInitialHeight, g as getApplePayButtonSrc, A as getBankAccountFormInitialHeight, O as getBankAccountFormSrc, k as getCreditCardFormInitialHeight, D as getCreditCardFormSrc, i as getEmbedOrigin, x as getGooglePayButtonInitialHeight, b as getGooglePayButtonSrc, R as mountAmosApplePayButton, I as mountAmosBankAccountPaymentMethodForm, F as mountAmosCreditCardPaymentMethodForm, L as mountAmosGooglePayButton, f as resetForm, h as sendConfirmationResult, s as sendParentReadyMessage, l as updateAmount, c as updateAppearance, u as updateMerchantName, d as validateForm };
+export { w as attachApplePayButtonListeners, D as attachGooglePayButtonListeners, I as attachPaymentMethodFormListeners, v as confirmPaymentIntent, y as confirmSetupIntent, c as createMessage, r as decodeJwt, O as formatGooglePayPaymentData, S as getApplePayButtonInitialHeight, x as getApplePayButtonSrc, F as getBankAccountFormInitialHeight, N as getBankAccountFormSrc, P as getCreditCardFormInitialHeight, M as getCreditCardFormSrc, i as getEmbedOrigin, E as getGooglePayButtonInitialHeight, T as getGooglePayButtonSrc, U as mountAmosApplePayButton, V as mountAmosBankAccountPaymentMethodForm, B as mountAmosCreditCardPaymentMethodForm, H as mountAmosGooglePayButton, o as pickApplePayButtonElementProps, s as pickGooglePayButtonElementProps, _ as resetForm, b as sendConfirmationResult, u as sendParentReadyMessage, a as serializeWalletButtonStyle, m as updateAmount, d as updateAppearance, f as updateApplePayButton, p as updateGooglePayButton, h as updateMerchantName, g as validateForm };

package/dist/messaging.d.ts

@@ -1,5 +1,5 @@
 import { components } from '@amos.com/node';
-import { Appearance, Message } from './types';
+import { Appearance, ApplePayButtonElementProps, GooglePayButtonElementProps, Message } from './types';
 type Iframe = HTMLIFrameElement | null | undefined;
 /**
  * Resolve the Amos embed origin from an iframe's configured `src`.
@@ -26,6 +26,20 @@ export declare function updateAppearance({ iframe, appearance, }: {
     iframe: Iframe;
     appearance?: Appearance;
 }): void;
+/**
+ * Push Apple Pay button visual options into the embedded iframe.
+ */
+export declare function updateApplePayButton({ iframe, props, }: {
+    iframe: Iframe;
+    props: ApplePayButtonElementProps;
+}): void;
+/**
+ * Push Google Pay button visual options into the embedded iframe.
+ */
+export declare function updateGooglePayButton({ iframe, props, }: {
+    iframe: Iframe;
+    props: GooglePayButtonElementProps;
+}): void;
 /**
  * Push the express-checkout amount into the embedded Google Pay iframe.
  */

package/dist/types.d.ts

@@ -69,6 +69,99 @@ export type Appearance = {
      */
     labels?: AppearanceLabels;
 };
+/**
+ * Inline style bag sent through `postMessage` to the wallet-button iframe.
+ *
+ * Matches the serializable subset of a CSSStyleDeclaration / React
+ * `CSSProperties` object (string or number values). Custom properties such
+ * as `--apple-pay-button-height` are allowed.
+ */
+export type WalletButtonStyle = {
+    [property: string]: string | number | undefined;
+};
+/**
+ * `buttonstyle` attribute on Apple's `<apple-pay-button>`.
+ *
+ * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
+ */
+export type ApplePayButtonStyle = "black" | "white" | "white-outline";
+/**
+ * `type` attribute on Apple's `<apple-pay-button>`.
+ *
+ * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
+ */
+export type ApplePayButtonType = "plain" | "buy" | "set-up" | "donate" | "check-out" | "book" | "subscribe" | "reload" | "add-money" | "top-up" | "order" | "rent" | "support" | "contribute" | "tip";
+/**
+ * Visual props for Apple's `<apple-pay-button>`, using Apple's attribute
+ * names. Applied inside the Amos embed iframe.
+ *
+ * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
+ */
+export type ApplePayButtonElementProps = {
+    /**
+     * Apple Pay button color.
+     *
+     * @default "black"
+     */
+    buttonstyle?: ApplePayButtonStyle;
+    /**
+     * Apple Pay button label / verb.
+     *
+     * @default "plain"
+     */
+    type?: ApplePayButtonType;
+    /**
+     * BCP 47 locale for the button label (e.g. `"en-US"`).
+     *
+     * @default "en-US"
+     */
+    locale?: string;
+    /**
+     * Inline style for the `<apple-pay-button>`. Height is controlled with
+     * `--apple-pay-button-height` (Apple ignores CSS `height`). Width uses
+     * `--apple-pay-button-width` or CSS `width`.
+     */
+    style?: WalletButtonStyle;
+};
+/**
+ * Visual props for Google's Pay button, using `@google-pay/button-react`
+ * / Google Pay API names. Applied inside the Amos embed iframe.
+ *
+ * @see https://developers.google.com/pay/api/web/guides/resources/customize
+ */
+export type GooglePayButtonElementProps = {
+    /**
+     * Button label / verb.
+     *
+     * @default "short"
+     */
+    buttonType?: google.payments.api.ButtonType;
+    /** Button color. */
+    buttonColor?: google.payments.api.ButtonColor;
+    /** Corner radius in pixels (0–20). */
+    buttonRadius?: number;
+    /**
+     * `"fill"` stretches the button to the container width; `"static"`
+     * uses Google's default size.
+     */
+    buttonSizeMode?: google.payments.api.ButtonSizeMode;
+    /** BCP 47 locale for the button label (e.g. `"en"`). */
+    buttonLocale?: string;
+    /** Whether the button draws a border. */
+    buttonBorderType?: google.payments.api.ButtonBorderType;
+    /**
+     * Inline style for the Google Pay button wrapper. Use `height` /
+     * `width` here (unlike Apple Pay, Google honors CSS `height`).
+     */
+    style?: WalletButtonStyle;
+};
+/**
+ * Keep only JSON-cloneable string/number declarations from a style object
+ * before sending it through `postMessage`.
+ */
+export declare function serializeWalletButtonStyle(style: WalletButtonStyle | undefined): Record<string, string | number> | undefined;
+export declare function pickApplePayButtonElementProps(options: ApplePayButtonElementProps): ApplePayButtonElementProps;
+export declare function pickGooglePayButtonElementProps(options: GooglePayButtonElementProps): GooglePayButtonElementProps;
 /**
  * Typed `postMessage` payloads exchanged between the host page and the
  * embedded Amos iframe.
@@ -95,6 +188,18 @@ export type Message = {
     /** Parent → embed: push appearance overrides into the iframe. */
     type: "UPDATE_APPEARANCE";
     appearance: Appearance;
+} | {
+    /**
+     * Parent → embed: visual options for the Apple Pay button. Nested
+     * under `props` so Apple's `type` attribute does not collide with
+     * this message discriminant.
+     */
+    type: "UPDATE_APPLE_PAY_BUTTON";
+    props: ApplePayButtonElementProps;
+} | {
+    /** Parent → embed: visual options for the Google Pay button. */
+    type: "UPDATE_GOOGLE_PAY_BUTTON";
+    props: GooglePayButtonElementProps;
 } | {
     /**
      * Parent → embed: validate form inputs (`requestId` only).

package/package.json

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

package/src/apple-pay.ts

@@ -10,10 +10,12 @@ import {
   sendParentReadyMessage,
   updateAmount as sendUpdateAmount,
   updateAppearance as sendUpdateAppearance,
+  updateApplePayButton as sendUpdateApplePayButton,
   updateMerchantName as sendUpdateMerchantName,
 } from "./messaging";
 import {
   type Appearance,
+  type ApplePayButtonElementProps,
   type ConfirmationResult,
   createMessage,
   type Message,
@@ -36,7 +38,7 @@ export function getApplePayButtonInitialHeight(): string {
 /**
  * Options accepted by {@link attachApplePayButtonListeners}.
  */
-export type ApplePayButtonListenerOptions = {
+export type ApplePayButtonListenerOptions = ApplePayButtonElementProps & {
   /** The amount of the payment, in the same format passed in props. */
   amount: string;
   /** A user-visible merchant name. */
@@ -83,7 +85,9 @@ 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.
+   * value into the iframe; pass `appearance` to update theme variables;
+   * pass `buttonstyle`, `type`, `locale`, or `style` to restyle the
+   * Apple Pay button.
    */
   update: (patch: Partial<ApplePayButtonListenerOptions>) => void;
   /**
@@ -126,6 +130,10 @@ export function attachApplePayButtonListeners(
     sendUpdateMerchantName({ iframe, merchantName: current.merchantName });
   }
 
+  function pushButtonProps() {
+    sendUpdateApplePayButton({ iframe, props: current });
+  }
+
   function handleMessage(event: MessageEvent<Message>) {
     // Ignore messages from other frames / windows.
     if (event.source !== iframe.contentWindow) {
@@ -138,6 +146,7 @@ export function attachApplePayButtonListeners(
         sendUpdateAppearance({ iframe, appearance: current.appearance });
         pushAmount();
         pushMerchantName();
+        pushButtonProps();
         break;
 
       case "UPDATE_HEIGHT":
@@ -199,6 +208,11 @@ export function attachApplePayButtonListeners(
       const hadAppearance = "appearance" in patch;
       const hadAmount = "amount" in patch;
       const hadMerchantName = "merchantName" in patch;
+      const hadButtonProps =
+        "buttonstyle" in patch ||
+        "type" in patch ||
+        "locale" in patch ||
+        "style" in patch;
       current = { ...current, ...patch };
       if (hadAppearance) {
         sendUpdateAppearance({ iframe, appearance: current.appearance });
@@ -209,6 +223,9 @@ export function attachApplePayButtonListeners(
       if (hadMerchantName) {
         pushMerchantName();
       }
+      if (hadButtonProps) {
+        pushButtonProps();
+      }
     },
     destroy() {
       window.removeEventListener("message", handleMessage);

package/src/google-pay.ts

@@ -7,9 +7,15 @@ import {
   sendParentReadyMessage,
   updateAmount as sendUpdateAmount,
   updateAppearance as sendUpdateAppearance,
+  updateGooglePayButton as sendUpdateGooglePayButton,
   updateMerchantName as sendUpdateMerchantName,
 } from "./messaging";
-import type { Appearance, ConfirmationResult, Message } from "./types";
+import type {
+  Appearance,
+  ConfirmationResult,
+  GooglePayButtonElementProps,
+  Message,
+} from "./types";
 
 /**
  * Build the iframe `src` URL for the embedded Google Pay button.
@@ -28,7 +34,7 @@ export function getGooglePayButtonInitialHeight(): string {
 /**
  * Options accepted by {@link attachGooglePayButtonListeners}.
  */
-export type GooglePayButtonListenerOptions = {
+export type GooglePayButtonListenerOptions = GooglePayButtonElementProps & {
   /** The amount of the payment, in the same format passed in props. */
   amount: string;
   /** A user-visible merchant name. */
@@ -75,7 +81,10 @@ export type GooglePayButtonController = {
   /**
    * 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.
+   * value into the iframe; pass `appearance` to update theme variables;
+   * pass `buttonType`, `buttonColor`, `buttonRadius`, `buttonSizeMode`,
+   * `buttonLocale`, `buttonBorderType`, or `style` to restyle the
+   * Google Pay button.
    */
   update: (patch: Partial<GooglePayButtonListenerOptions>) => void;
   /**
@@ -106,6 +115,10 @@ export function attachGooglePayButtonListeners(
     sendUpdateMerchantName({ iframe, merchantName: current.merchantName });
   }
 
+  function pushButtonProps() {
+    sendUpdateGooglePayButton({ iframe, props: current });
+  }
+
   function handleMessage(event: MessageEvent<Message>) {
     if (event.source !== iframe.contentWindow) {
       return;
@@ -117,6 +130,7 @@ export function attachGooglePayButtonListeners(
         sendUpdateAppearance({ iframe, appearance: current.appearance });
         pushAmount();
         pushMerchantName();
+        pushButtonProps();
         break;
 
       case "UPDATE_HEIGHT":
@@ -163,6 +177,14 @@ export function attachGooglePayButtonListeners(
       const hadAppearance = "appearance" in patch;
       const hadAmount = "amount" in patch;
       const hadMerchantName = "merchantName" in patch;
+      const hadButtonProps =
+        "buttonType" in patch ||
+        "buttonColor" in patch ||
+        "buttonRadius" in patch ||
+        "buttonSizeMode" in patch ||
+        "buttonLocale" in patch ||
+        "buttonBorderType" in patch ||
+        "style" in patch;
       current = { ...current, ...patch };
       if (hadAppearance) {
         sendUpdateAppearance({ iframe, appearance: current.appearance });
@@ -173,6 +195,9 @@ export function attachGooglePayButtonListeners(
       if (hadMerchantName) {
         pushMerchantName();
       }
+      if (hadButtonProps) {
+        pushButtonProps();
+      }
     },
     destroy() {
       window.removeEventListener("message", handleMessage);

package/src/index.ts

@@ -32,6 +32,8 @@ export {
   sendParentReadyMessage,
   updateAmount,
   updateAppearance,
+  updateApplePayButton,
+  updateGooglePayButton,
   updateMerchantName,
   validateForm,
 } from "./messaging";
@@ -66,9 +68,19 @@ export {
 export type {
   Appearance,
   AppearanceLabels,
+  ApplePayButtonElementProps,
+  ApplePayButtonStyle,
+  ApplePayButtonType,
   ConfirmationIncompleteReason,
   ConfirmationResult,
+  GooglePayButtonElementProps,
   Message,
   ThemeVariable,
+  WalletButtonStyle,
+} from "./types";
+export {
+  createMessage,
+  pickApplePayButtonElementProps,
+  pickGooglePayButtonElementProps,
+  serializeWalletButtonStyle,
 } from "./types";
-export { createMessage } from "./types";

package/src/messaging.ts

@@ -1,6 +1,14 @@
 import type { components } from "@amos.com/node";
 import { decodeJwt } from "./jwt";
-import { type Appearance, createMessage, type Message } from "./types";
+import {
+  type Appearance,
+  type ApplePayButtonElementProps,
+  createMessage,
+  type GooglePayButtonElementProps,
+  type Message,
+  pickApplePayButtonElementProps,
+  pickGooglePayButtonElementProps,
+} from "./types";
 
 type Iframe = HTMLIFrameElement | null | undefined;
 
@@ -55,6 +63,52 @@ export function updateAppearance({
   );
 }
 
+/**
+ * Push Apple Pay button visual options into the embedded iframe.
+ */
+export function updateApplePayButton({
+  iframe,
+  props,
+}: {
+  iframe: Iframe;
+  props: ApplePayButtonElementProps;
+}): void {
+  if (!iframe?.contentWindow) {
+    return;
+  }
+
+  iframe.contentWindow.postMessage(
+    createMessage({
+      type: "UPDATE_APPLE_PAY_BUTTON",
+      props: pickApplePayButtonElementProps(props),
+    }),
+    getIframeTargetOrigin(iframe),
+  );
+}
+
+/**
+ * Push Google Pay button visual options into the embedded iframe.
+ */
+export function updateGooglePayButton({
+  iframe,
+  props,
+}: {
+  iframe: Iframe;
+  props: GooglePayButtonElementProps;
+}): void {
+  if (!iframe?.contentWindow) {
+    return;
+  }
+
+  iframe.contentWindow.postMessage(
+    createMessage({
+      type: "UPDATE_GOOGLE_PAY_BUTTON",
+      props: pickGooglePayButtonElementProps(props),
+    }),
+    getIframeTargetOrigin(iframe),
+  );
+}
+
 /**
  * Push the express-checkout amount into the embedded Google Pay iframe.
  */

package/src/types.ts

@@ -1,3 +1,5 @@
+/// <reference types="googlepay" />
+
 import type { components } from "@amos.com/node";
 
 /**
@@ -303,6 +305,193 @@ export type Appearance = {
   labels?: AppearanceLabels;
 };
 
+/**
+ * Inline style bag sent through `postMessage` to the wallet-button iframe.
+ *
+ * Matches the serializable subset of a CSSStyleDeclaration / React
+ * `CSSProperties` object (string or number values). Custom properties such
+ * as `--apple-pay-button-height` are allowed.
+ */
+export type WalletButtonStyle = {
+  [property: string]: string | number | undefined;
+};
+
+/**
+ * `buttonstyle` attribute on Apple's `<apple-pay-button>`.
+ *
+ * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
+ */
+export type ApplePayButtonStyle = "black" | "white" | "white-outline";
+
+/**
+ * `type` attribute on Apple's `<apple-pay-button>`.
+ *
+ * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
+ */
+export type ApplePayButtonType =
+  | "plain"
+  | "buy"
+  | "set-up"
+  | "donate"
+  | "check-out"
+  | "book"
+  | "subscribe"
+  | "reload"
+  | "add-money"
+  | "top-up"
+  | "order"
+  | "rent"
+  | "support"
+  | "contribute"
+  | "tip";
+
+/**
+ * Visual props for Apple's `<apple-pay-button>`, using Apple's attribute
+ * names. Applied inside the Amos embed iframe.
+ *
+ * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
+ */
+export type ApplePayButtonElementProps = {
+  /**
+   * Apple Pay button color.
+   *
+   * @default "black"
+   */
+  buttonstyle?: ApplePayButtonStyle;
+  /**
+   * Apple Pay button label / verb.
+   *
+   * @default "plain"
+   */
+  type?: ApplePayButtonType;
+  /**
+   * BCP 47 locale for the button label (e.g. `"en-US"`).
+   *
+   * @default "en-US"
+   */
+  locale?: string;
+  /**
+   * Inline style for the `<apple-pay-button>`. Height is controlled with
+   * `--apple-pay-button-height` (Apple ignores CSS `height`). Width uses
+   * `--apple-pay-button-width` or CSS `width`.
+   */
+  style?: WalletButtonStyle;
+};
+
+/**
+ * Visual props for Google's Pay button, using `@google-pay/button-react`
+ * / Google Pay API names. Applied inside the Amos embed iframe.
+ *
+ * @see https://developers.google.com/pay/api/web/guides/resources/customize
+ */
+export type GooglePayButtonElementProps = {
+  /**
+   * Button label / verb.
+   *
+   * @default "short"
+   */
+  buttonType?: google.payments.api.ButtonType;
+  /** Button color. */
+  buttonColor?: google.payments.api.ButtonColor;
+  /** Corner radius in pixels (0–20). */
+  buttonRadius?: number;
+  /**
+   * `"fill"` stretches the button to the container width; `"static"`
+   * uses Google's default size.
+   */
+  buttonSizeMode?: google.payments.api.ButtonSizeMode;
+  /** BCP 47 locale for the button label (e.g. `"en"`). */
+  buttonLocale?: string;
+  /** Whether the button draws a border. */
+  buttonBorderType?: google.payments.api.ButtonBorderType;
+  /**
+   * Inline style for the Google Pay button wrapper. Use `height` /
+   * `width` here (unlike Apple Pay, Google honors CSS `height`).
+   */
+  style?: WalletButtonStyle;
+};
+
+/**
+ * Keep only JSON-cloneable string/number declarations from a style object
+ * before sending it through `postMessage`.
+ */
+export function serializeWalletButtonStyle(
+  style: WalletButtonStyle | undefined,
+): Record<string, string | number> | undefined {
+  if (!style || typeof style !== "object") {
+    return undefined;
+  }
+
+  const result: Record<string, string | number> = {};
+  for (const [key, value] of Object.entries(style)) {
+    if (typeof value === "string") {
+      if (value.length === 0) {
+        continue;
+      }
+      result[key] = value;
+      continue;
+    }
+    if (typeof value === "number" && Number.isFinite(value)) {
+      result[key] = value;
+    }
+  }
+
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
+export function pickApplePayButtonElementProps(
+  options: ApplePayButtonElementProps,
+): ApplePayButtonElementProps {
+  const props: ApplePayButtonElementProps = {};
+  if (options.buttonstyle !== undefined) {
+    props.buttonstyle = options.buttonstyle;
+  }
+  if (options.type !== undefined) {
+    props.type = options.type;
+  }
+  if (options.locale !== undefined) {
+    props.locale = options.locale;
+  }
+  if (options.style !== undefined) {
+    const style = serializeWalletButtonStyle(options.style);
+    if (style) {
+      props.style = style;
+    }
+  }
+  return props;
+}
+
+export function pickGooglePayButtonElementProps(
+  options: GooglePayButtonElementProps,
+): GooglePayButtonElementProps {
+  const props: GooglePayButtonElementProps = {};
+  if (options.buttonType !== undefined) {
+    props.buttonType = options.buttonType;
+  }
+  if (options.buttonColor !== undefined) {
+    props.buttonColor = options.buttonColor;
+  }
+  if (options.buttonRadius !== undefined) {
+    props.buttonRadius = options.buttonRadius;
+  }
+  if (options.buttonSizeMode !== undefined) {
+    props.buttonSizeMode = options.buttonSizeMode;
+  }
+  if (options.buttonLocale !== undefined) {
+    props.buttonLocale = options.buttonLocale;
+  }
+  if (options.buttonBorderType !== undefined) {
+    props.buttonBorderType = options.buttonBorderType;
+  }
+  if (options.style !== undefined) {
+    const style = serializeWalletButtonStyle(options.style);
+    if (style) {
+      props.style = style;
+    }
+  }
+  return props;
+}
+
 /**
  * Typed `postMessage` payloads exchanged between the host page and the
  * embedded Amos iframe.
@@ -336,6 +525,20 @@ export type Message =
       type: "UPDATE_APPEARANCE";
       appearance: Appearance;
     }
+  | {
+      /**
+       * Parent → embed: visual options for the Apple Pay button. Nested
+       * under `props` so Apple's `type` attribute does not collide with
+       * this message discriminant.
+       */
+      type: "UPDATE_APPLE_PAY_BUTTON";
+      props: ApplePayButtonElementProps;
+    }
+  | {
+      /** Parent → embed: visual options for the Google Pay button. */
+      type: "UPDATE_GOOGLE_PAY_BUTTON";
+      props: GooglePayButtonElementProps;
+    }
   | {
       /**
        * Parent → embed: validate form inputs (`requestId` only).