@amos.com/react-amos-js 0.11.17 → 0.11.19

package/README.md

@@ -16,7 +16,7 @@ npm install @amos.com/react-amos-js @amos.com/node
 
 - React components for the iframe payment method forms: `AmosCreditCardPaymentMethodForm`, `AmosBankAccountPaymentMethodForm`, `AmosGooglePayButton`, `AmosApplePayButton`.
 - React-flavoured iframe message helpers that accept a React `ref`: `validateForm({ iframeRef })`, `confirmPayment({ iframeRef, token })`, `confirmSetup({ iframeRef, token })`, `resetForm({ iframeRef })`, `focusField({ iframeRef, field })`.
-- Re-exports of the `@amos.com/amos-js` helpers and types that come up in client code: `createMessage`, `decodeJwt`, `getEmbedOrigin`, `formatGooglePayPaymentData`, `resetForm`, `focusField`, `ConfirmPaymentResult`, `ConfirmSetupResult`, `FormattedGooglePayPaymentData`, `Appearance`, `FontSource`, `AppearanceRuleSelector`, `Message`, `PaymentMethodFormDefaultValues`, `PaymentMethodFormField`, etc.
+- Re-exports of the `@amos.com/amos-js` helpers and types that come up in client code: `createMessage`, `decodeJwt`, `getEmbedOrigin`, `formatGooglePayPaymentData`, `resetForm`, `focusField`, `ConfirmPaymentResult`, `ConfirmSetupResult`, `FormattedGooglePayPaymentData`, `WalletCustomerCreateAttributes`, `WalletPostalAddress`, `WalletContactRequirements`, `Appearance`, `FontSource`, `AppearanceRuleSelector`, `Message`, `PaymentMethodFormDefaultValues`, `PaymentMethodFormField`, etc.
 
 > **Note:** `@amos.com/react-amos-js` is the client-side half of the Amos integration. For end-to-end payment processing you also need `@amos.com/node` on your server (creating payment intents, handling webhooks, etc.). The same `@amos.com/node` package is listed as a peer dependency so you can import its OpenAPI types in client-side TypeScript code.
 
@@ -319,6 +319,7 @@ import {
   AmosApplePayButton,
   AmosGooglePayButton,
   type ConfirmPaymentResult,
+  type WalletCustomerCreateAttributes,
 } from "@amos.com/react-amos-js";
 import type { components } from "@amos.com/node";
 
@@ -327,12 +328,14 @@ async function createPaymentIntentToken({
   customerCreateAttributes,
 }: {
   paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-  customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+  customerCreateAttributes: WalletCustomerCreateAttributes;
 }): Promise<string> {
   const response = await fetch("/api/payment-intents", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
+      // Map WalletCustomerCreateAttributes on your server — it is not
+      // CreateCustomerInput.
       customer: customerCreateAttributes,
       paymentIntent: paymentIntentCreateAttributes,
     }),
