@amos.com/amos-js 0.9.16 → 0.9.18

package/dist/index.mjs

@@ -83,141 +83,197 @@ function i(e) {
 	}
 }
 //#endregion
+//#region src/plaid-session.ts
+var a = /* @__PURE__ */ new WeakMap();
+function o(e, t) {
+	a.set(e, t);
+}
+function s(e) {
+	if (e) return a.get(e);
+}
+function c(e) {
+	e && a.delete(e);
+}
+//#endregion
 //#region src/types.ts
-function a(e) {
+function l(e) {
 	return e;
 }
 //#endregion
 //#region src/messaging.ts
-function o(e) {
+function u(e) {
 	return new URL(e.src).origin;
 }
-function s(e) {
-	e?.contentWindow && e.contentWindow.postMessage(a({ type: "PARENT_ACKNOWLEDGED_IFRAME_READY" }), o(e));
+function d(e) {
+	e?.contentWindow && e.contentWindow.postMessage(l({ type: "PARENT_ACKNOWLEDGED_IFRAME_READY" }), u(e));
 }
-function c({ iframe: e, appearance: t = {} }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function f({ iframe: e, appearance: t = {} }) {
+	e?.contentWindow && e.contentWindow.postMessage(l({
 		type: "UPDATE_APPEARANCE",
 		appearance: t
-	}), o(e));
+	}), u(e));
 }
-function l({ iframe: e, props: t, height: n }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function p({ iframe: e, props: t, height: n }) {
+	e?.contentWindow && e.contentWindow.postMessage(l({
 		type: "UPDATE_APPLE_PAY_BUTTON",
 		height: n,
 		props: t
-	}), o(e));
+	}), u(e));
 }
-function u({ iframe: e, props: t, height: n }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function m({ iframe: e, props: t, height: n }) {
+	e?.contentWindow && e.contentWindow.postMessage(l({
 		type: "UPDATE_GOOGLE_PAY_BUTTON",
 		height: n,
 		props: t
-	}), o(e));
+	}), u(e));
 }
-function d({ iframe: e, amount: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function h({ iframe: e, amount: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(l({
 		type: "UPDATE_AMOUNT",
 		amount: t
-	}), o(e));
+	}), u(e));
 }
