@amos.com/react-amos-js 0.11.26 → 0.11.28

package/README.md

@@ -141,7 +141,7 @@ appearance={{
 
 Rules override `themeVariables` for the properties they set (Stripe). `--input-height` / `--floating-input-height` are a **minimum**; `.Input` `padding`, `fontSize`, and `lineHeight` can grow the field. Floated input text padding is `--floating-value-padding-top` and `--floating-value-padding-bottom`. Rule values may reference allowlisted tokens as `var(--primary)` (no fallback argument).
 
-The host skeleton (shown until `UPDATED_APPEARANCE`, or 1.5s after mount if appearance never acks) copies `themeVariables` and resting **`.Input` / `.Label`** declarations (the same allowlisted properties as iframe rules). Its background is `--background`, so it covers the iframe. The iframe stays at opacity 1 and its default pixel height underneath, and is `inert` until reveal, so WebKit lays it out and still runs iframe JS. It does not inject webfonts: it uses `--font-family` / `fontFamily` when that face is already on the host page, and falls back to `ui-sans-serif, system-ui, sans-serif`. Hover, invalid, placeholder, dropdown, and radio rules have no skeleton equivalent. Floating labels sit inside the control, so `.Label` / `.Label--floating` do not change skeleton height.
+The host skeleton (shown until `UPDATED_APPEARANCE`, or 1.5s after mount if appearance never acks) copies `themeVariables` and resting **`.Input` / `.Label`** declarations (the same allowlisted properties as iframe rules). Its background is `--background`, so it covers the iframe. The iframe stays at opacity 1 with an explicit pixel width and height underneath, and is `inert` until reveal, so WebKit lays it out and still runs iframe JS. It does not inject webfonts: it uses `--font-family` / `fontFamily` when that face is already on the host page, and falls back to `ui-sans-serif, system-ui, sans-serif`. Hover, invalid, placeholder, dropdown, and radio rules have no skeleton equivalent. Floating labels sit inside the control, so `.Label` / `.Label--floating` do not change skeleton height.
 
 | Selector | Targets |
 | --- | --- |
@@ -562,7 +562,7 @@ Focus a named control inside the card or bank iframe. No-op if the field is not
 
 ### `AmosCreditCardPaymentMethodForm`
 
-Renders the secure credit card iframe form. A field-shaped skeleton with an opaque background is shown immediately (sized from `appearance`, including resting `.Input` / `.Label` rules). The iframe stays at opacity 1 and its default pixel height, and is `inert`, until appearance is applied, or for 1.5s after mount if appearance never acks.
+Renders the secure credit card iframe form. A field-shaped skeleton with an opaque background is shown immediately (sized from `appearance`, including resting `.Input` / `.Label` rules). The iframe stays at opacity 1 with an explicit pixel width and height, and is `inert`, until appearance is applied, or for 1.5s after mount if appearance never acks.
 
 **Required props:**
 
@@ -582,11 +582,11 @@ Renders the secure credit card iframe form. A field-shaped skeleton with an opaq
 
 Enter in a card or bank iframe field submits the enclosing host `<form>` via `requestSubmit()` (same as Stripe Elements). Handle that form's `onSubmit` — the parent page cannot see keys typed in the cross-origin iframe. No-op if the component is not inside a `<form>`, or while Plaid Embedded Institution Search is showing.
 
-**Also accepts:** standard iframe props (`React.ComponentProps<"iframe">`), minus `src`, `title`, `name`, and `role` (which are controlled by the SDK).
+**Also accepts:** standard iframe props (`React.ComponentProps<"iframe">`), minus `src`, `title`, `name`, `role`, `allow`, `sandbox`, `width`, and `height`. The SDK sets those. `style.width` and `style.height` are ignored so the frame keeps a definite pixel size. Card and bank frames are sandboxed to forms, scripts, and the embed origin. Wallet frames also allow the payment-sheet popup.
 
 ### `AmosBankAccountPaymentMethodForm`
 
-Renders the secure bank account iframe form. A field-shaped skeleton with an opaque background is shown immediately (sized from `appearance`, including resting `.Input` / `.Label` rules). The iframe stays at opacity 1 and its default pixel height, and is `inert`, until appearance is applied, or for 1.5s after mount if appearance never acks.
+Renders the secure bank account iframe form. A field-shaped skeleton with an opaque background is shown immediately (sized from `appearance`, including resting `.Input` / `.Label` rules). The iframe stays at opacity 1 with an explicit pixel width and height, and is `inert`, until appearance is applied, or for 1.5s after mount if appearance never acks.
 
 When `requireAchVerification` is true (or `intent` is `"setup"`), and the render token allows verification, the SDK hides the routing/account iframe and mounts [Plaid Embedded Institution Search](https://plaid.com/docs/link/embedded-institution-search/) in the parent. A **350px pulse skeleton** covers that slot until Plaid's `onLoad` (1.5s fallback). Do not overlay a host loader. Hosts do not proxy Pay API (`GET /merchants`, `POST /plaid_link_tokens`); embed does that with `PAY_API_KEY`. Do not put Plaid secrets in the browser.
 
@@ -619,11 +619,11 @@ Setup (always Plaid, unless the render token disables verification):
 
 **CSP:** the parent page must allow Plaid’s script and frames, for example `script-src https://cdn.plaid.com` and `frame-src https://cdn.plaid.com https://*.plaid.com`. Amos never loads `PLAID_SECRET` / `PLAID_CLIENT_ID` in the SDK or embed iframe.
 
-**Also accepts:** standard iframe props.
+**Also accepts:** the same iframe props as the card form. `sandbox`, `width`, and `height` stay under SDK control.
 
 ### `AmosGooglePayButton`
 
-Renders the secure Google Pay iframe button (express checkout flow). A button-shaped skeleton with an opaque background is shown immediately. The iframe stays at opacity 1 and its default pixel height, and is `inert`, until appearance is applied, or for 1.5s after mount if appearance never acks.
+Renders the secure Google Pay iframe button (express checkout flow). A button-shaped skeleton with an opaque background is shown immediately. The iframe stays at opacity 1 with an explicit pixel width and height, and is `inert`, until appearance is applied, or for 1.5s after mount if appearance never acks.
 
 **Required props:**
 
@@ -638,7 +638,7 @@ Renders the secure Google Pay iframe button (express checkout flow). A button-sh
 - `buttonProps` — native Google Pay button options. Omitted fields keep `"plain"` / `"fill"`. The button fills the iframe; size the mount slot, not the button. Compact: `buttonProps={{ buttonSizeMode: "static", style: { width: "240px" } }}`.
 - `phoneRequired` (`boolean`, defaults to `false`) — collect a phone number in the Google Pay sheet.
 - `shippingAddressRequired` (`boolean`, defaults to `false`) — collect a shipping postal address. Name, email, and billing address are always required.
-- `iframeProps` — applied to the host-page `<iframe>` (e.g. `className`, `style`, `id`). Use CSS lengths with units in `style` (`{ borderRadius: "8px" }`). Amos does not ship Tailwind — `className` only works if the host page defines those classes.
+- `iframeProps` — applied to the host-page `<iframe>` (e.g. `className`, `style`, `id`). Use CSS lengths with units in `style` (`{ borderRadius: "8px" }`). `sandbox`, `width`, `height`, `style.width`, and `style.height` are ignored. Amos does not ship Tailwind — `className` only works if the host page defines those classes.
 
 ```tsx
 <AmosGooglePayButton
@@ -650,7 +650,7 @@ Renders the secure Google Pay iframe button (express checkout flow). A button-sh
 
 ### `AmosApplePayButton`
 
-Renders the secure Apple Pay iframe button (express checkout flow). Same required props and callbacks as `AmosGooglePayButton`. A button-shaped skeleton with an opaque background is shown immediately. The iframe stays at opacity 1 and its default pixel height, and is `inert`, until appearance is applied, or for 1.5s after mount if appearance never acks.
+Renders the secure Apple Pay iframe button (express checkout flow). Same required props and callbacks as `AmosGooglePayButton`. A button-shaped skeleton with an opaque background is shown immediately. The iframe stays at opacity 1 with an explicit pixel width and height, and is `inert`, until appearance is applied, or for 1.5s after mount if appearance never acks.
 
 **Optional props:**
 
@@ -692,7 +692,7 @@ Re-exports of the same advanced helpers exposed by `@amos.com/amos-js`. Most int
 
 Re-exports from `@amos.com/amos-js`. Build the iframe `src` URL for each form type. The React components call these for you.
 
-Each URL includes the embed's canonical search params (`token`, `additionalFields`, `billingAddressRequirement`, `intent`) so the embed router does not 307 to fill in defaults. After the iframe `load` event, if `IFRAME_READY` never arrives (stale HTML, missing JS chunk), the SDK rewrites `src` once with `amosReload` so the next document is a real navigation. Appearance is applied after handshake via `UPDATE_APPEARANCE`. A host-page skeleton with an opaque background covers the iframe until then. The iframe stays at opacity 1 and its default pixel height, and is uncovered 1.5s after mount if appearance never acks.
+Each URL includes the embed's canonical search params (`token`, `additionalFields`, `billingAddressRequirement`, `intent`) so the embed router does not 307 to fill in defaults. When the host page URL contains `amosDebug=1`, that flag is copied onto the iframe URL as well. After the iframe `load` event, if `IFRAME_READY` never arrives (stale HTML, missing JS chunk), the SDK rewrites `src` once with `amosReload` so the next document is a real navigation. Appearance is applied after handshake via `UPDATE_APPEARANCE`. A host-page skeleton with an opaque background covers the iframe until then. The iframe stays at opacity 1 with an explicit pixel width and height, and is uncovered 1.5s after mount if appearance never acks.
 
 ### `updateDefaultValues({ iframe, defaultValues })`
 
@@ -704,7 +704,7 @@ Re-export from `@amos.com/amos-js`. Fills omitted Inter `fonts` / `--font-family
 
 ### Exported types
 
-`@amos.com/react-amos-js` re-exports everything from `@amos.com/amos-js`, including `ConfirmPaymentResult`, `ConfirmSetupResult`, `isConfirmTimeout`, `CONFIRM_TIMEOUT_MS`, `PaymentMethodFormValidityChangeEvent`, `CardBrand`, `PaymentMethodFormCardBrandChangeEvent`, `PaymentMethodFormPostalCodeChangeEvent`, `FormattedGooglePayPaymentData`, `WalletCustomerCreateAttributes`, `WalletPostalAddress`, `WalletContactRequirements`, `Message`, `Appearance`, `ThemeVariable`, `FontSource`, `CssFontSource`, `CustomFontSource`, `AppearanceRuleSelector`, `AppearanceRuleDeclarations`, `PaymentMethodFormDefaultValues`, `PaymentMethodFormField`, and the per-form `*Options` / `*Controller` types. For OpenAPI schema types (e.g. `PaymentIntent`, `CreatePaymentIntentInput`), import `components` from `@amos.com/node`.
+`@amos.com/react-amos-js` re-exports everything from `@amos.com/amos-js`, including `ConfirmPaymentResult`, `ConfirmSetupResult`, `isConfirmTimeout`, `CONFIRM_TIMEOUT_MS`, `PAYMENT_IFRAME_SANDBOX`, `WALLET_IFRAME_SANDBOX`, `PaymentMethodFormValidityChangeEvent`, `CardBrand`, `PaymentMethodFormCardBrandChangeEvent`, `PaymentMethodFormPostalCodeChangeEvent`, `FormattedGooglePayPaymentData`, `WalletCustomerCreateAttributes`, `WalletPostalAddress`, `WalletContactRequirements`, `Message`, `Appearance`, `ThemeVariable`, `FontSource`, `CssFontSource`, `CustomFontSource`, `AppearanceRuleSelector`, `AppearanceRuleDeclarations`, `PaymentMethodFormDefaultValues`, `PaymentMethodFormField`, and the per-form `*Options` / `*Controller` types. For OpenAPI schema types (e.g. `PaymentIntent`, `CreatePaymentIntentInput`), import `components` from `@amos.com/node`. Copy `PAYMENT_IFRAME_SANDBOX` or `WALLET_IFRAME_SANDBOX` onto a hand-built iframe before setting `src`.
 
 ## Notes and potential gotchas
 
@@ -713,7 +713,8 @@ Re-export from `@amos.com/amos-js`. Fills omitted Inter `fonts` / `--font-family
 - **Same components for payment vs setup intents**: `AmosCreditCardPaymentMethodForm` and `AmosBankAccountPaymentMethodForm` support both payment intents and setup intents. The flow differs only by which server call you make and which confirmation function you use (`confirmPayment` vs `confirmSetup`).
 - **Amount format**: for `AmosGooglePayButton` and `AmosApplePayButton`, `amount` is a major-currency decimal string (e.g. `"50.00"` for $50.00). For `components["schemas"]["CreatePaymentIntentInput"]` on the server (card/bank create, and the object the wallet iframe sends to `onConfirm`), `amount` is a number in cents (e.g. `5000`).
 - **Embed host / CSP**: iframes load from `https://js.amos.com` (production) and `https://js-sandbox.amos.com` (sandbox) via `getEmbedOrigin`. Parent pages that pin CSP must allow `frame-src https://js.amos.com https://js-sandbox.amos.com` (and `Permissions-Policy payment=` for those origins) **before** upgrading this package. Older SDK versions still load `embed.amos.com` / `embed-sandbox.amos.com`.
-- **Iframe handshake**: iframe URLs include canonical search params so the embed does not 307. If the document loads but never posts `IFRAME_READY`, the SDK rewrites `src` once with `amosReload`. Appearance is applied after handshake. The iframe stays at opacity 1 under an opaque skeleton until `UPDATED_APPEARANCE`, or for 1.5s after mount if appearance never acks. Embed messages match on origin plus `iframeName` when `contentWindow` identity changes.
+- **Iframe handshake**: iframe URLs include canonical search params so the embed does not 307. When the host page URL contains `amosDebug=1`, that flag is copied onto the iframe URL. If the document loads but never posts `IFRAME_READY`, the SDK rewrites `src` once with `amosReload`. Appearance is applied after handshake. The iframe stays at opacity 1 under an opaque skeleton, with an explicit pixel width and height, until `UPDATED_APPEARANCE`, or for 1.5s after mount if appearance never acks. Embed messages match on origin plus `iframeName` when `contentWindow` identity changes.
+- **Iframe sandbox**: mount helpers set `sandbox` before `src`. Card and bank frames use `PAYMENT_IFRAME_SANDBOX` (`allow-forms allow-same-origin allow-scripts`). Wallet frames use `WALLET_IFRAME_SANDBOX`, which also allows the payment-sheet popup (`allow-popups allow-popups-to-escape-sandbox`), and set `allow="payment"`. Hand-built iframes should copy the same attribute. Top-level navigation stays blocked. Host `sandbox`, `width`, and `height` props are ignored.
 - **Plaid Embedded Link (ACH verification)**: load `cdn.plaid.com` from the **parent** document (see CSP on `AmosBankAccountPaymentMethodForm`). Merchants do not proxy Pay API; the bank iframe mints link tokens. Pass `requireAchVerification` when the host wants Plaid, or `intent="setup"` to always show it, unless the render token disables verification. Toggling that prop hides or shows the existing Embedded handler — it does not reload Institution Search. Confirm still goes through the bank iframe so Amos can attach `plaid` to the payment method. While Link loads, the SDK shows a 350px pulse skeleton until `onLoad` (1.5s fallback) — do not overlay a host loader. After success the same slot is a connected-account row (institution name, mask, outline Disconnect) styled with existing `themeVariables`. Disconnect shows Institution Search again.
 - **Apple Pay waiting overlay**: on browsers where Apple's QR handoff opens in a popup (non-Safari), `AmosApplePayButton` shows a fixed full-viewport overlay on the host page. **Cancel payment** is available until the buyer authorizes; after that the overlay shows **Completing your payment…** with no Cancel, then hides when `onConfirm` settles. Avoid stacking other fixed UI above it.
 - **Going framework-free**: if you need to use Amos outside of React (vanilla JS, another framework, etc.), use [`@amos.com/amos-js`](../amos-js) directly.

package/dist/index.d.ts

@@ -66,7 +66,7 @@ export declare function focusField({ iframeRef, field, }: {
     field: PaymentMethodFormField;
 }): void;
 type ForwardedIframeRef = Ref<HTMLIFrameElement> | undefined;
-type IframePassthroughProps = Omit<ComponentProps<"iframe">, "src" | "title" | "name" | "role" | "allow">;
+type IframePassthroughProps = Omit<ComponentProps<"iframe">, "src" | "title" | "name" | "role" | "allow" | "sandbox" | "width" | "height">;
 type AmosCreditCardPaymentMethodFormProps = IframePassthroughProps & {
     renderToken: string;
     appearance?: Appearance;

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@amos.com/amos-js"),t=require("react"),n=require("react/jsx-runtime");function resolveIframe(e){var t;return e?(t=e.current)==null?null:t:null}function validateForm({iframeRef:t}){return(0,e.validateForm)({iframe:resolveIframe(t)})}function confirmPayment({iframeRef:t,token:n,defaultValues:r}){return(0,e.confirmPayment)({iframe:resolveIframe(t),token:n,defaultValues:r})}function confirmSetup({iframeRef:t,token:n,defaultValues:r}){return(0,e.confirmSetup)({iframe:resolveIframe(t),token:n,defaultValues:r})}function resetForm({iframeRef:t}){(0,e.resetForm)({iframe:resolveIframe(t)})}function focusField({iframeRef:t,field:n}){(0,e.focusField)({iframe:resolveIframe(t),field:n})}function setForwardedRef(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function applyIframePassthrough(e,{style:t,className:n,id:r,...i}){n!=null&&(e.className=n),r!=null&&(e.id=r),Object.assign(e.style,t);for(let[t,n]of Object.entries(i))n!=null&&(t in e?Reflect.set(e,t,n):e.setAttribute(t,String(n)))}function useAmosEmbed({containerRef:e,iframeRef:n,mount:r,options:i,remountDeps:a,iframePassthrough:o,updateDeps:s}){let c=(0,t.useRef)(null);(0,t.useLayoutEffect)(()=>{let t=e.current;if(!t)return;let a=r(t,i);return c.current=a,setForwardedRef(n,a.iframe),applyIframePassthrough(a.iframe,o),()=>{a.destroy(),c.current=null,setForwardedRef(n,null)}},[...a]),(0,t.useEffect)(()=>{var e;(e=c.current)==null||e.update(i)},[...s]),(0,t.useEffect)(()=>{var e;let t=(e=c.current)==null?void 0:e.iframe;t&&applyIframePassthrough(t,o)})}var r=`oklch(0.97 0 0)`;function WalletButtonSlot({height:i,borderRadius:a,containerRef:o}){return(0,t.useLayoutEffect)(()=>{(0,e.ensureSkeletonStyles)()},[]),(0,n.jsxs)(`div`,{style:{boxSizing:`border-box`,position:`relative`,width:`100%`,height:i,minHeight:i,overflow:`hidden`},children:[(0,n.jsx)(`div`,{className:`amos-js-form-skeleton-input amos-js-wallet-skeleton`,style:{position:`absolute`,inset:0,height:i,borderRadius:a,background:r,pointerEvents:`none`,zIndex:0},"aria-hidden":!0}),(0,n.jsx)(`div`,{ref:o,style:{position:`absolute`,inset:0,zIndex:1,width:`100%`,height:`100%`}})]})}function AmosCreditCardPaymentMethodForm({ref:r,renderToken:i,appearance:a,onValidityChange:o,onCardBrandChanged:s,onPostalCodeChange:c,onEscapeKeyPressed:l,additionalFields:u={cardholderName:!1},billingAddressRequirement:d=`country`,defaultValues:f,style:p,...m}){let h=(0,t.useRef)(null);return useAmosEmbed({containerRef:h,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:u,billingAddressRequirement:d,defaultValues:f,onValidityChange:o,onCardBrandChanged:s,onPostalCodeChange:c,onEscapeKeyPressed:l},remountDeps:[i,u.cardholderName,d],iframePassthrough:{style:p,...m},updateDeps:[a,u,d,f,o,s,c,l]}),(0,n.jsx)(`div`,{ref:h})}function AmosBankAccountPaymentMethodForm({ref:r,renderToken:i,appearance:a,onValidityChange:o,onPostalCodeChange:s,onEscapeKeyPressed:c,billingAddressRequirement:l=`country`,defaultValues:u,requireAchVerification:d=!1,intent:f=`payment`,style:p,...m}){let h=(0,t.useRef)(null);return useAmosEmbed({containerRef:h,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:l,defaultValues:u,requireAchVerification:d,intent:f,onValidityChange:o,onPostalCodeChange:s,onEscapeKeyPressed:c},remountDeps:[i,l,f],iframePassthrough:{style:p,...m},updateDeps:[a,l,u,d,f,o,s,c]}),(0,n.jsx)(`div`,{ref:h})}function AmosGooglePayButton({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,iframeProps:d,onConfirm:f}){let p=(0,t.useRef)(null),m=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:d==null?void 0:d.style,buttonProps:c});return useAmosEmbed({containerRef:p,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,onConfirm:f},remountDeps:[i],iframePassthrough:d==null?{}:d,updateDeps:[a,o,s,c,l,u,f]}),(0,n.jsx)(WalletButtonSlot,{height:s,borderRadius:m,containerRef:p})}function AmosApplePayButton({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,iframeProps:d,onConfirm:f}){let p=(0,t.useRef)(null),m=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:d==null?void 0:d.style,buttonProps:c});return useAmosEmbed({containerRef:p,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,onConfirm:f},remountDeps:[i],iframePassthrough:d==null?{}:d,updateDeps:[a,o,s,c,l,u,f]}),(0,n.jsx)(WalletButtonSlot,{height:s,borderRadius:m,containerRef:p})}exports.AmosApplePayButton=AmosApplePayButton,exports.AmosBankAccountPaymentMethodForm=AmosBankAccountPaymentMethodForm,exports.AmosCreditCardPaymentMethodForm=AmosCreditCardPaymentMethodForm,exports.AmosGooglePayButton=AmosGooglePayButton,exports.confirmPayment=confirmPayment,exports.confirmSetup=confirmSetup,exports.focusField=focusField,exports.resetForm=resetForm,exports.validateForm=validateForm,Object.keys(e).forEach(function(t){t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@amos.com/amos-js"),t=require("react"),n=require("react/jsx-runtime");function resolveIframe(e){var t;return e?(t=e.current)==null?null:t:null}function validateForm({iframeRef:t}){return(0,e.validateForm)({iframe:resolveIframe(t)})}function confirmPayment({iframeRef:t,token:n,defaultValues:r}){return(0,e.confirmPayment)({iframe:resolveIframe(t),token:n,defaultValues:r})}function confirmSetup({iframeRef:t,token:n,defaultValues:r}){return(0,e.confirmSetup)({iframe:resolveIframe(t),token:n,defaultValues:r})}function resetForm({iframeRef:t}){(0,e.resetForm)({iframe:resolveIframe(t)})}function focusField({iframeRef:t,field:n}){(0,e.focusField)({iframe:resolveIframe(t),field:n})}function setForwardedRef(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function applyIframePassthrough(e,{style:t,className:n,id:r,...i}){if(n!=null&&(e.className=n),r!=null&&(e.id=r),t){let n={...t};delete n.width,delete n.height,Object.assign(e.style,n)}for(let[t,n]of Object.entries(i))n!=null&&(t in e?Reflect.set(e,t,n):e.setAttribute(t,String(n)))}function useAmosEmbed({containerRef:e,iframeRef:n,mount:r,options:i,remountDeps:a,iframePassthrough:o,updateDeps:s}){let c=(0,t.useRef)(null);(0,t.useLayoutEffect)(()=>{let t=e.current;if(!t)return;let a=r(t,i);return c.current=a,setForwardedRef(n,a.iframe),applyIframePassthrough(a.iframe,o),()=>{a.destroy(),c.current=null,setForwardedRef(n,null)}},[...a]),(0,t.useEffect)(()=>{var e;(e=c.current)==null||e.update(i)},[...s]),(0,t.useEffect)(()=>{var e;let t=(e=c.current)==null?void 0:e.iframe;t&&applyIframePassthrough(t,o)})}var r=`oklch(0.97 0 0)`;function WalletButtonSlot({height:i,borderRadius:a,containerRef:o}){return(0,t.useLayoutEffect)(()=>{(0,e.ensureSkeletonStyles)()},[]),(0,n.jsxs)(`div`,{style:{boxSizing:`border-box`,position:`relative`,width:`100%`,height:i,minHeight:i,overflow:`hidden`},children:[(0,n.jsx)(`div`,{className:`amos-js-form-skeleton-input amos-js-wallet-skeleton`,style:{position:`absolute`,inset:0,height:i,borderRadius:a,background:r,pointerEvents:`none`,zIndex:0},"aria-hidden":!0}),(0,n.jsx)(`div`,{ref:o,style:{position:`absolute`,inset:0,zIndex:1,width:`100%`,height:`100%`}})]})}function AmosCreditCardPaymentMethodForm({ref:r,renderToken:i,appearance:a,onValidityChange:o,onCardBrandChanged:s,onPostalCodeChange:c,onEscapeKeyPressed:l,additionalFields:u={cardholderName:!1},billingAddressRequirement:d=`country`,defaultValues:f,style:p,...m}){let h=(0,t.useRef)(null);return useAmosEmbed({containerRef:h,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:u,billingAddressRequirement:d,defaultValues:f,onValidityChange:o,onCardBrandChanged:s,onPostalCodeChange:c,onEscapeKeyPressed:l},remountDeps:[i,u.cardholderName,d],iframePassthrough:{style:p,...m},updateDeps:[a,u,d,f,o,s,c,l]}),(0,n.jsx)(`div`,{ref:h})}function AmosBankAccountPaymentMethodForm({ref:r,renderToken:i,appearance:a,onValidityChange:o,onPostalCodeChange:s,onEscapeKeyPressed:c,billingAddressRequirement:l=`country`,defaultValues:u,requireAchVerification:d=!1,intent:f=`payment`,style:p,...m}){let h=(0,t.useRef)(null);return useAmosEmbed({containerRef:h,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:l,defaultValues:u,requireAchVerification:d,intent:f,onValidityChange:o,onPostalCodeChange:s,onEscapeKeyPressed:c},remountDeps:[i,l,f],iframePassthrough:{style:p,...m},updateDeps:[a,l,u,d,f,o,s,c]}),(0,n.jsx)(`div`,{ref:h})}function AmosGooglePayButton({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,iframeProps:d,onConfirm:f}){let p=(0,t.useRef)(null),m=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:d==null?void 0:d.style,buttonProps:c});return useAmosEmbed({containerRef:p,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,onConfirm:f},remountDeps:[i],iframePassthrough:d==null?{}:d,updateDeps:[a,o,s,c,l,u,f]}),(0,n.jsx)(WalletButtonSlot,{height:s,borderRadius:m,containerRef:p})}function AmosApplePayButton({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,iframeProps:d,onConfirm:f}){let p=(0,t.useRef)(null),m=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:d==null?void 0:d.style,buttonProps:c});return useAmosEmbed({containerRef:p,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,onConfirm:f},remountDeps:[i],iframePassthrough:d==null?{}:d,updateDeps:[a,o,s,c,l,u,f]}),(0,n.jsx)(WalletButtonSlot,{height:s,borderRadius:m,containerRef:p})}exports.AmosApplePayButton=AmosApplePayButton,exports.AmosBankAccountPaymentMethodForm=AmosBankAccountPaymentMethodForm,exports.AmosCreditCardPaymentMethodForm=AmosCreditCardPaymentMethodForm,exports.AmosGooglePayButton=AmosGooglePayButton,exports.confirmPayment=confirmPayment,exports.confirmSetup=confirmSetup,exports.focusField=focusField,exports.resetForm=resetForm,exports.validateForm=validateForm,Object.keys(e).forEach(function(t){t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});

