@amos.com/react-amos-js 0.7.2 → 0.9.1

package/README.md

@@ -37,12 +37,12 @@ The render token configures the iframe's allowed origin(s), allowed payment meth
 The following flow is for credit card and bank account payment method types only.
 
 1. **Set up prerequisites**: create a `renderToken` (safe for client), and keep `apiKey` and `accountId` server-side only.
-2. **Render your checkout UI** with one of the payment method components (e.g. `AmosCreditCardPaymentMethodForm`) along with the required props (`onConfirmationFailed`) and optional callbacks (`onPaymentIntentConfirmationSucceeded`, `onSetupIntentConfirmationSucceeded`). The iframe height is auto-managed by the SDK.
+2. **Render your checkout UI** with one of the payment method components (e.g. `AmosCreditCardPaymentMethodForm`) along with the required `onResult` prop. The iframe height is auto-managed by the SDK.
 3. **User clicks "Pay now" button**: call `validateForm({ iframeRef })`, which returns `Promise<true>` if the embedded form is valid and `Promise<false>` otherwise.
 4. **Create payment intent on your server**: use your server-side Amos client to call `POST /payment_intents`. You may also associate this payment intent with a new or existing customer via `POST /customers`. This must be server-side because it uses your private API key.
 5. **Return the payment intent token to the browser**: your backend responds with the embed token (`components["schemas"]["EmbedToken"]`) needed for confirmation.
 6. **Confirm the payment intent from the client**: call `confirmPaymentIntent({ iframeRef, token })` to continue the payment flow.
-7. **Handle UX**: show the user a "processing" state when the "Pay now" button is clicked, and show a success or error message via `onPaymentIntentConfirmationSucceeded` and `onConfirmationFailed`.
+7. **Handle UX**: show the user a "processing" state when the "Pay now" button is clicked, and handle `onResult`. Verify settlement on your backend via webhooks. Recoverable field errors stay in the iframe (`status: "incomplete"`).
 
 ### Google Pay & Apple Pay
 
@@ -60,7 +60,7 @@ Setup intents are used to save payment methods for future use (e.g. recurring pa
 
 - On the server, call `POST /setup_intents` instead of `POST /payment_intents`.
 - On the client, call `confirmSetupIntent({ iframeRef, token })` instead of `confirmPaymentIntent({ iframeRef, token })`.
-- Use `onSetupIntentConfirmationSucceeded` instead of `onPaymentIntentConfirmationSucceeded`.
+- The same `onResult` callback is used for setup intents (`intent: "setup"`).
 
 The same `AmosCreditCardPaymentMethodForm` / `AmosBankAccountPaymentMethodForm` components support both payment intents and setup intents — they are differentiated by which confirmation function you call.
 
@@ -92,7 +92,9 @@ Every component accepts an optional `appearance` prop that controls the look of
       "--radius": "0.25rem",
     },
   }}
