@amos.com/amos-js 0.9.9 → 0.9.11

package/dist/index.mjs

@@ -85,41 +85,82 @@ function i(e) {
 //#endregion
 //#region src/types.ts
 function a(e) {
+	if (!e || typeof e != "object") return;
+	let t = {};
+	for (let [n, r] of Object.entries(e)) {
+		if (typeof r == "string") {
+			if (r.length === 0) continue;
+			t[n] = r;
+			continue;
+		}
+		typeof r == "number" && Number.isFinite(r) && (t[n] = r);
+	}
+	return Object.keys(t).length > 0 ? t : void 0;
+}
+function o(e) {
+	let t = {};
+	if (e.buttonstyle !== void 0 && (t.buttonstyle = e.buttonstyle), e.type !== void 0 && (t.type = e.type), e.locale !== void 0 && (t.locale = e.locale), e.style !== void 0) {
+		let n = a(e.style);
+		n && (t.style = n);
+	}
+	return t;
+}
+function s(e) {
+	let t = {};
+	if (e.buttonType !== void 0 && (t.buttonType = e.buttonType), e.buttonColor !== void 0 && (t.buttonColor = e.buttonColor), e.buttonRadius !== void 0 && (t.buttonRadius = e.buttonRadius), e.buttonSizeMode !== void 0 && (t.buttonSizeMode = e.buttonSizeMode), e.buttonLocale !== void 0 && (t.buttonLocale = e.buttonLocale), e.buttonBorderType !== void 0 && (t.buttonBorderType = e.buttonBorderType), e.style !== void 0) {
+		let n = a(e.style);
+		n && (t.style = n);
+	}
+	return t;
+}
+function c(e) {
 	return e;
 }
 //#endregion
 //#region src/messaging.ts
-function o(e) {
+function l(e) {
 	return new URL(e.src).origin;
 }
-function s(e) {
-	e?.contentWindow && e.contentWindow.postMessage(a({ type: "PARENT_ACKNOWLEDGED_IFRAME_READY" }), o(e));
+function u(e) {
+	e?.contentWindow && e.contentWindow.postMessage(c({ type: "PARENT_ACKNOWLEDGED_IFRAME_READY" }), l(e));
 }
-function c({ iframe: e, appearance: t = {} }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function d({ iframe: e, appearance: t = {} }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
 		type: "UPDATE_APPEARANCE",
 		appearance: t
-	}), o(e));
-}
-function l({ iframe: e, amount: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+	}), l(e));
+}
+function f({ iframe: e, props: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
+		type: "UPDATE_APPLE_PAY_BUTTON",
+		props: o(t)
+	}), l(e));
+}
+function p({ iframe: e, props: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
+		type: "UPDATE_GOOGLE_PAY_BUTTON",
+		props: s(t)
+	}), l(e));
+}
+function m({ iframe: e, amount: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
 		type: "UPDATE_AMOUNT",
 		amount: t
-	}), o(e));
+	}), l(e));
 }
-function u({ iframe: e, merchantName: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function h({ iframe: e, merchantName: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
 		type: "UPDATE_MERCHANT_NAME",
 		merchantName: t
-	}), o(e));
+	}), l(e));
 }
