@amos.com/react-amos-js 0.5.0 → 0.6.1

package/README.md

@@ -1,6 +1,6 @@
 # Amos React SDK
 
-`@amos.com/react-amos-js` is the React SDK for embedding Amos payment methods (credit card, bank account, Google Pay) into your React app via secure iframes.
+`@amos.com/react-amos-js` is the React SDK for embedding Amos payment methods (credit card, bank account, Google Pay, Apple Pay) into your React app via secure iframes.
 
 It is a thin wrapper around [`@amos.com/amos-js`](../amos-js) that adapts the framework-agnostic iframe controller to idiomatic React components and hooks.
 
@@ -14,7 +14,7 @@ npm install @amos.com/react-amos-js
 
 - React components for the iframe payment method forms: `AmosCreditCardPaymentMethodForm`, `AmosBankAccountPaymentMethodForm`, `AmosGooglePayButton`, `AmosApplePayButton`.
 - React-flavoured iframe message helpers that accept a React `ref`: `validateForm({ iframeRef })`, `confirmPaymentIntent({ iframeRef, token })`, `confirmSetupIntent({ iframeRef, token })`.
-- Re-exports of the `@amos.com/amos-js` helpers and types that come up in client code: `createMessage`, `decodeJwt`, `getEmbedOrigin`, `formatGooglePayPaymentData`, `FormattedGooglePayPaymentData`, `Appearance`, `Message`, etc.
+- Re-exports of the `@amos.com/amos-js` helpers and types that come up in client code: `createMessage`, `decodeJwt`, `getEmbedOrigin`, `hasNativeApplePaySession`, `formatGooglePayPaymentData`, `FormattedGooglePayPaymentData`, `Appearance`, `Message`, etc.
 
 > **Note:** A server-side SDK (for example `@amos.com/node`) must be used alongside `@amos.com/react-amos-js` for end-to-end payment processing. `@amos.com/react-amos-js` is the client-side half.
 
@@ -44,7 +44,7 @@ The following flow is for credit card and bank account payment method types only
 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`.
 
-### Google Pay
+### Google Pay & Apple Pay
 
 Google Pay and Apple Pay are forms of express checkout. Their buttons are alternatives to the "Pay now" button in your payment forms. Users can make a payment with either flow.
 
@@ -74,7 +74,7 @@ Why this matters:
 - Raw payment details are submitted from the iframe directly to Amos-controlled infrastructure.
 - Your backend only creates payment intents (or setup intents) and returns a short-lived token used to continue the iframe flow.
 - `confirmPaymentIntent` / `confirmSetupIntent` sends the token back to the iframe to complete confirmation; it does not pass full payment method payloads through your app server.
-- In express flows (e.g. Google Pay), the iframe component handles payment data exchange and only asks your server to create a payment intent token.
+- In express flows (Google Pay / Apple Pay), the iframe component handles payment data exchange and only asks your server to create a payment intent token.
 
 In short, your app orchestrates the payment flow, while sensitive payment data stays within Amos-controlled components and APIs.
 
@@ -262,6 +262,8 @@ function CheckoutGooglePay() {
 }
 ```
 
+`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 mount, the SDK tells the iframe whether the host has a native `ApplePaySession` (Safari); when it does not, the SDK may temporarily expand the iframe full-viewport for Chrome's QR handoff UI.
+
 ### Saving a payment method with setup intent (credit card)
 
 ```tsx
@@ -420,6 +422,8 @@ Renders the secure Google Pay iframe button (express checkout flow).
 
 Renders the secure Apple Pay iframe button (express checkout flow). Same props and callbacks as `AmosGooglePayButton`.
 
+Only Amos domains need Apple merchant registration. During the `IFRAME_READY` handshake, the SDK sends `UPDATE_NATIVE_APPLE_PAY_SESSION` with `hasNativeApplePaySession` (whether the host page exposes a native `ApplePaySession`, typically Safari). When that is `false`, non-Safari browsers load Apple's SDK inside the embed iframe and may send `EXPAND_IFRAME` so Chrome's in-iframe QR handoff UI is not clipped; `COLLAPSE_IFRAME` restores the button-sized layout. Merchants do not need to call `hasNativeApplePaySession` / `updateNativeApplePaySession` or handle expand/collapse themselves — `AmosApplePayButton` does this automatically via the re-exported `@amos.com/amos-js` protocol.
+
 ### `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.
@@ -430,9 +434,9 @@ Transforms Google Pay payment data into an Amos-compatible `paymentMethod` paylo
 
 **Returns:** `FormattedGooglePayPaymentData` — the `paymentMethod` field is typed for embed confirm endpoints, so no extra type assertions are needed at call sites.
 
-### `createMessage(message)` / `decodeJwt(token)` / `getEmbedOrigin(renderToken)`
+### `createMessage(message)` / `decodeJwt(token)` / `getEmbedOrigin(renderToken)` / `hasNativeApplePaySession()`
 
-Re-exports of the same advanced helpers exposed by `@amos.com/amos-js`. Most integrators do not need to call these directly.
+Re-exports of the same advanced helpers exposed by `@amos.com/amos-js`. Most integrators do not need to call these directly. `hasNativeApplePaySession` reports whether the host page has a native `ApplePaySession` (Safari); `AmosApplePayButton` already uses it during the iframe handshake.
 
 ### Exported types
 
@@ -442,7 +446,8 @@ 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`, 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.
-- **Amount format**: for `AmosGooglePayButton`, `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 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 iframe overlay**: on browsers without a native `ApplePaySession` (e.g. Chrome), the SDK may expand the Apple Pay iframe to a full-viewport overlay for QR handoff. Do not clip the iframe in an overflow-hidden container that would prevent that expand, and avoid competing fixed overlays at a higher z-index. During expand, the SDK sets the iframe to `position: fixed` covering the viewport and hides `document.body` overflow.
 - **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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/react-amos-js",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -40,14 +40,14 @@
     "@changesets/cli": "2.31.1",
     "@types/node": "26.1.1",
     "@types/react": "19.2.17",
-    "typescript": "7.0.2",
     "@typescript/typescript6": "6.0.2",
+    "typescript": "7.0.2",
     "vite": "8.1.5",
     "vite-plugin-dts": "5.0.3"
   },
   "dependencies": {
-    "@amos.com/amos-js": "0.5.0",
-    "@amos.com/node": "0.1.31",
+    "@amos.com/amos-js": "0.6.1",
+    "@amos.com/node": "0.1.32",
     "@types/googlepay": "0.7.11"
   },
   "peerDependencies": {