@amos.com/react-amos-js 0.9.10 → 0.9.12

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. The iframe height is auto-managed by the SDK.
+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.
 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.
@@ -417,7 +417,7 @@ Clears all field values and API errors in the embedded card/bank iframe form. Ca
 
 ### `AmosCreditCardPaymentMethodForm`
 
-Renders the secure credit card iframe form.
+Renders the secure credit card iframe form. A field-shaped skeleton is shown immediately and replaced by the iframe once appearance is applied.
 
 **Required props:**
 
@@ -436,7 +436,7 @@ Renders the secure credit card iframe form.
 
 ### `AmosBankAccountPaymentMethodForm`
 
-Renders the secure bank account iframe form.
+Renders the secure bank account iframe form. A field-shaped skeleton is shown immediately and replaced by the iframe once appearance is applied.
 
 **Required props:** same as `AmosCreditCardPaymentMethodForm` — `renderToken`, `onResult`.
 
@@ -460,15 +460,27 @@ Renders the secure Google Pay iframe button (express checkout flow).
 **Optional props:**
 
 - `appearance` (`{ themeVariables?: Partial<Record<ThemeVariable, string>>; labels?: "above" | "floating" | "placeholder" }`)
+- `fullWidth` (`boolean`, defaults to `false`) — fills the component's mount container
 - `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`)
 - `buttonBorderType` (`"no_border" | "default_border"`)
-- `style` — forwarded to the Google Pay button **inside** the iframe (not the iframe element). Example: `style={{ height: "48px", width: "100%" }}` with `buttonSizeMode="fill"`.
+- `buttonStyle` — styles the Google Pay button **inside** the iframe, for example `buttonStyle={{ height: "48px" }}`
+- `iframeStyle` — styles the host-page `<iframe>` element
+- `style` — backward-compatible alias for `buttonStyle`; prefer the explicit name in new integrations
 
-**Also accepts:** standard iframe props, minus `src`, `title`, `name`, `role`, `allow`, and `style` (which is the inner button style).
+```tsx
+<AmosGooglePayButton
+  fullWidth
+  buttonStyle={{ height: "48px" }}
+  iframeStyle={{ borderRadius: "6px" }}
+  // ...required props
+/>
+```
+
+**Also accepts:** standard iframe props, minus `src`, `title`, `name`, `role`, `allow`, and `style`.
 
 ### `AmosApplePayButton`
 
@@ -476,21 +488,22 @@ Renders the secure Apple Pay iframe button (express checkout flow). Same require
 
 **Optional visual props** use Apple's `<apple-pay-button>` attribute names:
 
+- `fullWidth` (`boolean`, defaults to `false`) — fills the component's mount container
 - `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` — forwarded to the `<apple-pay-button>` inside the iframe. Apple sizes the button with CSS custom properties:
+- `buttonStyle` — forwarded to the `<apple-pay-button>` inside the iframe. Apple maps a CSS `height` onto its required custom property.
+- `iframeStyle` — styles the host-page `<iframe>` element
+- `style` — backward-compatible alias for `buttonStyle`
 
 ```tsx
 <AmosApplePayButton
+  fullWidth
   buttonstyle="white-outline"
   type="buy"
   locale="en-GB"
-  style={{
-    "--apple-pay-button-height": "48px",
-    "--apple-pay-button-width": "100%",
-    width: "100%",
-  }}
+  buttonStyle={{ height: "48px" }}
+  iframeStyle={{ borderRadius: "6px" }}
   // ...required props
 />
 ```

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="googlepay" />
-import { Appearance, ApplePayButtonElementProps, BillingAddressRequirement, ConfirmationResult, CreditCardAdditionalFields, GooglePayButtonElementProps } from '@amos.com/amos-js';
+import { Appearance, ApplePayButtonElementProps, BillingAddressRequirement, ConfirmationResult, CreditCardAdditionalFields, GooglePayButtonElementProps, WalletButtonStyle } from '@amos.com/amos-js';
 import { components } from '@amos.com/node';
 import { ComponentProps, RefObject } from 'react';
 export * from '@amos.com/amos-js';
@@ -41,6 +41,24 @@ export declare function resetForm({ iframeRef }: {
     iframeRef: IframeRef;
 }): void;
 type IframePassthroughProps = Omit<ComponentProps<"iframe">, "src" | "title" | "name" | "role" | "allow">;