-  onConfirmationFailed={(msg) => setError(msg)}
+  onResult={(result) => {
+    if (result.status === "failed") setError(result.errorMessage)
+  }}
 />
 ```
 
@@ -197,13 +199,11 @@ function CheckoutForm() {
         ref={iframeRef}
         renderToken="the-render-token-that-you-created-on-dashboard.amos.com"
         additionalFields={{ cardholderName: true }}
-        onPaymentIntentConfirmationSucceeded={(paymentIntent) => {
-          console.log("Payment succeeded:", paymentIntent.id);
-        }}
-        onSetupIntentConfirmationSucceeded={() => {}}
-        onConfirmationFailed={(errorMessage) => {
-          setError(errorMessage);
-        }}
+        }
+        }
+        onResult={(result) => {
+          if (result.status === "failed") console.error(result.errorMessage)
+        }}}
       />
       {error ? <p>{error}</p> : null}
       <button type="submit" disabled={isProcessing}>
@@ -249,12 +249,10 @@ function CheckoutGooglePay() {
           const { token } = await response.json();
           return token;
         }}
-        onPaymentIntentConfirmationSucceeded={(paymentIntent) => {
-          console.log("Google Pay payment succeeded:", paymentIntent.id);
-        }}
-        onConfirmationFailed={(errorMessage) => {
-          setError(errorMessage);
-        }}
+        }
+        onResult={(result) => {
+          if (result.status === "failed") console.error(result.errorMessage)
+        }}}
       />
       {error ? <p>{error}</p> : null}
     </>
@@ -319,13 +317,11 @@ function SavePaymentMethodForm() {
       <AmosCreditCardPaymentMethodForm
         ref={iframeRef}
         renderToken="the-render-token-that-you-created-on-dashboard.amos.com"
-        onPaymentIntentConfirmationSucceeded={() => {}}
-        onSetupIntentConfirmationSucceeded={(setupIntent) => {
-          console.log("Payment method saved:", setupIntent.payment_method_id);
-        }}
-        onConfirmationFailed={(errorMessage) => {
-          setError(errorMessage);
-        }}
+        }
+        }
+        onResult={(result) => {
+          if (result.status === "failed") console.error(result.errorMessage)
+        }}}
       />
       {error ? <p>{error}</p> : null}
       <button type="submit" disabled={isProcessing}>
@@ -377,13 +373,13 @@ Renders the secure credit card iframe form.
 **Required props:**
 
 - `renderToken` (`string`)
-- `onConfirmationFailed` (`(errorMessage: string) => void`)
+- `onResult` (`(result: ConfirmationResult) => void`) — required
 
 **Optional props:**
 
 - `appearance` (`{ themeVariables?: Partial<Record<ThemeVariable, string>>; labels?: "above" | "floating" | "placeholder" }`) — appearance overrides for the iframe UI (see [Appearance](#appearance))
-- `onPaymentIntentConfirmationSucceeded` (`(paymentIntent: components["schemas"]["PaymentIntent"]) => void`)
-- `onSetupIntentConfirmationSucceeded` (`(setupIntent: components["schemas"]["SetupIntent"]) => void`)
+
+
 - `additionalFields` (`{ cardholderName: boolean }`) — set `additionalFields={{ cardholderName: true }}` to render the cardholder name field in the iframe (`false` by default)
 - `billingAddressRequirement` (`"country" | "full"`, defaults to `"country"`) — how much billing address the iframe collects. `country` collects country / region and, for CA / PR / GB / US, a postal code (labeled ZIP for the United States). `full` shows a full street address form with Smarty autocomplete.
 
@@ -393,9 +389,9 @@ Renders the secure credit card iframe form.
 
 Renders the secure bank account iframe form.
 
-**Required props:** same as `AmosCreditCardPaymentMethodForm` — `renderToken`, `onConfirmationFailed`.
+**Required props:** same as `AmosCreditCardPaymentMethodForm` — `renderToken`, `onResult`.
 
-**Optional props:** same as `AmosCreditCardPaymentMethodForm` — `appearance`, `billingAddressRequirement`, `onPaymentIntentConfirmationSucceeded`, `onSetupIntentConfirmationSucceeded`.
+**Optional props:** same as `AmosCreditCardPaymentMethodForm` — `appearance`, `billingAddressRequirement`.
 
 **Also accepts:** standard iframe props.
 
@@ -409,8 +405,8 @@ Renders the secure Google Pay iframe button (express checkout flow).
 - `amount` (`string`)
 - `merchantName` (`string`)
 - `onInitiatePaymentIntentRequest` (callback receiving `{ paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"]; customerCreateAttributes: components["schemas"]["CreateCustomerInput"] }`, returns `Promise<components["schemas"]["EmbedToken"]["token"]>` — the embed JWT string for confirmation)
-- `onPaymentIntentConfirmationSucceeded` (`(paymentIntent: components["schemas"]["PaymentIntent"]) => void`)
-- `onConfirmationFailed` (`(errorMessage: string) => void`)
+
+- `onResult` (`(result: ConfirmationResult) => void`) — required
 
 **Optional props:**
 
@@ -445,7 +441,7 @@ Re-exports of the same advanced helpers exposed by `@amos.com/amos-js`. Most int
 ## Notes and potential gotchas
 
 - **`ref` / `iframeRef`**: for card and bank forms, pass `ref={iframeRef}` to the form component. The same `iframeRef` must be used when calling `validateForm`, `confirmPaymentIntent`, or `confirmSetupIntent`. The component forwards the ref to the inner iframe.
-- **Same components for payment vs setup intents**: `AmosCreditCardPaymentMethodForm` and `AmosBankAccountPaymentMethodForm` support both payment intents and setup intents. The flow differs only by which server call you make and which confirmation function you use (`confirmPaymentIntent` vs `confirmSetupIntent`). You may optionally provide `onPaymentIntentConfirmationSucceeded` and/or `onSetupIntentConfirmationSucceeded`; the appropriate one is invoked based on the flow.
+- **Same components for payment vs setup intents**: `AmosCreditCardPaymentMethodForm` and `AmosBankAccountPaymentMethodForm` support both payment intents and setup intents. The flow differs only by which server call you make and which confirmation function you use (`confirmPaymentIntent` vs `confirmSetupIntent`). Handle both payment and setup outcomes via `onResult`.
 - **Amount format**: for `AmosGooglePayButton` and `AmosApplePayButton`, `amount` is a string (e.g. `"5000"` for $50.00). For `components["schemas"]["CreatePaymentIntentInput"]` on the server, `amount` is a number in cents (e.g. `5000`).
 - **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 until payment completes, the popup closes, or the user clicks **Cancel payment**. 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, BillingAddressRequirement, CreditCardAdditionalFields } from '@amos.com/amos-js';
