@amos.com/amos-js 0.9.13 → 0.9.15

package/dist/messaging.d.ts

@@ -29,16 +29,18 @@ export declare function updateAppearance({ iframe, appearance, }: {
 /**
  * Push Apple Pay button visual options into the embedded iframe.
  */
-export declare function updateApplePayButton({ iframe, props, }: {
+export declare function updateApplePayButton({ iframe, props, height, }: {
     iframe: Iframe;
     props: ApplePayButtonElementProps;
+    height?: string;
 }): void;
 /**
  * Push Google Pay button visual options into the embedded iframe.
  */
-export declare function updateGooglePayButton({ iframe, props, }: {
+export declare function updateGooglePayButton({ iframe, props, height, }: {
     iframe: Iframe;
     props: GooglePayButtonElementProps;
+    height?: string;
 }): void;
 /**
  * Push the express-checkout amount into the embedded Google Pay iframe.

package/dist/mount.d.ts

@@ -95,6 +95,13 @@ export type AmosGooglePayButtonOptions = GooglePayButtonListenerOptions & {
      * https://dashboard.amos.com.
      */
     renderToken: string;
+    /** Class names applied to the host-page `<iframe>` element. */
+    iframeClassName?: string;
+    /**
+     * Inline style applied to the host-page `<iframe>` element. Use CSS
+     * lengths with units (`{ borderRadius: "8px" }`).
+     */
+    iframeStyle?: Partial<CSSStyleDeclaration>;
 };
 /**
  * Controller returned by {@link mountAmosGooglePayButton}.
@@ -122,6 +129,13 @@ export type AmosApplePayButtonOptions = ApplePayButtonListenerOptions & {
      * https://dashboard.amos.com.
      */
     renderToken: string;
+    /** Class names applied to the host-page `<iframe>` element. */
+    iframeClassName?: string;
+    /**
+     * Inline style applied to the host-page `<iframe>` element. Use CSS
+     * lengths with units (`{ borderRadius: "8px" }`).
+     */
+    iframeStyle?: Partial<CSSStyleDeclaration>;
 };
 /**
  * Controller returned by {@link mountAmosApplePayButton}.

package/dist/types.d.ts

@@ -56,7 +56,7 @@ export type ConfirmationResult = {
  * Amos iframe UI. Only the variables you provide are sent; omitted
  * variables keep their defaults.
  */
-export type ThemeVariable = "--background" | "--foreground" | "--primary" | "--primary-foreground" | "--secondary" | "--secondary-foreground" | "--muted" | "--muted-foreground" | "--accent" | "--accent-foreground" | "--destructive" | "--destructive-foreground" | "--border" | "--popover" | "--popover-foreground" | "--input" | "--input-background" | "--input-height" | "--input-font-size" | "--input-font-weight" | "--input-padding" | "--input-border-width" | "--input-shadow" | "--floating-input-height" | "--floating-label-font-size" | "--floating-label-font-weight" | "--floating-label-color" | "--floating-label-offset" | "--label-font-size" | "--label-font-weight" | "--field-gap" | "--control-gap" | "--error-font-size" | "--radio-size" | "--ring" | "--ring-width" | "--radius";
+export type ThemeVariable = "--background" | "--foreground" | "--primary" | "--primary-foreground" | "--secondary" | "--secondary-foreground" | "--muted" | "--muted-foreground" | "--accent" | "--accent-foreground" | "--destructive" | "--destructive-foreground" | "--border" | "--popover" | "--popover-foreground" | "--input" | "--input-background" | "--input-height" | "--input-font-size" | "--input-font-weight" | "--input-padding" | "--input-border-width" | "--input-shadow" | "--floating-input-height" | "--floating-label-font-size" | "--floating-label-empty-font-size" | "--floating-label-font-weight" | "--floating-label-color" | "--floating-label-floated-color" | "--floating-label-offset" | "--label-font-size" | "--label-font-weight" | "--field-gap" | "--control-gap" | "--error-font-size" | "--radio-size" | "--ring" | "--ring-width" | "--radius";
 /**
  * Placement of field labels in payment method forms.
  *
@@ -78,53 +78,28 @@ export type Appearance = {
     labels?: AppearanceLabels;
 };
 /**
- * Inline style bag sent through `postMessage` to the wallet-button iframe.
+ * Apple's `<apple-pay-button>` attributes. `@types/applepayjs` only
+ * covers `ApplePaySession`, so this bag is the custom element's HTML
+ * attributes plus inner `style`. Posted as-is on `buttonProps`.
  *
- * Matches the serializable subset of a CSSStyleDeclaration / React
- * `CSSProperties` object (string or number values). Custom properties such
- * as `--apple-pay-button-height` are allowed.
- */
-export type WalletButtonStyle = {
-    [property: string]: string | number | undefined;
-};
-/**
- * `buttonstyle` attribute on Apple's `<apple-pay-button>`.
- *
- * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
- */
-export type ApplePayButtonStyle = "black" | "white" | "white-outline";
-/**
- * `type` attribute on Apple's `<apple-pay-button>`.
- *
- * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
- */
-export type ApplePayButtonType = "plain" | "buy" | "set-up" | "donate" | "check-out" | "book" | "subscribe" | "reload" | "add-money" | "top-up" | "order" | "rent" | "support" | "contribute" | "tip";
-/**
- * Visual props for Apple's `<apple-pay-button>`, using Apple's attribute
- * names. Applied inside the Amos embed iframe.
+ * Omitted fields keep the painted button's defaults. Height belongs on
+ * the mount `height` option.
  *
  * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
  */
 export type ApplePayButtonElementProps = {
-    /**
-     * Stretch the button to the iframe width while preserving its default
-     * compact size when omitted.
-     *
-     * @default false
-     */
-    fullWidth?: boolean;
     /**
      * Apple Pay button color.
      *
      * @default "black"
      */
-    buttonstyle?: ApplePayButtonStyle;
+    buttonstyle?: string;
     /**
      * Apple Pay button label / verb.
      *
      * @default "plain"
      */
-    type?: ApplePayButtonType;
+    type?: string;
     /**
      * BCP 47 locale for the button label (e.g. `"en-US"`).
      *
@@ -132,58 +107,29 @@ export type ApplePayButtonElementProps = {
      */
     locale?: string;
     /**
-     * Inline style for the `<apple-pay-button>`. Height is controlled with
-     * `--apple-pay-button-height` (Apple ignores CSS `height`). Width uses
-     * `--apple-pay-button-width` or CSS `width`.
+     * Inline style for the `<apple-pay-button>`. Omitted keys keep fill
+     * (`width: 100%` and `--apple-pay-button-width`).
      */
-    style?: WalletButtonStyle;
+    style?: Record<string, string | number | undefined>;
 };
 /**
- * Visual props for Google's Pay button, using `@google-pay/button-react`
- * / Google Pay API names. Applied inside the Amos embed iframe.
+ * Google Pay button visuals: {@link google.payments.api.ButtonOptions}
+ * without the fields that cannot go through `postMessage`, plus inner
+ * `style`. Posted as-is on `buttonProps`.
+ *
+ * Omitted fields keep the painted button's defaults (`buttonType:
+ * "plain"`, `buttonSizeMode: "fill"`). Height belongs on the mount
+ * `height` option.
  *
  * @see https://developers.google.com/pay/api/web/guides/resources/customize
  */
-export type GooglePayButtonElementProps = {
-    /**
-     * Stretch the button to the iframe width while preserving its default
-     * compact size when omitted.
-     *
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Button label / verb.
-     *
-     * @default "short"
-     */
-    buttonType?: google.payments.api.ButtonType;
-    /** Button color. */
-    buttonColor?: google.payments.api.ButtonColor;
-    /** Corner radius in pixels (0–20). */
-    buttonRadius?: number;
+export type GooglePayButtonElementProps = Omit<google.payments.api.ButtonOptions, "onClick" | "buttonRootNode" | "allowedPaymentMethods"> & {
     /**
-     * `"fill"` stretches the button to the container width; `"static"`
-     * uses Google's default size.
+     * Inline style for the Google Pay button wrapper. Omitted keys keep
+     * fill (`width: 100%`).
      */
-    buttonSizeMode?: google.payments.api.ButtonSizeMode;
-    /** BCP 47 locale for the button label (e.g. `"en"`). */
-    buttonLocale?: string;
-    /** Whether the button draws a border. */
-    buttonBorderType?: google.payments.api.ButtonBorderType;
-    /**
-     * Inline style for the Google Pay button wrapper. Use `height` /
-     * `width` here (unlike Apple Pay, Google honors CSS `height`).
-     */
-    style?: WalletButtonStyle;
+    style?: Record<string, string | number | undefined>;
 };
-/**
- * Keep only JSON-cloneable string/number declarations from a style object
- * before sending it through `postMessage`.
- */
-export declare function serializeWalletButtonStyle(style: WalletButtonStyle | undefined): Record<string, string | number> | undefined;
-export declare function pickApplePayButtonElementProps(options: ApplePayButtonElementProps): ApplePayButtonElementProps;
-export declare function pickGooglePayButtonElementProps(options: GooglePayButtonElementProps): GooglePayButtonElementProps;
 /**
  * Typed `postMessage` payloads exchanged between the host page and the
  * embedded Amos iframe.
@@ -211,16 +157,14 @@ export type Message = {
     type: "UPDATE_APPEARANCE";
     appearance: Appearance;
 } | {
-    /**
-     * Parent → embed: visual options for the Apple Pay button. Nested
-     * under `props` so Apple's `type` attribute does not collide with
-     * this message discriminant.
-     */
+    /** Parent → embed: visual options for the Apple Pay button. */
     type: "UPDATE_APPLE_PAY_BUTTON";
+    height?: string;
     props: ApplePayButtonElementProps;
 } | {
     /** Parent → embed: visual options for the Google Pay button. */
     type: "UPDATE_GOOGLE_PAY_BUTTON";
+    height?: string;
     props: GooglePayButtonElementProps;
 } | {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/amos-js",
-  "version": "0.9.13",
+  "version": "0.9.15",
   "main": "dist/index.js",
   "repository": {
     "type": "git",

package/src/apple-pay.ts

@@ -14,7 +14,6 @@ import {
   updateMerchantName as sendUpdateMerchantName,
 } from "./messaging";
 import {
-  type Appearance,
   type ApplePayButtonElementProps,
   type ConfirmationResult,
   createMessage,
@@ -32,22 +31,28 @@ export function getApplePayButtonSrc(renderToken: string): string {
  * Default iframe pixel height for the Apple Pay button.
  */
 export function getApplePayButtonInitialHeight(): string {
-  return "40px";
+  return "48px";
 }
 
 /**
  * Options accepted by {@link attachApplePayButtonListeners}.
  */
-export type ApplePayButtonListenerOptions = ApplePayButtonElementProps & {
+export type ApplePayButtonListenerOptions = {
   /** The amount of the payment, in the same format passed in props. */
   amount: string;
   /** A user-visible merchant name. */
   merchantName: string;
   /**
-   * Custom appearance to apply when the iframe first becomes ready and
-   * whenever the appearance changes.
+   * Painted Apple Pay button height. CSS length (e.g. `"48px"`).
+   * @default "48px"
    */
-  appearance?: Appearance;
+  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;
   /**
    * Called whenever the iframe asks the host page to resize it. Update
    * the iframe's `height` style here.
@@ -85,9 +90,8 @@ export type ApplePayButtonController = {
   /**
    * Update one or more listener options without re-attaching the
    * message listener. Pass `amount` or `merchantName` to push the new
-   * value into the iframe; pass `appearance` to update theme variables;
-   * pass `buttonstyle`, `type`, `locale`, or `style` to restyle the
-   * Apple Pay button.
+   * value into the iframe; pass `height` or `buttonProps` to restyle
+   * the Apple Pay button.
    */
   update: (patch: Partial<ApplePayButtonListenerOptions>) => void;
   /**
@@ -118,9 +122,12 @@ function sendApplePayCancel(iframe: HTMLIFrameElement): void {
  */
 export function attachApplePayButtonListeners(
   iframe: HTMLIFrameElement,
-  options: ApplePayButtonListenerOptions,
+  { height = "48px", ...options }: ApplePayButtonListenerOptions,
 ): ApplePayButtonController {
-  let current = { ...options };
+  let current: ApplePayButtonListenerOptions = {
+    ...options,
+    height,
+  };
 
   function pushAmount() {
     sendUpdateAmount({ iframe, amount: current.amount });
@@ -131,7 +138,11 @@ export function attachApplePayButtonListeners(
   }
 
   function pushButtonProps() {
-    sendUpdateApplePayButton({ iframe, props: current });
+    sendUpdateApplePayButton({
+      iframe,
+      height: current.height ?? "48px",
+      props: current.buttonProps ?? {},
+    });
   }
 
   function handleMessage(event: MessageEvent<Message>) {
@@ -143,7 +154,7 @@ export function attachApplePayButtonListeners(
     switch (event.data.type) {
       case "IFRAME_READY":
         sendParentReadyMessage(iframe);
-        sendUpdateAppearance({ iframe, appearance: current.appearance });
+        sendUpdateAppearance({ iframe, appearance: {} });
         pushAmount();
         pushMerchantName();
         pushButtonProps();
@@ -205,19 +216,10 @@ export function attachApplePayButtonListeners(
 
   return {
     update(patch) {
-      const hadAppearance = "appearance" in patch;
       const hadAmount = "amount" in patch;
       const hadMerchantName = "merchantName" in patch;
-      const hadButtonProps =
-        "fullWidth" in patch ||
-        "buttonstyle" in patch ||
-        "type" in patch ||
-        "locale" in patch ||
-        "style" in patch;
+      const hadButtonProps = "height" in patch || "buttonProps" in patch;
       current = { ...current, ...patch };
-      if (hadAppearance) {
-        sendUpdateAppearance({ iframe, appearance: current.appearance });
-      }
       if (hadAmount) {
         pushAmount();
       }

package/src/google-pay.ts

@@ -11,7 +11,6 @@ import {
   updateMerchantName as sendUpdateMerchantName,
 } from "./messaging";
 import type {
-  Appearance,
   ConfirmationResult,
   GooglePayButtonElementProps,
   Message,
@@ -28,22 +27,30 @@ export function getGooglePayButtonSrc(renderToken: string): string {
  * Default iframe pixel height for the Google Pay button.
  */
 export function getGooglePayButtonInitialHeight(): string {
-  return "40px";
+  return "48px";
 }
 
 /**
  * Options accepted by {@link attachGooglePayButtonListeners}.
  */
-export type GooglePayButtonListenerOptions = GooglePayButtonElementProps & {
+export type GooglePayButtonListenerOptions = {
   /** The amount of the payment, in the same format passed in props. */
   amount: string;
   /** A user-visible merchant name. */
   merchantName: string;
   /**
-   * Custom appearance to apply when the iframe first becomes ready and
-   * whenever the appearance changes.
+   * Painted Google Pay button height. CSS length (e.g. `"48px"`).
+   * @default "48px"
    */
-  appearance?: Appearance;
+  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. Compact: `buttonSizeMode: "static"` and
+   * `style.width`.
+   */
+  buttonProps?: GooglePayButtonElementProps;
   /**
    * Called whenever the iframe asks the host page to resize it. Update
    * the iframe's `height` style here.
@@ -81,10 +88,8 @@ export type GooglePayButtonController = {
   /**
    * Update one or more listener options without re-attaching the
    * message listener. Pass `amount` or `merchantName` to push the new
-   * value into the iframe; pass `appearance` to update theme variables;
-   * pass `buttonType`, `buttonColor`, `buttonRadius`, `buttonSizeMode`,
-   * `buttonLocale`, `buttonBorderType`, or `style` to restyle the
-   * Google Pay button.
+   * value into the iframe; pass `height` or `buttonProps` to restyle
+   * the Google Pay button.
    */
   update: (patch: Partial<GooglePayButtonListenerOptions>) => void;
   /**
@@ -103,9 +108,12 @@ export type GooglePayButtonController = {
  */
 export function attachGooglePayButtonListeners(
   iframe: HTMLIFrameElement,
-  options: GooglePayButtonListenerOptions,
+  { height = "48px", ...options }: GooglePayButtonListenerOptions,
 ): GooglePayButtonController {
-  let current = { ...options };
+  let current: GooglePayButtonListenerOptions = {
+    ...options,
+    height,
+  };
 
   function pushAmount() {
     sendUpdateAmount({ iframe, amount: current.amount });
@@ -116,7 +124,11 @@ export function attachGooglePayButtonListeners(
   }
 
   function pushButtonProps() {
-    sendUpdateGooglePayButton({ iframe, props: current });
+    sendUpdateGooglePayButton({
+      iframe,
+      height: current.height ?? "48px",
+      props: current.buttonProps ?? {},
+    });
   }
 
   function handleMessage(event: MessageEvent<Message>) {
@@ -127,7 +139,7 @@ export function attachGooglePayButtonListeners(
     switch (event.data.type) {
       case "IFRAME_READY":
         sendParentReadyMessage(iframe);
-        sendUpdateAppearance({ iframe, appearance: current.appearance });
+        sendUpdateAppearance({ iframe, appearance: {} });
         pushAmount();
         pushMerchantName();
         pushButtonProps();
@@ -174,22 +186,10 @@ export function attachGooglePayButtonListeners(
 
   return {
     update(patch) {
-      const hadAppearance = "appearance" in patch;
       const hadAmount = "amount" in patch;
       const hadMerchantName = "merchantName" in patch;
-      const hadButtonProps =
-        "fullWidth" in patch ||
-        "buttonType" in patch ||
-        "buttonColor" in patch ||
-        "buttonRadius" in patch ||
-        "buttonSizeMode" in patch ||
-        "buttonLocale" in patch ||
-        "buttonBorderType" in patch ||
-        "style" in patch;
+      const hadButtonProps = "height" in patch || "buttonProps" in patch;
       current = { ...current, ...patch };
-      if (hadAppearance) {
-        sendUpdateAppearance({ iframe, appearance: current.appearance });
-      }
       if (hadAmount) {
         pushAmount();
       }

package/src/index.ts

@@ -69,19 +69,11 @@ export type {
   Appearance,
   AppearanceLabels,
   ApplePayButtonElementProps,
-  ApplePayButtonStyle,
-  ApplePayButtonType,
   ConfirmationIncompleteReason,
   ConfirmationResult,
   GooglePayButtonElementProps,
   Message,
   PaymentMethodFormValidityChangeEvent,
   ThemeVariable,
-  WalletButtonStyle,
-} from "./types";
-export {
-  createMessage,
-  pickApplePayButtonElementProps,
-  pickGooglePayButtonElementProps,
-  serializeWalletButtonStyle,
 } from "./types";
+export { createMessage } from "./types";

package/src/messaging.ts

@@ -6,8 +6,6 @@ import {
   createMessage,
   type GooglePayButtonElementProps,
   type Message,
-  pickApplePayButtonElementProps,
-  pickGooglePayButtonElementProps,
 } from "./types";
 
 type Iframe = HTMLIFrameElement | null | undefined;
@@ -69,9 +67,11 @@ export function updateAppearance({
 export function updateApplePayButton({
   iframe,
   props,
+  height,
 }: {
   iframe: Iframe;
   props: ApplePayButtonElementProps;
+  height?: string;
 }): void {
   if (!iframe?.contentWindow) {
     return;
@@ -80,7 +80,8 @@ export function updateApplePayButton({
   iframe.contentWindow.postMessage(
     createMessage({
       type: "UPDATE_APPLE_PAY_BUTTON",
-      props: pickApplePayButtonElementProps(props),
+      height,
+      props,
     }),
     getIframeTargetOrigin(iframe),
   );
@@ -92,9 +93,11 @@ export function updateApplePayButton({
 export function updateGooglePayButton({
   iframe,
   props,
+  height,
 }: {
   iframe: Iframe;
   props: GooglePayButtonElementProps;
+  height?: string;
 }): void {
   if (!iframe?.contentWindow) {
     return;
@@ -103,7 +106,8 @@ export function updateGooglePayButton({
   iframe.contentWindow.postMessage(
     createMessage({
       type: "UPDATE_GOOGLE_PAY_BUTTON",
-      props: pickGooglePayButtonElementProps(props),
+      height,
+      props,
     }),
     getIframeTargetOrigin(iframe),
   );

package/src/mount.ts

@@ -77,6 +77,7 @@ function createIframe({
   name,
   height,
   allow,
+  className,
   style = FORM_IFRAME_STYLE,
 }: {
   src: string;
@@ -84,6 +85,7 @@ function createIframe({
   name: string;
   height: string;
   allow?: string;
+  className?: string;
   style?: Partial<CSSStyleDeclaration>;
 }): HTMLIFrameElement {
   const iframe = document.createElement("iframe");
@@ -95,6 +97,9 @@ function createIframe({
   if (allow) {
     iframe.allow = allow;
   }
+  if (className != null) {
+    iframe.className = className;
+  }
   Object.assign(iframe.style, style, { height });
   return iframe;
 }
@@ -392,6 +397,13 @@ export type AmosGooglePayButtonOptions = GooglePayButtonListenerOptions & {
    * https://dashboard.amos.com.
    */
   renderToken: string;
+  /** Class names applied to the host-page `<iframe>` element. */
+  iframeClassName?: string;
+  /**
+   * Inline style applied to the host-page `<iframe>` element. Use CSS
+   * lengths with units (`{ borderRadius: "8px" }`).
+   */
+  iframeStyle?: Partial<CSSStyleDeclaration>;
 };
 
 /**
@@ -414,16 +426,19 @@ export function mountAmosGooglePayButton(
   options: AmosGooglePayButtonOptions,
 ): AmosGooglePayButtonMountController {
   const host = resolveContainer(container);
-  const { renderToken, ...listenerOptions } = options;
+  const { renderToken, iframeClassName, iframeStyle, ...listenerOptions } =
+    options;
 
   const iframe = createIframe({
     src: getGooglePayButtonSrc(renderToken),
     title: "Secure Google Pay button powered by Amos",
     name: "amos-google-pay-button",
-    height: getGooglePayButtonInitialHeight(),
+    height: listenerOptions.height ?? getGooglePayButtonInitialHeight(),
     allow: "payment",
+    className: iframeClassName,
     style: WALLET_IFRAME_STYLE,
   });
+  Object.assign(iframe.style, iframeStyle);
   host.appendChild(iframe);
 
   const controller = attachGooglePayButtonListeners(iframe, {
@@ -459,6 +474,13 @@ export type AmosApplePayButtonOptions = ApplePayButtonListenerOptions & {
    * https://dashboard.amos.com.
    */
   renderToken: string;
+  /** Class names applied to the host-page `<iframe>` element. */
+  iframeClassName?: string;
+  /**
+   * Inline style applied to the host-page `<iframe>` element. Use CSS
+   * lengths with units (`{ borderRadius: "8px" }`).
+   */
+  iframeStyle?: Partial<CSSStyleDeclaration>;
 };
 
 /**
@@ -481,16 +503,19 @@ export function mountAmosApplePayButton(
   options: AmosApplePayButtonOptions,
 ): AmosApplePayButtonMountController {
   const host = resolveContainer(container);
-  const { renderToken, ...listenerOptions } = options;
+  const { renderToken, iframeClassName, iframeStyle, ...listenerOptions } =
+    options;
 
   const iframe = createIframe({
     src: getApplePayButtonSrc(renderToken),
     title: "Secure Apple Pay button powered by Amos",
     name: "amos-apple-pay-button",
-    height: getApplePayButtonInitialHeight(),
+    height: listenerOptions.height ?? getApplePayButtonInitialHeight(),
     allow: "payment",
+    className: iframeClassName,
     style: WALLET_IFRAME_STYLE,
   });
+  Object.assign(iframe.style, iframeStyle);
   host.appendChild(iframe);
 
   const controller = attachApplePayButtonListeners(iframe, {