+type WalletStyleProps = {
+    /**
+     * Stretch the wallet button to fill the iframe width.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** Styles applied to the wallet button inside the Amos iframe. */
+    buttonStyle?: WalletButtonStyle;
+    /** Styles applied to the host-page `<iframe>` element. */
+    iframeStyle?: ComponentProps<"iframe">["style"];
+    /**
+     * Styles applied to the wallet button inside the Amos iframe.
+     *
+     * @deprecated Use `buttonStyle` to distinguish it from `iframeStyle`.
+     */
+    style?: WalletButtonStyle;
+};
 type AmosCreditCardPaymentMethodFormProps = IframePassthroughProps & {
     renderToken: string;
     appearance?: Appearance;
@@ -70,7 +88,7 @@ type AmosBankAccountPaymentMethodFormProps = IframePassthroughProps & {
     billingAddressRequirement?: BillingAddressRequirement;
 };
 export declare function AmosBankAccountPaymentMethodForm({ ref, renderToken, appearance, onResult, onValidityChange, billingAddressRequirement, style, ...rest }: AmosBankAccountPaymentMethodFormProps): import("react").JSX.Element;
-type AmosGooglePayButtonProps = Omit<IframePassthroughProps, "style"> & GooglePayButtonElementProps & {
+type AmosGooglePayButtonProps = Omit<IframePassthroughProps, "style"> & Omit<GooglePayButtonElementProps, "style"> & WalletStyleProps & {
     renderToken: string;
     amount: string;
     merchantName: string;
@@ -81,8 +99,8 @@ type AmosGooglePayButtonProps = Omit<IframePassthroughProps, "style"> & GooglePa
     }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
     onResult: (result: ConfirmationResult) => void;
 };
-export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, buttonType, buttonColor, buttonRadius, buttonSizeMode, buttonLocale, buttonBorderType, style, ...rest }: AmosGooglePayButtonProps): import("react").JSX.Element;
-type AmosApplePayButtonProps = Omit<IframePassthroughProps, "style" | "type"> & ApplePayButtonElementProps & {
+export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, buttonType, buttonColor, buttonRadius, buttonSizeMode, buttonLocale, buttonBorderType, fullWidth, buttonStyle, iframeStyle, style, ...rest }: AmosGooglePayButtonProps): import("react").JSX.Element;
+type AmosApplePayButtonProps = Omit<IframePassthroughProps, "style" | "type"> & Omit<ApplePayButtonElementProps, "style"> & WalletStyleProps & {
     renderToken: string;
     amount: string;
     merchantName: string;
@@ -93,4 +111,4 @@ type AmosApplePayButtonProps = Omit<IframePassthroughProps, "style" | "type"> &
     }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
     onResult: (result: ConfirmationResult) => void;
 };
