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

package/README.md

@@ -10,7 +10,7 @@ It is a thin wrapper around [`@amos.com/amos-js`](../amos-js) that adapts the fr
 npm install @amos.com/react-amos-js @amos.com/node
 ```
 
-`@amos.com/node` is a **peer dependency** (requires `>=0.1.37`). Install it in your app for OpenAPI schema types (for example `components["schemas"]["CreatePaymentIntentInput"]`) used in the examples below, and for your server-side Amos API client. React (`^17`, `^18`, or `^19`) is also a peer dependency.
+`@amos.com/node` is a **peer dependency** (requires `>=0.1.39`). Install it in your app for OpenAPI schema types (for example `components["schemas"]["CreatePaymentIntentInput"]`) used in the examples below, and for your server-side Amos API client. React (`^17`, `^18`, or `^19`) is also a peer dependency.
 
 ## What it gives you
 
@@ -28,7 +28,7 @@ npm install @amos.com/react-amos-js @amos.com/node
 3. Amos account ID (provided once your application has been approved)
 ```
 
-The render token configures the iframe's allowed origin(s), allowed payment methods, and the range of valid payment amounts. If the render token does not allow an origin, the iframe will not render. Similarly, components corresponding to different payment method types will not render if not allowed by the render token.
+The render token configures the iframe's allowed origin(s), allowed payment methods, accepted billing countries or US states, and the range of valid payment amounts. These settings come from the render template and are embedded in the token JWT (`RenderTokenJwt`); billing geography is controlled by `billing_address_options` (`allowed_countries` for international templates, `allowed_states` for US-only). If the render token does not allow an origin, the iframe will not render. Similarly, components corresponding to different payment method types will not render if not allowed by the render token, and billing addresses outside the configured countries or states will be rejected.
 
 > **Note**: The render token also determines the environment (`production` or `sandbox`). Render tokens created on `dashboard.amos.com` have a `production` environment. Render tokens created on `dashboard-sandbox.amos.com` have a `sandbox` environment. Similarly, API keys can only access the environment that they were created in.
 