-function f({ iframe: e, merchantName: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function g({ iframe: e, merchantName: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(l({
 		type: "UPDATE_MERCHANT_NAME",
 		merchantName: t
-	}), o(e));
-}
-function p({ iframe: e }) {
-	let t = crypto.randomUUID();
-	return new Promise((n) => {
-		e?.contentWindow && e.contentWindow.postMessage(a({
+	}), u(e));
+}
+function _({ iframe: e }) {
+	let t = s(e);
+	if (t?.requiresVerification) return Promise.resolve(!!t.plaid);
+	let n = crypto.randomUUID();
+	return new Promise((t) => {
+		e?.contentWindow && e.contentWindow.postMessage(l({
 			type: "VALIDATE_FORM",
-			requestId: t
-		}), o(e));
+			requestId: n
+		}), u(e));
 		let r = setTimeout(() => {
-			window.removeEventListener("message", i), n(!1);
+			window.removeEventListener("message", i), t(!1);
 		}, 5e3);
 		function i(e) {
-			e.data.type === "VALIDATE_FORM" && e.data.requestId === t && (window.removeEventListener("message", i), clearTimeout(r), n(e.data.isValid ?? !1));
+			e.data.type === "VALIDATE_FORM" && e.data.requestId === n && (window.removeEventListener("message", i), clearTimeout(r), t(e.data.isValid ?? !1));
 		}
 		window.addEventListener("message", i);
 	});
 }
-function m({ iframe: e }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({ type: "RESET_FORM" }), o(e));
+var v = 1e4;
+function ee({ iframe: e }) {
+	let t = crypto.randomUUID();
+	return new Promise((n, r) => {
+		if (!e?.contentWindow) {
+			r(/* @__PURE__ */ Error("Bank form is not ready."));
+			return;
+		}
+		let i = e.contentWindow;
+		i.postMessage(l({
+			type: "CREATE_PLAID_LINK_TOKEN",
+			requestId: t
+		}), u(e));
+		let a = setTimeout(() => {
+			window.removeEventListener("message", o), r(/* @__PURE__ */ Error("Timed out waiting for Plaid Link token."));
+		}, v);
+		function o(e) {
+			if (e.source === i && e.data.type === "PLAID_LINK_TOKEN" && e.data.requestId === t) {
+				if (window.removeEventListener("message", o), clearTimeout(a), e.data.link_token) {
+					n(e.data.link_token);
+					return;
+				}
+				r(Error(e.data.error ?? "Could not create Plaid Link token."));
+			}
+		}
+		window.addEventListener("message", o);
+	});
+}
+function y({ iframe: e }) {
+	s(e)?.clearLinked?.(), b(e);
 }
-function h({ iframe: e, token: t }) {
+function b(e) {
+	e?.contentWindow && e.contentWindow.postMessage(l({ type: "RESET_FORM" }), u(e));
+}
+function x({ iframe: e, type: t, token: n, id: r }) {
+	let i = s(e), a = i?.plaid;
+	i?.requiresVerification && !a && b(e), e.contentWindow?.postMessage(l({
+		type: t,
+		token: n,
+		id: r,
+		...a ? { plaid: a } : {}
+	}), u(e));
+}
+function S({ iframe: e, token: t }) {
 	if (!e?.contentWindow) return;
 	let { payment_intent_id: n } = r(t).payload;
-	e.contentWindow.postMessage(a({
+	x({
+		iframe: e,
 		type: "CONFIRM_PAYMENT_INTENT",
 		token: t,
 		id: n ?? void 0
-	}), o(e));
+	});
 }
-function g({ iframe: e, token: t }) {
+function C({ iframe: e, token: t }) {
 	if (!e?.contentWindow) return;
 	let { setup_intent_id: n } = r(t).payload;
-	e.contentWindow.postMessage(a({
+	x({
+		iframe: e,
 		type: "CONFIRM_SETUP_INTENT",
 		token: t,
 		id: n ?? void 0
-	}), o(e));
+	});
 }
-function _({ iframe: e, result: t }) {
-	e?.contentWindow && e.contentWindow.postMessage(a({
+function w({ iframe: e, result: t }) {
+	e?.contentWindow && e.contentWindow.postMessage(l({
 		type: "CONFIRMATION_RESULT",
 		result: t
-	}), o(e));
+	}), u(e));
 }
 //#endregion
 //#region src/apple-pay.ts
-function v(e) {
+function T(e) {
 	return `${i(e)}/iframe/apple-pay?token=${e}`;
 }
-function y() {
+function E() {
 	return "48px";
 }
-function b(e) {
-	e.contentWindow?.postMessage(a({ type: "APPLE_PAY_CANCEL" }), o(e));
+function D(e) {
+	e.contentWindow?.postMessage(l({ type: "APPLE_PAY_CANCEL" }), u(e));
 }
-function x(e, { height: r = "48px", ...i }) {
+function O(e, { height: r = "48px", ...i }) {
 	let a = {
 		...i,
 		height: r
 	};
 	function o() {
-		d({
+		h({
 			iframe: e,
 			amount: a.amount
 		});
 	}
-	function u() {
-		f({
+	function s() {
+		g({
 			iframe: e,
 			merchantName: a.merchantName
 		});
 	}
-	function p() {
-		l({
+	function c() {
+		p({
 			iframe: e,
 			height: a.height ?? "48px",
 			props: a.buttonProps ?? {}
 		});
 	}
-	function m(r) {
+	function l(r) {
 		if (r.source === e.contentWindow) switch (r.data.type) {
 			case "IFRAME_READY":
-				s(e), c({
+				d(e), f({
 					iframe: e,
 					appearance: {}
-				}), o(), u(), p();
+				}), o(), s(), c();
 				break;
 			case "UPDATE_HEIGHT":
 				a.onHeightChange?.(r.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				c({
+				f({
 					iframe: e,
 					appearance: r.data.appearance
 				});
@@ -227,7 +283,7 @@ function x(e, { height: r = "48px", ...i }) {
 				break;
 			case "APPLE_PAY_WINDOW_OPEN":
 				t({ onCancel: () => {
-					b(e), n();
+					D(e), n();
 				} });
 				break;
 			case "APPLE_PAY_WINDOW_CLOSE":
@@ -238,7 +294,7 @@ function x(e, { height: r = "48px", ...i }) {
 					paymentIntentCreateAttributes: r.data.paymentIntentCreateAttributes,
 					customerCreateAttributes: r.data.customerCreateAttributes
 				}).then((t) => {
-					h({
+					S({
 						iframe: e,
 						token: t
 					});
@@ -252,55 +308,155 @@ function x(e, { height: r = "48px", ...i }) {
 			case "CONFIRMATION_RESULT": n(), a.onResult(r.data.result);
 		}
 	}
-	return window.addEventListener("message", m), {
+	return window.addEventListener("message", l), {
 		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();
+			}, t && o(), n && s(), r && c();
 		},
 		destroy() {
-			window.removeEventListener("message", m), n();
+			window.removeEventListener("message", l), n();
 		}
 	};
 }
 //#endregion
+//#region src/form-skeleton.ts
+var k = "amos-js-form-skeleton-styles", te = {
+	"--accent": "oklch(0.97 0 0)",
+	"--radius": "0.625rem",
+	"--input-height": "2.25rem",
+	"--floating-input-height": "3.25rem",
+	"--field-gap": "1rem",
+	"--control-gap": "0.5rem",
+	"--label-font-size": "0.875rem"
+}, ne = "\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.amos-js-wallet-skeleton {\n  flex: none;\n  width: 100%;\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 A() {
+	if (document.getElementById(k)) return;
+	let e = document.createElement("style");
+	e.id = k, e.textContent = ne, document.head.appendChild(e);
+}
+function j(e, t) {
+	for (let [t, n] of Object.entries(te)) 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 M(e, t) {
+	let n = document.createElement("div");
+	if (n.className = e, t) for (let e of t) n.appendChild(e);
+	return n;
+}
+function N(e, t) {
+	let n = M("amos-js-form-skeleton-field");
+	t !== void 0 && (n.style.flexGrow = String(t)), e === "above" && n.appendChild(M("amos-js-form-skeleton-label"));
+	let r = M("amos-js-form-skeleton-input");
+	return e === "floating" && r.classList.add("amos-js-form-skeleton-input-floating"), n.appendChild(r), n;
+}
+function P(e, t) {
+	return M(t ? "amos-js-form-skeleton-row-stack" : "amos-js-form-skeleton-row", e);
+}
+function re({ labels: e, requirement: t, wrapCountryZip: n }) {
+	return t === "full" ? [
+		N(e),
+		N(e),
+		P([
+			N(e, 1.4),
+			N(e, .7),
+			N(e, .8)
+		], !1),
+		N(e)
+	] : [P([N(e), N(e)], n)];
+}
+function ie(e) {
+	let t = e.appearance?.labels ?? "above", n = e.billingAddressRequirement ?? "country";
+	if (e.kind === "card") {
+		let r = [N(t), P([N(t), N(t)], !1)];
+		return e.additionalFields?.cardholderName && r.push(N(t)), r.push(...re({
+			labels: t,
+			requirement: n,
+			wrapCountryZip: !1
+		})), r;
+	}
+	return [
+		N(t),
+		P([N(t), N(t)], !0),
+		N(t),
+		P([N("above"), N("above")], !0),
+		...re({
+			labels: t,
+			requirement: n,
+			wrapCountryZip: !0
+		})
+	];
+}
+function ae(e) {
+	A();
+	let t = M("amos-js-form-skeleton");
+	t.setAttribute("aria-hidden", "true");
+	function n(e) {
+		j(t, e.appearance), t.replaceChildren(...ie(e));
+	}
+	return n(e), {
+		element: t,
+		update: n
+	};
+}
+function F(e) {
+	A();
+	let t = M("amos-js-form-skeleton-input amos-js-wallet-skeleton");
+	t.setAttribute("aria-hidden", "true");
+	function n(e) {
+		j(t, void 0), t.style.height = e.height, t.style.borderRadius = e.borderRadius ?? "4px";
+	}
+	return n(e), {
+		element: t,
+		update: n
+	};
+}
+function I(e) {
+	if (typeof e == "number" && Number.isFinite(e)) return `${e}px`;
+	if (typeof e == "string" && e.trim() !== "") return e.trim();
+}
+function L({ iframeStyle: e, buttonProps: t }) {
+	return I(e?.borderRadius) ?? I(t?.buttonRadius) ?? I(t?.style?.borderRadius) ?? I(t?.style?.["--apple-pay-button-border-radius"]) ?? "4px";
+}
+//#endregion
 //#region src/google-pay.ts
-function S(e) {
+function R(e) {
 	return `${i(e)}/iframe/google-pay?token=${e}`;
 }
-function C() {
+function z() {
 	return "48px";
 }
-function w(e, { height: t = "48px", ...n }) {
+function B(e, { height: t = "48px", ...n }) {
 	let r = {
 		...n,
 		height: t
 	};
 	function i() {
-		d({
+		h({
 			iframe: e,
 			amount: r.amount
 		});
 	}
 	function a() {
-		f({
+		g({
 			iframe: e,
 			merchantName: r.merchantName
 		});
 	}
 	function o() {
-		u({
+		m({
 			iframe: e,
 			height: r.height ?? "48px",
 			props: r.buttonProps ?? {}
 		});
 	}
-	function l(t) {
+	function s(t) {
 		if (t.source === e.contentWindow) switch (t.data.type) {
 			case "IFRAME_READY":
-				s(e), c({
+				d(e), f({
 					iframe: e,
 					appearance: {}
 				}), i(), a(), o();
@@ -309,7 +465,7 @@ function w(e, { height: t = "48px", ...n }) {
 				r.onHeightChange?.(t.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				c({
+				f({
 					iframe: e,
 					appearance: t.data.appearance
 				});
@@ -322,7 +478,7 @@ function w(e, { height: t = "48px", ...n }) {
 					paymentIntentCreateAttributes: t.data.paymentIntentCreateAttributes,
 					customerCreateAttributes: t.data.customerCreateAttributes
 				}).then((t) => {
-					h({
+					S({
 						iframe: e,
 						token: t
 					});
@@ -336,7 +492,7 @@ function w(e, { height: t = "48px", ...n }) {
 			case "CONFIRMATION_RESULT": r.onResult(t.data.result);
 		}
 	}
-	return window.addEventListener("message", l), {
+	return window.addEventListener("message", s), {
 		update(e) {
 			let t = "amount" in e, n = "merchantName" in e, s = "height" in e || "buttonProps" in e;
 			r = {
@@ -345,11 +501,11 @@ function w(e, { height: t = "48px", ...n }) {
 			}, t && i(), n && a(), s && o();
 		},
 		destroy() {
-			window.removeEventListener("message", l);
+			window.removeEventListener("message", s);
 		}
 	};
 }
-function T({ paymentData: e }) {
+function oe({ paymentData: e }) {
 	return { paymentMethod: {
 		type: "googlepay",
 		billing_address_attributes: {
@@ -367,96 +523,15 @@ function T({ paymentData: e }) {
 	} };
 }
 //#endregion
-//#region src/form-skeleton.ts
-var E = "amos-js-form-skeleton-styles", D = {
-	"--accent": "oklch(0.97 0 0)",
-	"--radius": "0.625rem",
-	"--input-height": "2.25rem",
-	"--floating-input-height": "3.25rem",
-	"--field-gap": "1rem",
-	"--control-gap": "0.5rem",
-	"--label-font-size": "0.875rem"
-}, 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 = E, e.textContent = O, document.head.appendChild(e);
-}
-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 j(e, t) {
-	let n = document.createElement("div");
-	if (n.className = e, t) for (let e of t) n.appendChild(e);
-	return n;
-}
-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 N(e, t) {
-	return j(t ? "amos-js-form-skeleton-row-stack" : "amos-js-form-skeleton-row", e);
-}
-function P({ labels: e, requirement: t, wrapCountryZip: n }) {
-	return t === "full" ? [
-		M(e),
-		M(e),
-		N([
-			M(e, 1.4),
-			M(e, .7),
-			M(e, .8)
-		], !1),
-		M(e)
-	] : [N([M(e), M(e)], n)];
-}
-function F(e) {
-	let t = e.appearance?.labels ?? "above", n = e.billingAddressRequirement ?? "country";
-	if (e.kind === "card") {
-		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 [
-		M(t),
-		N([M(t), M(t)], !0),
-		M(t),
-		N([M("above"), M("above")], !0),
-		...P({
-			labels: t,
-			requirement: n,
-			wrapCountryZip: !0
-		})
-	];
-}
-function I(e) {
-	k();
-	let t = j("amos-js-form-skeleton");
-	t.setAttribute("aria-hidden", "true");
-	function n(e) {
-		A(t, e.appearance), t.replaceChildren(...F(e));
-	}
-	return n(e), {
-		element: t,
-		update: n
-	};
-}
-//#endregion
 //#region src/payment-method-form.ts
-var L = {
+var V = {
 	country: 212,
 	full: 452
-}, R = 80, z = {
+}, se = 80, H = {
 	country: 400,
 	full: 640
 };
-function B(e, t = { cardholderName: !1 }, n = "country") {
+function U(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,
@@ -464,25 +539,25 @@ function B(e, t = { cardholderName: !1 }, n = "country") {
 	});
 	return `${i(e)}/iframe/card?${a}`;
 }
-function V(e, t = "country") {
+function W(e, t = "country") {
 	let n = new URLSearchParams({
 		token: e,
 		billingAddressRequirement: t
 	});
 	return `${i(e)}/iframe/bank?${n}`;
 }
-function H(e = { cardholderName: !1 }, t = "country") {
-	return `${(L[t] ?? L.country) + (e.cardholderName ? R : 0)}px`;
+function G(e = { cardholderName: !1 }, t = "country") {
+	return `${(V[t] ?? V.country) + (e.cardholderName ? se : 0)}px`;
 }
-function U(e = "country") {
-	return `${z[e] ?? z.country}px`;
+function K(e = "country") {
+	return `${H[e] ?? H.country}px`;
 }
-function W(e, t) {
+function q(e, t) {
 	let n = { ...t };
 	function r(t) {
 		if (t.source === e.contentWindow) switch (t.data.type) {
 			case "IFRAME_READY":
-				s(e), c({
+				d(e), f({
 					iframe: e,
 					appearance: n.appearance
 				});
@@ -491,7 +566,7 @@ function W(e, t) {
 				n.onHeightChange?.(t.data.height);
 				break;
 			case "UPDATE_APPEARANCE":
-				c({
+				f({
 					iframe: e,
 					appearance: t.data.appearance
 				});
@@ -500,6 +575,7 @@ function W(e, t) {
 				n.onAppearanceReady?.();
 				break;
 			case "FORM_VALIDITY_CHANGE":
+				if (s(e)?.requiresVerification) break;
 				n.onValidityChange?.({ isValid: t.data.isValid });
 				break;
 			case "CONFIRMATION_RESULT": n.onResult(t.data.result);
@@ -511,7 +587,7 @@ function W(e, t) {
 			n = {
 				...n,
 				...t
-			}, r && c({
+			}, r && f({
 				iframe: e,
 				appearance: n.appearance
 			});
@@ -522,8 +598,187 @@ function W(e, t) {
 	};
 }
 //#endregion
+//#region src/plaid.ts
+var J = "https://cdn.plaid.com/link/v2/stable/link-initialize.js";
+function Y({ amount: e, achThreshold: t }) {
+	return t == null ? !1 : e == null || e >= t;
+}
+function ce(e) {
+	if (e == null) return;
+	let t = e.trim();
+	if (t === "") return;
+	let n = Number(t.replace(/[^\d.]/g, ""));
+	if (Number.isFinite(n)) return Math.round(n * 100);
+}
+function le(e) {
+	return e.account_id ?? e.account?.id ?? e.accounts?.[0]?.id;
+}
+function ue(e) {
+	let t = e.account ?? e.accounts?.[0];
+	return {
+		bankName: e.institution?.name ?? "Bank account",
+		last4: t?.mask ?? ""
+	};
+}
+var X;
+function de() {
+	for (let e of document.querySelectorAll(`script[src="${J}"]`)) e.remove();
+}
+function fe() {
+	return typeof window > "u" ? Promise.reject(/* @__PURE__ */ Error("Plaid Link requires a browser")) : window.Plaid ? Promise.resolve() : X || (de(), X = new Promise((e, t) => {
+		let n = document.createElement("script");
+		n.src = J, n.async = !0;
+		let r = (e) => {
+			n.remove(), X = void 0, t(Error(e));
+		};
+		n.addEventListener("load", () => {
+			if (window.Plaid) {
+				e();
+				return;
+			}
+			r("Plaid Link failed to initialize");
+		}, { once: !0 }), n.addEventListener("error", () => r("Failed to load Plaid Link"), { once: !0 }), document.head.append(n);
+	}), X);
+}
+async function pe({ token: e, onSuccess: t, onExit: n, signal: r }) {
+	if (await fe(), r?.aborted) return () => {};
+	if (!window.Plaid) throw Error("Plaid Link failed to initialize");
+	let i = window.Plaid.create({
+		token: e,
+		onSuccess: t,
+		onExit: (e) => {
+			n?.(e);
+		}
+	});
+	return r?.aborted ? (i.destroy(), () => {}) : (i.open(), () => {
+		i.destroy();
+	});
+}
+//#endregion
+//#region src/plaid-bank-ui.ts
+var me = "amos-js-plaid-bank-ui-styles", he = "\n.amos-js-plaid-panel {\n  box-sizing: border-box;\n  color: var(--foreground, oklch(0.145 0 0));\n  display: none;\n  flex-direction: column;\n  font-family: inherit;\n  gap: var(--control-gap, 0.5rem);\n  width: 100%;\n}\n.amos-js-plaid-panel[data-mode=\"connect\"],\n.amos-js-plaid-panel[data-mode=\"linked\"] {\n  display: flex;\n}\n.amos-js-plaid-connect {\n  align-items: center;\n  background: var(--background, oklch(1 0 0));\n  border: var(--input-border-width, 1px) solid var(--border, oklch(0.922 0 0));\n  border-radius: calc(var(--radius, 0.625rem) * 0.8);\n  box-shadow: var(--input-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n  box-sizing: border-box;\n  color: var(--foreground, oklch(0.145 0 0));\n  cursor: pointer;\n  display: inline-flex;\n  flex-shrink: 0;\n  font: inherit;\n  font-size: var(--input-font-size, 0.875rem);\n  font-weight: 500;\n  height: var(--input-height, 2.25rem);\n  justify-content: center;\n  line-height: 1.25;\n  outline: none;\n  padding: 0 var(--input-padding, 0.75rem);\n  transition: color 150ms, background-color 150ms, border-color 150ms, box-shadow 150ms;\n  width: 100%;\n}\n.amos-js-plaid-panel[data-mode=\"linked\"] .amos-js-plaid-connect {\n  display: none;\n}\n.amos-js-plaid-connect:hover:not(:disabled) {\n  background: var(--accent, oklch(0.97 0 0));\n  color: var(--accent-foreground, oklch(0.205 0 0));\n}\n.amos-js-plaid-connect:focus-visible {\n  border-color: var(--ring, oklch(0.708 0 0));\n  box-shadow:\n    var(--input-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05)),\n    0 0 0 var(--ring-width, 3px)\n      color-mix(in oklab, var(--ring, oklch(0.708 0 0)) 50%, transparent);\n}\n.amos-js-plaid-connect:disabled {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n.amos-js-plaid-linked {\n  display: none;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.amos-js-plaid-panel[data-mode=\"linked\"] .amos-js-plaid-linked {\n  display: flex;\n}\n.amos-js-plaid-linked-name {\n  font-size: var(--input-font-size, 0.875rem);\n  font-weight: 500;\n}\n.amos-js-plaid-linked-meta {\n  color: var(--muted-foreground, oklch(0.556 0 0));\n  font-size: 0.75rem;\n}\n.amos-js-plaid-disconnect {\n  align-self: flex-start;\n  background: none;\n  border: none;\n  border-radius: calc(var(--radius, 0.625rem) * 0.8);\n  color: var(--muted-foreground, oklch(0.556 0 0));\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--input-font-size, 0.875rem);\n  margin-top: 0.25rem;\n  outline: none;\n  padding: 0;\n}\n.amos-js-plaid-disconnect:hover {\n  color: var(--accent-foreground, oklch(0.205 0 0));\n}\n.amos-js-plaid-disconnect:focus-visible {\n  box-shadow:\n    0 0 0 var(--ring-width, 3px)\n      color-mix(in oklab, var(--ring, oklch(0.708 0 0)) 50%, transparent);\n}\n.amos-js-plaid-error {\n  color: var(--destructive, oklch(0.577 0.245 27.325));\n  display: none;\n  font-size: var(--error-font-size, 0.875rem);\n  margin: 0;\n}\n.amos-js-plaid-error:not(:empty) {\n  display: block;\n}\n@media (prefers-reduced-motion: reduce) {\n  .amos-js-plaid-connect {\n    transition: none;\n  }\n}\n";
+function ge() {
+	if (document.getElementById(me)) return;
+	let e = document.createElement("style");
+	e.id = me, e.textContent = he, document.head.append(e);
+}
+function _e(e, t, n) {
+	for (let t of n) e.style.removeProperty(t);
+	n.length = 0;
+	let r = t?.themeVariables;
+	if (r) for (let [t, i] of Object.entries(r)) typeof i == "string" && i.trim() !== "" && (e.style.setProperty(t, i.trim()), n.push(t));
+}
+function ve({ host: e, iframe: t, options: n }) {
+	ge();
+	let r = { ...n }, i = [], a = !1, s, l = !1, u, d = !1, f, p, m = new AbortController(), h, g = document.createElement("div");
+	g.className = "amos-js-plaid-panel", g.setAttribute("data-amos-plaid-panel", "true"), g.dataset.mode = "hidden", _e(g, r.appearance, i);
+	let _ = document.createElement("button");
+	_.type = "button", _.className = "amos-js-plaid-connect", _.textContent = "Connect bank account", _.setAttribute("data-testid", "amos-plaid-connect");
+	let v = document.createElement("div");
+	v.className = "amos-js-plaid-linked";
+	let y = document.createElement("span");
+	y.className = "amos-js-plaid-linked-name";
+	let b = document.createElement("span");
+	b.className = "amos-js-plaid-linked-meta";
+	let x = document.createElement("button");
+	x.type = "button", x.className = "amos-js-plaid-disconnect", x.textContent = "Disconnect", x.setAttribute("aria-label", "Disconnect bank account");
+	let S = document.createElement("p");
+	S.className = "amos-js-plaid-error", S.setAttribute("role", "alert"), v.append(y, b, x), g.append(_, v, S), e.append(g);
+	let C = t.parentElement;
+	function w(e) {
+		S.textContent = e ?? "";
+	}
+	function T() {
+		return a ? l ? !0 : Y({
+			amount: ce(r.amount),
+			achThreshold: s
+		}) : !1;
+	}
+	function E() {
+		let e = !!h;
+		f !== e && (f = e, r.onValidityChange?.({ isValid: e }));
+	}
+	function D() {
+		let e = T();
+		if (o(t, {
+			requiresVerification: e,
+			plaid: e ? h?.credentials : void 0,
+			clearLinked: O
+		}), !e) {
+			g.dataset.mode = "hidden", C && (C.style.display = ""), f = void 0;
+			return;
+		}
+		g.dataset.mode = h ? "linked" : "connect", C && (C.style.display = "none"), h && (y.textContent = h.bankName, b.textContent = h.last4 ? `****${h.last4}` : "Connected"), E();
+	}
+	function O() {
+		h = void 0, u = void 0, p?.(), p = void 0, w(void 0), D();
+	}
+	function k(e) {
+		if (e.source === t.contentWindow && e.data.type === "ACH_THRESHOLD") {
+			if (a = !0, s = e.data.achThreshold ?? void 0, l = e.data.requireVerification === !0, h && !T()) {
+				O();
+				return;
+			}
+			D();
+		}
+	}
+	return window.addEventListener("message", k), D(), x.addEventListener("click", () => {
+		O();
+	}), _.addEventListener("click", () => {
+		(async () => {
+			if (!(m.signal.aborted || d)) {
+				d = !0, _.disabled = !0, w(void 0);
+				try {
+					if (u ||= await ee({ iframe: t }), m.signal.aborted) return;
+					let e = u;
+					p?.(), p = await pe({
+						token: e,
+						signal: m.signal,
+						onSuccess: (e, t) => {
+							if (m.signal.aborted) return;
+							let n = le(t);
+							if (!n) {
+								w("Select a bank account to continue.");
+								return;
+							}
+							let r = ue(t);
+							h = {
+								credentials: {
+									public_token: e,
+									account_id: n
+								},
+								bankName: r.bankName,
+								last4: r.last4
+							}, u = void 0, D();
+						},
+						onExit: (e) => {
+							m.signal.aborted || e?.error_code === "INVALID_LINK_TOKEN" && (u = void 0);
+						}
+					}), m.signal.aborted && (p(), p = void 0);
+				} catch (e) {
+					if (u = void 0, m.signal.aborted) return;
+					w(e instanceof Error ? e.message : "Could not connect bank.");
+				} finally {
+					d = !1, m.signal.aborted || (_.disabled = !1);
+				}
+			}
+		})();
+	}), {
+		update(e) {
+			if ("amount" in e && (r.amount = e.amount), "onValidityChange" in e && (r.onValidityChange = e.onValidityChange), "appearance" in e && (r.appearance = e.appearance, _e(g, r.appearance, i)), h && !T()) {
+				O();
+				return;
+			}
+			D();
+		},
+		destroy() {
+			m.abort(), window.removeEventListener("message", k), p?.(), p = void 0, c(t), g.remove();
+		}
+	};
+}
+//#endregion
 //#region src/mount.ts
-function G(e) {
+function Z(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.`);
@@ -531,19 +786,29 @@ function G(e) {
 	}
 	return e;
 }
-var K = {
+var ye = {
 	width: "calc(100% + 8px)",
 	transition: "opacity 150ms ease-in, height 200ms ease-in-out",
 	margin: "0 -4px",
 	opacity: "0",
 	border: "0"
-}, q = {
+}, be = {
 	width: "100%",
 	transition: "height 200ms ease-in-out",
 	margin: "0",
 	opacity: "0",
 	border: "0"
-}, J = {
+}, xe = {
+	position: "absolute",
+	top: "0",
+	left: "0",
+	width: "100%",
+	height: "100%",
+	margin: "0",
+	opacity: "0",
+	transition: "none",
+	pointerEvents: "none"
+}, Se = {
 	position: "absolute",
 	top: "0",
 	left: "-4px",
@@ -553,15 +818,15 @@ var K = {
 	transition: "none",
 	pointerEvents: "none"
 };
-function Y({ src: e, title: t, name: n, height: r, allow: i, className: a, style: o = K }) {
+function Q({ src: e, title: t, name: n, height: r, allow: i, className: a, style: o = ye }) {
 	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 X({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
+function Ce({ 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 = I(r);
-	Object.assign(t.style, J), i.append(a.element, t), e.appendChild(i);
+	let a = ae(r);
+	Object.assign(t.style, Se), 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;
@@ -573,7 +838,7 @@ function X({ 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 = 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 = "none", t.style.position = "", t.style.top = "", t.style.left = "", t.style.margin = ye.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);
 	}
@@ -582,7 +847,7 @@ function X({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
 		let e = p(), t = f();
 		Number.isFinite(e) && e >= t - 2 && m();
 	}
-	let g = W(t, {
+	let g = q(t, {
 		...n,
 		onHeightChange: (e) => {
 			c = e, o ? t.style.height = e : h(), n.onHeightChange?.(e);
@@ -606,15 +871,63 @@ function X({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
 		}
 	};
 }
-function Z(e, t) {
-	let n = G(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t;
-	return X({
+function $({ host: e, iframe: t, listenerOptions: n, iframeStyle: r, attachListeners: i }) {
+	let a = {
+		height: n.height ?? "48px",
+		borderRadius: L({
+			iframeStyle: r,
+			buttonProps: n.buttonProps
+		})
+	}, o = F(a), s = document.createElement("div");
+	s.style.position = "relative", s.style.width = "100%", s.style.height = a.height, s.style.overflow = "hidden", s.setAttribute("aria-busy", "true"), Object.assign(t.style, xe), t.style.height = "100%", s.append(o.element, t), e.appendChild(s);
+	let c = !1, l = !1, u, d = n;
+	function f() {
+		c || (c = !0, u !== void 0 && (clearTimeout(u), u = void 0), t.style.opacity = "1", t.style.pointerEvents = "", o.element.remove(), s.removeAttribute("aria-busy"));
+	}
+	function p() {
+		c || !l || f();
+	}
+	let m = i(t, {
+		...n,
+		onHeightChange: (e) => {
+			d.onHeightChange?.(e);
+		},
+		onAppearanceReady: () => {
+			l = !0, p(), d.onAppearanceReady?.();
+		}
+	});
+	return u = setTimeout(() => {
+		f();
+	}, 1500), {
+		iframe: t,
+		update(e) {
+			d = {
+				...d,
+				...e
+			};
+			let t = { ...e };
+			delete t.onAppearanceReady, delete t.onHeightChange, m.update(t), a = {
+				height: d.height ?? a.height,
+				borderRadius: L({
+					iframeStyle: r,
+					buttonProps: d.buttonProps
+				})
+			}, s.style.height = a.height, c || o.update(a);
+		},
+		destroy() {
+			u !== void 0 && clearTimeout(u), m.destroy(), s.remove();
+		}
+	};
+}
+function we(e, t) {
+	let n = Z(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t;
+	return Ce({
 		host: n,
-		iframe: Y({
-			src: B(r, i, a),
+		iframe: Q({
+			src: U(r, i, a),
 			title: "Secure credit card payment method form powered by Amos",
 			name: "amos-credit-card-payment-method-form",
-			height: H(i, a)
+			height: G(i, a)
 		}),
 		listenerOptions: o,
 		skeletonOptions: {
@@ -625,79 +938,75 @@ function Z(e, t) {
 		}
 	});
 }
-function Q(e, t) {
-	let n = G(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t;
-	return X({
+function Te(e, t) {
+	let n = Z(e), { renderToken: r, billingAddressRequirement: i = "country", amount: a, ...o } = t, s = Q({
+		src: W(r, i),
+		title: "Secure bank account payment method form powered by Amos",
+		name: "amos-bank-account-payment-method-form",
+		height: K(i)
+	}), c = Ce({
 		host: n,
-		iframe: Y({
-			src: V(r, i),
-			title: "Secure bank account payment method form powered by Amos",
-			name: "amos-bank-account-payment-method-form",
-			height: U(i)
-		}),
-		listenerOptions: a,
+		iframe: s,
+		listenerOptions: o,
 		skeletonOptions: {
 			kind: "bank",
-			appearance: a.appearance,
+			appearance: o.appearance,
 			billingAddressRequirement: i
 		}
+	}), l = ve({
+		host: n,
+		iframe: s,
+		options: {
+			amount: a,
+			appearance: o.appearance,
+			onValidityChange: o.onValidityChange
+		}
 	});
+	return {
+		iframe: s,
+		update(e) {
+			c.update(e), l.update(e);
+		},
+		destroy() {
+			l.destroy(), c.destroy();
+		}
+	};
 }
-function $(e, t) {
-	let n = G(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Y({
-		src: S(r),
+function Ee(e, t) {
+	let n = Z(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Q({
+		src: R(r),
 		title: "Secure Google Pay button powered by Amos",
 		name: "amos-google-pay-button",
-		height: o.height ?? C(),
+		height: o.height ?? z(),
 		allow: "payment",
 		className: i,
-		style: q
-	});
-	Object.assign(s.style, a), n.appendChild(s);
-	let c = w(s, {
-		...o,
-		onHeightChange: (e) => {
-			s.style.height = e, o.onHeightChange?.(e);
-		},
-		onAppearanceReady: () => {
-			s.style.opacity = "1", o.onAppearanceReady?.();
-		}
+		style: be
 	});
-	return {
+	return Object.assign(s.style, a), $({
+		host: n,
 		iframe: s,
-		update: c.update,
-		destroy() {
-			c.destroy(), s.remove();
-		}
-	};
+		listenerOptions: o,
+		iframeStyle: a,
+		attachListeners: B
+	});
 }
-function ee(e, t) {
-	let n = G(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Y({
-		src: v(r),
+function De(e, t) {
+	let n = Z(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Q({
+		src: T(r),
 		title: "Secure Apple Pay button powered by Amos",
 		name: "amos-apple-pay-button",
-		height: o.height ?? y(),
+		height: o.height ?? E(),
 		allow: "payment",
 		className: i,
-		style: q
-	});
-	Object.assign(s.style, a), n.appendChild(s);
-	let c = x(s, {
-		...o,
-		onHeightChange: (e) => {
-			s.style.height = e, o.onHeightChange?.(e);
-		},
-		onAppearanceReady: () => {
-			s.style.opacity = "1", o.onAppearanceReady?.();
-		}
+		style: be
 	});
-	return {
+	return Object.assign(s.style, a), $({
+		host: n,
 		iframe: s,
-		update: c.update,
-		destroy() {
-			c.destroy(), s.remove();
-		}
-	};
+		listenerOptions: o,
+		iframeStyle: a,
+		attachListeners: O
+	});
 }
 //#endregion
-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 };
+export { ne as SKELETON_STYLES, O as attachApplePayButtonListeners, B as attachGooglePayButtonListeners, q as attachPaymentMethodFormListeners, S as confirmPaymentIntent, C as confirmSetupIntent, l as createMessage, ae as createPaymentMethodFormSkeleton, F as createWalletButtonSkeleton, r as decodeJwt, A as ensureSkeletonStyles, oe as formatGooglePayPaymentData, E as getApplePayButtonInitialHeight, T as getApplePayButtonSrc, K as getBankAccountFormInitialHeight, W as getBankAccountFormSrc, G as getCreditCardFormInitialHeight, U as getCreditCardFormSrc, i as getEmbedOrigin, z as getGooglePayButtonInitialHeight, R as getGooglePayButtonSrc, ue as linkedBankLabelFromMetadata, fe as loadPlaidScript, De as mountAmosApplePayButton, Te as mountAmosBankAccountPaymentMethodForm, we as mountAmosCreditCardPaymentMethodForm, Ee as mountAmosGooglePayButton, pe as openPlaidLink, le as plaidAccountIdFromMetadata, Y as requiresAchVerification, y as resetForm, L as resolveWalletButtonSkeletonBorderRadius, w as sendConfirmationResult, d as sendParentReadyMessage, h as updateAmount, f as updateAppearance, p as updateApplePayButton, m as updateGooglePayButton, g as updateMerchantName, _ as validateForm };