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

package/README.md

@@ -12,7 +12,7 @@ npm install @amos.com/react-amos-js
 
 ## What it gives you
 
-- React components for the iframe payment method forms: `AmosCreditCardPaymentMethodForm`, `AmosBankAccountPaymentMethodForm`, `AmosGooglePayButton`.
+- 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.
 
@@ -46,7 +46,7 @@ The following flow is for credit card and bank account payment method types only
 
 ### Google Pay
 
-Google Pay (and soon, Apple Pay) is a form of express checkout. The Google Pay button is an alternative to the "Pay now" button in your payment forms. Users can make a payment with either flow.
+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.
 
 The key differences between the express and non-express payment flows are:
 
@@ -416,6 +416,10 @@ Renders the secure Google Pay iframe button (express checkout flow).
 
 **Also accepts:** standard iframe props, minus the ones controlled by the SDK (`src`, `title`, `name`, `role`, `allow`).
 
+### `AmosApplePayButton`
+
+Renders the secure Apple Pay iframe button (express checkout flow). Same props and callbacks as `AmosGooglePayButton`.
+
 ### `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.

package/dist/index.d.ts

@@ -66,3 +66,16 @@ type AmosGooglePayButtonProps = IframePassthroughProps & {
     onConfirmationFailed: (errorMessage: string) => void;
 };
 export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onPaymentIntentConfirmationSucceeded, onConfirmationFailed, style, ...rest }: AmosGooglePayButtonProps): import("react").JSX.Element;
+type AmosApplePayButtonProps = IframePassthroughProps & {
+    renderToken: string;
+    amount: string;
+    merchantName: string;
+    appearance?: Appearance;
+    onInitiatePaymentIntentRequest: ({ paymentIntentCreateAttributes, customerCreateAttributes, }: {
+        paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+        customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+    }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
+    onPaymentIntentConfirmationSucceeded: (paymentIntent: components["schemas"]["PaymentIntent"]) => void;
+    onConfirmationFailed: (errorMessage: string) => void;
+};
+export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onPaymentIntentConfirmationSucceeded, onConfirmationFailed, 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})}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,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]}})});

package/dist/index.mjs

