@amos.com/react-amos-js 0.9.14 → 0.9.16

package/README.md

@@ -39,7 +39,7 @@ The render token configures the iframe's allowed origin(s), allowed payment meth
 The following flow is for credit card and bank account payment method types only.
 
 1. **Set up prerequisites**: create a `renderToken` (safe for client), and keep `apiKey` and `accountId` server-side only.
-2. **Render your checkout UI** with one of the payment method components (e.g. `AmosCreditCardPaymentMethodForm`) along with the required `onResult` prop. Card and bank forms show a field-shaped skeleton immediately (sized from `appearance`, `additionalFields`, and `billingAddressRequirement`); iframe height is auto-managed.
+2. **Render your checkout UI** with one of the payment method components (e.g. `AmosCreditCardPaymentMethodForm`) along with the required `onResult` prop. Card and bank forms show a field-shaped skeleton immediately (sized from `appearance`, `additionalFields`, and `billingAddressRequirement`); Google Pay and Apple Pay paint a button-shaped skeleton in the parent document on first render so the 48px slot is reserved before the iframe loads.
 3. **User clicks "Pay now" button**: call `validateForm({ iframeRef })`, which returns `Promise<true>` if the embedded form is valid and `Promise<false>` otherwise.
 4. **Create payment intent on your server**: use your server-side Amos client to call `POST /payment_intents`. You may also associate this payment intent with a new or existing customer via `POST /customers`. This must be server-side because it uses your private API key.
 5. **Return the payment intent token to the browser**: your backend responds with the embed token (`components["schemas"]["EmbedToken"]`) needed for confirmation.
@@ -247,58 +247,109 @@ function CheckoutForm() {
 }
 ```
 
-### Rendering Google Pay within your checkout flow
+### Rendering Google Pay and Apple Pay within your checkout flow
 
 ```tsx
 import { useState } from "react";
-import { AmosGooglePayButton } from "@amos.com/react-amos-js";
+import {
+  AmosApplePayButton,
+  AmosGooglePayButton,
+  type ConfirmationResult,
+} from "@amos.com/react-amos-js";
+import type { components } from "@amos.com/node";
+
+async function createPaymentIntentToken({
+  paymentIntentCreateAttributes,
+  customerCreateAttributes,
+}: {
+  paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+  customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+}): Promise<string> {
+  const response = await fetch("/api/payment-intents", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      customer: customerCreateAttributes,
+      paymentIntent: paymentIntentCreateAttributes,
+    }),
+  });
+  if (!response.ok) {
+    throw new Error("Failed to create payment intent.");
+  }
+  const { token } = (await response.json()) as { token: string };
+  return token;
+}
 