@@ -353,7 +356,7 @@ function CheckoutWallets({ renderToken }: { renderToken: string }) {
     confirmPayment,
   }: {
     paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+    customerCreateAttributes: WalletCustomerCreateAttributes;
     confirmPayment: (token: string) => Promise<ConfirmPaymentResult>;
   }): Promise<ConfirmPaymentResult> {
     try {
@@ -398,7 +401,9 @@ function CheckoutWallets({ renderToken }: { renderToken: string }) {
 }
 ```
 
-Do not call `validateForm` from the host in an express flow — create a payment intent inside `onConfirm`, then `await confirmPayment(token)`. Size the mount slot; omitted `buttonProps` keep paint defaults and fill the iframe.
+Do not call `validateForm` from the host in an express flow — create a payment intent inside `onConfirm`, then `await confirmPayment(token)`. Size the mount slot; omitted `buttonProps` keep paint defaults and fill the iframe. Name, email, and billing address are always collected. Pass `phoneRequired: true` if you still need a phone (Apple Pay previously always collected one). Pass `shippingAddressRequired: true` to collect a shipping postal address.
+
+`customerCreateAttributes` is `WalletCustomerCreateAttributes`, not `CreateCustomerInput`. Nested `billingAddress` / `shippingAddress` use Amos billing field names (`address_line1`, `state`, `postal_code`). Top-level `line1` / `line2` / `city` / `region` / `postalCode` / `country` still duplicate billing so existing Apple Pay hosts keep working — prefer `billingAddress`. `phone` and `shippingAddress` are omitted unless you opted in.
 
 On Safari, Apple Pay uses the native payment sheet. On other browsers, Apple's QR handoff opens in a popup (`pay.apple.com`); while that popup is open, the SDK shows a waiting overlay with **Cancel payment**. After the buyer authorizes, Cancel is removed and the overlay shows **Completing your payment…** until `onConfirm` settles.
 
@@ -586,7 +591,7 @@ When `requireAchVerification` is true (or `intent` is `"setup"`), and the render
 
 **Optional props:** same as `AmosCreditCardPaymentMethodForm` — `appearance`, `billingAddressRequirement`, `defaultValues`, `onValidityChange` (`isValid` is also true after Plaid returns credentials), `onEscapeKeyPressed` — plus:
 
-- `requireAchVerification` (`boolean`, defaults to `false`) — when true, show Plaid Embedded Link instead of routing/account fields. Ignored for `intent="setup"` (always Plaid) and when the render token has bank `verification: false`. Hosts that still have an ACH threshold should compute this themselves and pass a new value when the charge changes.
+- `requireAchVerification` (`boolean`, defaults to `false`) — when true, show Plaid Embedded Link instead of routing/account fields. Ignored for `intent="setup"` (always Plaid) and when the render token has bank `verification: false`. Hosts that still have an ACH threshold should compute this themselves and pass a new value when the charge changes. Changing this prop hides or shows Link; it does not remount the bank form or destroy the Embedded handler.
 - `intent` (`"payment" | "setup"`, defaults to `"payment"`) — `"setup"` always shows Plaid unless the render token disables verification. Use this when saving a bank account for later charges.
 
 ```tsx
@@ -620,12 +625,14 @@ Renders the secure Google Pay iframe button (express checkout flow). A button-sh
 - `renderToken` (`string`)
 - `amount` (`string`) — major-currency decimal string shown in the wallet sheet (e.g. `"50.00"` for $50.00). The iframe converts this to cents in `paymentIntentCreateAttributes.amount`.
 - `merchantName` (`string`)
-- `onConfirm` (callback receiving `{ paymentIntentCreateAttributes, customerCreateAttributes, confirmPayment }`. Create a payment intent, then `return confirmPayment(token)` — `Promise<ConfirmPaymentResult>`)
+- `onConfirm` (callback receiving `{ paymentIntentCreateAttributes, customerCreateAttributes, confirmPayment }`. Create a payment intent, then `return confirmPayment(token)` — `Promise<ConfirmPaymentResult>`). `customerCreateAttributes` is `WalletCustomerCreateAttributes`, not `CreateCustomerInput` — map it on your server. Nested `billingAddress` / `shippingAddress` use Amos billing field names (`address_line1`, `state`, `postal_code`). Top-level `line1` / `line2` / `city` / `region` / `postalCode` / `country` still duplicate billing for existing Apple Pay hosts; prefer `billingAddress`. `phone` and `shippingAddress` are omitted unless you passed `phoneRequired` / `shippingAddressRequired`.
 
 **Optional props:**
 
 - `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" } }}`.
+- `phoneRequired` (`boolean`, defaults to `false`) — collect a phone number in the Google Pay sheet.
+- `shippingAddressRequired` (`boolean`, defaults to `false`) — collect a shipping postal address. Name, email, and billing address are always required.
 - `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
@@ -640,10 +647,12 @@ Renders the secure Google Pay iframe button (express checkout flow). A button-sh
 
 Renders the secure Apple Pay iframe button (express checkout flow). Same required props and callbacks as `AmosGooglePayButton`. A button-shaped skeleton is shown immediately and replaced by the iframe once appearance is applied.
 
-**Optional visual props:**
+**Optional props:**
 
 - `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.
+- `phoneRequired` (`boolean`, defaults to `false`) — collect a phone number in the Apple Pay sheet. Pass `true` to keep the previous Apple Pay behavior of always collecting a phone.
+- `shippingAddressRequired` (`boolean`, defaults to `false`) — collect a shipping postal address. Name, email, and billing address are always required.
 - `iframeProps` — host-page `<iframe>` chrome (same as Google Pay).
 
 ```tsx
@@ -662,7 +671,7 @@ Only Amos domains need Apple merchant registration. The button and `ApplePaySess
 
 ### `formatGooglePayPaymentData({ paymentData })`
 
-Transforms Google Pay payment data into an Amos-compatible `paymentMethod` payload. Use this when integrating with the raw Google Pay API (e.g. `@google-pay/button-react`) instead of `AmosGooglePayButton` — `AmosGooglePayButton` handles payment data internally and does not require this helper.
+Transforms Google Pay payment data into an Amos-compatible `paymentMethod` payload. Use this when integrating with the raw Google Pay API (e.g. `@google-pay/button-react`) instead of `AmosGooglePayButton` — `AmosGooglePayButton` handles payment data internally and does not require this helper. Street and name come from CARD `billingAddress`; email from the top-level field; phone from shipping when present, otherwise billing.
 
 **Parameters:**
 
@@ -690,7 +699,7 @@ Re-export from `@amos.com/amos-js`. Fills omitted Inter `fonts` / `--font-family
 
 ### Exported types
 
-`@amos.com/react-amos-js` re-exports everything from `@amos.com/amos-js`, including `ConfirmPaymentResult`, `ConfirmSetupResult`, `PaymentMethodFormValidityChangeEvent`, `CardBrand`, `PaymentMethodFormCardBrandChangeEvent`, `FormattedGooglePayPaymentData`, `Message`, `Appearance`, `ThemeVariable`, `FontSource`, `CssFontSource`, `CustomFontSource`, `AppearanceRuleSelector`, `AppearanceRuleDeclarations`, `PaymentMethodFormDefaultValues`, `PaymentMethodFormField`, and the per-form `*Options` / `*Controller` types. For OpenAPI schema types (e.g. `PaymentIntent`, `CreatePaymentIntentInput`), import `components` from `@amos.com/node`.
+`@amos.com/react-amos-js` re-exports everything from `@amos.com/amos-js`, including `ConfirmPaymentResult`, `ConfirmSetupResult`, `PaymentMethodFormValidityChangeEvent`, `CardBrand`, `PaymentMethodFormCardBrandChangeEvent`, `FormattedGooglePayPaymentData`, `WalletCustomerCreateAttributes`, `WalletPostalAddress`, `WalletContactRequirements`, `Message`, `Appearance`, `ThemeVariable`, `FontSource`, `CssFontSource`, `CustomFontSource`, `AppearanceRuleSelector`, `AppearanceRuleDeclarations`, `PaymentMethodFormDefaultValues`, `PaymentMethodFormField`, and the per-form `*Options` / `*Controller` types. For OpenAPI schema types (e.g. `PaymentIntent`, `CreatePaymentIntentInput`), import `components` from `@amos.com/node`.
 
 ## Notes and potential gotchas
 
@@ -700,7 +709,7 @@ Re-export from `@amos.com/amos-js`. Fills omitted Inter `fonts` / `--font-family
 - **Amount format**: for `AmosGooglePayButton` and `AmosApplePayButton`, `amount` is a major-currency decimal string (e.g. `"50.00"` for $50.00). For `components["schemas"]["CreatePaymentIntentInput"]` on the server (card/bank create, and the object the wallet iframe sends to `onConfirm`), `amount` is a number in cents (e.g. `5000`).
 - **Embed host / CSP**: iframes load from `https://js.amos.com` (production) and `https://js-sandbox.amos.com` (sandbox) via `getEmbedOrigin`. Parent pages that pin CSP must allow `frame-src https://js.amos.com https://js-sandbox.amos.com` (and `Permissions-Policy payment=` for those origins) **before** upgrading this package. Older SDK versions still load `embed.amos.com` / `embed-sandbox.amos.com`.
 - **Iframe handshake**: iframe URLs include canonical search params so the embed does not 307. If the document loads but never posts `IFRAME_READY`, the SDK rewrites `src` once with `amosReload`. Appearance is applied after handshake; the iframe stays hidden until `UPDATED_APPEARANCE`, or for 1.5s after `IFRAME_READY` if appearance never acks.
-- **Plaid Embedded Link (ACH verification)**: load `cdn.plaid.com` from the **parent** document (see CSP on `AmosBankAccountPaymentMethodForm`). Merchants do not proxy Pay API; the bank iframe mints link tokens. Pass `requireAchVerification` when the host wants Plaid, or `intent="setup"` to always show it, unless the render token disables verification. Confirm still goes through the bank iframe so Amos can attach `plaid` to the payment method. While Link loads, the SDK shows a 350px pulse skeleton until `onLoad` (1.5s fallback) — do not overlay a host loader.
+- **Plaid Embedded Link (ACH verification)**: load `cdn.plaid.com` from the **parent** document (see CSP on `AmosBankAccountPaymentMethodForm`). Merchants do not proxy Pay API; the bank iframe mints link tokens. Pass `requireAchVerification` when the host wants Plaid, or `intent="setup"` to always show it, unless the render token disables verification. Toggling that prop hides or shows the existing Embedded handler — it does not reload Institution Search. Confirm still goes through the bank iframe so Amos can attach `plaid` to the payment method. While Link loads, the SDK shows a 350px pulse skeleton until `onLoad` (1.5s fallback) — do not overlay a host loader.
 - **Apple Pay waiting overlay**: on browsers where Apple's QR handoff opens in a popup (non-Safari), `AmosApplePayButton` shows a fixed full-viewport overlay on the host page. **Cancel payment** is available until the buyer authorizes; after that the overlay shows **Completing your payment…** with no Cancel, then hides when `onConfirm` settles. Avoid stacking other fixed UI above it.
 - **Going framework-free**: if you need to use Amos outside of React (vanilla JS, another framework, etc.), use [`@amos.com/amos-js`](../amos-js) directly.
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="googlepay" />
-import { Appearance, ApplePayButtonElementProps, BillingAddressRequirement, ConfirmPaymentResult, ConfirmSetupResult, CreditCardAdditionalFields, GooglePayButtonElementProps, PaymentMethodFormDefaultValues, PaymentMethodFormField } from '@amos.com/amos-js';
+import { Appearance, ApplePayButtonElementProps, BillingAddressRequirement, ConfirmPaymentResult, ConfirmSetupResult, CreditCardAdditionalFields, GooglePayButtonElementProps, PaymentMethodFormDefaultValues, PaymentMethodFormField, WalletCustomerCreateAttributes } from '@amos.com/amos-js';
 import { components } from '@amos.com/node';
 import { ComponentProps, Ref, RefObject } from 'react';
 export * from '@amos.com/amos-js';
@@ -136,6 +136,9 @@ type AmosBankAccountPaymentMethodFormProps = IframePassthroughProps & {
      * is `"setup"` (setup always shows Plaid) or when the render token
      * disables verification.
      *
+     * Changing this prop hides or shows Link; it does not remount the
+     * bank form or destroy the Embedded handler.
+     *
      * @default false
      */
     requireAchVerification?: boolean;
@@ -171,15 +174,28 @@ type AmosGooglePayButtonProps = {
      * mount slot, not the button.
      */
     buttonProps?: GooglePayButtonElementProps;
+    /**
+     * Collect a phone number in the Google Pay sheet.
+     * @default false
+     */
+    phoneRequired?: boolean;
+    /**
+     * Collect a shipping postal address. Name, email, and billing
+     * address are always required.
+     * @default false
+     */
+    shippingAddressRequired?: boolean;
     /** Props applied to the host-page `<iframe>` element. */
     iframeProps?: IframePassthroughProps;
     /**
      * Called when the buyer authorizes in the Google Pay sheet. Create a
      * payment intent on your server, then `await confirmPayment(token)`.
+     * `customerCreateAttributes` is `WalletCustomerCreateAttributes`, not
+     * Amos `CreateCustomerInput`.
      */
     onConfirm: ({ paymentIntentCreateAttributes, customerCreateAttributes, confirmPayment, }: {
         paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-        customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+        customerCreateAttributes: WalletCustomerCreateAttributes;
         confirmPayment: (token: string) => Promise<ConfirmPaymentResult>;
     }) => Promise<ConfirmPaymentResult>;
 };
@@ -188,7 +204,7 @@ type AmosGooglePayButtonProps = {
  * skeleton is painted in the parent document on first render (including
  * SSR) so the slot height is reserved before the iframe loads.
  */
-export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, height, buttonProps, iframeProps, onConfirm, }: AmosGooglePayButtonProps): import("react").JSX.Element;
+export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, height, buttonProps, phoneRequired, shippingAddressRequired, iframeProps, onConfirm, }: AmosGooglePayButtonProps): import("react").JSX.Element;
 type AmosApplePayButtonProps = {
     ref?: ForwardedIframeRef;
     renderToken: string;
@@ -211,15 +227,28 @@ type AmosApplePayButtonProps = {
      * button fills the iframe — size the mount slot, not the button.
      */
     buttonProps?: ApplePayButtonElementProps;
+    /**
+     * Collect a phone number in the Apple Pay sheet.
+     * @default false
+     */
+    phoneRequired?: boolean;
+    /**
+     * Collect a shipping postal address. Name, email, and billing
+     * address are always required.
+     * @default false
+     */
+    shippingAddressRequired?: boolean;
     /** Props applied to the host-page `<iframe>` element. */
     iframeProps?: IframePassthroughProps;
     /**
      * Called when the buyer authorizes in the Apple Pay sheet. Create a
      * payment intent on your server, then `await confirmPayment(token)`.
+     * `customerCreateAttributes` is `WalletCustomerCreateAttributes`, not
+     * Amos `CreateCustomerInput`.
      */
     onConfirm: ({ paymentIntentCreateAttributes, customerCreateAttributes, confirmPayment, }: {
         paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-        customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+        customerCreateAttributes: WalletCustomerCreateAttributes;
         confirmPayment: (token: string) => Promise<ConfirmPaymentResult>;
     }) => Promise<ConfirmPaymentResult>;
 };
@@ -228,4 +257,4 @@ type AmosApplePayButtonProps = {
  * skeleton is painted in the parent document on first render (including
  * SSR) so the slot height is reserved before the iframe loads.
  */
-export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, height, buttonProps, iframeProps, onConfirm, }: AmosApplePayButtonProps): import("react").JSX.Element;
+export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, height, buttonProps, phoneRequired, shippingAddressRequired, iframeProps, onConfirm, }: 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){var t;return e?(t=e.current)==null?null:t:null}function i({iframeRef:t}){return(0,e.validateForm)({iframe:r(t)})}function a({iframeRef:t,token:n,defaultValues:i}){return(0,e.confirmPayment)({iframe:r(t),token:n,defaultValues:i})}function o({iframeRef:t,token:n,defaultValues:i}){return(0,e.confirmSetup)({iframe:r(t),token:n,defaultValues:i})}function s({iframeRef:t}){(0,e.resetForm)({iframe:r(t)})}function c({iframeRef:t,field:n}){(0,e.focusField)({iframe:r(t),field:n})}function l(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function u(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 d({containerRef:e,iframeRef:n,mount:r,options:i,remountDeps:a,iframePassthrough:o,updateDeps:s}){let c=(0,t.useRef)(null);(0,t.useLayoutEffect)(()=>{let t=e.current;if(!t)return;let a=r(t,i);return c.current=a,l(n,a.iframe),u(a.iframe,o),()=>{a.destroy(),c.current=null,l(n,null)}},[...a]),(0,t.useEffect)(()=>{var e;(e=c.current)==null||e.update(i)},[...s]),(0,t.useEffect)(()=>{var e;let t=(e=c.current)==null?void 0:e.iframe;t&&u(t,o)})}var f=`oklch(0.97 0 0)`;function p({height:r,borderRadius:i,containerRef:a}){return(0,t.useLayoutEffect)(()=>{(0,e.ensureSkeletonStyles)()},[]),(0,n.jsxs)(`div`,{style:{boxSizing:`border-box`,position:`relative`,width:`100%`,height:r,minHeight:r,overflow:`hidden`},children:[(0,n.jsx)(`div`,{className:`amos-js-form-skeleton-input amos-js-wallet-skeleton`,style:{position:`absolute`,inset:0,height:r,borderRadius:i,background:f,pointerEvents:`none`,zIndex:0},"aria-hidden":!0}),(0,n.jsx)(`div`,{ref:a,style:{position:`absolute`,inset:0,zIndex:1,width:`100%`,height:`100%`}})]})}function m({ref:r,renderToken:i,appearance:a,onValidityChange:o,onCardBrandChanged:s,onEscapeKeyPressed:c,additionalFields:l={cardholderName:!1},billingAddressRequirement:u=`country`,defaultValues:f,style:p,...m}){let h=(0,t.useRef)(null);return d({containerRef:h,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:l,billingAddressRequirement:u,defaultValues:f,onValidityChange:o,onCardBrandChanged:s,onEscapeKeyPressed:c},remountDeps:[i,l.cardholderName,u],iframePassthrough:{style:p,...m},updateDeps:[a,l,u,f,o,s,c]}),(0,n.jsx)(`div`,{ref:h})}function h({ref:r,renderToken:i,appearance:a,onValidityChange:o,onEscapeKeyPressed:s,billingAddressRequirement:c=`country`,defaultValues:l,requireAchVerification:u=!1,intent:f=`payment`,style:p,...m}){let h=(0,t.useRef)(null);return d({containerRef:h,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:c,defaultValues:l,requireAchVerification:u,intent:f,onValidityChange:o,onEscapeKeyPressed:s},remountDeps:[i,c,f],iframePassthrough:{style:p,...m},updateDeps:[a,c,l,u,f,o,s]}),(0,n.jsx)(`div`,{ref:h})}function g({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,iframeProps:l,onConfirm:u}){let f=(0,t.useRef)(null),m=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:l==null?void 0:l.style,buttonProps:c});return d({containerRef:f,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,onConfirm:u},remountDeps:[i],iframePassthrough:l==null?{}:l,updateDeps:[a,o,s,c,u]}),(0,n.jsx)(p,{height:s,borderRadius:m,containerRef:f})}function _({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,iframeProps:l,onConfirm:u}){let f=(0,t.useRef)(null),m=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:l==null?void 0:l.style,buttonProps:c});return d({containerRef:f,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,onConfirm:u},remountDeps:[i],iframePassthrough:l==null?{}:l,updateDeps:[a,o,s,c,u]}),(0,n.jsx)(p,{height:s,borderRadius:m,containerRef:f})}exports.AmosApplePayButton=_,exports.AmosBankAccountPaymentMethodForm=h,exports.AmosCreditCardPaymentMethodForm=m,exports.AmosGooglePayButton=g,exports.confirmPayment=a,exports.confirmSetup=o,exports.focusField=c,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){var t;return e?(t=e.current)==null?null:t:null}function i({iframeRef:t}){return(0,e.validateForm)({iframe:r(t)})}function a({iframeRef:t,token:n,defaultValues:i}){return(0,e.confirmPayment)({iframe:r(t),token:n,defaultValues:i})}function o({iframeRef:t,token:n,defaultValues:i}){return(0,e.confirmSetup)({iframe:r(t),token:n,defaultValues:i})}function s({iframeRef:t}){(0,e.resetForm)({iframe:r(t)})}function c({iframeRef:t,field:n}){(0,e.focusField)({iframe:r(t),field:n})}function l(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function u(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 d({containerRef:e,iframeRef:n,mount:r,options:i,remountDeps:a,iframePassthrough:o,updateDeps:s}){let c=(0,t.useRef)(null);(0,t.useLayoutEffect)(()=>{let t=e.current;if(!t)return;let a=r(t,i);return c.current=a,l(n,a.iframe),u(a.iframe,o),()=>{a.destroy(),c.current=null,l(n,null)}},[...a]),(0,t.useEffect)(()=>{var e;(e=c.current)==null||e.update(i)},[...s]),(0,t.useEffect)(()=>{var e;let t=(e=c.current)==null?void 0:e.iframe;t&&u(t,o)})}var f=`oklch(0.97 0 0)`;function p({height:r,borderRadius:i,containerRef:a}){return(0,t.useLayoutEffect)(()=>{(0,e.ensureSkeletonStyles)()},[]),(0,n.jsxs)(`div`,{style:{boxSizing:`border-box`,position:`relative`,width:`100%`,height:r,minHeight:r,overflow:`hidden`},children:[(0,n.jsx)(`div`,{className:`amos-js-form-skeleton-input amos-js-wallet-skeleton`,style:{position:`absolute`,inset:0,height:r,borderRadius:i,background:f,pointerEvents:`none`,zIndex:0},"aria-hidden":!0}),(0,n.jsx)(`div`,{ref:a,style:{position:`absolute`,inset:0,zIndex:1,width:`100%`,height:`100%`}})]})}function m({ref:r,renderToken:i,appearance:a,onValidityChange:o,onCardBrandChanged:s,onEscapeKeyPressed:c,additionalFields:l={cardholderName:!1},billingAddressRequirement:u=`country`,defaultValues:f,style:p,...m}){let h=(0,t.useRef)(null);return d({containerRef:h,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:l,billingAddressRequirement:u,defaultValues:f,onValidityChange:o,onCardBrandChanged:s,onEscapeKeyPressed:c},remountDeps:[i,l.cardholderName,u],iframePassthrough:{style:p,...m},updateDeps:[a,l,u,f,o,s,c]}),(0,n.jsx)(`div`,{ref:h})}function h({ref:r,renderToken:i,appearance:a,onValidityChange:o,onEscapeKeyPressed:s,billingAddressRequirement:c=`country`,defaultValues:l,requireAchVerification:u=!1,intent:f=`payment`,style:p,...m}){let h=(0,t.useRef)(null);return d({containerRef:h,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:c,defaultValues:l,requireAchVerification:u,intent:f,onValidityChange:o,onEscapeKeyPressed:s},remountDeps:[i,c,f],iframePassthrough:{style:p,...m},updateDeps:[a,c,l,u,f,o,s]}),(0,n.jsx)(`div`,{ref:h})}function g({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,iframeProps:f,onConfirm:m}){let h=(0,t.useRef)(null),g=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:f==null?void 0:f.style,buttonProps:c});return d({containerRef:h,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,onConfirm:m},remountDeps:[i],iframePassthrough:f==null?{}:f,updateDeps:[a,o,s,c,l,u,m]}),(0,n.jsx)(p,{height:s,borderRadius:g,containerRef:h})}function _({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,iframeProps:f,onConfirm:m}){let h=(0,t.useRef)(null),g=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:f==null?void 0:f.style,buttonProps:c});return d({containerRef:h,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,phoneRequired:l,shippingAddressRequired:u,onConfirm:m},remountDeps:[i],iframePassthrough:f==null?{}:f,updateDeps:[a,o,s,c,l,u,m]}),(0,n.jsx)(p,{height:s,borderRadius:g,containerRef:h})}exports.AmosApplePayButton=_,exports.AmosBankAccountPaymentMethodForm=h,exports.AmosCreditCardPaymentMethodForm=m,exports.AmosGooglePayButton=g,exports.confirmPayment=a,exports.confirmSetup=o,exports.focusField=c,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