@@ -62,7 +62,7 @@ Setup intents are used to save payment methods for future use (e.g. recurring pa
 
 - On the server, call `POST /setup_intents` instead of `POST /payment_intents`.
 - On the client, call `confirmSetupIntent({ iframeRef, token })` instead of `confirmPaymentIntent({ iframeRef, token })`.
-- The same `onResult` callback is used for setup intents (`intent: "setup"`).
+- The same `onResult` callback is used; succeeded setup intents arrive as `{ status: "succeeded", intent: "setup", setupIntent }`.
 
 The same `AmosCreditCardPaymentMethodForm` / `AmosBankAccountPaymentMethodForm` components support both payment intents and setup intents — they are differentiated by which confirmation function you call.
 
@@ -82,7 +82,7 @@ In short, your app orchestrates the payment flow, while sensitive payment data s
 
 ## Appearance
 
-Every component accepts an optional `appearance` prop that controls the look of the iframe UI. It contains a `themeVariables` object whose keys are CSS custom-property names and whose values are strings, and an optional `labels` setting for field label placement. You can update this prop after page load to update the iframe appearance.
+Card and bank components accept an optional `appearance` prop that controls the look of the iframe UI. It contains a `themeVariables` object whose keys are CSS custom-property names and whose values are strings, and an optional `labels` setting for field label placement. You can update this prop after page load to update the iframe appearance. Wallet buttons do not take `appearance`.
 
 ```tsx
 <AmosCreditCardPaymentMethodForm
@@ -107,55 +107,57 @@ Every component accepts an optional `appearance` prop that controls the look of
 
 Set `labels` to control how field labels are rendered in card and bank account forms:
 
-| Value | Behavior |
-| ----- | -------- |
-| `above` (default) | Label text above each input |
-| `floating` | Label inside the control; moves up when focused or filled |
-| `placeholder` | No visible label; placeholder and `aria-label` only |
+| Value             | Behavior                                                  |
+| ----------------- | --------------------------------------------------------- |
+| `above` (default) | Label text above each input                               |
+| `floating`        | Label inside the control; moves up when focused or filled |
+| `placeholder`     | No visible label; placeholder and `aria-label` only       |
 
 Radio groups (e.g. account type) always use an above-style group label regardless of this setting.
 
 ### Available theme variables
 
-| Variable                 | Purpose                                        | Default                     |
-| ------------------------ | ---------------------------------------------- | --------------------------- |
-| `--background`           | Page body and base surface color               | `oklch(1 0 0)`              |
-| `--foreground`           | Default text color                             | `oklch(0.145 0 0)`          |
-| `--primary`              | Button fill and input text-selection highlight | `oklch(0.205 0 0)`          |
-| `--primary-foreground`   | Text on primary-colored surfaces               | `oklch(0.985 0 0)`          |
-| `--secondary`            | Secondary button fill                          | `oklch(0.97 0 0)`           |
-| `--secondary-foreground` | Text on secondary-colored surfaces             | `oklch(0.205 0 0)`          |
-| `--muted`                      | Muted surface color                                              | `oklch(0.97 0 0)`           |
-| `--muted-foreground`           | Placeholder text, helper labels, muted icons                     | `oklch(0.556 0 0)`          |
-| `--accent`                     | Hover/focus highlight for interactive items                      | `oklch(0.97 0 0)`           |
-| `--accent-foreground`          | Text on accent-highlighted items                                 | `oklch(0.205 0 0)`          |
-| `--destructive`                | Error/invalid state borders, icons, and field error text         | `oklch(0.577 0.245 27.325)` |
-| `--destructive-foreground`     | Text on destructive-colored surfaces                             | `oklch(0.45 0.24 27.325)`   |
-| `--border`                     | General border color                                             | `oklch(0.922 0 0)`          |
-| `--popover`                    | Dropdown / popover panel background                              | `oklch(1 0 0)`              |
-| `--popover-foreground`         | Dropdown / popover panel text color                              | `oklch(0.145 0 0)`          |
-| `--input`                      | Input field border color                                         | `oklch(0.922 0 0)`          |
-| `--input-background`           | Input field background fill                                      | `var(--background)`         |
-| `--input-height`               | Height of text inputs and form controls                          | `2.25rem`                   |
-| `--input-font-size`            | Font size of text inputs and dropdown fields                     | `0.875rem`                  |
-| `--input-font-weight`          | Font weight of typed input values                                | `400`                       |
-| `--input-padding`              | Horizontal padding inside inputs                                 | `0.75rem`                   |
-| `--input-border-width`         | Input field border width                                         | `1px`                       |
-| `--input-shadow`               | Input field box shadow                                           | `0 1px 2px 0 rgb(0 0 0 / 0.05)` |
-| `--floating-input-height`      | Height of inputs when labels are floating                        | `3.25rem`                   |
-| `--floating-label-font-size`   | Font size of floating labels when focused or filled              | `0.75rem`                   |
-| `--floating-label-font-weight` | Font weight of floating labels                                   | `500`                       |
-| `--floating-label-color`       | Color of floating labels                                         | `var(--muted-foreground)`   |
-| `--floating-label-offset`      | Top offset of the shrunk floating label                          | `0.625rem`                  |
-| `--label-font-size`            | Font size of above-style field labels                            | `0.875rem`                  |
-| `--label-font-weight`          | Font weight of above-style field labels                          | `500`                       |
-| `--field-gap`                  | Vertical gap between stacked form fields                         | `1rem`                      |
-| `--control-gap`                | Horizontal gap between side-by-side controls                     | `0.5rem`                    |
-| `--error-font-size`            | Font size of field-level error messages                          | `0.875rem`                  |
-| `--radio-size`                 | Size of radio buttons on the bank account form                   | `1rem`                      |
-| `--ring`                       | Focus ring and outline color                                     | `oklch(0.708 0 0)`          |
-| `--ring-width`                 | Focus ring width                                                 | `3px`                       |
-| `--radius`                     | Base border-radius (derived into sm/md/lg/xl)                    | `0.625rem`                  |
+| Variable                           | Purpose                                                  | Default                         |
+| ---------------------------------- | -------------------------------------------------------- | ------------------------------- |
+| `--background`                     | Page body and base surface color                         | `oklch(1 0 0)`                  |
+| `--foreground`                     | Default text color                                       | `oklch(0.145 0 0)`              |
+| `--primary`                        | Button fill and input text-selection highlight           | `oklch(0.205 0 0)`              |
+| `--primary-foreground`             | Text on primary-colored surfaces                         | `oklch(0.985 0 0)`              |
+| `--secondary`                      | Secondary button fill                                    | `oklch(0.97 0 0)`               |
+| `--secondary-foreground`           | Text on secondary-colored surfaces                       | `oklch(0.205 0 0)`              |
+| `--muted`                          | Muted surface color                                      | `oklch(0.97 0 0)`               |
+| `--muted-foreground`               | Placeholder text, helper labels, muted icons             | `oklch(0.556 0 0)`              |
+| `--accent`                         | Hover/focus highlight for interactive items              | `oklch(0.97 0 0)`               |
+| `--accent-foreground`              | Text on accent-highlighted items                         | `oklch(0.205 0 0)`              |
+| `--destructive`                    | Error/invalid state borders, icons, and field error text | `oklch(0.577 0.245 27.325)`     |
+| `--destructive-foreground`         | Text on destructive-colored surfaces                     | `oklch(0.45 0.24 27.325)`       |
+| `--border`                         | General border color                                     | `oklch(0.922 0 0)`              |
+| `--popover`                        | Dropdown / popover panel background                      | `oklch(1 0 0)`                  |
+| `--popover-foreground`             | Dropdown / popover panel text color                      | `oklch(0.145 0 0)`              |
+| `--input`                          | Input field border color                                 | `oklch(0.922 0 0)`              |
+| `--input-background`               | Input field background fill                              | `var(--background)`             |
+| `--input-height`                   | Height of text inputs and form controls                  | `2.25rem`                       |
+| `--input-font-size`                | Font size of text inputs and dropdown fields             | `0.875rem`                      |
+| `--input-font-weight`              | Font weight of typed input values                        | `400`                           |
+| `--input-padding`                  | Horizontal padding inside inputs                         | `0.75rem`                       |
+| `--input-border-width`             | Input field border width                                 | `1px`                           |
+| `--input-shadow`                   | Input field box shadow                                   | `0 1px 2px 0 rgb(0 0 0 / 0.05)` |
+| `--floating-input-height`          | Height of inputs when labels are floating                | `3.25rem`                       |
+| `--floating-label-font-size`       | Font size of floating labels when focused or filled      | `0.75rem`                       |
+| `--floating-label-empty-font-size` | Font size of floating labels when empty (unfocused)      | `var(--input-font-size)`        |
+| `--floating-label-font-weight`     | Font weight of floating labels                           | `500`                           |
+| `--floating-label-color`           | Color of floating labels when empty (unfocused)          | `var(--muted-foreground)`       |
+| `--floating-label-floated-color`   | Color of floating labels when focused or filled          | `var(--floating-label-color)`   |
+| `--floating-label-offset`          | Top offset of the shrunk floating label                  | `0.625rem`                      |
+| `--label-font-size`                | Font size of above-style field labels                    | `0.875rem`                      |
+| `--label-font-weight`              | Font weight of above-style field labels                  | `500`                           |
+| `--field-gap`                      | Vertical gap between stacked form fields                 | `1rem`                          |
+| `--control-gap`                    | Horizontal gap between side-by-side controls             | `0.5rem`                        |
+| `--error-font-size`                | Font size of field-level error messages                  | `0.875rem`                      |
+| `--radio-size`                     | Size of radio buttons on the bank account form           | `1rem`                          |
+| `--ring`                           | Focus ring and outline color                             | `oklch(0.708 0 0)`              |
+| `--ring-width`                     | Focus ring width                                         | `3px`                           |
+| `--radius`                         | Base border-radius (derived into sm/md/lg/xl)            | `0.625rem`                      |
 
 ## Examples
 
@@ -190,10 +192,11 @@ function CheckoutForm() {
         return;
       }
 
-      const paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"] = {
-        amount: 5000, // $50.00 in cents
-        capture_method: "automatic",
-      };
+      const paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"] =
+        {
+          amount: 5000, // $50.00 in cents
+          capture_method: "automatic",
+        };
 
       const response = await fetch("/api/payment-intents", {
         method: "POST",
@@ -459,51 +462,36 @@ 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"`)
-- `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
+- `height` (`string`, defaults to `"48px"`) — painted button height. CSS length (e.g. `"48px"`).
+- `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" } }}`.
+- `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.
 
 ```tsx
 <AmosGooglePayButton
