@amos.com/amos-js 0.9.8 → 0.9.10

package/src/apple-pay.ts

@@ -10,10 +10,12 @@ import {
   sendParentReadyMessage,
   updateAmount as sendUpdateAmount,
   updateAppearance as sendUpdateAppearance,
+  updateApplePayButton as sendUpdateApplePayButton,
   updateMerchantName as sendUpdateMerchantName,
 } from "./messaging";
 import {
   type Appearance,
+  type ApplePayButtonElementProps,
   type ConfirmationResult,
   createMessage,
   type Message,
@@ -36,7 +38,7 @@ export function getApplePayButtonInitialHeight(): string {
 /**
  * Options accepted by {@link attachApplePayButtonListeners}.
  */
-export type ApplePayButtonListenerOptions = {
+export type ApplePayButtonListenerOptions = ApplePayButtonElementProps & {
   /** The amount of the payment, in the same format passed in props. */
   amount: string;
   /** A user-visible merchant name. */
@@ -83,7 +85,9 @@ 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.
+   * value into the iframe; pass `appearance` to update theme variables;
+   * pass `buttonstyle`, `type`, `locale`, or `style` to restyle the
+   * Apple Pay button.
    */
   update: (patch: Partial<ApplePayButtonListenerOptions>) => void;
   /**
@@ -126,6 +130,10 @@ export function attachApplePayButtonListeners(
     sendUpdateMerchantName({ iframe, merchantName: current.merchantName });
   }
 
+  function pushButtonProps() {
+    sendUpdateApplePayButton({ iframe, props: current });
+  }
+
   function handleMessage(event: MessageEvent<Message>) {
     // Ignore messages from other frames / windows.
     if (event.source !== iframe.contentWindow) {
@@ -138,6 +146,7 @@ export function attachApplePayButtonListeners(
         sendUpdateAppearance({ iframe, appearance: current.appearance });
         pushAmount();
         pushMerchantName();
+        pushButtonProps();
         break;
 
       case "UPDATE_HEIGHT":
@@ -199,6 +208,11 @@ export function attachApplePayButtonListeners(
       const hadAppearance = "appearance" in patch;
       const hadAmount = "amount" in patch;
       const hadMerchantName = "merchantName" in patch;
+      const hadButtonProps =
+        "buttonstyle" in patch ||
+        "type" in patch ||
+        "locale" in patch ||
+        "style" in patch;
       current = { ...current, ...patch };
       if (hadAppearance) {
         sendUpdateAppearance({ iframe, appearance: current.appearance });
@@ -209,6 +223,9 @@ export function attachApplePayButtonListeners(
       if (hadMerchantName) {
         pushMerchantName();
       }
+      if (hadButtonProps) {
+        pushButtonProps();
+      }
     },
     destroy() {
       window.removeEventListener("message", handleMessage);

package/src/google-pay.ts

@@ -7,9 +7,15 @@ import {
   sendParentReadyMessage,
   updateAmount as sendUpdateAmount,
   updateAppearance as sendUpdateAppearance,
+  updateGooglePayButton as sendUpdateGooglePayButton,
   updateMerchantName as sendUpdateMerchantName,
 } from "./messaging";
-import type { Appearance, ConfirmationResult, Message } from "./types";
+import type {
+  Appearance,
+  ConfirmationResult,
+  GooglePayButtonElementProps,
+  Message,
+} from "./types";
 
 /**
  * Build the iframe `src` URL for the embedded Google Pay button.
@@ -28,7 +34,7 @@ export function getGooglePayButtonInitialHeight(): string {
 /**
  * Options accepted by {@link attachGooglePayButtonListeners}.
  */
-export type GooglePayButtonListenerOptions = {
+export type GooglePayButtonListenerOptions = GooglePayButtonElementProps & {
   /** The amount of the payment, in the same format passed in props. */
   amount: string;
   /** A user-visible merchant name. */
@@ -75,7 +81,10 @@ 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.
+   * 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.
    */
   update: (patch: Partial<GooglePayButtonListenerOptions>) => void;
   /**
@@ -106,6 +115,10 @@ export function attachGooglePayButtonListeners(
     sendUpdateMerchantName({ iframe, merchantName: current.merchantName });
   }
 
+  function pushButtonProps() {
+    sendUpdateGooglePayButton({ iframe, props: current });
+  }
+
   function handleMessage(event: MessageEvent<Message>) {
     if (event.source !== iframe.contentWindow) {
       return;
@@ -117,6 +130,7 @@ export function attachGooglePayButtonListeners(
         sendUpdateAppearance({ iframe, appearance: current.appearance });
         pushAmount();
         pushMerchantName();
+        pushButtonProps();
         break;
 
       case "UPDATE_HEIGHT":
@@ -163,6 +177,14 @@ export function attachGooglePayButtonListeners(
       const hadAppearance = "appearance" in patch;
       const hadAmount = "amount" in patch;
       const hadMerchantName = "merchantName" in patch;
+      const hadButtonProps =
+        "buttonType" in patch ||
+        "buttonColor" in patch ||
+        "buttonRadius" in patch ||
+        "buttonSizeMode" in patch ||
+        "buttonLocale" in patch ||
+        "buttonBorderType" in patch ||
+        "style" in patch;
       current = { ...current, ...patch };
       if (hadAppearance) {
         sendUpdateAppearance({ iframe, appearance: current.appearance });
@@ -173,6 +195,9 @@ export function attachGooglePayButtonListeners(
       if (hadMerchantName) {
         pushMerchantName();
       }
+      if (hadButtonProps) {
+        pushButtonProps();
+      }
     },
     destroy() {
       window.removeEventListener("message", handleMessage);

package/src/index.ts

@@ -32,6 +32,8 @@ export {
   sendParentReadyMessage,
   updateAmount,
   updateAppearance,
+  updateApplePayButton,
+  updateGooglePayButton,
   updateMerchantName,
   validateForm,
 } from "./messaging";
@@ -66,9 +68,19 @@ export {
 export type {
   Appearance,
   AppearanceLabels,
+  ApplePayButtonElementProps,
+  ApplePayButtonStyle,
+  ApplePayButtonType,
   ConfirmationIncompleteReason,
   ConfirmationResult,
+  GooglePayButtonElementProps,
   Message,
   ThemeVariable,
+  WalletButtonStyle,
+} from "./types";
+export {
+  createMessage,
+  pickApplePayButtonElementProps,
+  pickGooglePayButtonElementProps,
+  serializeWalletButtonStyle,
 } from "./types";
-export { createMessage } from "./types";

package/src/messaging.ts

@@ -1,6 +1,14 @@
 import type { components } from "@amos.com/node";
 import { decodeJwt } from "./jwt";
-import { type Appearance, createMessage, type Message } from "./types";
+import {
+  type Appearance,
+  type ApplePayButtonElementProps,
+  createMessage,
+  type GooglePayButtonElementProps,
+  type Message,
+  pickApplePayButtonElementProps,
+  pickGooglePayButtonElementProps,
+} from "./types";
 
 type Iframe = HTMLIFrameElement | null | undefined;
 
@@ -55,6 +63,52 @@ export function updateAppearance({
   );
 }
 
+/**
+ * Push Apple Pay button visual options into the embedded iframe.
+ */
+export function updateApplePayButton({
+  iframe,
+  props,
+}: {
+  iframe: Iframe;
+  props: ApplePayButtonElementProps;
+}): void {
+  if (!iframe?.contentWindow) {
+    return;
+  }
+
+  iframe.contentWindow.postMessage(
+    createMessage({
+      type: "UPDATE_APPLE_PAY_BUTTON",
+      props: pickApplePayButtonElementProps(props),
+    }),
+    getIframeTargetOrigin(iframe),
+  );
+}
+
+/**
+ * Push Google Pay button visual options into the embedded iframe.
+ */
+export function updateGooglePayButton({
+  iframe,
+  props,
+}: {
+  iframe: Iframe;
+  props: GooglePayButtonElementProps;
+}): void {
+  if (!iframe?.contentWindow) {
+    return;
+  }
+
+  iframe.contentWindow.postMessage(
+    createMessage({
+      type: "UPDATE_GOOGLE_PAY_BUTTON",
+      props: pickGooglePayButtonElementProps(props),
+    }),
+    getIframeTargetOrigin(iframe),
+  );
+}
+
 /**
  * Push the express-checkout amount into the embedded Google Pay iframe.
  */

package/src/types.ts

@@ -1,3 +1,5 @@
+/// <reference types="googlepay" />
+
 import type { components } from "@amos.com/node";
 
 /**
@@ -92,6 +94,12 @@ export type ThemeVariable =
    * Default: oklch(0.205 0 0)
    */
   | "--secondary-foreground"
+  /*
+   * Muted surface color (e.g. chips, subdued fills).
+   *
+   * Default: oklch(0.97 0 0)
+   */
+  | "--muted"
   /*
    * Placeholder text, helper labels, and muted icons.
    *
@@ -112,17 +120,35 @@ export type ThemeVariable =
    */
   | "--accent-foreground"
   /*
-   * Error/invalid state borders and icons.
+   * Error/invalid state borders, icons, and field error text.
    *
    * Default: oklch(0.577 0.245 27.325)
    */
   | "--destructive"
+  /*
+   * Text on destructive-colored surfaces (e.g. destructive buttons).
+   *
+   * Default: oklch(0.45 0.24 27.325)
+   */
+  | "--destructive-foreground"
   /*
    * General border color applied to all elements via the base layer.
    *
    * Default: oklch(0.922 0 0)
    */
   | "--border"
+  /*
+   * Dropdown / popover panel background.
+   *
+   * Default: oklch(1 0 0)
+   */
+  | "--popover"
+  /*
+   * Dropdown / popover panel text color.
+   *
+   * Default: oklch(0.145 0 0)
+   */
+  | "--popover-foreground"
   /*
    * Input field border color.
    *
@@ -147,6 +173,36 @@ export type ThemeVariable =
    * Default: 0.875rem
    */
   | "--input-font-size"
+  /*
+   * Font weight of typed input values and dropdown fields (e.g. `400`, `normal`).
+   *
+   * Default: 400
+   */
+  | "--input-font-weight"
+  /*
+   * Horizontal padding inside inputs and aligned floating labels (e.g. `0.75rem`, `12px`).
+   *
+   * Default: 0.75rem
+   */
+  | "--input-padding"
+  /*
+   * Input field border width (e.g. `1px`).
+   *
+   * Default: 1px
+   */
+  | "--input-border-width"
+  /*
+   * Input field box shadow (e.g. `none`, `0 1px 2px 0 rgb(0 0 0 / 0.05)`).
+   *
+   * Default: 0 1px 2px 0 rgb(0 0 0 / 0.05)
+   */
+  | "--input-shadow"
+  /*
+   * Height of text inputs when labels are floating (e.g. `3.25rem`, `52px`).
+   *
+   * Default: 3.25rem
+   */
+  | "--floating-input-height"
   /*
    * Font size of floating labels when the field is focused or filled
    * (e.g. `0.75rem`, `12px`). Does not affect the typed input value.
@@ -160,12 +216,66 @@ export type ThemeVariable =
    * Default: 500
    */
   | "--floating-label-font-weight"
+  /*
+   * Color of floating labels. Defaults to `--muted-foreground`.
+   *
+   * Default: var(--muted-foreground)
+   */
+  | "--floating-label-color"
+  /*
+   * Top offset of the shrunk floating label inside the control (e.g. `0.625rem`).
+   *
+   * Default: 0.625rem
+   */
+  | "--floating-label-offset"
+  /*
+   * Font size of above-style field labels and radio option labels.
+   *
+   * Default: 0.875rem
+   */
+  | "--label-font-size"
+  /*
+   * Font weight of above-style field labels and radio option labels.
+   *
+   * Default: 500
+   */
+  | "--label-font-weight"
+  /*
+   * Vertical gap between stacked form fields (e.g. `1rem`, `16px`).
+   *
+   * Default: 1rem
+   */
+  | "--field-gap"
+  /*
+   * Horizontal gap between side-by-side controls (e.g. expiry + CVC).
+   *
+   * Default: 0.5rem
+   */
+  | "--control-gap"
+  /*
+   * Font size of field-level error messages.
+   *
+   * Default: 0.875rem
+   */
+  | "--error-font-size"
+  /*
+   * Size of radio buttons on the bank account form (e.g. `1rem`, `16px`).
+   *
+   * Default: 1rem
+   */
+  | "--radio-size"
   /*
    * Focus ring and outline color for inputs and buttons.
    *
    * Default: oklch(0.708 0 0)
    */
   | "--ring"
+  /*
+   * Focus ring width for inputs (e.g. `3px`).
+   *
+   * Default: 3px
+   */
+  | "--ring-width"
   /*
    * Base border-radius; derived into --radius-sm/md/lg/xl.
    *
@@ -195,6 +305,193 @@ export type Appearance = {
   labels?: AppearanceLabels;
 };
 
+/**
+ * Inline style bag sent through `postMessage` to the wallet-button iframe.
+ *
+ * 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.
+ *
+ * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
+ */
+export type ApplePayButtonElementProps = {
+  /**
+   * Apple Pay button color.
+   *
+   * @default "black"
+   */
+  buttonstyle?: ApplePayButtonStyle;
+  /**
+   * Apple Pay button label / verb.
+   *
+   * @default "plain"
+   */
+  type?: ApplePayButtonType;
+  /**
+   * BCP 47 locale for the button label (e.g. `"en-US"`).
+   *
+   * @default "en-US"
+   */
+  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`.
+   */
+  style?: WalletButtonStyle;
+};
+
+/**
+ * Visual props for Google's Pay button, using `@google-pay/button-react`
+ * / Google Pay API names. Applied inside the Amos embed iframe.
+ *
+ * @see https://developers.google.com/pay/api/web/guides/resources/customize
+ */
+export type GooglePayButtonElementProps = {
+  /**
+   * 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;
+  /**
+   * `"fill"` stretches the button to the container width; `"static"`
+   * uses Google's default size.
+   */
+  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;
+};
+
+/**
+ * Keep only JSON-cloneable string/number declarations from a style object
+ * before sending it through `postMessage`.
+ */
+export function serializeWalletButtonStyle(
+  style: WalletButtonStyle | undefined,
+): Record<string, string | number> | undefined {
+  if (!style || typeof style !== "object") {
+    return undefined;
+  }
+
+  const result: Record<string, string | number> = {};
+  for (const [key, value] of Object.entries(style)) {
+    if (typeof value === "string") {
+      if (value.length === 0) {
+        continue;
+      }
+      result[key] = value;
+      continue;
+    }
+    if (typeof value === "number" && Number.isFinite(value)) {
+      result[key] = value;
+    }
+  }
+
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
+export function pickApplePayButtonElementProps(
+  options: ApplePayButtonElementProps,
+): ApplePayButtonElementProps {
+  const props: ApplePayButtonElementProps = {};
+  if (options.buttonstyle !== undefined) {
+    props.buttonstyle = options.buttonstyle;
+  }
+  if (options.type !== undefined) {
+    props.type = options.type;
+  }
+  if (options.locale !== undefined) {
+    props.locale = options.locale;
+  }
+  if (options.style !== undefined) {
+    const style = serializeWalletButtonStyle(options.style);
+    if (style) {
+      props.style = style;
+    }
+  }
+  return props;
+}
+
+export function pickGooglePayButtonElementProps(
+  options: GooglePayButtonElementProps,
+): GooglePayButtonElementProps {
+  const props: GooglePayButtonElementProps = {};
+  if (options.buttonType !== undefined) {
+    props.buttonType = options.buttonType;
+  }
+  if (options.buttonColor !== undefined) {
+    props.buttonColor = options.buttonColor;
+  }
+  if (options.buttonRadius !== undefined) {
+    props.buttonRadius = options.buttonRadius;
+  }
+  if (options.buttonSizeMode !== undefined) {
+    props.buttonSizeMode = options.buttonSizeMode;
+  }
+  if (options.buttonLocale !== undefined) {
+    props.buttonLocale = options.buttonLocale;
+  }
+  if (options.buttonBorderType !== undefined) {
+    props.buttonBorderType = options.buttonBorderType;
+  }
+  if (options.style !== undefined) {
+    const style = serializeWalletButtonStyle(options.style);
+    if (style) {
+      props.style = style;
+    }
+  }
+  return props;
+}
+
 /**
  * Typed `postMessage` payloads exchanged between the host page and the
  * embedded Amos iframe.
@@ -228,6 +525,20 @@ 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.
+       */
+      type: "UPDATE_APPLE_PAY_BUTTON";
+      props: ApplePayButtonElementProps;
+    }
+  | {
+      /** Parent → embed: visual options for the Google Pay button. */
+      type: "UPDATE_GOOGLE_PAY_BUTTON";
+      props: GooglePayButtonElementProps;
+    }
   | {
       /**
        * Parent → embed: validate form inputs (`requestId` only).