-function CheckoutGooglePay() {
+function CheckoutWallets({ renderToken }: { renderToken: string }) {
   const [error, setError] = useState<string | null>(null);
 
+  function handleResult(result: ConfirmationResult) {
+    if (result.status === "succeeded") {
+      console.log("Confirm returned:", result);
+    } else if (result.status === "failed") {
+      setError(result.errorMessage);
+    } else if (result.status === "incomplete") {
+      console.log("Recoverable:", result.reason);
+    }
+  }
+
   return (
     <>
-      <AmosGooglePayButton
-        renderToken="the-render-token-that-you-created-on-dashboard.amos.com"
-        amount="5000" // $50.00 in cents, as a string
-        merchantName="your-user-facing-merchant-name"
-        onInitiatePaymentIntentRequest={async ({
-          paymentIntentCreateAttributes,
-          customerCreateAttributes,
-        }) => {
-          const response = await fetch("/api/payment-intents", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              customer: customerCreateAttributes,
-              paymentIntent: paymentIntentCreateAttributes,
-            }),
-          });
-
-          if (!response.ok) {
-            throw new Error("Failed to create payment intent.");
-          }
-
-          const { token } = await response.json();
-          return token;
-        }}
-        onResult={(result) => {
-          if (result.status === "succeeded") {
-            console.log("Confirm returned:", result);
-          } else if (result.status === "failed") {
-            console.error("Confirm failed:", result.errorMessage);
-          } else if (result.status === "incomplete") {
-            console.log("Recoverable:", result.reason);
-          }
-        }}
-      />
-      {error ? <p>{error}</p> : null}
+      <div style={{ display: "flex", gap: "12px" }}>
+        <div style={{ flex: "1 1 0", minWidth: 0 }}>
+          <AmosGooglePayButton
+            renderToken={renderToken}
+            amount="50.00"
+            merchantName="Example Store"
+            onInitiatePaymentIntentRequest={createPaymentIntentToken}
+            onResult={handleResult}
+          />
+        </div>
+        <div style={{ flex: "1 1 0", minWidth: 0 }}>
+          <AmosApplePayButton
+            renderToken={renderToken}
+            amount="50.00"
+            merchantName="Example Store"
+            onInitiatePaymentIntentRequest={createPaymentIntentToken}
+            onResult={handleResult}
+          />
+        </div>
+      </div>
+      {error ? <p role="alert">{error}</p> : null}
     </>
   );
 }
 ```
 
-`AmosApplePayButton` uses the same props and express-checkout callbacks. Drop it in the same place (or alongside Google Pay) with the same `amount`, `merchantName`, and `onInitiatePaymentIntentRequest` wiring. On Safari, the native payment sheet is used; on other browsers, Apple's QR handoff opens in a popup (`pay.apple.com`). While that popup is open, the SDK shows a waiting overlay on your page with a **Cancel payment** button.
+Do not call `validateForm` or `confirmPaymentIntent` — return the embed token from `onInitiatePaymentIntentRequest` and the SDK confirms. Size the mount slot; omitted `buttonProps` keep paint defaults and fill the iframe.
+
+On Safari, Apple Pay uses the native payment sheet. On other browsers, Apple's QR handoff opens in a popup (`pay.apple.com`); while that popup is open, the SDK shows a waiting overlay with **Cancel payment**.
+
+Optional visuals:
+
+```tsx
+<AmosGooglePayButton
+  renderToken={renderToken}
+  amount="50.00"
+  merchantName="Example Store"
+  height="48px"
+  buttonProps={{ buttonType: "donate", buttonBorderType: "no_border" }}
+  iframeProps={{ style: { borderRadius: "8px" } }}
+  onInitiatePaymentIntentRequest={createPaymentIntentToken}
+  onResult={handleResult}
+/>
+
+<AmosApplePayButton
+  renderToken={renderToken}
+  amount="50.00"
+  merchantName="Example Store"
+  height="48px"
+  buttonProps={{ type: "donate" }}
+  iframeProps={{ style: { borderRadius: "8px" } }}
+  onInitiatePaymentIntentRequest={createPaymentIntentToken}
+  onResult={handleResult}
+/>
+```
 
 ### Saving a payment method with setup intent (credit card)
 
@@ -449,12 +500,12 @@ Renders the secure bank account iframe form. A field-shaped skeleton is shown im
 
 ### `AmosGooglePayButton`
 
-Renders the secure Google Pay iframe button (express checkout flow).
+Renders the secure Google Pay iframe button (express checkout flow). A button-shaped skeleton is shown immediately and replaced by the iframe once appearance is applied.
 
 **Required props:**
 
 - `renderToken` (`string`)
-- `amount` (`string`)
+- `amount` (`string`) — major-currency decimal string shown in the wallet sheet (e.g. `"50.00"` for $50.00). The iframe converts this to cents in `paymentIntentCreateAttributes.amount`.
 - `merchantName` (`string`)
 - `onInitiatePaymentIntentRequest` (callback receiving `{ paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"]; customerCreateAttributes: components["schemas"]["CreateCustomerInput"] }`, returns `Promise<components["schemas"]["EmbedToken"]["token"]>` — the embed JWT string for confirmation)
 
@@ -476,7 +527,7 @@ Renders the secure Google Pay iframe button (express checkout flow).
 
 ### `AmosApplePayButton`
 
-Renders the secure Apple Pay iframe button (express checkout flow). Same required props and callbacks as `AmosGooglePayButton`.
+Renders the secure Apple Pay iframe button (express checkout flow). Same required props and callbacks as `AmosGooglePayButton`. A button-shaped skeleton is shown immediately and replaced by the iframe once appearance is applied.
 
 **Optional visual props:**
 
@@ -521,7 +572,7 @@ Re-exports of the same advanced helpers exposed by `@amos.com/amos-js`. Most int
 - **`ref` / `iframeRef`**: for card and bank forms, pass `ref={iframeRef}` to the form component. The same `iframeRef` must be used when calling `validateForm`, `confirmPaymentIntent`, `confirmSetupIntent`, or `resetForm`. The component forwards the ref to the inner iframe.
 - **`onResult` is not settlement proof**: `onResult` tells you when to stop waiting (e.g. dismiss a spinner). Verify payment or setup success on your backend via webhooks. On `status: "incomplete"`, unlock your UI — the customer can fix fields in the iframe and retry. Use `result.reason` (`"field_errors"` or `"validation_failed"`) to distinguish recoverable states.
 - **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 (`confirmPaymentIntent` vs `confirmSetupIntent`). Handle both payment and setup outcomes via `onResult`.
-- **Amount format**: for `AmosGooglePayButton` and `AmosApplePayButton`, `amount` is a string (e.g. `"5000"` for $50.00). For `components["schemas"]["CreatePaymentIntentInput"]` on the server, `amount` is a number in cents (e.g. `5000`).
+- **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 `onInitiatePaymentIntentRequest`), `amount` is a number in cents (e.g. `5000`).
 - **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 until payment completes, the popup closes, or the user clicks **Cancel payment**. 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