+import { Appearance, BillingAddressRequirement, ConfirmationResult, CreditCardAdditionalFields } from '@amos.com/amos-js';
 import { components } from '@amos.com/node';
 import { ComponentProps, RefObject } from 'react';
 export * from '@amos.com/amos-js';
@@ -37,22 +37,18 @@ type IframePassthroughProps = Omit<ComponentProps<"iframe">, "src" | "title" | "
 type AmosCreditCardPaymentMethodFormProps = IframePassthroughProps & {
     renderToken: string;
     appearance?: Appearance;
-    onPaymentIntentConfirmationSucceeded?: (paymentIntent: components["schemas"]["PaymentIntent"]) => void;
-    onSetupIntentConfirmationSucceeded?: (setupIntent: components["schemas"]["SetupIntent"]) => void;
-    onConfirmationFailed: (errorMessage: string) => void;
+    onResult: (result: ConfirmationResult) => void;
     additionalFields?: CreditCardAdditionalFields;
     billingAddressRequirement?: BillingAddressRequirement;
 };
-export declare function AmosCreditCardPaymentMethodForm({ ref, renderToken, appearance, onPaymentIntentConfirmationSucceeded, onSetupIntentConfirmationSucceeded, onConfirmationFailed, additionalFields, billingAddressRequirement, style, ...rest }: AmosCreditCardPaymentMethodFormProps): import("react").JSX.Element;
+export declare function AmosCreditCardPaymentMethodForm({ ref, renderToken, appearance, onResult, additionalFields, billingAddressRequirement, style, ...rest }: AmosCreditCardPaymentMethodFormProps): import("react").JSX.Element;
 type AmosBankAccountPaymentMethodFormProps = IframePassthroughProps & {
     renderToken: string;
     appearance?: Appearance;
-    onPaymentIntentConfirmationSucceeded?: (paymentIntent: components["schemas"]["PaymentIntent"]) => void;
-    onSetupIntentConfirmationSucceeded?: (setupIntent: components["schemas"]["SetupIntent"]) => void;
-    onConfirmationFailed: (errorMessage: string) => void;
+    onResult: (result: ConfirmationResult) => void;
     billingAddressRequirement?: BillingAddressRequirement;
 };
-export declare function AmosBankAccountPaymentMethodForm({ ref, renderToken, appearance, onPaymentIntentConfirmationSucceeded, onSetupIntentConfirmationSucceeded, onConfirmationFailed, billingAddressRequirement, style, ...rest }: AmosBankAccountPaymentMethodFormProps): import("react").JSX.Element;
+export declare function AmosBankAccountPaymentMethodForm({ ref, renderToken, appearance, onResult, billingAddressRequirement, style, ...rest }: AmosBankAccountPaymentMethodFormProps): import("react").JSX.Element;
 type AmosGooglePayButtonProps = IframePassthroughProps & {
     renderToken: string;
     amount: string;
@@ -62,10 +58,9 @@ type AmosGooglePayButtonProps = IframePassthroughProps & {
         paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
         customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
     }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
-    onPaymentIntentConfirmationSucceeded: (paymentIntent: components["schemas"]["PaymentIntent"]) => void;
-    onConfirmationFailed: (errorMessage: string) => void;
+    onResult: (result: ConfirmationResult) => void;
 };