-export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, buttonstyle, type, locale, style, ...rest }: AmosApplePayButtonProps): import("react").JSX.Element;
+export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, buttonstyle, type, locale, fullWidth, buttonStyle, iframeStyle, style, ...rest }: 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),t!=null&&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,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,buttonType:d,buttonColor:f,buttonRadius:p,buttonSizeMode:m,buttonLocale:h,buttonBorderType:g,style:_,...v}){let y=(0,t.useRef)(null);return u({containerRef:y,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,buttonType:d,buttonColor:f,buttonRadius:p,buttonSizeMode:m,buttonLocale:h,buttonBorderType:g,style:_},remountDeps:[i],iframePassthrough:{...v},updateDeps:[a,o,s,c,l,d,f,p,m,h,g,_]}),(0,n.jsx)(`div`,{ref:y})}function m({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,buttonstyle:d,type:f,locale:p,style:m,...h}){let g=(0,t.useRef)(null);return u({containerRef:g,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,buttonstyle:d,type:f,locale:p,style:m},remountDeps:[i],iframePassthrough:{...h},updateDeps:[a,o,s,c,l,d,f,p,m]}),(0,n.jsx)(`div`,{ref:g})}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({buttonSizeMode:e,style:t,fullWidth:n}){return{buttonSizeMode:e??(n?`fill`:void 0),style:n?{width:`100%`,...t}:t}}function u({style:e,fullWidth:t}){return t?{style:{"--apple-pay-button-width":`100%`,width:`100%`,...e}}:{style:e}}function d(e,{style:t,className:n,id:r,...i}){n!=null&&(e.className=n),r!=null&&(e.id=r),t!=null&&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 f({containerRef:e,iframeRef:n,mount:r,options:i,remountDeps:a,iframePassthrough:o,updateDeps:s}){let l=(0,t.useRef)(null);(0,t.useEffect)(()=>{let t=e.current;if(!t)return;let a=r(t,i);return l.current=a,c(n,a.iframe),d(a.iframe,o),()=>{a.destroy(),l.current=null,c(n,null)}},[...a]),(0,t.useEffect)(()=>{l.current?.update(i)},[...s]),(0,t.useEffect)(()=>{let e=l.current?.iframe;e&&d(e,o)})}function p({ref:r,renderToken:i,appearance:a,onResult:o,onValidityChange:s,additionalFields:c={cardholderName:!1},billingAddressRequirement:l=`country`,style:u,...d}){let p=(0,t.useRef)(null);return f({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:u,...d},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,...u}){let d=(0,t.useRef)(null);return f({containerRef:d,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:c,onResult:o,onValidityChange:s},remountDeps:[i,c],iframePassthrough:{style:l,...u},updateDeps:[a,c,o,s]}),(0,n.jsx)(`div`,{ref:d})}function h({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:u,buttonType:d,buttonColor:p,buttonRadius:m,buttonSizeMode:h,buttonLocale:g,buttonBorderType:_,fullWidth:v=!1,buttonStyle:y,iframeStyle:b,style:x,...S}){let C=(0,t.useRef)(null),w=l({buttonSizeMode:h,style:y??x,fullWidth:v});return f({containerRef:C,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:u,buttonType:d,buttonColor:p,buttonRadius:m,buttonSizeMode:w.buttonSizeMode,buttonLocale:g,buttonBorderType:_,style:w.style},remountDeps:[i],iframePassthrough:{style:b,...S},updateDeps:[a,o,s,c,u,d,p,m,w.buttonSizeMode,g,_,w.style]}),(0,n.jsx)(`div`,{ref:C})}function g({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,buttonstyle:d,type:p,locale:m,fullWidth:h=!1,buttonStyle:g,iframeStyle:_,style:v,...y}){let b=(0,t.useRef)(null),x=u({style:g??v,fullWidth:h});return f({containerRef:b,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,buttonstyle:d,type:p,locale:m,style:x.style},remountDeps:[i],iframePassthrough:{style:_,...y},updateDeps:[a,o,s,c,l,d,p,m,x.style]}),(0,n.jsx)(`div`,{ref:b})}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