-  fullWidth
-  buttonStyle={{ height: "48px" }}
-  iframeStyle={{ borderRadius: "6px" }}
+  buttonProps={{ buttonType: "donate", buttonBorderType: "no_border" }}
+  iframeProps={{ style: { borderRadius: "8px" } }}
   // ...required props
 />
 ```
 
-**Also accepts:** standard iframe props, minus `src`, `title`, `name`, `role`, `allow`, and `style`.
-
 ### `AmosApplePayButton`
 
 Renders the secure Apple Pay iframe button (express checkout flow). Same required props and callbacks as `AmosGooglePayButton`.
 
-**Optional visual props** use Apple's `<apple-pay-button>` attribute names:
+**Optional visual props:**
 
-- `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"`)
-- `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`
+- `height` (`string`, defaults to `"48px"`) — painted button height. CSS length (e.g. `"48px"`). Apple ignores CSS `height`; Amos maps this for you.
+- `buttonProps` — native `<apple-pay-button>` attributes. Omitted fields keep Apple's `black` / `plain` / `en-US`. The button fills the iframe; size the mount slot, not the button. `style.width` also updates `--apple-pay-button-width` unless you set that custom property yourself.
+- `iframeProps` — host-page `<iframe>` chrome (same as Google Pay).
 
 ```tsx
 <AmosApplePayButton
-  fullWidth
-  buttonstyle="white-outline"
-  type="buy"
-  locale="en-GB"
-  buttonStyle={{ height: "48px" }}
-  iframeStyle={{ borderRadius: "6px" }}
+  buttonProps={{
+    buttonstyle: "white-outline",
+    type: "buy",
+    locale: "en-GB",
+  }}
+  iframeProps={{ style: { borderRadius: "8px" } }}
   // ...required props
 />
 ```

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="googlepay" />
-import { Appearance, ApplePayButtonElementProps, BillingAddressRequirement, ConfirmationResult, CreditCardAdditionalFields, GooglePayButtonElementProps, WalletButtonStyle } from '@amos.com/amos-js';
+import { Appearance, ApplePayButtonElementProps, BillingAddressRequirement, ConfirmationResult, CreditCardAdditionalFields, GooglePayButtonElementProps } from '@amos.com/amos-js';
 import { components } from '@amos.com/node';
