@amos.com/react-amos-js 0.9.14 → 0.9.15

package/README.md

@@ -247,58 +247,109 @@ function CheckoutForm() {
 }
 ```
 
-### Rendering Google Pay within your checkout flow
+### Rendering Google Pay and Apple Pay within your checkout flow
 
 ```tsx
 import { useState } from "react";
-import { AmosGooglePayButton } from "@amos.com/react-amos-js";
+import {
+  AmosApplePayButton,
+  AmosGooglePayButton,
+  type ConfirmationResult,
+} from "@amos.com/react-amos-js";
+import type { components } from "@amos.com/node";
+
+async function createPaymentIntentToken({
+  paymentIntentCreateAttributes,
+  customerCreateAttributes,
+}: {
+  paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+  customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+}): Promise<string> {
+  const response = await fetch("/api/payment-intents", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      customer: customerCreateAttributes,
+      paymentIntent: paymentIntentCreateAttributes,
+    }),
+  });
+  if (!response.ok) {
+    throw new Error("Failed to create payment intent.");
+  }
+  const { token } = (await response.json()) as { token: string };
+  return token;
+}
 
-function CheckoutGooglePay() {
+function CheckoutWallets({ renderToken }: { renderToken: string }) {
   const [error, setError] = useState<string | null>(null);
 
+  function handleResult(result: ConfirmationResult) {
+    if (result.status === "succeeded") {
+      console.log("Confirm returned:", result);
+    } else if (result.status === "failed") {
+      setError(result.errorMessage);
+    } else if (result.status === "incomplete") {
+      console.log("Recoverable:", result.reason);
+    }
+  }
+
   return (
     <>
-      <AmosGooglePayButton
-        renderToken="the-render-token-that-you-created-on-dashboard.amos.com"
-        amount="5000" // $50.00 in cents, as a string
-        merchantName="your-user-facing-merchant-name"
-        onInitiatePaymentIntentRequest={async ({
-          paymentIntentCreateAttributes,
-          customerCreateAttributes,
-        }) => {
-          const response = await fetch("/api/payment-intents", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              customer: customerCreateAttributes,
-              paymentIntent: paymentIntentCreateAttributes,
-            }),
-          });
-
-          if (!response.ok) {
-            throw new Error("Failed to create payment intent.");
-          }
-
-          const { token } = await response.json();
-          return token;
-        }}
-        onResult={(result) => {
-          if (result.status === "succeeded") {
-            console.log("Confirm returned:", result);
-          } else if (result.status === "failed") {
-            console.error("Confirm failed:", result.errorMessage);
-          } else if (result.status === "incomplete") {
-            console.log("Recoverable:", result.reason);
-          }
-        }}
-      />
-      {error ? <p>{error}</p> : null}
+      <div style={{ display: "flex", gap: "12px" }}>
+        <div style={{ flex: "1 1 0", minWidth: 0 }}>
+          <AmosGooglePayButton
+            renderToken={renderToken}
+            amount="50.00"
+            merchantName="Example Store"
+            onInitiatePaymentIntentRequest={createPaymentIntentToken}
+            onResult={handleResult}
+          />
+        </div>
+        <div style={{ flex: "1 1 0", minWidth: 0 }}>
+          <AmosApplePayButton
+            renderToken={renderToken}
+            amount="50.00"
+            merchantName="Example Store"
+            onInitiatePaymentIntentRequest={createPaymentIntentToken}
+            onResult={handleResult}
+          />
+        </div>
+      </div>
+      {error ? <p role="alert">{error}</p> : null}
     </>
   );
 }
 ```
 
-`AmosApplePayButton` uses the same props and express-checkout callbacks. Drop it in the same place (or alongside Google Pay) with the same `amount`, `merchantName`, and `onInitiatePaymentIntentRequest` wiring. On Safari, the native payment sheet is used; 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 on your page with a **Cancel payment** button.
+Do not call `validateForm` or `confirmPaymentIntent` — return the embed token from `onInitiatePaymentIntentRequest` and the SDK confirms. Size the mount slot; omitted `buttonProps` keep paint defaults and fill the iframe.
+
+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**.
+
+Optional visuals:
+
+```tsx
+<AmosGooglePayButton
+  renderToken={renderToken}
+  amount="50.00"
+  merchantName="Example Store"
+  height="48px"
+  buttonProps={{ buttonType: "donate", buttonBorderType: "no_border" }}
+  iframeProps={{ style: { borderRadius: "8px" } }}
+  onInitiatePaymentIntentRequest={createPaymentIntentToken}
+  onResult={handleResult}
+/>
+
+<AmosApplePayButton
+  renderToken={renderToken}
+  amount="50.00"
+  merchantName="Example Store"
+  height="48px"
+  buttonProps={{ type: "donate" }}
+  iframeProps={{ style: { borderRadius: "8px" } }}
+  onInitiatePaymentIntentRequest={createPaymentIntentToken}
+  onResult={handleResult}
+/>
+```
 
 ### Saving a payment method with setup intent (credit card)
 
@@ -454,7 +505,7 @@ Renders the secure Google Pay iframe button (express checkout flow).
 **Required props:**
 
 - `renderToken` (`string`)
-- `amount` (`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`)
 - `onInitiatePaymentIntentRequest` (callback receiving `{ paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"]; customerCreateAttributes: components["schemas"]["CreateCustomerInput"] }`, returns `Promise<components["schemas"]["EmbedToken"]["token"]>` — the embed JWT string for confirmation)
 
@@ -521,7 +572,7 @@ Re-exports of the same advanced helpers exposed by `@amos.com/amos-js`. Most int
 - **`ref` / `iframeRef`**: for card and bank forms, pass `ref={iframeRef}` to the form component. The same `iframeRef` must be used when calling `validateForm`, `confirmPaymentIntent`, `confirmSetupIntent`, or `resetForm`. The component forwards the ref to the inner iframe.
 - **`onResult` is not settlement proof**: `onResult` tells you when to stop waiting (e.g. dismiss a spinner). Verify payment or setup success on your backend via webhooks. On `status: "incomplete"`, unlock your UI — the customer can fix fields in the iframe and retry. Use `result.reason` (`"field_errors"` or `"validation_failed"`) to distinguish recoverable states.
 - **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`).
+- **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 `onInitiatePaymentIntentRequest`), `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

@@ -74,6 +74,11 @@ export declare function AmosBankAccountPaymentMethodForm({ ref, renderToken, app
 type AmosGooglePayButtonProps = {
     ref?: ForwardedIframeRef;
     renderToken: string;
+    /**
+     * Major-currency decimal string shown in the Google Pay sheet
+     * (e.g. `"50.00"` for $50.00). Converted to cents in
+     * `paymentIntentCreateAttributes.amount`.
+     */
     amount: string;
     merchantName: string;
     /**
@@ -100,6 +105,11 @@ export declare function AmosGooglePayButton({ ref, renderToken, amount, merchant
 type AmosApplePayButtonProps = {
     ref?: ForwardedIframeRef;
     renderToken: string;
+    /**
+     * Major-currency decimal string shown in the Apple Pay sheet
+     * (e.g. `"50.00"` for $50.00). Converted to cents in
+     * `paymentIntentCreateAttributes.amount`.
+     */
     amount: string;
     merchantName: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/react-amos-js",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -48,7 +48,7 @@
     "vite-plugin-dts": "5.0.3"
   },
   "dependencies": {
-    "@amos.com/amos-js": "0.9.15",
+    "@amos.com/amos-js": "0.9.16",
     "@types/googlepay": "0.7.11"
   },
   "peerDependencies": {

package/src/index.tsx

@@ -295,6 +295,11 @@ export function AmosBankAccountPaymentMethodForm({
 type AmosGooglePayButtonProps = {
   ref?: ForwardedIframeRef;
   renderToken: string;
+  /**
+   * Major-currency decimal string shown in the Google Pay sheet
+   * (e.g. `"50.00"` for $50.00). Converted to cents in
+   * `paymentIntentCreateAttributes.amount`.
+   */
   amount: string;
   merchantName: string;
   /**
@@ -365,6 +370,11 @@ export function AmosGooglePayButton({
 type AmosApplePayButtonProps = {
   ref?: ForwardedIframeRef;
   renderToken: string;
+  /**
+   * Major-currency decimal string shown in the Apple Pay sheet
+   * (e.g. `"50.00"` for $50.00). Converted to cents in
+   * `paymentIntentCreateAttributes.amount`.
+   */
   amount: string;
   merchantName: string;
   /**