-export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onPaymentIntentConfirmationSucceeded, onConfirmationFailed, style, ...rest }: AmosGooglePayButtonProps): import("react").JSX.Element;
+export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, style, ...rest }: AmosGooglePayButtonProps): import("react").JSX.Element;
 type AmosApplePayButtonProps = IframePassthroughProps & {
     renderToken: string;
     amount: string;
@@ -75,7 +70,6 @@ type AmosApplePayButtonProps = IframePassthroughProps & {
         paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
         customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
     }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
-    onPaymentIntentConfirmationSucceeded: (paymentIntent: components["schemas"]["PaymentIntent"]) => void;
-    onConfirmationFailed: (errorMessage: string) => void;
+    onResult: (result: ConfirmationResult) => void;
 };
-export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onPaymentIntentConfirmationSucceeded, onConfirmationFailed, style, ...rest }: AmosApplePayButtonProps): import("react").JSX.Element;
+export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, style, ...rest }: AmosApplePayButtonProps): import("react").JSX.Element;

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@amos.com/amos-js"),t=require("react"),n=require("react/jsx-runtime");function r(e){return e?e.current??null:null}function i({iframeRef:t}){return(0,e.validateForm)({iframe:r(t)})}function a({iframeRef:t,token:n}){(0,e.confirmPaymentIntent)({iframe:r(t),token:n})}function o({iframeRef:t,token:n}){(0,e.confirmSetupIntent)({iframe:r(t),token:n})}function s(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function c(e,{style:t,className:n,id:r,...i}){n!=null&&(e.className=n),r!=null&&(e.id=r),t!=null&&Object.assign(e.style,t);for(let[t,n]of Object.entries(i))n!=null&&(t in e?Reflect.set(e,t,n):e.setAttribute(t,String(n)))}function l({containerRef:e,iframeRef:n,mount:r,options:i,remountDeps:a,iframePassthrough:o,updateDeps:l}){let u=(0,t.useRef)(null);(0,t.useEffect)(()=>{let t=e.current;if(!t)return;let a=r(t,i);return u.current=a,s(n,a.iframe),c(a.iframe,o),()=>{a.destroy(),u.current=null,s(n,null)}},[...a]),(0,t.useEffect)(()=>{u.current?.update(i)},[...l]),(0,t.useEffect)(()=>{let e=u.current?.iframe;e&&c(e,o)})}function u({ref:r,renderToken:i,appearance:a,onPaymentIntentConfirmationSucceeded:o,onSetupIntentConfirmationSucceeded:s,onConfirmationFailed:c,additionalFields:u={cardholderName:!1},billingAddressRequirement:d=`country`,style:f,...p}){let m=(0,t.useRef)(null);return l({containerRef:m,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:u,billingAddressRequirement:d,onPaymentIntentConfirmationSucceeded:o,onSetupIntentConfirmationSucceeded:s,onConfirmationFailed:c},remountDeps:[i,u.cardholderName,d],iframePassthrough:{style:f,...p},updateDeps:[a,u,d,o,s,c]}),(0,n.jsx)(`div`,{ref:m})}function d({ref:r,renderToken:i,appearance:a,onPaymentIntentConfirmationSucceeded:o,onSetupIntentConfirmationSucceeded:s,onConfirmationFailed:c,billingAddressRequirement:u=`country`,style:d,...f}){let p=(0,t.useRef)(null);return l({containerRef:p,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:u,onPaymentIntentConfirmationSucceeded:o,onSetupIntentConfirmationSucceeded:s,onConfirmationFailed:c},remountDeps:[i,u],iframePassthrough:{style:d,...f},updateDeps:[a,u,o,s,c]}),(0,n.jsx)(`div`,{ref:p})}function f({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onPaymentIntentConfirmationSucceeded:u,onConfirmationFailed:d,style:f,...p}){let m=(0,t.useRef)(null);return l({containerRef:m,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onPaymentIntentConfirmationSucceeded:u,onConfirmationFailed:d},remountDeps:[i],iframePassthrough:{style:f,...p},updateDeps:[a,o,s,c,u,d]}),(0,n.jsx)(`div`,{ref:m})}function p({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onPaymentIntentConfirmationSucceeded:u,onConfirmationFailed:d,style:f,...p}){let m=(0,t.useRef)(null);return l({containerRef:m,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onPaymentIntentConfirmationSucceeded:u,onConfirmationFailed:d},remountDeps:[i],iframePassthrough:{style:f,...p},updateDeps:[a,o,s,c,u,d]}),(0,n.jsx)(`div`,{ref:m})}exports.AmosApplePayButton=p,exports.AmosBankAccountPaymentMethodForm=d,exports.AmosCreditCardPaymentMethodForm=u,exports.AmosGooglePayButton=f,exports.confirmPaymentIntent=a,exports.confirmSetupIntent=o,exports.validateForm=i,Object.keys(e).forEach(function(t){t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@amos.com/amos-js"),t=require("react"),n=require("react/jsx-runtime");function r(e){return e?e.current??null:null}function i({iframeRef:t}){return(0,e.validateForm)({iframe:r(t)})}function a({iframeRef:t,token:n}){(0,e.confirmPaymentIntent)({iframe:r(t),token:n})}function o({iframeRef:t,token:n}){(0,e.confirmSetupIntent)({iframe:r(t),token:n})}function s(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function c(e,{style:t,className:n,id:r,...i}){n!=null&&(e.className=n),r!=null&&(e.id=r),t!=null&&Object.assign(e.style,t);for(let[t,n]of Object.entries(i))n!=null&&(t in e?Reflect.set(e,t,n):e.setAttribute(t,String(n)))}function l({containerRef:e,iframeRef:n,mount:r,options:i,remountDeps:a,iframePassthrough:o,updateDeps:l}){let u=(0,t.useRef)(null);(0,t.useEffect)(()=>{let t=e.current;if(!t)return;let a=r(t,i);return u.current=a,s(n,a.iframe),c(a.iframe,o),()=>{a.destroy(),u.current=null,s(n,null)}},[...a]),(0,t.useEffect)(()=>{u.current?.update(i)},[...l]),(0,t.useEffect)(()=>{let e=u.current?.iframe;e&&c(e,o)})}function u({ref:r,renderToken:i,appearance:a,onResult:o,additionalFields:s={cardholderName:!1},billingAddressRequirement:c=`country`,style:u,...d}){let f=(0,t.useRef)(null);return l({containerRef:f,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:s,billingAddressRequirement:c,onResult:o},remountDeps:[i,s.cardholderName,c],iframePassthrough:{style:u,...d},updateDeps:[a,s,c,o]}),(0,n.jsx)(`div`,{ref:f})}function d({ref:r,renderToken:i,appearance:a,onResult:o,billingAddressRequirement:s=`country`,style:c,...u}){let d=(0,t.useRef)(null);return l({containerRef:d,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:s,onResult:o},remountDeps:[i,s],iframePassthrough:{style:c,...u},updateDeps:[a,s,o]}),(0,n.jsx)(`div`,{ref:d})}function f({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:u,style:d,...f}){let p=(0,t.useRef)(null);return l({containerRef:p,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:u},remountDeps:[i],iframePassthrough:{style:d,...f},updateDeps:[a,o,s,c,u]}),(0,n.jsx)(`div`,{ref:p})}function p({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:u,style:d,...f}){let p=(0,t.useRef)(null);return l({containerRef:p,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:u},remountDeps:[i],iframePassthrough:{style:d,...f},updateDeps:[a,o,s,c,u]}),(0,n.jsx)(`div`,{ref:p})}exports.AmosApplePayButton=p,exports.AmosBankAccountPaymentMethodForm=d,exports.AmosCreditCardPaymentMethodForm=u,exports.AmosGooglePayButton=f,exports.confirmPaymentIntent=a,exports.confirmSetupIntent=o,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