-import { ComponentProps, RefObject } from 'react';
+import { ComponentProps, Ref, RefObject } from 'react';
 export * from '@amos.com/amos-js';
 type IframeRef = RefObject<HTMLIFrameElement | null> | undefined;
 /**
@@ -40,25 +40,8 @@ export declare function confirmSetupIntent({ iframeRef, token, }: {
 export declare function resetForm({ iframeRef }: {
     iframeRef: IframeRef;
 }): void;
+type ForwardedIframeRef = Ref<HTMLIFrameElement> | undefined;
 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;
@@ -88,27 +71,55 @@ 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"> & Omit<GooglePayButtonElementProps, "style"> & WalletStyleProps & {
+type AmosGooglePayButtonProps = {
+    ref?: ForwardedIframeRef;
     renderToken: string;
     amount: string;
     merchantName: string;
-    appearance?: Appearance;
+    /**
+     * Painted button height. CSS length (e.g. `"48px"`).
+     * @default "48px"
+     */
+    height?: string;
+    /**
+     * Native Google Pay button attributes and inner style. Omitted
+     * fields keep Amos paint defaults (`buttonType: "plain"`,
+     * `buttonSizeMode: "fill"`). The button fills the iframe — size the
+     * mount slot, not the button.
+     */
+    buttonProps?: GooglePayButtonElementProps;
+    /** Props applied to the host-page `<iframe>` element. */
+    iframeProps?: IframePassthroughProps;
     onInitiatePaymentIntentRequest: ({ paymentIntentCreateAttributes, customerCreateAttributes, }: {
         paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
         customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
     }) => 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, fullWidth, buttonStyle, iframeStyle, style, ...rest }: AmosGooglePayButtonProps): import("react").JSX.Element;