package/dist/index.mjs

@@ -38,7 +38,10 @@ function setForwardedRef(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
 function applyIframePassthrough(e, { style: t, className: n, id: r, ...i }) {
-	n != null && (e.className = n), r != null && (e.id = r), Object.assign(e.style, t);
+	if (n != null && (e.className = n), r != null && (e.id = r), t) {
+		let n = { ...t };
+		delete n.width, delete n.height, Object.assign(e.style, n);
+	}
 	for (let [t, n] of Object.entries(i)) n != null && (t in e ? Reflect.set(e, t, n) : e.setAttribute(t, String(n)));
 }
 function useAmosEmbed({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i, iframePassthrough: a, updateDeps: o }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/react-amos-js",
-  "version": "0.11.26",
+  "version": "0.11.28",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -57,11 +57,11 @@
     "vite-plugin-dts": "5.1.1"
   },
   "dependencies": {
-    "@amos.com/amos-js": "0.11.28",
+    "@amos.com/amos-js": "0.11.30",
     "@types/googlepay": "0.7.13"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "@amos.com/node": ">=0.1.65"
+    "@amos.com/node": ">=0.1.65",
+    "react": "^17 || ^18 || ^19"
   }
 }

package/src/index.tsx

@@ -161,7 +161,7 @@ function setForwardedRef(
 
 type IframePassthroughProps = Omit<
   ComponentProps<"iframe">,
-  "src" | "title" | "name" | "role" | "allow"
+  "src" | "title" | "name" | "role" | "allow" | "sandbox" | "width" | "height"
 >;
 
 function applyIframePassthrough(
@@ -174,7 +174,14 @@ function applyIframePassthrough(
   if (id != null) {
     iframe.id = id;
   }
-  Object.assign(iframe.style, style);
+  if (style) {
+    const chrome = { ...style };
+    // amos-js owns the pixel box. A percentage width here makes WebKit
+    // treat the frame as indefinite and can pause its layout.
+    delete chrome.width;
+    delete chrome.height;
+    Object.assign(iframe.style, chrome);
+  }
   for (const [key, value] of Object.entries(rest)) {
     if (value == null) {
       continue;