-function d({ iframe: e }) {
+function g({ iframe: e }) {
 	let t = crypto.randomUUID();
 	return new Promise((n) => {
-		e?.contentWindow && e.contentWindow.postMessage(a({
+		e?.contentWindow && e.contentWindow.postMessage(c({
 			type: "VALIDATE_FORM",
 			requestId: t
-		}), o(e));
+		}), l(e));
 		let r = setTimeout(() => {
 			window.removeEventListener("message", i), n(!1);
 		}, 5e3);
@@ -129,71 +170,77 @@ function d({ iframe: e }) {
 		window.addEventListener("message", i);
 	});
 }
-function f({ iframe: e }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({ type: "RESET_FORM" }), o(e));
+function _({ iframe: e }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({ type: "RESET_FORM" }), l(e));
 }
-function p({ iframe: e, token: t }) {
+function v({ iframe: e, token: t }) {
 	if (!e?.contentWindow) return;
 	let { payment_intent_id: n } = r(t).payload;
-	e.contentWindow.postMessage(a({
+	e.contentWindow.postMessage(c({
 		type: "CONFIRM_PAYMENT_INTENT",
 		token: t,
 		id: n ?? void 0
-	}), o(e));
+	}), l(e));
 }
-function m({ iframe: e, token: t }) {
+function y({ iframe: e, token: t }) {
 	if (!e?.contentWindow) return;
 	let { setup_intent_id: n } = r(t).payload;
-	e.contentWindow.postMessage(a({
+	e.contentWindow.postMessage(c({
 		type: "CONFIRM_SETUP_INTENT",
 		token: t,
 		id: n ?? void 0
-	}), o(e));
+	}), l(e));
 }
-function h({ iframe: e, result: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function b({ iframe: e, result: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(c({
 		type: "CONFIRMATION_RESULT",
 		result: t
-	}), o(e));
+	}), l(e));
 }
 //#endregion
 //#region src/apple-pay.ts
-function g(e) {
+function x(e) {
 	return `${i(e)}/iframe/apple-pay?token=${e}`;
 }
-function _() {
+function S() {
 	return "40px";
 }
-function v(e) {
-	e.contentWindow?.postMessage(a({ type: "APPLE_PAY_CANCEL" }), o(e));
+function C(e) {
+	e.contentWindow?.postMessage(c({ type: "APPLE_PAY_CANCEL" }), l(e));
 }
-function y(e, r) {
+function w(e, r) {
 	let i = { ...r };
 	function a() {
-		l({
+		m({
 			iframe: e,
 			amount: i.amount
 		});
 	}
 	function o() {
-		u({
+		h({
 			iframe: e,
 			merchantName: i.merchantName
 		});
 	}
-	function d(r) {
+	function s() {
+		f({
+			iframe: e,
+			props: i
+		});
+	}
+	function c(r) {
 		if (r.source === e.contentWindow) switch (r.data.type) {
 			case "IFRAME_READY":
-				s(e), c({
+				u(e), d({
 					iframe: e,
 					appearance: i.appearance
-				}), a(), o();
+				}), a(), o(), s();
 				break;
 			case "UPDATE_HEIGHT":
 				i.onHeightChange?.(r.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				c({
+				d({
 					iframe: e,
 					appearance: r.data.appearance
 				});
@@ -203,7 +250,7 @@ function y(e, r) {
 				break;
 			case "APPLE_PAY_WINDOW_OPEN":
 				t({ onCancel: () => {
-					v(e), n();
+					C(e), n();
 				} });
 				break;
 			case "APPLE_PAY_WINDOW_CLOSE":
@@ -214,7 +261,7 @@ function y(e, r) {
 					paymentIntentCreateAttributes: r.data.paymentIntentCreateAttributes,
 					customerCreateAttributes: r.data.customerCreateAttributes
 				}).then((t) => {
-					p({
+					v({
 						iframe: e,
 						token: t
 					});
@@ -228,57 +275,63 @@ function y(e, r) {
 			case "CONFIRMATION_RESULT": n(), i.onResult(r.data.result);
 		}
 	}
-	return window.addEventListener("message", d), {
+	return window.addEventListener("message", c), {
 		update(t) {
-			let n = "appearance" in t, r = "amount" in t, s = "merchantName" in t;
+			let n = "appearance" in t, r = "amount" in t, c = "merchantName" in t, l = "buttonstyle" in t || "type" in t || "locale" in t || "style" in t;
 			i = {
 				...i,
 				...t
-			}, n && c({
+			}, n && d({
 				iframe: e,
 				appearance: i.appearance
-			}), r && a(), s && o();
+			}), r && a(), c && o(), l && s();
 		},
 		destroy() {
-			window.removeEventListener("message", d), n();
+			window.removeEventListener("message", c), n();
 		}
 	};
 }
 //#endregion
 //#region src/google-pay.ts
-function b(e) {
+function T(e) {
 	return `${i(e)}/iframe/google-pay?token=${e}`;
 }
-function x() {
+function E() {
 	return "40px";
 }
-function S(e, t) {
+function D(e, t) {
 	let n = { ...t };
 	function r() {
-		l({
+		m({
 			iframe: e,
 			amount: n.amount
 		});
 	}
 	function i() {
-		u({
+		h({
 			iframe: e,
 			merchantName: n.merchantName
 		});
 	}
-	function a(t) {
+	function a() {
+		p({
+			iframe: e,
+			props: n
+		});
+	}
+	function o(t) {
 		if (t.source === e.contentWindow) switch (t.data.type) {
 			case "IFRAME_READY":
-				s(e), c({
+				u(e), d({
 					iframe: e,
 					appearance: n.appearance
-				}), r(), i();
+				}), r(), i(), a();
 				break;
 			case "UPDATE_HEIGHT":
 				n.onHeightChange?.(t.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				c({
+				d({
 					iframe: e,
 					appearance: t.data.appearance
 				});
@@ -291,7 +344,7 @@ function S(e, t) {
 					paymentIntentCreateAttributes: t.data.paymentIntentCreateAttributes,
 					customerCreateAttributes: t.data.customerCreateAttributes
 				}).then((t) => {
-					p({
+					v({
 						iframe: e,
 						token: t
 					});
@@ -305,23 +358,23 @@ function S(e, t) {
 			case "CONFIRMATION_RESULT": n.onResult(t.data.result);
 		}
 	}
-	return window.addEventListener("message", a), {
+	return window.addEventListener("message", o), {
 		update(t) {
-			let a = "appearance" in t, o = "amount" in t, s = "merchantName" in t;
+			let o = "appearance" in t, s = "amount" in t, c = "merchantName" in t, l = "buttonType" in t || "buttonColor" in t || "buttonRadius" in t || "buttonSizeMode" in t || "buttonLocale" in t || "buttonBorderType" in t || "style" in t;
 			n = {
 				...n,
 				...t
-			}, a && c({
+			}, o && d({
 				iframe: e,
 				appearance: n.appearance
-			}), o && r(), s && i();
+			}), s && r(), c && i(), l && a();
 		},
 		destroy() {
-			window.removeEventListener("message", a);
+			window.removeEventListener("message", o);
 		}
 	};
 }
-function C({ paymentData: e }) {
+function O({ paymentData: e }) {
 	return { paymentMethod: {
 		type: "googlepay",
 		billing_address_attributes: {
@@ -340,14 +393,14 @@ function C({ paymentData: e }) {
 }
 //#endregion
 //#region src/payment-method-form.ts
-var w = {
+var k = {
 	country: 212,
 	full: 452
-}, T = 80, E = {
+}, A = 80, j = {
 	country: 400,
 	full: 640
 };
-function D(e, t = { cardholderName: !1 }, n = "country") {
+function M(e, t = { cardholderName: !1 }, n = "country") {
 	let r = Object.entries(t).filter(([, e]) => e).map(([e]) => e).join(","), a = new URLSearchParams({
 		token: e,
 		additionalFields: r,
@@ -355,25 +408,25 @@ function D(e, t = { cardholderName: !1 }, n = "country") {
 	});
 	return `${i(e)}/iframe/card?${a}`;
 }
-function O(e, t = "country") {
+function N(e, t = "country") {
 	let n = new URLSearchParams({
 		token: e,
 		billingAddressRequirement: t
 	});
 	return `${i(e)}/iframe/bank?${n}`;
 }
-function k(e = { cardholderName: !1 }, t = "country") {
-	return `${(w[t] ?? w.country) + (e.cardholderName ? T : 0)}px`;
+function P(e = { cardholderName: !1 }, t = "country") {
+	return `${(k[t] ?? k.country) + (e.cardholderName ? A : 0)}px`;
 }
-function A(e = "country") {
-	return `${E[e] ?? E.country}px`;
+function F(e = "country") {
+	return `${j[e] ?? j.country}px`;
 }
-function j(e, t) {
+function I(e, t) {
 	let n = { ...t };
 	function r(t) {
 		if (t.source === e.contentWindow) switch (t.data.type) {
 			case "IFRAME_READY":
-				s(e), c({
+				u(e), d({
 					iframe: e,
 					appearance: n.appearance
 				});
@@ -382,7 +435,7 @@ function j(e, t) {
 				n.onHeightChange?.(t.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				c({
+				d({
 					iframe: e,
 					appearance: t.data.appearance
 				});
@@ -390,6 +443,9 @@ function j(e, t) {
 			case "UPDATED_APPEARANCE":
 				n.onAppearanceReady?.();
 				break;
+			case "FORM_VALIDITY_CHANGE":
+				n.onValidityChange?.({ isValid: t.data.isValid });
+				break;
 			case "CONFIRMATION_RESULT": n.onResult(t.data.result);
 		}
 	}
@@ -399,7 +455,7 @@ function j(e, t) {
 			n = {
 				...n,
 				...t
-			}, r && c({
+			}, r && d({
 				iframe: e,
 				appearance: n.appearance
 			});
@@ -411,7 +467,7 @@ function j(e, t) {
 }
 //#endregion
 //#region src/mount.ts
-function M(e) {
+function L(e) {
 	if (typeof e == "string") {
 		let t = document.querySelector(e);
 		if (!(t instanceof HTMLElement)) throw Error(`[amos-js] Container "${e}" did not match any HTMLElement.`);
@@ -419,26 +475,26 @@ function M(e) {
 	}
 	return e;
 }
-var N = {
+var R = {
 	width: "calc(100% + 8px)",
 	transition: "opacity 150ms ease-in, height 200ms ease-in-out",
 	margin: "0 -4px",
 	opacity: "0",
 	border: "0"
 };
-function P({ src: e, title: t, name: n, height: r, allow: i }) {
+function z({ src: e, title: t, name: n, height: r, allow: i }) {
 	let a = document.createElement("iframe");
-	return a.src = e, a.title = t, a.name = n, a.setAttribute("role", "presentation"), a.scrolling = "no", i && (a.allow = i), Object.assign(a.style, N, { height: r }), a;
+	return a.src = e, a.title = t, a.name = n, a.setAttribute("role", "presentation"), a.scrolling = "no", i && (a.allow = i), Object.assign(a.style, R, { height: r }), a;
 }
-function F(e, t) {
-	let n = M(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t, s = P({
-		src: D(r, i, a),
+function B(e, t) {
+	let n = L(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t, s = z({
+		src: M(r, i, a),
 		title: "Secure credit card payment method form powered by Amos",
 		name: "amos-credit-card-payment-method-form",
-		height: k(i, a)
+		height: P(i, a)
 	});
 	n.appendChild(s);
-	let c = j(s, {
+	let c = I(s, {
 		...o,
 		onHeightChange: (e) => {
 			s.style.height = e, o.onHeightChange?.(e);
@@ -455,15 +511,15 @@ function F(e, t) {
 		}
 	};
 }
-function I(e, t) {
-	let n = M(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t, o = P({
-		src: O(r, i),
+function V(e, t) {
+	let n = L(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t, o = z({
+		src: N(r, i),
 		title: "Secure bank account payment method form powered by Amos",
 		name: "amos-bank-account-payment-method-form",
-		height: A(i)
+		height: F(i)
 	});
 	n.appendChild(o);
-	let s = j(o, {
+	let s = I(o, {
 		...a,
 		onHeightChange: (e) => {
 			o.style.height = e, a.onHeightChange?.(e);
@@ -480,16 +536,16 @@ function I(e, t) {
 		}
 	};
 }
-function L(e, t) {
-	let n = M(e), { renderToken: r, ...i } = t, a = P({
-		src: b(r),
+function H(e, t) {
+	let n = L(e), { renderToken: r, ...i } = t, a = z({
+		src: T(r),
 		title: "Secure Google Pay button powered by Amos",
 		name: "amos-google-pay-button",
-		height: x(),
+		height: E(),
 		allow: "payment"
 	});
 	n.appendChild(a);
-	let o = S(a, {
+	let o = D(a, {
 		...i,
 		onHeightChange: (e) => {
 			a.style.height = e, i.onHeightChange?.(e);
@@ -506,16 +562,16 @@ function L(e, t) {
 		}
 	};
 }
-function R(e, t) {
-	let n = M(e), { renderToken: r, ...i } = t, a = P({
-		src: g(r),
+function U(e, t) {
+	let n = L(e), { renderToken: r, ...i } = t, a = z({
+		src: x(r),
 		title: "Secure Apple Pay button powered by Amos",
 		name: "amos-apple-pay-button",
-		height: _(),
+		height: S(),
 		allow: "payment"
 	});
 	n.appendChild(a);
-	let o = y(a, {
+	let o = w(a, {
 		...i,
 		onHeightChange: (e) => {
 			a.style.height = e, i.onHeightChange?.(e);
@@ -533,4 +589,4 @@ function R(e, t) {
 	};
 }
 //#endregion
-export { y as attachApplePayButtonListeners, S as attachGooglePayButtonListeners, j as attachPaymentMethodFormListeners, p as confirmPaymentIntent, m as confirmSetupIntent, a as createMessage, r as decodeJwt, C as formatGooglePayPaymentData, _ as getApplePayButtonInitialHeight, g as getApplePayButtonSrc, A as getBankAccountFormInitialHeight, O as getBankAccountFormSrc, k as getCreditCardFormInitialHeight, D as getCreditCardFormSrc, i as getEmbedOrigin, x as getGooglePayButtonInitialHeight, b as getGooglePayButtonSrc, R as mountAmosApplePayButton, I as mountAmosBankAccountPaymentMethodForm, F as mountAmosCreditCardPaymentMethodForm, L as mountAmosGooglePayButton, f as resetForm, h as sendConfirmationResult, s as sendParentReadyMessage, l as updateAmount, c as updateAppearance, u as updateMerchantName, d as validateForm };
+export { w as attachApplePayButtonListeners, D as attachGooglePayButtonListeners, I as attachPaymentMethodFormListeners, v as confirmPaymentIntent, y as confirmSetupIntent, c as createMessage, r as decodeJwt, O as formatGooglePayPaymentData, S as getApplePayButtonInitialHeight, x as getApplePayButtonSrc, F as getBankAccountFormInitialHeight, N as getBankAccountFormSrc, P as getCreditCardFormInitialHeight, M as getCreditCardFormSrc, i as getEmbedOrigin, E as getGooglePayButtonInitialHeight, T as getGooglePayButtonSrc, U as mountAmosApplePayButton, V as mountAmosBankAccountPaymentMethodForm, B as mountAmosCreditCardPaymentMethodForm, H as mountAmosGooglePayButton, o as pickApplePayButtonElementProps, s as pickGooglePayButtonElementProps, _ as resetForm, b as sendConfirmationResult, u as sendParentReadyMessage, a as serializeWalletButtonStyle, m as updateAmount, d as updateAppearance, f as updateApplePayButton, p as updateGooglePayButton, h as updateMerchantName, g as validateForm };

package/dist/messaging.d.ts

@@ -1,5 +1,5 @@
 import { components } from '@amos.com/node';
-import { Appearance, Message } from './types';
+import { Appearance, ApplePayButtonElementProps, GooglePayButtonElementProps, Message } from './types';
 type Iframe = HTMLIFrameElement | null | undefined;
 /**
  * Resolve the Amos embed origin from an iframe's configured `src`.
@@ -26,6 +26,20 @@ export declare function updateAppearance({ iframe, appearance, }: {
     iframe: Iframe;
     appearance?: Appearance;
 }): void;
+/**
+ * Push Apple Pay button visual options into the embedded iframe.
+ */
+export declare function updateApplePayButton({ iframe, props, }: {
+    iframe: Iframe;
+    props: ApplePayButtonElementProps;
+}): void;
+/**
+ * Push Google Pay button visual options into the embedded iframe.
+ */
+export declare function updateGooglePayButton({ iframe, props, }: {
+    iframe: Iframe;
+    props: GooglePayButtonElementProps;
+}): void;
 /**
  * Push the express-checkout amount into the embedded Google Pay iframe.
  */

package/dist/payment-method-form.d.ts

@@ -1,4 +1,4 @@
-import { Appearance, ConfirmationResult } from './types';
+import { Appearance, ConfirmationResult, PaymentMethodFormValidityChangeEvent } from './types';
 /**
  * The additional fields beyond the standard card number, expiration
  * date, CVV, and billing address fields that are required to be filled
@@ -59,6 +59,12 @@ export type PaymentMethodFormListenerOptions = {
      * iframe's opacity from `0` to `1` to fade it in.
      */
     onAppearanceReady?: () => void;
+    /**
+     * Called when card/bank form validity changes. `isValid` is true
+     * when all required fields are present and valid. Does not include
+     * PCI data. Use this to enable or disable a host checkout button.
+     */
+    onValidityChange?: (event: PaymentMethodFormValidityChangeEvent) => void;
     /**
      * Called when the interactive confirmation flow finishes (success or
      * terminal failure). Not settlement proof — verify via webhooks.