@@ -44,72 +44,64 @@ function g({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i
 		e && h(e, a);
 	});
 }
-function _({ ref: e, renderToken: t, appearance: n, onPaymentIntentConfirmationSucceeded: r, onSetupIntentConfirmationSucceeded: a, onConfirmationFailed: o, additionalFields: s = { cardholderName: !1 }, billingAddressRequirement: u = "country", style: d, ...f }) {
-	let p = c(null);
+function _({ ref: e, renderToken: t, appearance: n, onResult: r, additionalFields: a = { cardholderName: !1 }, billingAddressRequirement: o = "country", style: s, ...u }) {
+	let d = c(null);
 	return g({
-		containerRef: p,
+		containerRef: d,
 		iframeRef: e,
 		mount: i,
 		options: {
 			renderToken: t,
 			appearance: n,
-			additionalFields: s,
-			billingAddressRequirement: u,
-			onPaymentIntentConfirmationSucceeded: r,
-			onSetupIntentConfirmationSucceeded: a,
-			onConfirmationFailed: o
+			additionalFields: a,
+			billingAddressRequirement: o,
+			onResult: r
 		},
 		remountDeps: [
 			t,
-			s.cardholderName,
-			u
+			a.cardholderName,
+			o
 		],
 		iframePassthrough: {
-			style: d,
-			...f
+			style: s,
+			...u
 		},
 		updateDeps: [
 			n,
-			s,
-			u,
-			r,
 			a,
-			o
+			o,
+			r
 		]
-	}), /* @__PURE__ */ l("div", { ref: p });
+	}), /* @__PURE__ */ l("div", { ref: d });
 }