-type AmosApplePayButtonProps = Omit<IframePassthroughProps, "style" | "type"> & Omit<ApplePayButtonElementProps, "style"> & WalletStyleProps & {
+export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, height, buttonProps, iframeProps, onInitiatePaymentIntentRequest, onResult, }: AmosGooglePayButtonProps): import("react").JSX.Element;
+type AmosApplePayButtonProps = {
+    ref?: ForwardedIframeRef;
     renderToken: string;
     amount: string;
     merchantName: string;
-    appearance?: Appearance;
+    /**
+     * Painted button height. CSS length (e.g. `"48px"`). Apple ignores
+     * CSS `height`; Amos maps this for you.
+     * @default "48px"
+     */
+    height?: string;
+    /**
+     * Native `<apple-pay-button>` attributes and inner style. Omitted
+     * fields keep Apple's defaults (`black` / `plain` / `en-US`). The
+     * button fills the iframe — size the mount slot, not the button.
+     */
+    buttonProps?: ApplePayButtonElementProps;
+    /** Props applied to the host-page `<iframe>` element. */
+    iframeProps?: IframePassthroughProps;
     onInitiatePaymentIntentRequest: ({ paymentIntentCreateAttributes, customerCreateAttributes, }: {
         paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
         customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
     }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
     onResult: (result: ConfirmationResult) => void;
 };
-export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, buttonstyle, type, locale, fullWidth, buttonStyle, iframeStyle, style, ...rest }: AmosApplePayButtonProps): import("react").JSX.Element;
+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({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]}})});
+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]}})});

package/dist/index.mjs

