@amos.com/react-amos-js 0.11.22 → 0.11.24

package/README.md

@@ -588,6 +588,8 @@ Renders the secure bank account iframe form. A field-shaped skeleton covers a vi
 
 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.
 
+After Link succeeds, Institution Search is replaced by a connected-account row: institution name, masked account (`****` plus last4, or "Connected"), and an outline Disconnect button. Disconnect clears the linked account and shows Institution Search again. The row uses existing `appearance.themeVariables` (`--border`, `--background`, `--foreground`, `--muted` falling back to `--accent`, `--muted-foreground`, `--accent`, `--accent-foreground`, `--radius`, `--ring`). In dark mode the Disconnect border uses `--input`. No new theme variable or appearance rule is required.
+
 **Required props:** same as `AmosCreditCardPaymentMethodForm` — `renderToken`.
 
 **Optional props:** same as `AmosCreditCardPaymentMethodForm` — `appearance`, `billingAddressRequirement`, `defaultValues`, `onValidityChange` (`isValid` is also true after Plaid returns credentials), `onPostalCodeChange`, `onEscapeKeyPressed` — plus:
@@ -710,7 +712,7 @@ Re-export from `@amos.com/amos-js`. Fills omitted Inter `fonts` / `--font-family
 - **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 visible under the skeleton until `UPDATED_APPEARANCE`, or for 1.5s after `IFRAME_READY` if appearance never acks. Embed messages match on origin plus `iframeName` when `contentWindow` identity changes.
-- **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.
+- **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

@@ -112,7 +112,7 @@ type AmosCreditCardPaymentMethodFormProps = IframePassthroughProps & {
      */
     defaultValues?: PaymentMethodFormDefaultValues;
 };
-export declare function AmosCreditCardPaymentMethodForm({ ref, renderToken, appearance, onValidityChange, onCardBrandChanged, onPostalCodeChange, onEscapeKeyPressed, additionalFields, billingAddressRequirement, defaultValues, style, ...rest }: AmosCreditCardPaymentMethodFormProps): import("react").JSX.Element;
+export declare function AmosCreditCardPaymentMethodForm({ ref, renderToken, appearance, onValidityChange, onCardBrandChanged, onPostalCodeChange, onEscapeKeyPressed, additionalFields, billingAddressRequirement, defaultValues, style, ...rest }: AmosCreditCardPaymentMethodFormProps): import('react').JSX.Element;
 type AmosBankAccountPaymentMethodFormProps = IframePassthroughProps & {
     renderToken: string;
     appearance?: Appearance;
@@ -167,7 +167,7 @@ type AmosBankAccountPaymentMethodFormProps = IframePassthroughProps & {
      */
     intent?: "payment" | "setup";
 };
-export declare function AmosBankAccountPaymentMethodForm({ ref, renderToken, appearance, onValidityChange, onPostalCodeChange, onEscapeKeyPressed, billingAddressRequirement, defaultValues, requireAchVerification, intent, style, ...rest }: AmosBankAccountPaymentMethodFormProps): import("react").JSX.Element;
+export declare function AmosBankAccountPaymentMethodForm({ ref, renderToken, appearance, onValidityChange, onPostalCodeChange, onEscapeKeyPressed, billingAddressRequirement, defaultValues, requireAchVerification, intent, style, ...rest }: AmosBankAccountPaymentMethodFormProps): import('react').JSX.Element;
 type AmosGooglePayButtonProps = {
     ref?: ForwardedIframeRef;
     renderToken: string;
@@ -220,7 +220,7 @@ type AmosGooglePayButtonProps = {
  * skeleton is painted in the parent document on first render (including
  * SSR) so the slot height is reserved before the iframe loads.
  */
-export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, height, buttonProps, phoneRequired, shippingAddressRequired, iframeProps, onConfirm, }: AmosGooglePayButtonProps): import("react").JSX.Element;
+export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, height, buttonProps, phoneRequired, shippingAddressRequired, iframeProps, onConfirm, }: AmosGooglePayButtonProps): import('react').JSX.Element;
 type AmosApplePayButtonProps = {
     ref?: ForwardedIframeRef;
     renderToken: string;
@@ -273,4 +273,4 @@ type AmosApplePayButtonProps = {
  * skeleton is painted in the parent document on first render (including
  * SSR) so the slot height is reserved before the iframe loads.
  */
-export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, height, buttonProps, phoneRequired, shippingAddressRequired, iframeProps, onConfirm, }: AmosApplePayButtonProps): import("react").JSX.Element;
+export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, height, buttonProps, phoneRequired, shippingAddressRequired, iframeProps, onConfirm, }: AmosApplePayButtonProps): import('react').JSX.Element;

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 r(e){var t;return e?(t=e.current)==null?null:t:null}function i({iframeRef:t}){return(0,e.validateForm)({iframe:r(t)})}function a({iframeRef:t,token:n,defaultValues:i}){return(0,e.confirmPayment)({iframe:r(t),token:n,defaultValues:i})}function o({iframeRef:t,token:n,defaultValues:i}){return(0,e.confirmSetup)({iframe:r(t),token:n,defaultValues:i})}function s({iframeRef:t}){(0,e.resetForm)({iframe:r(t)})}function c({iframeRef:t,field:n}){(0,e.focusField)({iframe:r(t),field:n})}function l(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function u(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 d({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,l(n,a.iframe),u(a.iframe,o),()=>{a.destroy(),c.current=null,l(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&&u(t,o)})}var f=`oklch(0.97 0 0)`;function p({height:r,borderRadius:i,containerRef:a}){return(0,t.useLayoutEffect)(()=>{(0,e.ensureSkeletonStyles)()},[]),(0,n.jsxs)(`div`,{style:{boxSizing:`border-box`,position:`relative`,width:`100%`,height:r,minHeight:r,overflow:`hidden`},children:[(0,n.jsx)(`div`,{className:`amos-js-form-skeleton-input amos-js-wallet-skeleton`,style:{position:`absolute`,inset:0,height:r,borderRadius:i,background:f,pointerEvents:`none`,zIndex:0},"aria-hidden":!0}),(0,n.jsx)(`div`,{ref:a,style:{position:`absolute`,inset:0,zIndex:1,width:`100%`,height:`100%`}})]})}function m(t,n){return(0,e.mountAmosCreditCardPaymentMethodForm)(t,n)}function h(t,n){return(0,e.mountAmosBankAccountPaymentMethodForm)(t,n)}function g({ref:e,renderToken:r,appearance:i,onValidityChange:a,onCardBrandChanged:o,onPostalCodeChange:s,onEscapeKeyPressed:c,additionalFields:l={cardholderName:!1},billingAddressRequirement:u=`country`,defaultValues:f,style:p,...h}){let g=(0,t.useRef)(null);return d({containerRef:g,iframeRef:e,mount:m,options:{renderToken:r,appearance:i,additionalFields:l,billingAddressRequirement:u,defaultValues:f,onValidityChange:a,onCardBrandChanged:o,onPostalCodeChange:s,onEscapeKeyPressed:c},remountDeps:[r,l.cardholderName,u],iframePassthrough:{style:p,...h},updateDeps:[i,l,u,f,a,o,s,c]}),(0,n.jsx)(`div`,{ref:g})}function _({ref:e,renderToken:r,appearance:i,onValidityChange:a,onPostalCodeChange:o,onEscapeKeyPressed:s,billingAddressRequirement:c=`country`,defaultValues:l,requireAchVerification:u=!1,intent:f=`payment`,style:p,...m}){let g=(0,t.useRef)(null);return d({containerRef:g,iframeRef:e,mount:h,options:{renderToken:r,appearance:i,billingAddressRequirement:c,defaultValues:l,requireAchVerification:u,intent:f,onValidityChange:a,onPostalCodeChange:o,onEscapeKeyPressed:s},remountDeps:[r,c,f],iframePassthrough:{style:p,...m},updateDeps:[i,c,l,u,f,a,o,s]}),(0,n.jsx)(`div`,{ref:g})}function v({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,iframeProps:f,onConfirm:m}){let h=(0,t.useRef)(null),g=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:f==null?void 0:f.style,buttonProps:c});return d({containerRef:h,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,onConfirm:m},remountDeps:[i],iframePassthrough:f==null?{}:f,updateDeps:[a,o,s,c,l,u,m]}),(0,n.jsx)(p,{height:s,borderRadius:g,containerRef:h})}function y({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,iframeProps:f,onConfirm:m}){let h=(0,t.useRef)(null),g=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:f==null?void 0:f.style,buttonProps:c});return d({containerRef:h,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,onConfirm:m},remountDeps:[i],iframePassthrough:f==null?{}:f,updateDeps:[a,o,s,c,l,u,m]}),(0,n.jsx)(p,{height:s,borderRadius:g,containerRef:h})}exports.AmosApplePayButton=y,exports.AmosBankAccountPaymentMethodForm=_,exports.AmosCreditCardPaymentMethodForm=g,exports.AmosGooglePayButton=v,exports.confirmPayment=a,exports.confirmSetup=o,exports.focusField=c,exports.resetForm=s,exports.validateForm=i,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}){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 mountCreditCardPaymentMethodForm(t,n){return(0,e.mountAmosCreditCardPaymentMethodForm)(t,n)}function mountBankAccountPaymentMethodForm(t,n){return(0,e.mountAmosBankAccountPaymentMethodForm)(t,n)}function AmosCreditCardPaymentMethodForm({ref:e,renderToken:r,appearance:i,onValidityChange:a,onCardBrandChanged:o,onPostalCodeChange:s,onEscapeKeyPressed:c,additionalFields:l={cardholderName:!1},billingAddressRequirement:u=`country`,defaultValues:d,style:f,...p}){let m=(0,t.useRef)(null);return useAmosEmbed({containerRef:m,iframeRef:e,mount:mountCreditCardPaymentMethodForm,options:{renderToken:r,appearance:i,additionalFields:l,billingAddressRequirement:u,defaultValues:d,onValidityChange:a,onCardBrandChanged:o,onPostalCodeChange:s,onEscapeKeyPressed:c},remountDeps:[r,l.cardholderName,u],iframePassthrough:{style:f,...p},updateDeps:[i,l,u,d,a,o,s,c]}),(0,n.jsx)(`div`,{ref:m})}function AmosBankAccountPaymentMethodForm({ref:e,renderToken:r,appearance:i,onValidityChange:a,onPostalCodeChange:o,onEscapeKeyPressed:s,billingAddressRequirement:c=`country`,defaultValues:l,requireAchVerification:u=!1,intent:d=`payment`,style:f,...p}){let m=(0,t.useRef)(null);return useAmosEmbed({containerRef:m,iframeRef:e,mount:mountBankAccountPaymentMethodForm,options:{renderToken:r,appearance:i,billingAddressRequirement:c,defaultValues:l,requireAchVerification:u,intent:d,onValidityChange:a,onPostalCodeChange:o,onEscapeKeyPressed:s},remountDeps:[r,c,d],iframePassthrough:{style:f,...p},updateDeps:[i,c,l,u,d,a,o,s]}),(0,n.jsx)(`div`,{ref:m})}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

@@ -2,52 +2,53 @@ import { confirmPayment as e, confirmSetup as t, ensureSkeletonStyles as n, focu
 import { useEffect as d, useLayoutEffect as f, useRef as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 export * from "@amos.com/amos-js";
+//#endregion
 //#region src/index.tsx
-function g(e) {
+function resolveIframe(e) {
 	var t;
 	return e ? (t = e.current) == null ? null : t : null;
 }
-function _({ iframeRef: e }) {
-	return u({ iframe: g(e) });
+function validateForm({ iframeRef: e }) {
+	return u({ iframe: resolveIframe(e) });
 }
-function v({ iframeRef: t, token: n, defaultValues: r }) {
+function confirmPayment({ iframeRef: t, token: n, defaultValues: r }) {
 	return e({
-		iframe: g(t),
+		iframe: resolveIframe(t),
 		token: n,
 		defaultValues: r
 	});
 }
-function y({ iframeRef: e, token: n, defaultValues: r }) {
+function confirmSetup({ iframeRef: e, token: n, defaultValues: r }) {
 	return t({
-		iframe: g(e),
+		iframe: resolveIframe(e),
 		token: n,
 		defaultValues: r
 	});
 }
-function b({ iframeRef: e }) {
-	c({ iframe: g(e) });
+function resetForm({ iframeRef: e }) {
+	c({ iframe: resolveIframe(e) });
 }
-function x({ iframeRef: e, field: t }) {
+function focusField({ iframeRef: e, field: t }) {
 	r({
-		iframe: g(e),
+		iframe: resolveIframe(e),
 		field: t
 	});
 }
-function S(e, t) {
+function setForwardedRef(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function C(e, { style: t, className: n, id: r, ...i }) {
+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 w({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i, iframePassthrough: a, updateDeps: o }) {
+function useAmosEmbed({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i, iframePassthrough: a, updateDeps: o }) {
 	let s = p(null);
 	f(() => {
 		let i = e.current;
 		if (!i) return;
 		let o = n(i, r);
-		return s.current = o, S(t, o.iframe), C(o.iframe, a), () => {
-			o.destroy(), s.current = null, S(t, null);
+		return s.current = o, setForwardedRef(t, o.iframe), applyIframePassthrough(o.iframe, a), () => {
+			o.destroy(), s.current = null, setForwardedRef(t, null);
 		};
 	}, [...i]), d(() => {
 		var e;
@@ -55,11 +56,11 @@ function w({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i
 	}, [...o]), d(() => {
 		var e;
 		let t = (e = s.current) == null ? void 0 : e.iframe;
-		t && C(t, a);
+		t && applyIframePassthrough(t, a);
 	});
 }
-var T = "oklch(0.97 0 0)";
-function E({ height: e, borderRadius: t, containerRef: r }) {
+var g = "oklch(0.97 0 0)";
+function WalletButtonSlot({ height: e, borderRadius: t, containerRef: r }) {
 	return f(() => {
 		n();
 	}, []), /* @__PURE__ */ h("div", {
@@ -78,7 +79,7 @@ function E({ height: e, borderRadius: t, containerRef: r }) {
 				inset: 0,
 				height: e,
 				borderRadius: t,
-				background: T,
+				background: g,
 				pointerEvents: "none",
 				zIndex: 0
 			},
@@ -95,18 +96,18 @@ function E({ height: e, borderRadius: t, containerRef: r }) {
 		})]
 	});
 }
-function D(e, t) {
+function mountCreditCardPaymentMethodForm(e, t) {
 	return o(e, t);
 }
-function O(e, t) {
+function mountBankAccountPaymentMethodForm(e, t) {
 	return a(e, t);
 }
-function k({ ref: e, renderToken: t, appearance: n, onValidityChange: r, onCardBrandChanged: i, onPostalCodeChange: a, onEscapeKeyPressed: o, additionalFields: s = { cardholderName: !1 }, billingAddressRequirement: c = "country", defaultValues: l, style: u, ...d }) {
+function AmosCreditCardPaymentMethodForm({ ref: e, renderToken: t, appearance: n, onValidityChange: r, onCardBrandChanged: i, onPostalCodeChange: a, onEscapeKeyPressed: o, additionalFields: s = { cardholderName: !1 }, billingAddressRequirement: c = "country", defaultValues: l, style: u, ...d }) {
 	let f = p(null);
-	return w({
+	return useAmosEmbed({
 		containerRef: f,
 		iframeRef: e,
-		mount: D,
+		mount: mountCreditCardPaymentMethodForm,
 		options: {
 			renderToken: t,
 			appearance: n,
@@ -139,12 +140,12 @@ function k({ ref: e, renderToken: t, appearance: n, onValidityChange: r, onCardB
 		]
 	}), /* @__PURE__ */ m("div", { ref: f });
 }
-function A({ ref: e, renderToken: t, appearance: n, onValidityChange: r, onPostalCodeChange: i, onEscapeKeyPressed: a, billingAddressRequirement: o = "country", defaultValues: s, requireAchVerification: c = !1, intent: l = "payment", style: u, ...d }) {
+function AmosBankAccountPaymentMethodForm({ ref: e, renderToken: t, appearance: n, onValidityChange: r, onPostalCodeChange: i, onEscapeKeyPressed: a, billingAddressRequirement: o = "country", defaultValues: s, requireAchVerification: c = !1, intent: l = "payment", style: u, ...d }) {
 	let f = p(null);
-	return w({
+	return useAmosEmbed({
 		containerRef: f,
 		iframeRef: e,
-		mount: O,
+		mount: mountBankAccountPaymentMethodForm,
 		options: {
 			renderToken: t,
 			appearance: n,
@@ -177,12 +178,12 @@ function A({ ref: e, renderToken: t, appearance: n, onValidityChange: r, onPosta
 		]
 	}), /* @__PURE__ */ m("div", { ref: f });
 }
-function j({ ref: e, renderToken: t, amount: n, merchantName: r, height: i = "48px", buttonProps: a, phoneRequired: o, shippingAddressRequired: c, iframeProps: u, onConfirm: d }) {
+function AmosGooglePayButton({ ref: e, renderToken: t, amount: n, merchantName: r, height: i = "48px", buttonProps: a, phoneRequired: o, shippingAddressRequired: c, iframeProps: u, onConfirm: d }) {
 	let f = p(null), h = l({
 		iframeStyle: u == null ? void 0 : u.style,
 		buttonProps: a
 	});
-	return w({
+	return useAmosEmbed({
 		containerRef: f,
 		iframeRef: e,
 		mount: s,
@@ -207,18 +208,18 @@ function j({ ref: e, renderToken: t, amount: n, merchantName: r, height: i = "48
 			c,
 			d
 		]
-	}), /* @__PURE__ */ m(E, {
+	}), /* @__PURE__ */ m(WalletButtonSlot, {
 		height: i,
 		borderRadius: h,
 		containerRef: f
 	});
 }
-function M({ ref: e, renderToken: t, amount: n, merchantName: r, height: a = "48px", buttonProps: o, phoneRequired: s, shippingAddressRequired: c, iframeProps: u, onConfirm: d }) {
+function AmosApplePayButton({ ref: e, renderToken: t, amount: n, merchantName: r, height: a = "48px", buttonProps: o, phoneRequired: s, shippingAddressRequired: c, iframeProps: u, onConfirm: d }) {
 	let f = p(null), h = l({
 		iframeStyle: u == null ? void 0 : u.style,
 		buttonProps: o
 	});
-	return w({
+	return useAmosEmbed({
 		containerRef: f,
 		iframeRef: e,
 		mount: i,
@@ -243,11 +244,11 @@ function M({ ref: e, renderToken: t, amount: n, merchantName: r, height: a = "48
 			c,
 			d
 		]
-	}), /* @__PURE__ */ m(E, {
+	}), /* @__PURE__ */ m(WalletButtonSlot, {
 		height: a,
 		borderRadius: h,
 		containerRef: f
 	});
 }
 //#endregion
-export { M as AmosApplePayButton, A as AmosBankAccountPaymentMethodForm, k as AmosCreditCardPaymentMethodForm, j as AmosGooglePayButton, v as confirmPayment, y as confirmSetup, x as focusField, b as resetForm, _ as validateForm };
+export { AmosApplePayButton, AmosBankAccountPaymentMethodForm, AmosCreditCardPaymentMethodForm, AmosGooglePayButton, confirmPayment, confirmSetup, focusField, resetForm, validateForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/react-amos-js",
-  "version": "0.11.22",
+  "version": "0.11.24",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "watch": "vite build --watch",
     "preview": "vite preview",
     "test": "vitest",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "node ./node_modules/typescript/bin/tsc --noEmit",
     "prepack": "npm run build",
     "changeset": "changeset",
     "version": "changeset version",
@@ -46,22 +46,22 @@
   ],
   "description": "React SDK for embedding Amos payment methods via iframes. Wraps @amos.com/amos-js.",
   "devDependencies": {
-    "@amos.com/node": "0.1.64",
-    "@biomejs/biome": "2.5.11",
-    "@changesets/cli": "2.31.1",
-    "@types/node": "26.4.0",
-    "@types/react": "19.2.18",
+    "@amos.com/node": "0.1.65",
+    "@biomejs/biome": "2.5.14",
+    "@changesets/cli": "3.0.3",
+    "@types/node": "26.6.2",
+    "@types/react": "19.3.0",
     "@typescript/typescript6": "6.0.2",
     "typescript": "7.0.2",
-    "vite": "8.2.2",
-    "vite-plugin-dts": "5.0.3"
+    "vite": "8.3.0",
+    "vite-plugin-dts": "5.1.1"
   },
   "dependencies": {
-    "@amos.com/amos-js": "0.11.24",
-    "@types/googlepay": "0.7.12"
+    "@amos.com/amos-js": "0.11.26",
+    "@types/googlepay": "0.7.13"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
-    "@amos.com/node": ">=0.1.64"
+    "@amos.com/node": ">=0.1.65"
   }
 }