-function v({ ref: e, renderToken: t, appearance: n, onPaymentIntentConfirmationSucceeded: i, onSetupIntentConfirmationSucceeded: a, onConfirmationFailed: o, billingAddressRequirement: s = "country", style: u, ...d }) {
-	let f = c(null);
+function v({ ref: e, renderToken: t, appearance: n, onResult: i, billingAddressRequirement: a = "country", style: o, ...s }) {
+	let u = c(null);
 	return g({
-		containerRef: f,
+		containerRef: u,
 		iframeRef: e,
 		mount: r,
 		options: {
 			renderToken: t,
 			appearance: n,
-			billingAddressRequirement: s,
-			onPaymentIntentConfirmationSucceeded: i,
-			onSetupIntentConfirmationSucceeded: a,
-			onConfirmationFailed: o
+			billingAddressRequirement: a,
+			onResult: i
 		},
-		remountDeps: [t, s],
+		remountDeps: [t, a],
 		iframePassthrough: {
-			style: u,
-			...d
+			style: o,
+			...s
 		},
 		updateDeps: [
 			n,
-			s,
-			i,
 			a,
-			o
+			i
 		]
-	}), /* @__PURE__ */ l("div", { ref: f });
+	}), /* @__PURE__ */ l("div", { ref: u });
 }