@@ -27,45 +27,29 @@ function h({ iframeRef: e }) {
 function g(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-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);
+function _(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 b({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i, iframePassthrough: a, updateDeps: o }) {
+function v({ 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), y(o.iframe, a), () => {
+		return s.current = o, g(t, o.iframe), _(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 && y(e, a);
+		e && _(e, a);
 	});
 }
-function x({ ref: e, renderToken: t, appearance: n, onResult: r, onValidityChange: a, additionalFields: o = { cardholderName: !1 }, billingAddressRequirement: s = "country", style: c, ...d }) {
+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 b({
+	return v({
 		containerRef: f,
 		iframeRef: e,
 		mount: i,
@@ -95,9 +79,9 @@ function x({ ref: e, renderToken: t, appearance: n, onResult: r, onValidityChang
 		]
 	}), /* @__PURE__ */ u("div", { ref: f });
 }
-function S({ ref: e, renderToken: t, appearance: n, onResult: i, onValidityChange: a, billingAddressRequirement: o = "country", style: s, ...c }) {
+function b({ ref: e, renderToken: t, appearance: n, onResult: i, onValidityChange: a, billingAddressRequirement: o = "country", style: s, ...c }) {
 	let d = l(null);
-	return b({
+	return v({
 		containerRef: d,
 		iframeRef: e,
 		mount: r,
@@ -121,90 +105,59 @@ function S({ ref: e, renderToken: t, appearance: n, onResult: i, onValidityChang
 		]
 	}), /* @__PURE__ */ u("div", { ref: d });
 }
-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,
+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,
 		iframeRef: e,
 		mount: a,
 		options: {
 			renderToken: t,
 			amount: n,
 			merchantName: r,
-			appearance: i,
-			onInitiatePaymentIntentRequest: o,
-			onResult: s,
-			buttonType: c,
-			buttonColor: d,
-			buttonRadius: f,
-			buttonSizeMode: w.buttonSizeMode,
-			buttonLocale: m,
-			buttonBorderType: h,
-			style: w.style
+			height: i,
+			buttonProps: o,
+			onInitiatePaymentIntentRequest: c,
+			onResult: d
 		},
 		remountDeps: [t],
-		iframePassthrough: {
-			style: y,
-			...S
-		},
+		iframePassthrough: s ?? {},
 		updateDeps: [
 			n,
 			r,
 			i,
 			o,
-			s,
 			c,
-			d,
-			f,
-			w.buttonSizeMode,
-			m,
-			h,
-			w.style
+			d
 		]
-	}), /* @__PURE__ */ u("div", { ref: C });
+	}), /* @__PURE__ */ u("div", { ref: f });
 }
-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,
+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,
 		iframeRef: e,
 		mount: n,
 		options: {
 			renderToken: t,
 			amount: r,
 			merchantName: i,
-			appearance: a,
-			onInitiatePaymentIntentRequest: o,
-			onResult: s,
-			buttonstyle: c,
-			type: d,
-			locale: f,
-			style: x.style
+			height: a,
+			buttonProps: o,
+			onInitiatePaymentIntentRequest: c,
+			onResult: d
 		},
 		remountDeps: [t],
-		iframePassthrough: {
-			style: h,
-			..._
-		},
+		iframePassthrough: s ?? {},
 		updateDeps: [
 			r,
 			i,
 			a,
 			o,
-			s,
 			c,
-			d,
-			f,
-			x.style
+			d
 		]
-	}), /* @__PURE__ */ u("div", { ref: y });
+	}), /* @__PURE__ */ u("div", { ref: f });
 }
 //#endregion
-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 };
+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 };

package/package.json

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

package/src/index.tsx