@@ -1,67 +1,67 @@
-import { confirmPaymentIntent as e, confirmSetupIntent as t, mountAmosBankAccountPaymentMethodForm as n, mountAmosCreditCardPaymentMethodForm as r, mountAmosGooglePayButton as i, validateForm as a } from "@amos.com/amos-js";
-import { useEffect as o, useRef as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
+import { confirmPaymentIntent as e, confirmSetupIntent as t, mountAmosApplePayButton as n, mountAmosBankAccountPaymentMethodForm as r, mountAmosCreditCardPaymentMethodForm as i, mountAmosGooglePayButton as a, validateForm as o } from "@amos.com/amos-js";
+import { useEffect as s, useRef as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
 export * from "@amos.com/amos-js";
 //#region src/index.tsx
-function l(e) {
+function u(e) {
 	return e ? e.current ?? null : null;
 }
-function u({ iframeRef: e }) {
-	return a({ iframe: l(e) });
+function d({ iframeRef: e }) {
+	return o({ iframe: u(e) });
 }
-function d({ iframeRef: t, token: n }) {
+function f({ iframeRef: t, token: n }) {
 	e({
-		iframe: l(t),
+		iframe: u(t),
 		token: n
 	});
 }
-function f({ iframeRef: e, token: n }) {
+function p({ iframeRef: e, token: n }) {
 	t({
-		iframe: l(e),
+		iframe: u(e),
 		token: n
 	});
 }
-function p(e, t) {
+function m(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function m(e, { style: t, className: n, id: r, ...i }) {
+function h(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 h({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i, iframePassthrough: a, updateDeps: c }) {
-	let l = s(null);
-	o(() => {
+function g({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i, iframePassthrough: a, updateDeps: o }) {
+	let l = c(null);
+	s(() => {
 		let i = e.current;
 		if (!i) return;
 		let o = n(i, r);
-		return l.current = o, p(t, o.iframe), m(o.iframe, a), () => {
-			o.destroy(), l.current = null, p(t, null);
+		return l.current = o, m(t, o.iframe), h(o.iframe, a), () => {
+			o.destroy(), l.current = null, m(t, null);
 		};
-	}, [...i]), o(() => {
+	}, [...i]), s(() => {
 		l.current?.update(r);
-	}, [...c]), o(() => {
+	}, [...o]), s(() => {
 		let e = l.current?.iframe;
-		e && m(e, a);
+		e && h(e, a);
 	});
 }
-function g({ ref: e, renderToken: t, appearance: n, onPaymentIntentConfirmationSucceeded: i, onSetupIntentConfirmationSucceeded: a, onConfirmationFailed: o, additionalFields: l = { cardholderName: !1 }, billingAddressRequirement: u = "country", style: d, ...f }) {
-	let p = s(null);
-	return h({
+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);
+	return g({
 		containerRef: p,
 		iframeRef: e,
-		mount: r,
+		mount: i,
 		options: {
 			renderToken: t,
 			appearance: n,
-			additionalFields: l,
+			additionalFields: s,
 			billingAddressRequirement: u,
-			onPaymentIntentConfirmationSucceeded: i,
+			onPaymentIntentConfirmationSucceeded: r,
 			onSetupIntentConfirmationSucceeded: a,
 			onConfirmationFailed: o
 		},
 		remountDeps: [
 			t,
-			l.cardholderName,
+			s.cardholderName,
 			u
 		],
 		iframePassthrough: {
@@ -70,55 +70,55 @@ function g({ ref: e, renderToken: t, appearance: n, onPaymentIntentConfirmationS
 		},
 		updateDeps: [
 			n,
-			l,
+			s,
 			u,
-			i,
+			r,
 			a,
 			o
 		]
-	}), /* @__PURE__ */ c("div", { ref: p });
+	}), /* @__PURE__ */ l("div", { ref: p });
 }
-function _({ ref: e, renderToken: t, appearance: r, onPaymentIntentConfirmationSucceeded: i, onSetupIntentConfirmationSucceeded: a, onConfirmationFailed: o, billingAddressRequirement: l = "country", style: u, ...d }) {
-	let f = s(null);
-	return h({
+function v({ ref: e, renderToken: t, appearance: n, onPaymentIntentConfirmationSucceeded: i, onSetupIntentConfirmationSucceeded: a, onConfirmationFailed: o, billingAddressRequirement: s = "country", style: u, ...d }) {
+	let f = c(null);
+	return g({
 		containerRef: f,
 		iframeRef: e,
-		mount: n,
+		mount: r,
 		options: {
 			renderToken: t,
-			appearance: r,
-			billingAddressRequirement: l,
+			appearance: n,
+			billingAddressRequirement: s,
 			onPaymentIntentConfirmationSucceeded: i,
 			onSetupIntentConfirmationSucceeded: a,
 			onConfirmationFailed: o
 		},
-		remountDeps: [t, l],
+		remountDeps: [t, s],
 		iframePassthrough: {
 			style: u,
 			...d
 		},
 		updateDeps: [
-			r,
-			l,
+			n,
+			s,
 			i,
 			a,
 			o
 		]
-	}), /* @__PURE__ */ c("div", { ref: f });
+	}), /* @__PURE__ */ l("div", { ref: f });
 }
-function v({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: a, onInitiatePaymentIntentRequest: o, onPaymentIntentConfirmationSucceeded: l, onConfirmationFailed: u, style: d, ...f }) {
-	let p = s(null);
-	return h({
+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);
+	return g({
 		containerRef: p,
 		iframeRef: e,
-		mount: i,
+		mount: a,
 		options: {
 			renderToken: t,
 			amount: n,
 			merchantName: r,
-			appearance: a,
+			appearance: i,
 			onInitiatePaymentIntentRequest: o,
-			onPaymentIntentConfirmationSucceeded: l,
+			onPaymentIntentConfirmationSucceeded: s,
 			onConfirmationFailed: u
 		},
 		remountDeps: [t],
@@ -129,12 +129,42 @@ function v({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: a,
 		updateDeps: [
 			n,
 			r,
+			i,
+			o,
+			s,
+			u
+		]
+	}), /* @__PURE__ */ l("div", { ref: p });
+}
+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);
+	return g({
+		containerRef: p,
+		iframeRef: e,
+		mount: n,
+		options: {
+			renderToken: t,
+			amount: r,
+			merchantName: i,
+			appearance: a,
+			onInitiatePaymentIntentRequest: o,
+			onPaymentIntentConfirmationSucceeded: s,
+			onConfirmationFailed: u
+		},
+		remountDeps: [t],
+		iframePassthrough: {
+			style: d,
+			...f
+		},
+		updateDeps: [
+			r,
+			i,
 			a,
 			o,
-			l,
+			s,
 			u
 		]
-	}), /* @__PURE__ */ c("div", { ref: p });
+	}), /* @__PURE__ */ l("div", { ref: p });
 }
 //#endregion
-export { _ as AmosBankAccountPaymentMethodForm, g as AmosCreditCardPaymentMethodForm, v as AmosGooglePayButton, d as confirmPaymentIntent, f as confirmSetupIntent, u as validateForm };
+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.4.1",
+  "version": "0.5.0",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "vite-plugin-dts": "5.0.3"
   },
   "dependencies": {
-    "@amos.com/amos-js": "0.4.1",
+    "@amos.com/amos-js": "0.5.0",
     "@amos.com/node": "0.1.31",
     "@types/googlepay": "0.7.11"
   },

package/src/index.tsx

@@ -7,6 +7,7 @@ import {
   validateForm as amosValidateForm,
   type BillingAddressRequirement,
   type CreditCardAdditionalFields,
+  mountAmosApplePayButton,
   mountAmosBankAccountPaymentMethodForm,
   mountAmosCreditCardPaymentMethodForm,
   mountAmosGooglePayButton,
@@ -348,3 +349,63 @@ export function AmosGooglePayButton({
 
   return <div ref={containerRef} />;
 }
+
+type AmosApplePayButtonProps = IframePassthroughProps & {
+  renderToken: string;
+  amount: string;
+  merchantName: string;
+  appearance?: Appearance;
+  onInitiatePaymentIntentRequest: ({
+    paymentIntentCreateAttributes,
+    customerCreateAttributes,
+  }: {
+    paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+  }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
+  onPaymentIntentConfirmationSucceeded: (
+    paymentIntent: components["schemas"]["PaymentIntent"],
+  ) => void;
+  onConfirmationFailed: (errorMessage: string) => void;
+};
+
+export function AmosApplePayButton({
+  ref,
+  renderToken,
+  amount,
+  merchantName,
+  appearance,
+  onInitiatePaymentIntentRequest,
+  onPaymentIntentConfirmationSucceeded,
+  onConfirmationFailed,
+  style,
+  ...rest
+}: AmosApplePayButtonProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useAmosEmbed({
+    containerRef,
+    iframeRef: ref as ForwardedIframeRef,
+    mount: mountAmosApplePayButton,
+    options: {
+      renderToken,
+      amount,
+      merchantName,
+      appearance,
+      onInitiatePaymentIntentRequest,
+      onPaymentIntentConfirmationSucceeded,
+      onConfirmationFailed,
+    },
+    remountDeps: [renderToken],
+    iframePassthrough: { style, ...rest },
+    updateDeps: [
+      amount,
+      merchantName,
+      appearance,
+      onInitiatePaymentIntentRequest,
+      onPaymentIntentConfirmationSucceeded,
+      onConfirmationFailed,
+    ],
+  });
+
+  return <div ref={containerRef} />;
+}