-function y({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: i, onInitiatePaymentIntentRequest: o, onPaymentIntentConfirmationSucceeded: s, onConfirmationFailed: u, style: d, ...f }) {
-	let p = c(null);
+function y({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: i, onInitiatePaymentIntentRequest: o, onResult: s, style: u, ...d }) {
+	let f = c(null);
 	return g({
-		containerRef: p,
+		containerRef: f,
 		iframeRef: e,
 		mount: a,
 		options: {
@@ -118,28 +110,26 @@ function y({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: i,
 			merchantName: r,
 			appearance: i,
 			onInitiatePaymentIntentRequest: o,
-			onPaymentIntentConfirmationSucceeded: s,
-			onConfirmationFailed: u
+			onResult: s
 		},
 		remountDeps: [t],
 		iframePassthrough: {
-			style: d,
-			...f
+			style: u,
+			...d
 		},
 		updateDeps: [
 			n,
 			r,
 			i,
 			o,
-			s,
-			u
+			s
 		]
-	}), /* @__PURE__ */ l("div", { ref: p });
+	}), /* @__PURE__ */ l("div", { ref: f });
 }
-function b({ ref: e, renderToken: t, amount: r, merchantName: i, appearance: a, onInitiatePaymentIntentRequest: o, onPaymentIntentConfirmationSucceeded: s, onConfirmationFailed: u, style: d, ...f }) {
-	let p = c(null);
+function b({ ref: e, renderToken: t, amount: r, merchantName: i, appearance: a, onInitiatePaymentIntentRequest: o, onResult: s, style: u, ...d }) {
+	let f = c(null);
 	return g({
-		containerRef: p,
+		containerRef: f,
 		iframeRef: e,
 		mount: n,
 		options: {
@@ -148,23 +138,21 @@ function b({ ref: e, renderToken: t, amount: r, merchantName: i, appearance: a,
 			merchantName: i,
 			appearance: a,
 			onInitiatePaymentIntentRequest: o,
-			onPaymentIntentConfirmationSucceeded: s,
-			onConfirmationFailed: u
+			onResult: s
 		},
 		remountDeps: [t],
 		iframePassthrough: {
-			style: d,
-			...f
+			style: u,
+			...d
 		},
 		updateDeps: [
 			r,
 			i,
 			a,
 			o,
-			s,
-			u
+			s
 		]
-	}), /* @__PURE__ */ l("div", { ref: p });
+	}), /* @__PURE__ */ l("div", { ref: f });
 }
 //#endregion
 export { b as AmosApplePayButton, v as AmosBankAccountPaymentMethodForm, _ as AmosCreditCardPaymentMethodForm, y as AmosGooglePayButton, f as confirmPaymentIntent, p as confirmSetupIntent, d as validateForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/react-amos-js",
-  "version": "0.7.2",
+  "version": "0.9.1",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -36,18 +36,18 @@
   "license": "MIT",
   "description": "React SDK for embedding Amos payment methods via iframes. Wraps @amos.com/amos-js.",
   "devDependencies": {
-    "@biomejs/biome": "2.5.5",
+    "@biomejs/biome": "2.5.7",
     "@changesets/cli": "2.31.1",
-    "@types/node": "26.1.1",
-    "@types/react": "19.2.17",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.18",
     "@typescript/typescript6": "6.0.2",
     "typescript": "7.0.2",
-    "vite": "8.1.5",
+    "vite": "8.2.0",
     "vite-plugin-dts": "5.0.3"
   },
   "dependencies": {
-    "@amos.com/amos-js": "0.7.2",
-    "@amos.com/node": "0.1.33",
+    "@amos.com/amos-js": "0.9.1",
+    "@amos.com/node": "0.1.35",
     "@types/googlepay": "0.7.11"
   },
   "peerDependencies": {

package/src/index.tsx

@@ -6,6 +6,7 @@ import {
   confirmSetupIntent as amosConfirmSetupIntent,
   validateForm as amosValidateForm,
   type BillingAddressRequirement,
+  type ConfirmationResult,
   type CreditCardAdditionalFields,
   mountAmosApplePayButton,
   mountAmosBankAccountPaymentMethodForm,
@@ -181,13 +182,7 @@ function useAmosEmbed<TOptions extends Record<string, unknown>>({
 type AmosCreditCardPaymentMethodFormProps = IframePassthroughProps & {
   renderToken: string;
   appearance?: Appearance;
-  onPaymentIntentConfirmationSucceeded?: (
-    paymentIntent: components["schemas"]["PaymentIntent"],
-  ) => void;
-  onSetupIntentConfirmationSucceeded?: (
-    setupIntent: components["schemas"]["SetupIntent"],
-  ) => void;
-  onConfirmationFailed: (errorMessage: string) => void;
+  onResult: (result: ConfirmationResult) => void;
   additionalFields?: CreditCardAdditionalFields;
   billingAddressRequirement?: BillingAddressRequirement;
 };
@@ -196,9 +191,7 @@ export function AmosCreditCardPaymentMethodForm({
   ref,
   renderToken,
   appearance,
-  onPaymentIntentConfirmationSucceeded,
-  onSetupIntentConfirmationSucceeded,
-  onConfirmationFailed,
+  onResult,
   additionalFields = { cardholderName: false },
   billingAddressRequirement = "country",
   style,
@@ -215,9 +208,7 @@ export function AmosCreditCardPaymentMethodForm({
       appearance,
       additionalFields,
       billingAddressRequirement,
-      onPaymentIntentConfirmationSucceeded,
-      onSetupIntentConfirmationSucceeded,
-      onConfirmationFailed,
+      onResult,
     },
     remountDeps: [
       renderToken,
@@ -229,9 +220,7 @@ export function AmosCreditCardPaymentMethodForm({
       appearance,
       additionalFields,
       billingAddressRequirement,
-      onPaymentIntentConfirmationSucceeded,
-      onSetupIntentConfirmationSucceeded,
-      onConfirmationFailed,
+      onResult,
     ],
   });
 
@@ -241,13 +230,7 @@ export function AmosCreditCardPaymentMethodForm({
 type AmosBankAccountPaymentMethodFormProps = IframePassthroughProps & {
   renderToken: string;
   appearance?: Appearance;
-  onPaymentIntentConfirmationSucceeded?: (
-    paymentIntent: components["schemas"]["PaymentIntent"],
-  ) => void;
-  onSetupIntentConfirmationSucceeded?: (
-    setupIntent: components["schemas"]["SetupIntent"],
-  ) => void;
-  onConfirmationFailed: (errorMessage: string) => void;
+  onResult: (result: ConfirmationResult) => void;
   billingAddressRequirement?: BillingAddressRequirement;
 };
 
@@ -255,9 +238,7 @@ export function AmosBankAccountPaymentMethodForm({
   ref,
   renderToken,
   appearance,
-  onPaymentIntentConfirmationSucceeded,
-  onSetupIntentConfirmationSucceeded,
-  onConfirmationFailed,
+  onResult,
   billingAddressRequirement = "country",
   style,
   ...rest
@@ -272,19 +253,11 @@ export function AmosBankAccountPaymentMethodForm({
       renderToken,
       appearance,
       billingAddressRequirement,
-      onPaymentIntentConfirmationSucceeded,
-      onSetupIntentConfirmationSucceeded,
-      onConfirmationFailed,
+      onResult,
     },
     remountDeps: [renderToken, billingAddressRequirement],
     iframePassthrough: { style, ...rest },
-    updateDeps: [
-      appearance,
-      billingAddressRequirement,
-      onPaymentIntentConfirmationSucceeded,
-      onSetupIntentConfirmationSucceeded,
-      onConfirmationFailed,
-    ],
+    updateDeps: [appearance, billingAddressRequirement, onResult],
   });
 
   return <div ref={containerRef} />;
@@ -302,10 +275,7 @@ type AmosGooglePayButtonProps = IframePassthroughProps & {
     paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
     customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
   }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
-  onPaymentIntentConfirmationSucceeded: (
-    paymentIntent: components["schemas"]["PaymentIntent"],
-  ) => void;
-  onConfirmationFailed: (errorMessage: string) => void;
+  onResult: (result: ConfirmationResult) => void;
 };
 
 export function AmosGooglePayButton({
@@ -315,8 +285,7 @@ export function AmosGooglePayButton({
   merchantName,
   appearance,
   onInitiatePaymentIntentRequest,
-  onPaymentIntentConfirmationSucceeded,
-  onConfirmationFailed,
+  onResult,
   style,
   ...rest
 }: AmosGooglePayButtonProps) {
@@ -332,8 +301,7 @@ export function AmosGooglePayButton({
       merchantName,
       appearance,
       onInitiatePaymentIntentRequest,
-      onPaymentIntentConfirmationSucceeded,
-      onConfirmationFailed,
+      onResult,
     },
     remountDeps: [renderToken],
     iframePassthrough: { style, ...rest },
@@ -342,8 +310,7 @@ export function AmosGooglePayButton({
       merchantName,
       appearance,
       onInitiatePaymentIntentRequest,
-      onPaymentIntentConfirmationSucceeded,
-      onConfirmationFailed,
+      onResult,
     ],
   });
 
@@ -362,10 +329,7 @@ type AmosApplePayButtonProps = IframePassthroughProps & {
     paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
     customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
   }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
-  onPaymentIntentConfirmationSucceeded: (
-    paymentIntent: components["schemas"]["PaymentIntent"],
-  ) => void;
-  onConfirmationFailed: (errorMessage: string) => void;
+  onResult: (result: ConfirmationResult) => void;
 };
 
 export function AmosApplePayButton({
@@ -375,8 +339,7 @@ export function AmosApplePayButton({
   merchantName,
   appearance,
   onInitiatePaymentIntentRequest,
-  onPaymentIntentConfirmationSucceeded,
-  onConfirmationFailed,
+  onResult,
   style,
   ...rest
 }: AmosApplePayButtonProps) {
@@ -392,8 +355,7 @@ export function AmosApplePayButton({
       merchantName,
       appearance,
       onInitiatePaymentIntentRequest,
-      onPaymentIntentConfirmationSucceeded,
-      onConfirmationFailed,
+      onResult,
     },
     remountDeps: [renderToken],
     iframePassthrough: { style, ...rest },
@@ -402,8 +364,7 @@ export function AmosApplePayButton({
       merchantName,
       appearance,
       onInitiatePaymentIntentRequest,
-      onPaymentIntentConfirmationSucceeded,
-      onConfirmationFailed,
+      onResult,
     ],
   });