@@ -167,13 +167,13 @@ function O({ ref: e, renderToken: t, appearance: n, onValidityChange: r, onEscap
 		]
 	}), /* @__PURE__ */ m("div", { ref: f });
 }
-function k({ ref: e, renderToken: t, amount: n, merchantName: r, height: i = "48px", buttonProps: a, iframeProps: o, onConfirm: c }) {
-	let u = p(null), d = l({
-		iframeStyle: o == null ? void 0 : o.style,
+function k({ ref: e, renderToken: t, amount: n, merchantName: r, height: i = "48px", buttonProps: a, phoneRequired: o, shippingAddressRequired: c, iframeProps: u, onConfirm: d }) {
+	let f = p(null), h = l({
+		iframeStyle: u == null ? void 0 : u.style,
 		buttonProps: a
 	});
 	return w({
-		containerRef: u,
+		containerRef: f,
 		iframeRef: e,
 		mount: s,
 		options: {
@@ -182,30 +182,34 @@ function k({ ref: e, renderToken: t, amount: n, merchantName: r, height: i = "48
 			merchantName: r,
 			height: i,
 			buttonProps: a,
-			onConfirm: c
+			phoneRequired: o,
+			shippingAddressRequired: c,
+			onConfirm: d
 		},
 		remountDeps: [t],
-		iframePassthrough: o == null ? {} : o,
+		iframePassthrough: u == null ? {} : u,
 		updateDeps: [
 			n,
 			r,
 			i,
 			a,
-			c
+			o,
+			c,
+			d
 		]
 	}), /* @__PURE__ */ m(E, {
 		height: i,
-		borderRadius: d,
-		containerRef: u
+		borderRadius: h,
+		containerRef: f
 	});
 }
-function A({ ref: e, renderToken: t, amount: n, merchantName: r, height: a = "48px", buttonProps: o, iframeProps: s, onConfirm: c }) {
-	let u = p(null), d = l({
-		iframeStyle: s == null ? void 0 : s.style,
+function A({ ref: e, renderToken: t, amount: n, merchantName: r, height: a = "48px", buttonProps: o, phoneRequired: s, shippingAddressRequired: c, iframeProps: u, onConfirm: d }) {
+	let f = p(null), h = l({
+		iframeStyle: u == null ? void 0 : u.style,
 		buttonProps: o
 	});
 	return w({
-		containerRef: u,
+		containerRef: f,
 		iframeRef: e,
 		mount: i,
 		options: {
@@ -214,21 +218,25 @@ function A({ ref: e, renderToken: t, amount: n, merchantName: r, height: a = "48
 			merchantName: r,
 			height: a,
 			buttonProps: o,
-			onConfirm: c
+			phoneRequired: s,
+			shippingAddressRequired: c,
+			onConfirm: d
 		},
 		remountDeps: [t],
-		iframePassthrough: s == null ? {} : s,
+		iframePassthrough: u == null ? {} : u,
 		updateDeps: [
 			n,
 			r,
 			a,
 			o,
-			c
+			s,
+			c,
+			d
 		]
 	}), /* @__PURE__ */ m(E, {
 		height: a,
-		borderRadius: d,
-		containerRef: u
+		borderRadius: h,
+		containerRef: f
 	});
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/react-amos-js",
-  "version": "0.11.17",
+  "version": "0.11.19",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
     "vite-plugin-dts": "5.0.3"
   },
   "dependencies": {
-    "@amos.com/amos-js": "0.11.17",
+    "@amos.com/amos-js": "0.11.20",
     "@types/googlepay": "0.7.12"
   },
   "peerDependencies": {

package/src/index.tsx

@@ -21,6 +21,7 @@ import {
   type PaymentMethodFormDefaultValues,
   type PaymentMethodFormField,
   resolveWalletButtonSkeletonBorderRadius,
+  type WalletCustomerCreateAttributes,
 } from "@amos.com/amos-js";
 import type { components } from "@amos.com/node";
 import {
@@ -416,6 +417,9 @@ type AmosBankAccountPaymentMethodFormProps = IframePassthroughProps & {
    * is `"setup"` (setup always shows Plaid) or when the render token
    * disables verification.
    *
+   * Changing this prop hides or shows Link; it does not remount the
+   * bank form or destroy the Embedded handler.
+   *
    * @default false
    */
   requireAchVerification?: boolean;
@@ -458,6 +462,8 @@ export function AmosBankAccountPaymentMethodForm({
       onValidityChange,
       onEscapeKeyPressed,
     },
+    // `requireAchVerification` is an update, not a remount: amos-js hides
+    // Embedded Link instead of destroying it when the flag flips.
     remountDeps: [renderToken, billingAddressRequirement, intent],
     iframePassthrough: { style, ...rest },
     updateDeps: [
@@ -496,11 +502,24 @@ type AmosGooglePayButtonProps = {
    * mount slot, not the button.
    */
   buttonProps?: GooglePayButtonElementProps;
+  /**
+   * Collect a phone number in the Google Pay sheet.
+   * @default false
+   */
+  phoneRequired?: boolean;
+  /**
+   * Collect a shipping postal address. Name, email, and billing
+   * address are always required.
+   * @default false
+   */
+  shippingAddressRequired?: boolean;
   /** Props applied to the host-page `<iframe>` element. */
   iframeProps?: IframePassthroughProps;
   /**
    * Called when the buyer authorizes in the Google Pay sheet. Create a
    * payment intent on your server, then `await confirmPayment(token)`.
+   * `customerCreateAttributes` is `WalletCustomerCreateAttributes`, not
+   * Amos `CreateCustomerInput`.
    */
   onConfirm: ({
     paymentIntentCreateAttributes,
@@ -508,7 +527,7 @@ type AmosGooglePayButtonProps = {
     confirmPayment,
   }: {
     paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+    customerCreateAttributes: WalletCustomerCreateAttributes;
     confirmPayment: (token: string) => Promise<ConfirmPaymentResult>;
   }) => Promise<ConfirmPaymentResult>;
 };
@@ -525,6 +544,8 @@ export function AmosGooglePayButton({
   merchantName,
   height = "48px",
   buttonProps,
+  phoneRequired,
+  shippingAddressRequired,
   iframeProps,
   onConfirm,
 }: AmosGooglePayButtonProps) {
@@ -544,11 +565,21 @@ export function AmosGooglePayButton({
       merchantName,
       height,
       buttonProps,
+      phoneRequired,
+      shippingAddressRequired,
       onConfirm,
     },
     remountDeps: [renderToken],
     iframePassthrough: iframeProps ?? {},
-    updateDeps: [amount, merchantName, height, buttonProps, onConfirm],
+    updateDeps: [
+      amount,
+      merchantName,
+      height,
+      buttonProps,
+      phoneRequired,
+      shippingAddressRequired,
+      onConfirm,
+    ],
   });
 
   return (
@@ -582,11 +613,24 @@ type AmosApplePayButtonProps = {
    * button fills the iframe — size the mount slot, not the button.
    */
   buttonProps?: ApplePayButtonElementProps;
+  /**
+   * Collect a phone number in the Apple Pay sheet.
+   * @default false
+   */
+  phoneRequired?: boolean;
+  /**
+   * Collect a shipping postal address. Name, email, and billing
+   * address are always required.
+   * @default false
+   */
+  shippingAddressRequired?: boolean;
   /** Props applied to the host-page `<iframe>` element. */
   iframeProps?: IframePassthroughProps;
   /**
    * Called when the buyer authorizes in the Apple Pay sheet. Create a
    * payment intent on your server, then `await confirmPayment(token)`.
+   * `customerCreateAttributes` is `WalletCustomerCreateAttributes`, not
+   * Amos `CreateCustomerInput`.
    */
   onConfirm: ({
     paymentIntentCreateAttributes,
@@ -594,7 +638,7 @@ type AmosApplePayButtonProps = {
     confirmPayment,
   }: {
     paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+    customerCreateAttributes: WalletCustomerCreateAttributes;
     confirmPayment: (token: string) => Promise<ConfirmPaymentResult>;
   }) => Promise<ConfirmPaymentResult>;
 };
@@ -611,6 +655,8 @@ export function AmosApplePayButton({
   merchantName,
   height = "48px",
   buttonProps,
+  phoneRequired,
+  shippingAddressRequired,
   iframeProps,
   onConfirm,
 }: AmosApplePayButtonProps) {
@@ -630,11 +676,21 @@ export function AmosApplePayButton({
       merchantName,
       height,
       buttonProps,
+      phoneRequired,
+      shippingAddressRequired,
       onConfirm,
     },
     remountDeps: [renderToken],
     iframePassthrough: iframeProps ?? {},
-    updateDeps: [amount, merchantName, height, buttonProps, onConfirm],
+    updateDeps: [
+      amount,
+      merchantName,
+      height,
+      buttonProps,
+      phoneRequired,
+      shippingAddressRequired,
+      onConfirm,
+    ],
   });
 
   return (