@@ -74,6 +74,11 @@ export declare function AmosBankAccountPaymentMethodForm({ ref, renderToken, app
 type AmosGooglePayButtonProps = {
     ref?: ForwardedIframeRef;
     renderToken: string;
+    /**
+     * Major-currency decimal string shown in the Google Pay sheet
+     * (e.g. `"50.00"` for $50.00). Converted to cents in
+     * `paymentIntentCreateAttributes.amount`.
+     */
     amount: string;
     merchantName: string;
     /**
@@ -96,10 +101,20 @@ type AmosGooglePayButtonProps = {
     }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
     onResult: (result: ConfirmationResult) => void;
 };
+/**
+ * Renders the secure Google Pay iframe button. A button-shaped
+ * 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, iframeProps, onInitiatePaymentIntentRequest, onResult, }: AmosGooglePayButtonProps): import("react").JSX.Element;
 type AmosApplePayButtonProps = {
     ref?: ForwardedIframeRef;
     renderToken: string;
+    /**
+     * Major-currency decimal string shown in the Apple Pay sheet
+     * (e.g. `"50.00"` for $50.00). Converted to cents in
+     * `paymentIntentCreateAttributes.amount`.
+     */
     amount: string;
     merchantName: string;
     /**
@@ -122,4 +137,9 @@ type AmosApplePayButtonProps = {
     }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
     onResult: (result: ConfirmationResult) => void;
 };
+/**
+ * Renders the secure Apple Pay iframe button. A button-shaped
+ * 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, iframeProps, onInitiatePaymentIntentRequest, onResult, }: 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){return e?e.current??null:null}function i({iframeRef:t}){return(0,e.validateForm)({iframe:r(t)})}function a({iframeRef:t,token:n}){(0,e.confirmPaymentIntent)({iframe:r(t),token:n})}function o({iframeRef:t,token:n}){(0,e.confirmSetupIntent)({iframe:r(t),token:n})}function s({iframeRef:t}){(0,e.resetForm)({iframe:r(t)})}function c(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function l(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 u({containerRef:e,iframeRef:n,mount:r,options:i,remountDeps:a,iframePassthrough:o,updateDeps:s}){let u=(0,t.useRef)(null);(0,t.useEffect)(()=>{let t=e.current;if(!t)return;let a=r(t,i);return u.current=a,c(n,a.iframe),l(a.iframe,o),()=>{a.destroy(),u.current=null,c(n,null)}},[...a]),(0,t.useEffect)(()=>{u.current?.update(i)},[...s]),(0,t.useEffect)(()=>{let e=u.current?.iframe;e&&l(e,o)})}function d({ref:r,renderToken:i,appearance:a,onResult:o,onValidityChange:s,additionalFields:c={cardholderName:!1},billingAddressRequirement:l=`country`,style:d,...f}){let p=(0,t.useRef)(null);return u({containerRef:p,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:c,billingAddressRequirement:l,onResult:o,onValidityChange:s},remountDeps:[i,c.cardholderName,l],iframePassthrough:{style:d,...f},updateDeps:[a,c,l,o,s]}),(0,n.jsx)(`div`,{ref:p})}function f({ref:r,renderToken:i,appearance:a,onResult:o,onValidityChange:s,billingAddressRequirement:c=`country`,style:l,...d}){let f=(0,t.useRef)(null);return u({containerRef:f,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:c,onResult:o,onValidityChange:s},remountDeps:[i,c],iframePassthrough:{style:l,...d},updateDeps:[a,c,o,s]}),(0,n.jsx)(`div`,{ref:f})}function p({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,iframeProps:l,onInitiatePaymentIntentRequest:d,onResult:f}){let p=(0,t.useRef)(null);return u({containerRef:p,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,onInitiatePaymentIntentRequest:d,onResult:f},remountDeps:[i],iframePassthrough:l??{},updateDeps:[a,o,s,c,d,f]}),(0,n.jsx)(`div`,{ref:p})}function m({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,iframeProps:l,onInitiatePaymentIntentRequest:d,onResult:f}){let p=(0,t.useRef)(null);return u({containerRef:p,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,onInitiatePaymentIntentRequest:d,onResult:f},remountDeps:[i],iframePassthrough:l??{},updateDeps:[a,o,s,c,d,f]}),(0,n.jsx)(`div`,{ref:p})}exports.AmosApplePayButton=m,exports.AmosBankAccountPaymentMethodForm=f,exports.AmosCreditCardPaymentMethodForm=d,exports.AmosGooglePayButton=p,exports.confirmPaymentIntent=a,exports.confirmSetupIntent=o,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 r(e){return e?e.current??null:null}function i({iframeRef:t}){return(0,e.validateForm)({iframe:r(t)})}function a({iframeRef:t,token:n}){(0,e.confirmPaymentIntent)({iframe:r(t),token:n})}function o({iframeRef:t,token:n}){(0,e.confirmSetupIntent)({iframe:r(t),token:n})}function s({iframeRef:t}){(0,e.resetForm)({iframe:r(t)})}function c(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function l(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 u({containerRef:e,iframeRef:n,mount:r,options:i,remountDeps:a,iframePassthrough:o,updateDeps:s}){let u=(0,t.useRef)(null);(0,t.useLayoutEffect)(()=>{let t=e.current;if(!t)return;let a=r(t,i);return u.current=a,c(n,a.iframe),l(a.iframe,o),()=>{a.destroy(),u.current=null,c(n,null)}},[...a]),(0,t.useEffect)(()=>{u.current?.update(i)},[...s]),(0,t.useEffect)(()=>{let e=u.current?.iframe;e&&l(e,o)})}var d=`oklch(0.97 0 0)`;function f({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:d,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 p({ref:r,renderToken:i,appearance:a,onResult:o,onValidityChange:s,additionalFields:c={cardholderName:!1},billingAddressRequirement:l=`country`,style:d,...f}){let p=(0,t.useRef)(null);return u({containerRef:p,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:c,billingAddressRequirement:l,onResult:o,onValidityChange:s},remountDeps:[i,c.cardholderName,l],iframePassthrough:{style:d,...f},updateDeps:[a,c,l,o,s]}),(0,n.jsx)(`div`,{ref:p})}function m({ref:r,renderToken:i,appearance:a,onResult:o,onValidityChange:s,billingAddressRequirement:c=`country`,style:l,...d}){let f=(0,t.useRef)(null);return u({containerRef:f,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:c,onResult:o,onValidityChange:s},remountDeps:[i,c],iframePassthrough:{style:l,...d},updateDeps:[a,c,o,s]}),(0,n.jsx)(`div`,{ref:f})}function h({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,iframeProps:l,onInitiatePaymentIntentRequest:d,onResult:p}){let m=(0,t.useRef)(null),h=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:l?.style,buttonProps:c});return u({containerRef:m,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,onInitiatePaymentIntentRequest:d,onResult:p},remountDeps:[i],iframePassthrough:l??{},updateDeps:[a,o,s,c,d,p]}),(0,n.jsx)(f,{height:s,borderRadius:h,containerRef:m})}function g({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,iframeProps:l,onInitiatePaymentIntentRequest:d,onResult:p}){let m=(0,t.useRef)(null),h=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:l?.style,buttonProps:c});return u({containerRef:m,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,onInitiatePaymentIntentRequest:d,onResult:p},remountDeps:[i],iframePassthrough:l??{},updateDeps:[a,o,s,c,d,p]}),(0,n.jsx)(f,{height:s,borderRadius:h,containerRef:m})}exports.AmosApplePayButton=g,exports.AmosBankAccountPaymentMethodForm=m,exports.AmosCreditCardPaymentMethodForm=p,exports.AmosGooglePayButton=h,exports.confirmPaymentIntent=a,exports.confirmSetupIntent=o,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]}})});

package/dist/index.mjs

@@ -1,65 +1,102 @@
-import { confirmPaymentIntent as e, confirmSetupIntent as t, mountAmosApplePayButton as n, mountAmosBankAccountPaymentMethodForm as r, mountAmosCreditCardPaymentMethodForm as i, mountAmosGooglePayButton as a, resetForm as o, validateForm as s } from "@amos.com/amos-js";
-import { useEffect as c, useRef as l } from "react";
-import { jsx as u } from "react/jsx-runtime";
+import { confirmPaymentIntent as e, confirmSetupIntent as t, ensureSkeletonStyles as n, mountAmosApplePayButton as r, mountAmosBankAccountPaymentMethodForm as i, mountAmosCreditCardPaymentMethodForm as a, mountAmosGooglePayButton as o, resetForm as s, resolveWalletButtonSkeletonBorderRadius as c, validateForm as l } from "@amos.com/amos-js";
+import { useEffect as u, useLayoutEffect as d, useRef as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 export * from "@amos.com/amos-js";
 //#region src/index.tsx
-function d(e) {
+function h(e) {
 	return e ? e.current ?? null : null;
 }
-function f({ iframeRef: e }) {
-	return s({ iframe: d(e) });
+function g({ iframeRef: e }) {
+	return l({ iframe: h(e) });
 }
-function p({ iframeRef: t, token: n }) {
+function _({ iframeRef: t, token: n }) {
 	e({
-		iframe: d(t),
+		iframe: h(t),
 		token: n
 	});
 }
-function m({ iframeRef: e, token: n }) {
+function v({ iframeRef: e, token: n }) {
 	t({
-		iframe: d(e),
+		iframe: h(e),
 		token: n
 	});
 }
-function h({ iframeRef: e }) {
-	o({ iframe: d(e) });
+function y({ iframeRef: e }) {
+	s({ iframe: h(e) });
 }
-function g(e, t) {
+function b(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function _(e, { style: t, className: n, id: r, ...i }) {
+function x(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 v({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i, iframePassthrough: a, updateDeps: o }) {
-	let s = l(null);
-	c(() => {
+function S({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i, iframePassthrough: a, updateDeps: o }) {
+	let s = f(null);
+	d(() => {
 		let i = e.current;
 		if (!i) return;
 		let o = n(i, r);
-		return s.current = o, g(t, o.iframe), _(o.iframe, a), () => {
-			o.destroy(), s.current = null, g(t, null);
+		return s.current = o, b(t, o.iframe), x(o.iframe, a), () => {
+			o.destroy(), s.current = null, b(t, null);
 		};
-	}, [...i]), c(() => {
+	}, [...i]), u(() => {
 		s.current?.update(r);
-	}, [...o]), c(() => {
+	}, [...o]), u(() => {
 		let e = s.current?.iframe;
-		e && _(e, a);
+		e && x(e, a);
 	});
 }
-function y({ ref: e, renderToken: t, appearance: n, onResult: r, onValidityChange: a, additionalFields: o = { cardholderName: !1 }, billingAddressRequirement: s = "country", style: c, ...d }) {
-	let f = l(null);
-	return v({
-		containerRef: f,
+var C = "oklch(0.97 0 0)";
+function w({ height: e, borderRadius: t, containerRef: r }) {
+	return d(() => {
+		n();
+	}, []), /* @__PURE__ */ m("div", {
+		style: {
+			boxSizing: "border-box",
+			position: "relative",
+			width: "100%",
+			height: e,
+			minHeight: e,
+			overflow: "hidden"
+		},
+		children: [/* @__PURE__ */ p("div", {
+			className: "amos-js-form-skeleton-input amos-js-wallet-skeleton",
+			style: {
+				position: "absolute",
+				inset: 0,
+				height: e,
+				borderRadius: t,
+				background: C,
+				pointerEvents: "none",
+				zIndex: 0
+			},
+			"aria-hidden": !0
+		}), /* @__PURE__ */ p("div", {
+			ref: r,
+			style: {
+				position: "absolute",
+				inset: 0,
+				zIndex: 1,
+				width: "100%",
+				height: "100%"
+			}
+		})]
+	});
+}
+function T({ ref: e, renderToken: t, appearance: n, onResult: r, onValidityChange: i, additionalFields: o = { cardholderName: !1 }, billingAddressRequirement: s = "country", style: c, ...l }) {
+	let u = f(null);
+	return S({
+		containerRef: u,
 		iframeRef: e,
-		mount: i,
+		mount: a,
 		options: {
 			renderToken: t,
 			appearance: n,
 			additionalFields: o,
 			billingAddressRequirement: s,
 			onResult: r,
-			onValidityChange: a
+			onValidityChange: i
 		},
 		remountDeps: [
 			t,
@@ -68,28 +105,28 @@ function y({ ref: e, renderToken: t, appearance: n, onResult: r, onValidityChang
 		],
 		iframePassthrough: {
 			style: c,
-			...d
+			...l
 		},
 		updateDeps: [
 			n,
 			o,
 			s,
 			r,
-			a
+			i
 		]
-	}), /* @__PURE__ */ u("div", { ref: f });
+	}), /* @__PURE__ */ p("div", { ref: u });
 }
-function b({ ref: e, renderToken: t, appearance: n, onResult: i, onValidityChange: a, billingAddressRequirement: o = "country", style: s, ...c }) {
-	let d = l(null);
-	return v({
-		containerRef: d,
+function E({ ref: e, renderToken: t, appearance: n, onResult: r, onValidityChange: a, billingAddressRequirement: o = "country", style: s, ...c }) {
+	let l = f(null);
+	return S({
+		containerRef: l,
 		iframeRef: e,
-		mount: r,
+		mount: i,
 		options: {
 			renderToken: t,
 			appearance: n,
 			billingAddressRequirement: o,
-			onResult: i,
+			onResult: r,
 			onValidityChange: a
 		},
 		remountDeps: [t, o],
@@ -100,25 +137,28 @@ function b({ ref: e, renderToken: t, appearance: n, onResult: i, onValidityChang
 		updateDeps: [
 			n,
 			o,
-			i,
+			r,
 			a
 		]
-	}), /* @__PURE__ */ u("div", { ref: d });
+	}), /* @__PURE__ */ p("div", { ref: l });
 }
-function x({ ref: e, renderToken: t, amount: n, merchantName: r, height: i = "48px", buttonProps: o, iframeProps: s, onInitiatePaymentIntentRequest: c, onResult: d }) {
-	let f = l(null);
-	return v({
-		containerRef: f,
+function D({ ref: e, renderToken: t, amount: n, merchantName: r, height: i = "48px", buttonProps: a, iframeProps: s, onInitiatePaymentIntentRequest: l, onResult: u }) {
+	let d = f(null), m = c({
+		iframeStyle: s?.style,
+		buttonProps: a
+	});
+	return S({
+		containerRef: d,
 		iframeRef: e,
-		mount: a,
+		mount: o,
 		options: {
 			renderToken: t,
 			amount: n,
 			merchantName: r,
 			height: i,
-			buttonProps: o,
-			onInitiatePaymentIntentRequest: c,
-			onResult: d
+			buttonProps: a,
+			onInitiatePaymentIntentRequest: l,
+			onResult: u
 		},
 		remountDeps: [t],
 		iframePassthrough: s ?? {},
@@ -126,38 +166,49 @@ function x({ ref: e, renderToken: t, amount: n, merchantName: r, height: i = "48
 			n,
 			r,
 			i,
-			o,
-			c,
-			d
+			a,
+			l,
+			u
 		]
-	}), /* @__PURE__ */ u("div", { ref: f });
+	}), /* @__PURE__ */ p(w, {
+		height: i,
+		borderRadius: m,
+		containerRef: d
+	});
 }
-function S({ ref: e, renderToken: t, amount: r, merchantName: i, height: a = "48px", buttonProps: o, iframeProps: s, onInitiatePaymentIntentRequest: c, onResult: d }) {
-	let f = l(null);
-	return v({
-		containerRef: f,
+function O({ ref: e, renderToken: t, amount: n, merchantName: i, height: a = "48px", buttonProps: o, iframeProps: s, onInitiatePaymentIntentRequest: l, onResult: u }) {
+	let d = f(null), m = c({
+		iframeStyle: s?.style,
+		buttonProps: o
+	});
+	return S({
+		containerRef: d,
 		iframeRef: e,
-		mount: n,
+		mount: r,
 		options: {
 			renderToken: t,
-			amount: r,
+			amount: n,
 			merchantName: i,
 			height: a,
 			buttonProps: o,
-			onInitiatePaymentIntentRequest: c,
-			onResult: d
+			onInitiatePaymentIntentRequest: l,
+			onResult: u
 		},
 		remountDeps: [t],
 		iframePassthrough: s ?? {},
 		updateDeps: [
-			r,
+			n,
 			i,
 			a,
 			o,
-			c,
-			d
+			l,
+			u
 		]
-	}), /* @__PURE__ */ u("div", { ref: f });
+	}), /* @__PURE__ */ p(w, {
+		height: a,
+		borderRadius: m,
+		containerRef: d
+	});
 }
 //#endregion
-export { S as AmosApplePayButton, b as AmosBankAccountPaymentMethodForm, y as AmosCreditCardPaymentMethodForm, x as AmosGooglePayButton, p as confirmPaymentIntent, m as confirmSetupIntent, h as resetForm, f as validateForm };
+export { O as AmosApplePayButton, E as AmosBankAccountPaymentMethodForm, T as AmosCreditCardPaymentMethodForm, D as AmosGooglePayButton, _ as confirmPaymentIntent, v as confirmSetupIntent, y as resetForm, g as validateForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/react-amos-js",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -48,7 +48,7 @@
     "vite-plugin-dts": "5.0.3"
   },
   "dependencies": {
-    "@amos.com/amos-js": "0.9.15",
+    "@amos.com/amos-js": "0.9.17",
     "@types/googlepay": "0.7.11"
   },
   "peerDependencies": {

package/src/index.tsx

@@ -10,11 +10,13 @@ import {
   type BillingAddressRequirement,
   type ConfirmationResult,
   type CreditCardAdditionalFields,
+  ensureSkeletonStyles,
   type GooglePayButtonElementProps,
   mountAmosApplePayButton,
   mountAmosBankAccountPaymentMethodForm,
   mountAmosCreditCardPaymentMethodForm,
   mountAmosGooglePayButton,
+  resolveWalletButtonSkeletonBorderRadius,
 } from "@amos.com/amos-js";
 import type { components } from "@amos.com/node";
 import {
@@ -22,6 +24,7 @@ import {
   type Ref,
   type RefObject,
   useEffect,
+  useLayoutEffect,
   useRef,
 } from "react";
 
@@ -157,7 +160,7 @@ function useAmosEmbed<TOptions extends Record<string, unknown>>({
   const controllerRef = useRef<AmosEmbedController | null>(null);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: remount only when remountDeps change
-  useEffect(() => {
+  useLayoutEffect(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -188,6 +191,59 @@ function useAmosEmbed<TOptions extends Record<string, unknown>>({
   });
 }
 
+const SKELETON_ACCENT = "oklch(0.97 0 0)";
+
+function WalletButtonSlot({
+  height,
+  borderRadius,
+  containerRef,
+}: {
+  height: string;
+  borderRadius: string;
+  containerRef: RefObject<HTMLDivElement | null>;
+}) {
+  useLayoutEffect(() => {
+    ensureSkeletonStyles();
+  }, []);
+
+  return (
+    <div
+      style={{
+        boxSizing: "border-box",
+        position: "relative",
+        width: "100%",
+        height,
+        minHeight: height,
+        overflow: "hidden",
+      }}
+    >
+      <div
+        className="amos-js-form-skeleton-input amos-js-wallet-skeleton"
+        style={{
+          position: "absolute",
+          inset: 0,
+          height,
+          borderRadius,
+          background: SKELETON_ACCENT,
+          pointerEvents: "none",
+          zIndex: 0,
+        }}
+        aria-hidden
+      />
+      <div
+        ref={containerRef}
+        style={{
+          position: "absolute",
+          inset: 0,
+          zIndex: 1,
+          width: "100%",
+          height: "100%",
+        }}
+      />
+    </div>
+  );
+}
+
 type AmosCreditCardPaymentMethodFormProps = IframePassthroughProps & {
   renderToken: string;
   appearance?: Appearance;
@@ -295,6 +351,11 @@ export function AmosBankAccountPaymentMethodForm({
 type AmosGooglePayButtonProps = {
   ref?: ForwardedIframeRef;
   renderToken: string;
+  /**
+   * Major-currency decimal string shown in the Google Pay sheet
+   * (e.g. `"50.00"` for $50.00). Converted to cents in
+   * `paymentIntentCreateAttributes.amount`.
+   */
   amount: string;
   merchantName: string;
   /**
@@ -321,6 +382,11 @@ type AmosGooglePayButtonProps = {
   onResult: (result: ConfirmationResult) => void;
 };
 
+/**
+ * Renders the secure Google Pay iframe button. A button-shaped
+ * skeleton is painted in the parent document on first render (including
+ * SSR) so the slot height is reserved before the iframe loads.
+ */
 export function AmosGooglePayButton({
   ref,
   renderToken,
@@ -333,6 +399,10 @@ export function AmosGooglePayButton({
   onResult,
 }: AmosGooglePayButtonProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const borderRadius = resolveWalletButtonSkeletonBorderRadius({
+    iframeStyle: iframeProps?.style as { borderRadius?: string | number },
+    buttonProps,
+  });
 
   useAmosEmbed({
     containerRef,
@@ -359,12 +429,23 @@ export function AmosGooglePayButton({
     ],
   });
 
-  return <div ref={containerRef} />;
+  return (
+    <WalletButtonSlot
+      height={height}
+      borderRadius={borderRadius}
+      containerRef={containerRef}
+    />
+  );
 }
 
 type AmosApplePayButtonProps = {
   ref?: ForwardedIframeRef;
   renderToken: string;
+  /**
+   * Major-currency decimal string shown in the Apple Pay sheet
+   * (e.g. `"50.00"` for $50.00). Converted to cents in
+   * `paymentIntentCreateAttributes.amount`.
+   */
   amount: string;
   merchantName: string;
   /**
@@ -391,6 +472,11 @@ type AmosApplePayButtonProps = {
   onResult: (result: ConfirmationResult) => void;
 };
 
+/**
+ * Renders the secure Apple Pay iframe button. A button-shaped
+ * skeleton is painted in the parent document on first render (including
+ * SSR) so the slot height is reserved before the iframe loads.
+ */
 export function AmosApplePayButton({
   ref,
   renderToken,
@@ -403,6 +489,10 @@ export function AmosApplePayButton({
   onResult,
 }: AmosApplePayButtonProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const borderRadius = resolveWalletButtonSkeletonBorderRadius({
+    iframeStyle: iframeProps?.style as { borderRadius?: string | number },
+    buttonProps,
+  });
 
   useAmosEmbed({
     containerRef,
@@ -429,5 +519,11 @@ export function AmosApplePayButton({
     ],
   });
 
-  return <div ref={containerRef} />;
+  return (
+    <WalletButtonSlot
+      height={height}
+      borderRadius={borderRadius}
+      containerRef={containerRef}
+    />
+  );
 }