@amos.com/react-amos-js 0.11.18 → 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.
 
@@ -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
 

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';
@@ -174,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>;
 };
@@ -191,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;
@@ -214,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>;
 };
@@ -231,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.18",
+  "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.18",
+    "@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 {
@@ -501,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,
@@ -513,7 +527,7 @@ type AmosGooglePayButtonProps = {
     confirmPayment,
   }: {
     paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+    customerCreateAttributes: WalletCustomerCreateAttributes;
     confirmPayment: (token: string) => Promise<ConfirmPaymentResult>;
   }) => Promise<ConfirmPaymentResult>;
 };
@@ -530,6 +544,8 @@ export function AmosGooglePayButton({
   merchantName,
   height = "48px",
   buttonProps,
+  phoneRequired,
+  shippingAddressRequired,
   iframeProps,
   onConfirm,
 }: AmosGooglePayButtonProps) {
@@ -549,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 (
@@ -587,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,
@@ -599,7 +638,7 @@ type AmosApplePayButtonProps = {
     confirmPayment,
   }: {
     paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+    customerCreateAttributes: WalletCustomerCreateAttributes;
     confirmPayment: (token: string) => Promise<ConfirmPaymentResult>;
   }) => Promise<ConfirmPaymentResult>;
 };
@@ -616,6 +655,8 @@ export function AmosApplePayButton({
   merchantName,
   height = "48px",
   buttonProps,
+  phoneRequired,
+  shippingAddressRequired,
   iframeProps,
   onConfirm,
 }: AmosApplePayButtonProps) {
@@ -635,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 (