@@ -27,29 +27,45 @@ function h({ iframeRef: e }) {
 function g(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function _(e, { style: t, className: n, id: r, ...i }) {
+function _({ buttonSizeMode: e, style: t, fullWidth: n }) {
+	return {
+		buttonSizeMode: e ?? (n ? "fill" : void 0),
+		style: n ? {
+			width: "100%",
+			...t
+		} : t
+	};
+}
+function v({ style: e, fullWidth: t }) {
+	return t ? { style: {
+		"--apple-pay-button-width": "100%",
+		width: "100%",
+		...e
+	} } : { style: e };
+}
+function y(e, { style: t, className: n, id: r, ...i }) {
 	n != null && (e.className = n), r != null && (e.id = r), t != null && 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 }) {
+function b({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i, iframePassthrough: a, updateDeps: o }) {
 	let s = l(null);
 	c(() => {
 		let i = e.current;
 		if (!i) return;
 		let o = n(i, r);
-		return s.current = o, g(t, o.iframe), _(o.iframe, a), () => {
+		return s.current = o, g(t, o.iframe), y(o.iframe, a), () => {
 			o.destroy(), s.current = null, g(t, null);
 		};
 	}, [...i]), c(() => {
 		s.current?.update(r);
 	}, [...o]), c(() => {
 		let e = s.current?.iframe;
-		e && _(e, a);
+		e && y(e, a);
 	});
 }
-function y({ ref: e, renderToken: t, appearance: n, onResult: r, onValidityChange: a, additionalFields: o = { cardholderName: !1 }, billingAddressRequirement: s = "country", style: c, ...d }) {
+function x({ 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({
+	return b({
 		containerRef: f,
 		iframeRef: e,
 		mount: i,
@@ -79,9 +95,9 @@ function y({ ref: e, renderToken: t, appearance: n, onResult: r, onValidityChang
 		]
 	}), /* @__PURE__ */ u("div", { ref: f });
 }
-function b({ ref: e, renderToken: t, appearance: n, onResult: i, onValidityChange: a, billingAddressRequirement: o = "country", style: s, ...c }) {
+function S({ ref: e, renderToken: t, appearance: n, onResult: i, onValidityChange: a, billingAddressRequirement: o = "country", style: s, ...c }) {
 	let d = l(null);
-	return v({
+	return b({
 		containerRef: d,
 		iframeRef: e,
 		mount: r,
@@ -105,10 +121,14 @@ function b({ ref: e, renderToken: t, appearance: n, onResult: i, onValidityChang
 		]
 	}), /* @__PURE__ */ u("div", { ref: d });
 }
-function x({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: i, onInitiatePaymentIntentRequest: o, onResult: s, buttonType: c, buttonColor: d, buttonRadius: f, buttonSizeMode: p, buttonLocale: m, buttonBorderType: h, style: g, ..._ }) {
-	let y = l(null);
-	return v({
-		containerRef: y,
+function C({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: i, onInitiatePaymentIntentRequest: o, onResult: s, buttonType: c, buttonColor: d, buttonRadius: f, buttonSizeMode: p, buttonLocale: m, buttonBorderType: h, fullWidth: g = !1, buttonStyle: v, iframeStyle: y, style: x, ...S }) {
+	let C = l(null), w = _({
+		buttonSizeMode: p,
+		style: v ?? x,
+		fullWidth: g
+	});
+	return b({
+		containerRef: C,
 		iframeRef: e,
 		mount: a,
 		options: {
@@ -121,13 +141,16 @@ function x({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: i,
 			buttonType: c,
 			buttonColor: d,
 			buttonRadius: f,
-			buttonSizeMode: p,
+			buttonSizeMode: w.buttonSizeMode,
 			buttonLocale: m,
 			buttonBorderType: h,
-			style: g
+			style: w.style
 		},
 		remountDeps: [t],
-		iframePassthrough: { ..._ },
+		iframePassthrough: {
+			style: y,
+			...S
+		},
 		updateDeps: [
 			n,
 			r,
@@ -137,17 +160,20 @@ function x({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: i,
 			c,
 			d,
 			f,
-			p,
+			w.buttonSizeMode,
 			m,
 			h,
-			g
+			w.style
 		]
-	}), /* @__PURE__ */ u("div", { ref: y });
+	}), /* @__PURE__ */ u("div", { ref: C });
 }
-function S({ ref: e, renderToken: t, amount: r, merchantName: i, appearance: a, onInitiatePaymentIntentRequest: o, onResult: s, buttonstyle: c, type: d, locale: f, style: p, ...m }) {
-	let h = l(null);
-	return v({
-		containerRef: h,
+function w({ ref: e, renderToken: t, amount: r, merchantName: i, appearance: a, onInitiatePaymentIntentRequest: o, onResult: s, buttonstyle: c, type: d, locale: f, fullWidth: p = !1, buttonStyle: m, iframeStyle: h, style: g, ..._ }) {
+	let y = l(null), x = v({
+		style: m ?? g,
+		fullWidth: p
+	});
+	return b({
+		containerRef: y,
 		iframeRef: e,
 		mount: n,
 		options: {
@@ -160,10 +186,13 @@ function S({ ref: e, renderToken: t, amount: r, merchantName: i, appearance: a,
 			buttonstyle: c,
 			type: d,
 			locale: f,
-			style: p
+			style: x.style
 		},
 		remountDeps: [t],
-		iframePassthrough: { ...m },
+		iframePassthrough: {
+			style: h,
+			..._
+		},
 		updateDeps: [
 			r,
 			i,
@@ -173,9 +202,9 @@ function S({ ref: e, renderToken: t, amount: r, merchantName: i, appearance: a,
 			c,
 			d,
 			f,
-			p
+			x.style
 		]
-	}), /* @__PURE__ */ u("div", { ref: h });
+	}), /* @__PURE__ */ u("div", { ref: y });
 }
 //#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 { w as AmosApplePayButton, S as AmosBankAccountPaymentMethodForm, x as AmosCreditCardPaymentMethodForm, C as AmosGooglePayButton, p as confirmPaymentIntent, m as confirmSetupIntent, h as resetForm, f as validateForm };

package/package.json

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

package/src/index.tsx

@@ -15,6 +15,7 @@ import {
   mountAmosBankAccountPaymentMethodForm,
   mountAmosCreditCardPaymentMethodForm,
   mountAmosGooglePayButton,
+  type WalletButtonStyle,
 } from "@amos.com/amos-js";
 import type { components } from "@amos.com/node";
 import {
@@ -108,6 +109,59 @@ type IframePassthroughProps = Omit<
   "src" | "title" | "name" | "role" | "allow"
 >;
 
+type WalletStyleProps = {
+  /**
+   * Stretch the wallet button to fill the iframe width.
+   *
+   * @default false
+   */
+  fullWidth?: boolean;
+  /** Styles applied to the wallet button inside the Amos iframe. */
+  buttonStyle?: WalletButtonStyle;
+  /** Styles applied to the host-page `<iframe>` element. */
+  iframeStyle?: ComponentProps<"iframe">["style"];
+  /**
+   * Styles applied to the wallet button inside the Amos iframe.
+   *
+   * @deprecated Use `buttonStyle` to distinguish it from `iframeStyle`.
+   */
+  style?: WalletButtonStyle;
+};
+
+function resolveGooglePayButtonLayout({
+  buttonSizeMode,
+  style,
+  fullWidth,
+}: {
+  buttonSizeMode?: GooglePayButtonElementProps["buttonSizeMode"];
+  style?: WalletButtonStyle;
+  fullWidth: boolean;
+}): Pick<GooglePayButtonElementProps, "buttonSizeMode" | "style"> {
+  return {
+    buttonSizeMode: buttonSizeMode ?? (fullWidth ? "fill" : undefined),
+    style: fullWidth ? { width: "100%", ...style } : style,
+  };
+}
+
+function resolveApplePayButtonLayout({
+  style,
+  fullWidth,
+}: {
+  style?: WalletButtonStyle;
+  fullWidth: boolean;
+}): Pick<ApplePayButtonElementProps, "style"> {
+  if (!fullWidth) {
+    return { style };
+  }
+  return {
+    style: {
+      "--apple-pay-button-width": "100%",
+      width: "100%",
+      ...style,
+    },
+  };
+}
+
 function applyIframePassthrough(
   iframe: HTMLIFrameElement,
   { style, className, id, ...rest }: IframePassthroughProps,
@@ -295,7 +349,8 @@ export function AmosBankAccountPaymentMethodForm({
 }
 
 type AmosGooglePayButtonProps = Omit<IframePassthroughProps, "style"> &
-  GooglePayButtonElementProps & {
+  Omit<GooglePayButtonElementProps, "style"> &
+  WalletStyleProps & {
     renderToken: string;
     amount: string;
     merchantName: string;
@@ -324,10 +379,19 @@ export function AmosGooglePayButton({
   buttonSizeMode,
   buttonLocale,
   buttonBorderType,
+  fullWidth = false,
+  buttonStyle,
+  iframeStyle,
   style,
   ...rest
 }: AmosGooglePayButtonProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const resolvedStyle = buttonStyle ?? style;
+  const layout = resolveGooglePayButtonLayout({
+    buttonSizeMode,
+    style: resolvedStyle,
+    fullWidth,
+  });
 
   useAmosEmbed({
     containerRef,
@@ -343,13 +407,13 @@ export function AmosGooglePayButton({
       buttonType,
       buttonColor,
       buttonRadius,
-      buttonSizeMode,
+      buttonSizeMode: layout.buttonSizeMode,
       buttonLocale,
       buttonBorderType,
-      style,
+      style: layout.style,
     },
     remountDeps: [renderToken],
-    iframePassthrough: { ...rest },
+    iframePassthrough: { style: iframeStyle, ...rest },
     updateDeps: [
       amount,
       merchantName,
@@ -359,10 +423,10 @@ export function AmosGooglePayButton({
       buttonType,
       buttonColor,
       buttonRadius,
-      buttonSizeMode,
+      layout.buttonSizeMode,
       buttonLocale,
       buttonBorderType,
-      style,
+      layout.style,
     ],
   });
 
@@ -370,7 +434,8 @@ export function AmosGooglePayButton({
 }
 
 type AmosApplePayButtonProps = Omit<IframePassthroughProps, "style" | "type"> &
-  ApplePayButtonElementProps & {
+  Omit<ApplePayButtonElementProps, "style"> &
+  WalletStyleProps & {
     renderToken: string;
     amount: string;
     merchantName: string;
@@ -396,10 +461,18 @@ export function AmosApplePayButton({
   buttonstyle,
   type,
   locale,
+  fullWidth = false,
+  buttonStyle,
+  iframeStyle,
   style,
   ...rest
 }: AmosApplePayButtonProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const resolvedStyle = buttonStyle ?? style;
+  const layout = resolveApplePayButtonLayout({
+    style: resolvedStyle,
+    fullWidth,
+  });
 
   useAmosEmbed({
     containerRef,
@@ -415,10 +488,10 @@ export function AmosApplePayButton({
       buttonstyle,
       type,
       locale,
-      style,
+      style: layout.style,
     },
     remountDeps: [renderToken],
-    iframePassthrough: { ...rest },
+    iframePassthrough: { style: iframeStyle, ...rest },
     updateDeps: [
       amount,
       merchantName,
@@ -428,7 +501,7 @@ export function AmosApplePayButton({
       buttonstyle,
       type,
       locale,
-      style,
+      layout.style,
     ],
   });