@@ -15,7 +15,6 @@ import {
   mountAmosBankAccountPaymentMethodForm,
   mountAmosCreditCardPaymentMethodForm,
   mountAmosGooglePayButton,
-  type WalletButtonStyle,
 } from "@amos.com/amos-js";
 import type { components } from "@amos.com/node";
 import {
@@ -109,59 +108,6 @@ 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,
@@ -172,9 +118,7 @@ function applyIframePassthrough(
   if (id != null) {
     iframe.id = id;
   }
-  if (style != null) {
-    Object.assign(iframe.style, style);
-  }
+  Object.assign(iframe.style, style);
   for (const [key, value] of Object.entries(rest)) {
     if (value == null) {
       continue;
@@ -348,50 +292,47 @@ export function AmosBankAccountPaymentMethodForm({
   return <div ref={containerRef} />;
 }
 
-type AmosGooglePayButtonProps = Omit<IframePassthroughProps, "style"> &
-  Omit<GooglePayButtonElementProps, "style"> &
-  WalletStyleProps & {
-    renderToken: string;
-    amount: string;
-    merchantName: string;
-    appearance?: Appearance;
-    onInitiatePaymentIntentRequest: ({
-      paymentIntentCreateAttributes,
-      customerCreateAttributes,
-    }: {
-      paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-      customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
-    }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
-    onResult: (result: ConfirmationResult) => void;
-  };
+type AmosGooglePayButtonProps = {
+  ref?: ForwardedIframeRef;
+  renderToken: string;
+  amount: string;
+  merchantName: string;
+  /**
+   * Painted button height. CSS length (e.g. `"48px"`).
+   * @default "48px"
+   */
+  height?: string;
+  /**
+   * Native Google Pay button attributes and inner style. Omitted
+   * fields keep Amos paint defaults (`buttonType: "plain"`,
+   * `buttonSizeMode: "fill"`). The button fills the iframe — size the
+   * mount slot, not the button.
+   */
+  buttonProps?: GooglePayButtonElementProps;
+  /** Props applied to the host-page `<iframe>` element. */
+  iframeProps?: IframePassthroughProps;
+  onInitiatePaymentIntentRequest: ({
+    paymentIntentCreateAttributes,
+    customerCreateAttributes,
+  }: {
+    paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+  }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
+  onResult: (result: ConfirmationResult) => void;
+};
 
 export function AmosGooglePayButton({
   ref,
   renderToken,
   amount,
   merchantName,
-  appearance,
+  height = "48px",
+  buttonProps,
+  iframeProps,
   onInitiatePaymentIntentRequest,
   onResult,
-  buttonType,
-  buttonColor,
-  buttonRadius,
-  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,
@@ -401,78 +342,67 @@ export function AmosGooglePayButton({
       renderToken,
       amount,
       merchantName,
-      appearance,
+      height,
+      buttonProps,
       onInitiatePaymentIntentRequest,
       onResult,
-      buttonType,
-      buttonColor,
-      buttonRadius,
-      buttonSizeMode: layout.buttonSizeMode,
-      buttonLocale,
-      buttonBorderType,
-      style: layout.style,
     },
     remountDeps: [renderToken],
-    iframePassthrough: { style: iframeStyle, ...rest },
+    iframePassthrough: iframeProps ?? {},
     updateDeps: [
       amount,
       merchantName,
-      appearance,
+      height,
+      buttonProps,
       onInitiatePaymentIntentRequest,
       onResult,
-      buttonType,
-      buttonColor,
-      buttonRadius,
-      layout.buttonSizeMode,
-      buttonLocale,
-      buttonBorderType,
-      layout.style,
     ],
   });
 
   return <div ref={containerRef} />;
 }
 
-type AmosApplePayButtonProps = Omit<IframePassthroughProps, "style" | "type"> &
-  Omit<ApplePayButtonElementProps, "style"> &
-  WalletStyleProps & {
-    renderToken: string;
-    amount: string;
-    merchantName: string;
-    appearance?: Appearance;
-    onInitiatePaymentIntentRequest: ({
-      paymentIntentCreateAttributes,
-      customerCreateAttributes,
-    }: {
-      paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-      customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
-    }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
-    onResult: (result: ConfirmationResult) => void;
-  };
+type AmosApplePayButtonProps = {
+  ref?: ForwardedIframeRef;
+  renderToken: string;
+  amount: string;
+  merchantName: string;
+  /**
+   * Painted button height. CSS length (e.g. `"48px"`). Apple ignores
+   * CSS `height`; Amos maps this for you.
+   * @default "48px"
+   */
+  height?: string;
+  /**
+   * Native `<apple-pay-button>` attributes and inner style. Omitted
+   * fields keep Apple's defaults (`black` / `plain` / `en-US`). The
+   * button fills the iframe — size the mount slot, not the button.
+   */
+  buttonProps?: ApplePayButtonElementProps;
+  /** Props applied to the host-page `<iframe>` element. */
+  iframeProps?: IframePassthroughProps;
+  onInitiatePaymentIntentRequest: ({
+    paymentIntentCreateAttributes,
+    customerCreateAttributes,
+  }: {
+    paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+  }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
+  onResult: (result: ConfirmationResult) => void;
+};
 
 export function AmosApplePayButton({
   ref,
   renderToken,
   amount,
   merchantName,
-  appearance,
+  height = "48px",
+  buttonProps,
+  iframeProps,
   onInitiatePaymentIntentRequest,
   onResult,
-  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,
@@ -482,26 +412,20 @@ export function AmosApplePayButton({
       renderToken,
       amount,
       merchantName,
-      appearance,
+      height,
+      buttonProps,
       onInitiatePaymentIntentRequest,
       onResult,
-      buttonstyle,
-      type,
-      locale,
-      style: layout.style,
     },
     remountDeps: [renderToken],
-    iframePassthrough: { style: iframeStyle, ...rest },
+    iframePassthrough: iframeProps ?? {},
     updateDeps: [
       amount,
       merchantName,
-      appearance,
+      height,
+      buttonProps,
       onInitiatePaymentIntentRequest,
       onResult,
-      buttonstyle,
-      type,
-      locale,
-      layout.style,
     ],
   });