@amos.com/amos-js 0.9.13 → 0.9.15

package/dist/index.mjs

@@ -85,82 +85,55 @@ 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.fullWidth !== void 0 && (t.fullWidth = e.fullWidth), 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.fullWidth !== void 0 && (t.fullWidth = e.fullWidth), 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 l(e) {
+function o(e) {
 	return new URL(e.src).origin;
 }
-function u(e) {
-	e?.contentWindow && e.contentWindow.postMessage(c({ type: "PARENT_ACKNOWLEDGED_IFRAME_READY" }), l(e));
+function s(e) {
+	e?.contentWindow && e.contentWindow.postMessage(a({ type: "PARENT_ACKNOWLEDGED_IFRAME_READY" }), o(e));
 }
-function d({ iframe: e, appearance: t = {} }) {
-	e?.contentWindow && e.contentWindow.postMessage(c({
+function c({ iframe: e, appearance: t = {} }) {
+	e?.contentWindow && e.contentWindow.postMessage(a({
 		type: "UPDATE_APPEARANCE",
 		appearance: t
-	}), l(e));
+	}), o(e));
 }
-function f({ iframe: e, props: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(c({
+function l({ iframe: e, props: t, height: n }) {
+	e?.contentWindow && e.contentWindow.postMessage(a({
 		type: "UPDATE_APPLE_PAY_BUTTON",
-		props: o(t)
-	}), l(e));
+		height: n,
+		props: t
+	}), o(e));
 }
-function p({ iframe: e, props: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(c({
+function u({ iframe: e, props: t, height: n }) {
+	e?.contentWindow && e.contentWindow.postMessage(a({
 		type: "UPDATE_GOOGLE_PAY_BUTTON",
-		props: s(t)
-	}), l(e));
+		height: n,
+		props: t
+	}), o(e));
 }
-function m({ iframe: e, amount: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(c({
+function d({ iframe: e, amount: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(a({
 		type: "UPDATE_AMOUNT",
 		amount: t
-	}), l(e));
+	}), o(e));
 }
-function h({ iframe: e, merchantName: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(c({
+function f({ iframe: e, merchantName: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(a({
 		type: "UPDATE_MERCHANT_NAME",
 		merchantName: t
-	}), l(e));
+	}), o(e));
 }
-function g({ iframe: e }) {
+function p({ iframe: e }) {
 	let t = crypto.randomUUID();
 	return new Promise((n) => {
-		e?.contentWindow && e.contentWindow.postMessage(c({
+		e?.contentWindow && e.contentWindow.postMessage(a({
 			type: "VALIDATE_FORM",
 			requestId: t
-		}), l(e));
+		}), o(e));
 		let r = setTimeout(() => {
 			window.removeEventListener("message", i), n(!1);
 		}, 5e3);
@@ -170,211 +143,213 @@ function g({ iframe: e }) {
 		window.addEventListener("message", i);
 	});
 }
-function _({ iframe: e }) {
-	e?.contentWindow && e.contentWindow.postMessage(c({ type: "RESET_FORM" }), l(e));
+function m({ iframe: e }) {
+	e?.contentWindow && e.contentWindow.postMessage(a({ type: "RESET_FORM" }), o(e));
 }
-function v({ iframe: e, token: t }) {
+function h({ iframe: e, token: t }) {
 	if (!e?.contentWindow) return;
 	let { payment_intent_id: n } = r(t).payload;
-	e.contentWindow.postMessage(c({
+	e.contentWindow.postMessage(a({
 		type: "CONFIRM_PAYMENT_INTENT",
 		token: t,
 		id: n ?? void 0
-	}), l(e));
+	}), o(e));
 }
-function y({ iframe: e, token: t }) {
+function g({ iframe: e, token: t }) {
 	if (!e?.contentWindow) return;
 	let { setup_intent_id: n } = r(t).payload;
-	e.contentWindow.postMessage(c({
+	e.contentWindow.postMessage(a({
 		type: "CONFIRM_SETUP_INTENT",
 		token: t,
 		id: n ?? void 0
-	}), l(e));
+	}), o(e));
 }
-function b({ iframe: e, result: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(c({
+function _({ iframe: e, result: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(a({
 		type: "CONFIRMATION_RESULT",
 		result: t
-	}), l(e));
+	}), o(e));
 }
 //#endregion
 //#region src/apple-pay.ts
-function x(e) {
+function v(e) {
 	return `${i(e)}/iframe/apple-pay?token=${e}`;
 }
-function S() {
-	return "40px";
+function y() {
+	return "48px";
 }
-function C(e) {
-	e.contentWindow?.postMessage(c({ type: "APPLE_PAY_CANCEL" }), l(e));
+function b(e) {
+	e.contentWindow?.postMessage(a({ type: "APPLE_PAY_CANCEL" }), o(e));
 }
-function w(e, r) {
-	let i = { ...r };
-	function a() {
-		m({
+function x(e, { height: r = "48px", ...i }) {
+	let a = {
+		...i,
+		height: r
+	};
+	function o() {
+		d({
 			iframe: e,
-			amount: i.amount
+			amount: a.amount
 		});
 	}
-	function o() {
-		h({
+	function u() {
+		f({
 			iframe: e,
-			merchantName: i.merchantName
+			merchantName: a.merchantName
 		});
 	}
-	function s() {
-		f({
+	function p() {
+		l({
 			iframe: e,
-			props: i
+			height: a.height ?? "48px",
+			props: a.buttonProps ?? {}
 		});
 	}
-	function c(r) {
+	function m(r) {
 		if (r.source === e.contentWindow) switch (r.data.type) {
 			case "IFRAME_READY":
-				u(e), d({
+				s(e), c({
 					iframe: e,
-					appearance: i.appearance
-				}), a(), o(), s();
+					appearance: {}
+				}), o(), u(), p();
 				break;
 			case "UPDATE_HEIGHT":
-				i.onHeightChange?.(r.data.height);
+				a.onHeightChange?.(r.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				d({
+				c({
 					iframe: e,
 					appearance: r.data.appearance
 				});
 				break;
 			case "UPDATED_APPEARANCE":
-				i.onAppearanceReady?.();
+				a.onAppearanceReady?.();
 				break;
 			case "APPLE_PAY_WINDOW_OPEN":
 				t({ onCancel: () => {
-					C(e), n();
+					b(e), n();
 				} });
 				break;
 			case "APPLE_PAY_WINDOW_CLOSE":
 				n();
 				break;
 			case "CREATE_PAYMENT_INTENT":
-				i.onInitiatePaymentIntentRequest({
+				a.onInitiatePaymentIntentRequest({
 					paymentIntentCreateAttributes: r.data.paymentIntentCreateAttributes,
 					customerCreateAttributes: r.data.customerCreateAttributes
 				}).then((t) => {
-					v({
+					h({
 						iframe: e,
 						token: t
 					});
 				}).catch((e) => {
-					n(), i.onResult({
+					n(), a.onResult({
 						status: "failed",
 						errorMessage: e instanceof Error ? e.message : "Unknown error"
 					});
 				});
 				break;
-			case "CONFIRMATION_RESULT": n(), i.onResult(r.data.result);
+			case "CONFIRMATION_RESULT": n(), a.onResult(r.data.result);
 		}
 	}
-	return window.addEventListener("message", c), {
-		update(t) {
-			let n = "appearance" in t, r = "amount" in t, c = "merchantName" in t, l = "fullWidth" in t || "buttonstyle" in t || "type" in t || "locale" in t || "style" in t;
-			i = {
-				...i,
-				...t
-			}, n && d({
-				iframe: e,
-				appearance: i.appearance
-			}), r && a(), c && o(), l && s();
+	return window.addEventListener("message", m), {
+		update(e) {
+			let t = "amount" in e, n = "merchantName" in e, r = "height" in e || "buttonProps" in e;
+			a = {
+				...a,
+				...e
+			}, t && o(), n && u(), r && p();
 		},
 		destroy() {
-			window.removeEventListener("message", c), n();
+			window.removeEventListener("message", m), n();
 		}
 	};
 }
 //#endregion
 //#region src/google-pay.ts
-function T(e) {
+function S(e) {
 	return `${i(e)}/iframe/google-pay?token=${e}`;
 }
-function E() {
-	return "40px";
+function C() {
+	return "48px";
 }
-function D(e, t) {
-	let n = { ...t };
-	function r() {
-		m({
+function w(e, { height: t = "48px", ...n }) {
+	let r = {
+		...n,
+		height: t
+	};
+	function i() {
+		d({
 			iframe: e,
-			amount: n.amount
+			amount: r.amount
 		});
 	}
-	function i() {
-		h({
+	function a() {
+		f({
 			iframe: e,
-			merchantName: n.merchantName
+			merchantName: r.merchantName
 		});
 	}
-	function a() {
-		p({
+	function o() {
+		u({
 			iframe: e,
-			props: n
+			height: r.height ?? "48px",
+			props: r.buttonProps ?? {}
 		});
 	}
-	function o(t) {
+	function l(t) {
 		if (t.source === e.contentWindow) switch (t.data.type) {
 			case "IFRAME_READY":
-				u(e), d({
+				s(e), c({
 					iframe: e,
-					appearance: n.appearance
-				}), r(), i(), a();
+					appearance: {}
+				}), i(), a(), o();
 				break;
 			case "UPDATE_HEIGHT":
-				n.onHeightChange?.(t.data.height);
+				r.onHeightChange?.(t.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				d({
+				c({
 					iframe: e,
 					appearance: t.data.appearance
 				});
 				break;
 			case "UPDATED_APPEARANCE":
-				n.onAppearanceReady?.();
+				r.onAppearanceReady?.();
 				break;
 			case "CREATE_PAYMENT_INTENT":
-				n.onInitiatePaymentIntentRequest({
+				r.onInitiatePaymentIntentRequest({
 					paymentIntentCreateAttributes: t.data.paymentIntentCreateAttributes,
 					customerCreateAttributes: t.data.customerCreateAttributes
 				}).then((t) => {
-					v({
+					h({
 						iframe: e,
 						token: t
 					});
 				}).catch((e) => {
-					n.onResult({
+					r.onResult({
 						status: "failed",
 						errorMessage: e instanceof Error ? e.message : "Unknown error"
 					});
 				});
 				break;
-			case "CONFIRMATION_RESULT": n.onResult(t.data.result);
+			case "CONFIRMATION_RESULT": r.onResult(t.data.result);
 		}
 	}
-	return window.addEventListener("message", o), {
-		update(t) {
-			let o = "appearance" in t, s = "amount" in t, c = "merchantName" in t, l = "fullWidth" in t || "buttonType" in t || "buttonColor" in t || "buttonRadius" in t || "buttonSizeMode" in t || "buttonLocale" in t || "buttonBorderType" in t || "style" in t;
-			n = {
-				...n,
-				...t
-			}, o && d({
-				iframe: e,
-				appearance: n.appearance
-			}), s && r(), c && i(), l && a();
+	return window.addEventListener("message", l), {
+		update(e) {
+			let t = "amount" in e, n = "merchantName" in e, s = "height" in e || "buttonProps" in e;
+			r = {
+				...r,
+				...e
+			}, t && i(), n && a(), s && o();
 		},
 		destroy() {
-			window.removeEventListener("message", o);
+			window.removeEventListener("message", l);
 		}
 	};
 }
-function O({ paymentData: e }) {
+function T({ paymentData: e }) {
 	return { paymentMethod: {
 		type: "googlepay",
 		billing_address_attributes: {
@@ -393,7 +368,7 @@ function O({ paymentData: e }) {
 }
 //#endregion
 //#region src/form-skeleton.ts
-var k = "amos-js-form-skeleton-styles", A = {
+var E = "amos-js-form-skeleton-styles", D = {
 	"--accent": "oklch(0.97 0 0)",
 	"--radius": "0.625rem",
 	"--input-height": "2.25rem",
@@ -401,71 +376,71 @@ var k = "amos-js-form-skeleton-styles", A = {
 	"--field-gap": "1rem",
 	"--control-gap": "0.5rem",
 	"--label-font-size": "0.875rem"
-}, j = "\n.amos-js-form-skeleton {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  margin: 0 -4px;\n  padding-block: 0.25rem;\n  pointer-events: none;\n  width: calc(100% + 8px);\n}\n.amos-js-form-skeleton-field {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  min-width: 0;\n  width: 100%;\n}\n.amos-js-form-skeleton-label {\n  flex-shrink: 0;\n  font-size: var(--label-font-size);\n  height: 1.75rem;\n  line-height: 1.75rem;\n}\n.amos-js-form-skeleton-input {\n  animation: amos-js-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  background: var(--accent);\n  border-radius: calc(var(--radius) * 0.8);\n  box-sizing: border-box;\n  height: var(--input-height);\n  width: 100%;\n}\n.amos-js-form-skeleton-input-floating {\n  height: var(--floating-input-height);\n}\n.amos-js-form-skeleton-row {\n  align-items: flex-start;\n  display: flex;\n  gap: var(--control-gap);\n  width: 100%;\n}\n.amos-js-form-skeleton-row-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  width: 100%;\n}\n@container (min-width: 24rem) {\n  .amos-js-form-skeleton-row-stack {\n    align-items: flex-start;\n    flex-direction: row;\n    gap: var(--control-gap);\n  }\n}\n@keyframes amos-js-skeleton-pulse {\n  50% { opacity: 0.5; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .amos-js-form-skeleton-input {\n    animation: none;\n  }\n}\n";
-function M() {
-	if (document.getElementById(k)) return;
+}, O = "\n.amos-js-form-skeleton {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  margin: 0 -4px;\n  padding-block: 0.25rem;\n  pointer-events: none;\n  width: calc(100% + 8px);\n}\n.amos-js-form-skeleton-field {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  min-width: 0;\n  width: 100%;\n}\n.amos-js-form-skeleton-label {\n  flex-shrink: 0;\n  font-size: var(--label-font-size);\n  height: 1.75rem;\n  line-height: 1.75rem;\n}\n.amos-js-form-skeleton-input {\n  animation: amos-js-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  background: var(--accent);\n  border-radius: calc(var(--radius) * 0.8);\n  box-sizing: border-box;\n  height: var(--input-height);\n  width: 100%;\n}\n.amos-js-form-skeleton-input-floating {\n  height: var(--floating-input-height);\n}\n.amos-js-form-skeleton-row {\n  align-items: flex-start;\n  display: flex;\n  gap: var(--control-gap);\n  width: 100%;\n}\n.amos-js-form-skeleton-row-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  width: 100%;\n}\n@container (min-width: 24rem) {\n  .amos-js-form-skeleton-row-stack {\n    align-items: flex-start;\n    flex-direction: row;\n    gap: var(--control-gap);\n  }\n}\n@keyframes amos-js-skeleton-pulse {\n  50% { opacity: 0.5; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .amos-js-form-skeleton-input {\n    animation: none;\n  }\n}\n";
+function k() {
+	if (document.getElementById(E)) return;
 	let e = document.createElement("style");
-	e.id = k, e.textContent = j, document.head.appendChild(e);
+	e.id = E, e.textContent = O, document.head.appendChild(e);
 }
-function N(e, t) {
-	for (let [t, n] of Object.entries(A)) e.style.setProperty(t, n);
+function A(e, t) {
+	for (let [t, n] of Object.entries(D)) e.style.setProperty(t, n);
 	let n = t?.themeVariables;
 	if (n) for (let [t, r] of Object.entries(n)) typeof r == "string" && r.trim() !== "" && e.style.setProperty(t, r.trim());
 }
-function P(e, t) {
+function j(e, t) {
 	let n = document.createElement("div");
 	if (n.className = e, t) for (let e of t) n.appendChild(e);
 	return n;
 }
-function F(e, t) {
-	let n = P("amos-js-form-skeleton-field");
-	t !== void 0 && (n.style.flexGrow = String(t)), e === "above" && n.appendChild(P("amos-js-form-skeleton-label"));
-	let r = P("amos-js-form-skeleton-input");
+function M(e, t) {
+	let n = j("amos-js-form-skeleton-field");
+	t !== void 0 && (n.style.flexGrow = String(t)), e === "above" && n.appendChild(j("amos-js-form-skeleton-label"));
+	let r = j("amos-js-form-skeleton-input");
 	return e === "floating" && r.classList.add("amos-js-form-skeleton-input-floating"), n.appendChild(r), n;
 }
-function I(e, t) {
-	return P(t ? "amos-js-form-skeleton-row-stack" : "amos-js-form-skeleton-row", e);
+function N(e, t) {
+	return j(t ? "amos-js-form-skeleton-row-stack" : "amos-js-form-skeleton-row", e);
 }
-function L({ labels: e, requirement: t, wrapCountryZip: n }) {
+function P({ labels: e, requirement: t, wrapCountryZip: n }) {
 	return t === "full" ? [
-		F(e),
-		F(e),
-		I([
-			F(e, 1.4),
-			F(e, .7),
-			F(e, .8)
+		M(e),
+		M(e),
+		N([
+			M(e, 1.4),
+			M(e, .7),
+			M(e, .8)
 		], !1),
-		F(e)
-	] : [I([F(e), F(e)], n)];
+		M(e)
+	] : [N([M(e), M(e)], n)];
 }
-function R(e) {
+function F(e) {
 	let t = e.appearance?.labels ?? "above", n = e.billingAddressRequirement ?? "country";
 	if (e.kind === "card") {
-		let r = [F(t), I([F(t), F(t)], !1)];
-		return e.additionalFields?.cardholderName && r.push(F(t)), r.push(...L({
+		let r = [M(t), N([M(t), M(t)], !1)];
+		return e.additionalFields?.cardholderName && r.push(M(t)), r.push(...P({
 			labels: t,
 			requirement: n,
 			wrapCountryZip: !1
 		})), r;
 	}
 	return [
-		F(t),
-		I([F(t), F(t)], !0),
-		F(t),
-		I([F("above"), F("above")], !0),
-		...L({
+		M(t),
+		N([M(t), M(t)], !0),
+		M(t),
+		N([M("above"), M("above")], !0),
+		...P({
 			labels: t,
 			requirement: n,
 			wrapCountryZip: !0
 		})
 	];
 }
-function z(e) {
-	M();
-	let t = P("amos-js-form-skeleton");
+function I(e) {
+	k();
+	let t = j("amos-js-form-skeleton");
 	t.setAttribute("aria-hidden", "true");
 	function n(e) {
-		N(t, e.appearance), t.replaceChildren(...R(e));
+		A(t, e.appearance), t.replaceChildren(...F(e));
 	}
 	return n(e), {
 		element: t,
@@ -474,14 +449,14 @@ function z(e) {
 }
 //#endregion
 //#region src/payment-method-form.ts
-var B = {
+var L = {
 	country: 212,
 	full: 452
-}, V = 80, H = {
+}, R = 80, z = {
 	country: 400,
 	full: 640
 };
-function U(e, t = { cardholderName: !1 }, n = "country") {
+function B(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,
@@ -489,25 +464,25 @@ function U(e, t = { cardholderName: !1 }, n = "country") {
 	});
 	return `${i(e)}/iframe/card?${a}`;
 }
-function W(e, t = "country") {
+function V(e, t = "country") {
 	let n = new URLSearchParams({
 		token: e,
 		billingAddressRequirement: t
 	});
 	return `${i(e)}/iframe/bank?${n}`;
 }
-function G(e = { cardholderName: !1 }, t = "country") {
-	return `${(B[t] ?? B.country) + (e.cardholderName ? V : 0)}px`;
+function H(e = { cardholderName: !1 }, t = "country") {
+	return `${(L[t] ?? L.country) + (e.cardholderName ? R : 0)}px`;
 }
-function K(e = "country") {
-	return `${H[e] ?? H.country}px`;
+function U(e = "country") {
+	return `${z[e] ?? z.country}px`;
 }
-function q(e, t) {
+function W(e, t) {
 	let n = { ...t };
 	function r(t) {
 		if (t.source === e.contentWindow) switch (t.data.type) {
 			case "IFRAME_READY":
-				u(e), d({
+				s(e), c({
 					iframe: e,
 					appearance: n.appearance
 				});
@@ -516,7 +491,7 @@ function q(e, t) {
 				n.onHeightChange?.(t.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				d({
+				c({
 					iframe: e,
 					appearance: t.data.appearance
 				});
@@ -536,7 +511,7 @@ function q(e, t) {
 			n = {
 				...n,
 				...t
-			}, r && d({
+			}, r && c({
 				iframe: e,
 				appearance: n.appearance
 			});
@@ -548,7 +523,7 @@ function q(e, t) {
 }
 //#endregion
 //#region src/mount.ts
-function J(e) {
+function G(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.`);
@@ -556,19 +531,19 @@ function J(e) {
 	}
 	return e;
 }
-var Y = {
+var K = {
 	width: "calc(100% + 8px)",
 	transition: "opacity 150ms ease-in, height 200ms ease-in-out",
 	margin: "0 -4px",
 	opacity: "0",
 	border: "0"
-}, X = {
+}, q = {
 	width: "100%",
 	transition: "height 200ms ease-in-out",
 	margin: "0",
 	opacity: "0",
 	border: "0"
-}, Z = {
+}, J = {
 	position: "absolute",
 	top: "0",
 	left: "-4px",
@@ -578,15 +553,15 @@ var Y = {
 	transition: "none",
 	pointerEvents: "none"
 };
-function Q({ src: e, title: t, name: n, height: r, allow: i, style: a = Y }) {
-	let o = document.createElement("iframe");
-	return o.src = e, o.title = t, o.name = n, o.setAttribute("role", "presentation"), o.scrolling = "no", i && (o.allow = i), Object.assign(o.style, a, { height: r }), o;
+function Y({ src: e, title: t, name: n, height: r, allow: i, className: a, style: o = K }) {
+	let s = document.createElement("iframe");
+	return s.src = e, s.title = t, s.name = n, s.setAttribute("role", "presentation"), s.scrolling = "no", i && (s.allow = i), a != null && (s.className = a), Object.assign(s.style, o, { height: r }), s;
 }
-function $({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
+function X({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
 	let i = document.createElement("div");
 	i.style.position = "relative", i.style.width = "100%", i.setAttribute("aria-busy", "true");
-	let a = z(r);
-	Object.assign(t.style, Z), i.append(a.element, t), e.appendChild(i);
+	let a = I(r);
+	Object.assign(t.style, J), i.append(a.element, t), e.appendChild(i);
 	let o = !1, s = !1, c, l = r.appearance, u, d;
 	function f() {
 		return i.getBoundingClientRect().height;
@@ -598,7 +573,7 @@ function $({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
 		if (o) return;
 		o = !0, d !== void 0 && (clearTimeout(d), d = void 0);
 		let e = f(), n = p(), r = Number.isFinite(n) ? Math.max(n, e) : e;
-		t.style.transition = "none", t.style.position = "", t.style.top = "", t.style.left = "", t.style.margin = Y.margin ?? "", t.style.height = `${r}px`, t.style.opacity = "1", t.style.pointerEvents = "", a.element.remove(), i.removeAttribute("aria-busy"), u = setTimeout(() => {
+		t.style.transition = "none", t.style.position = "", t.style.top = "", t.style.left = "", t.style.margin = K.margin ?? "", t.style.height = `${r}px`, t.style.opacity = "1", t.style.pointerEvents = "", a.element.remove(), i.removeAttribute("aria-busy"), u = setTimeout(() => {
 			t.style.transition = "height 200ms ease-in-out";
 		}, 400);
 	}
@@ -607,7 +582,7 @@ function $({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
 		let e = p(), t = f();
 		Number.isFinite(e) && e >= t - 2 && m();
 	}
-	let g = q(t, {
+	let g = W(t, {
 		...n,
 		onHeightChange: (e) => {
 			c = e, o ? t.style.height = e : h(), n.onHeightChange?.(e);
@@ -631,15 +606,15 @@ function $({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
 		}
 	};
 }
-function ee(e, t) {
-	let n = J(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t;
-	return $({
+function Z(e, t) {
+	let n = G(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t;
+	return X({
 		host: n,
-		iframe: Q({
-			src: U(r, i, a),
+		iframe: Y({
+			src: B(r, i, a),
 			title: "Secure credit card payment method form powered by Amos",
 			name: "amos-credit-card-payment-method-form",
-			height: G(i, a)
+			height: H(i, a)
 		}),
 		listenerOptions: o,
 		skeletonOptions: {
@@ -650,15 +625,15 @@ function ee(e, t) {
 		}
 	});
 }
-function te(e, t) {
-	let n = J(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t;
-	return $({
+function Q(e, t) {
+	let n = G(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t;
+	return X({
 		host: n,
-		iframe: Q({
-			src: W(r, i),
+		iframe: Y({
+			src: V(r, i),
 			title: "Secure bank account payment method form powered by Amos",
 			name: "amos-bank-account-payment-method-form",
-			height: K(i)
+			height: U(i)
 		}),
 		listenerOptions: a,
 		skeletonOptions: {
@@ -668,59 +643,61 @@ function te(e, t) {
 		}
 	});
 }
-function ne(e, t) {
-	let n = J(e), { renderToken: r, ...i } = t, a = Q({
-		src: T(r),
+function $(e, t) {
+	let n = G(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Y({
+		src: S(r),
 		title: "Secure Google Pay button powered by Amos",
 		name: "amos-google-pay-button",
-		height: E(),
+		height: o.height ?? C(),
 		allow: "payment",
-		style: X
+		className: i,
+		style: q
 	});
-	n.appendChild(a);
-	let o = D(a, {
-		...i,
+	Object.assign(s.style, a), n.appendChild(s);
+	let c = w(s, {
+		...o,
 		onHeightChange: (e) => {
-			a.style.height = e, i.onHeightChange?.(e);
+			s.style.height = e, o.onHeightChange?.(e);
 		},
 		onAppearanceReady: () => {
-			a.style.opacity = "1", i.onAppearanceReady?.();
+			s.style.opacity = "1", o.onAppearanceReady?.();
 		}
 	});
 	return {
-		iframe: a,
-		update: o.update,
+		iframe: s,
+		update: c.update,
 		destroy() {
-			o.destroy(), a.remove();
+			c.destroy(), s.remove();
 		}
 	};
 }
-function re(e, t) {
-	let n = J(e), { renderToken: r, ...i } = t, a = Q({
-		src: x(r),
+function ee(e, t) {
+	let n = G(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Y({
+		src: v(r),
 		title: "Secure Apple Pay button powered by Amos",
 		name: "amos-apple-pay-button",
-		height: S(),
+		height: o.height ?? y(),
 		allow: "payment",
-		style: X
+		className: i,
+		style: q
 	});
-	n.appendChild(a);
-	let o = w(a, {
-		...i,
+	Object.assign(s.style, a), n.appendChild(s);
+	let c = x(s, {
+		...o,
 		onHeightChange: (e) => {
-			a.style.height = e, i.onHeightChange?.(e);
+			s.style.height = e, o.onHeightChange?.(e);
 		},
 		onAppearanceReady: () => {
-			a.style.opacity = "1", i.onAppearanceReady?.();
+			s.style.opacity = "1", o.onAppearanceReady?.();
 		}
 	});
 	return {
-		iframe: a,
-		update: o.update,
+		iframe: s,
+		update: c.update,
 		destroy() {
-			o.destroy(), a.remove();
+			c.destroy(), s.remove();
 		}
 	};
 }
 //#endregion
-export { w as attachApplePayButtonListeners, D as attachGooglePayButtonListeners, q as attachPaymentMethodFormListeners, v as confirmPaymentIntent, y as confirmSetupIntent, c as createMessage, r as decodeJwt, O as formatGooglePayPaymentData, S as getApplePayButtonInitialHeight, x as getApplePayButtonSrc, K as getBankAccountFormInitialHeight, W as getBankAccountFormSrc, G as getCreditCardFormInitialHeight, U as getCreditCardFormSrc, i as getEmbedOrigin, E as getGooglePayButtonInitialHeight, T as getGooglePayButtonSrc, re as mountAmosApplePayButton, te as mountAmosBankAccountPaymentMethodForm, ee as mountAmosCreditCardPaymentMethodForm, ne 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 };
+export { x as attachApplePayButtonListeners, w as attachGooglePayButtonListeners, W as attachPaymentMethodFormListeners, h as confirmPaymentIntent, g as confirmSetupIntent, a as createMessage, r as decodeJwt, T as formatGooglePayPaymentData, y as getApplePayButtonInitialHeight, v as getApplePayButtonSrc, U as getBankAccountFormInitialHeight, V as getBankAccountFormSrc, H as getCreditCardFormInitialHeight, B as getCreditCardFormSrc, i as getEmbedOrigin, C as getGooglePayButtonInitialHeight, S as getGooglePayButtonSrc, ee as mountAmosApplePayButton, Q as mountAmosBankAccountPaymentMethodForm, Z as mountAmosCreditCardPaymentMethodForm, $ as mountAmosGooglePayButton, m as resetForm, _ as sendConfirmationResult, s as sendParentReadyMessage, d as updateAmount, c as updateAppearance, l as updateApplePayButton, u as updateGooglePayButton, f as updateMerchantName, p as validateForm };