@amos.com/amos-js 0.9.15 → 0.9.17

package/dist/index.mjs

@@ -178,10 +178,10 @@ function v(e) {
 function y() {
 	return "48px";
 }
-function b(e) {
+function ee(e) {
 	e.contentWindow?.postMessage(a({ type: "APPLE_PAY_CANCEL" }), o(e));
 }
-function x(e, { height: r = "48px", ...i }) {
+function b(e, { height: r = "48px", ...i }) {
 	let a = {
 		...i,
 		height: r
@@ -227,7 +227,7 @@ function x(e, { height: r = "48px", ...i }) {
 				break;
 			case "APPLE_PAY_WINDOW_OPEN":
 				t({ onCancel: () => {
-					b(e), n();
+					ee(e), n();
 				} });
 				break;
 			case "APPLE_PAY_WINDOW_CLOSE":
@@ -266,14 +266,114 @@ function x(e, { height: r = "48px", ...i }) {
 	};
 }
 //#endregion
+//#region src/form-skeleton.ts
+var x = "amos-js-form-skeleton-styles", S = {
+	"--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"
+}, C = "\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 w() {
+	if (document.getElementById(x)) return;
+	let e = document.createElement("style");
+	e.id = x, e.textContent = C, document.head.appendChild(e);
+}
+function T(e, t) {
+	for (let [t, n] of Object.entries(S)) 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 E(e, t) {
+	let n = document.createElement("div");
+	if (n.className = e, t) for (let e of t) n.appendChild(e);
+	return n;
+}
+function D(e, t) {
+	let n = E("amos-js-form-skeleton-field");
+	t !== void 0 && (n.style.flexGrow = String(t)), e === "above" && n.appendChild(E("amos-js-form-skeleton-label"));
+	let r = E("amos-js-form-skeleton-input");
+	return e === "floating" && r.classList.add("amos-js-form-skeleton-input-floating"), n.appendChild(r), n;
+}
+function O(e, t) {
+	return E(t ? "amos-js-form-skeleton-row-stack" : "amos-js-form-skeleton-row", e);
+}
+function k({ labels: e, requirement: t, wrapCountryZip: n }) {
+	return t === "full" ? [
+		D(e),
+		D(e),
+		O([
+			D(e, 1.4),
+			D(e, .7),
+			D(e, .8)
+		], !1),
+		D(e)
+	] : [O([D(e), D(e)], n)];
+}
+function A(e) {
+	let t = e.appearance?.labels ?? "above", n = e.billingAddressRequirement ?? "country";
+	if (e.kind === "card") {
+		let r = [D(t), O([D(t), D(t)], !1)];
+		return e.additionalFields?.cardholderName && r.push(D(t)), r.push(...k({
+			labels: t,
+			requirement: n,
+			wrapCountryZip: !1
+		})), r;
+	}
+	return [
+		D(t),
+		O([D(t), D(t)], !0),
+		D(t),
+		O([D("above"), D("above")], !0),
+		...k({
+			labels: t,
+			requirement: n,
+			wrapCountryZip: !0
+		})
+	];
+}
+function j(e) {
+	w();
+	let t = E("amos-js-form-skeleton");
+	t.setAttribute("aria-hidden", "true");
+	function n(e) {
+		T(t, e.appearance), t.replaceChildren(...A(e));
+	}
+	return n(e), {
+		element: t,
+		update: n
+	};
+}
+function M(e) {
+	w();
+	let t = E("amos-js-form-skeleton-input amos-js-wallet-skeleton");
+	t.setAttribute("aria-hidden", "true");
+	function n(e) {
+		T(t, void 0), t.style.height = e.height, t.style.borderRadius = e.borderRadius ?? "4px";
+	}
+	return n(e), {
+		element: t,
+		update: n
+	};
+}
+function N(e) {
+	if (typeof e == "number" && Number.isFinite(e)) return `${e}px`;
+	if (typeof e == "string" && e.trim() !== "") return e.trim();
+}
+function P({ iframeStyle: e, buttonProps: t }) {
+	return N(e?.borderRadius) ?? N(t?.buttonRadius) ?? N(t?.style?.borderRadius) ?? N(t?.style?.["--apple-pay-button-border-radius"]) ?? "4px";
+}
+//#endregion
 //#region src/google-pay.ts
-function S(e) {
+function F(e) {
 	return `${i(e)}/iframe/google-pay?token=${e}`;
 }
-function C() {
+function I() {
 	return "48px";
 }
-function w(e, { height: t = "48px", ...n }) {
+function L(e, { height: t = "48px", ...n }) {
 	let r = {
 		...n,
 		height: t
@@ -349,7 +449,7 @@ function w(e, { height: t = "48px", ...n }) {
 		}
 	};
 }
-function T({ paymentData: e }) {
+function R({ paymentData: e }) {
 	return { paymentMethod: {
 		type: "googlepay",
 		billing_address_attributes: {
@@ -367,96 +467,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 z = {
 	country: 212,
 	full: 452
-}, R = 80, z = {
+}, te = 80, B = {
 	country: 400,
 	full: 640
 };
-function B(e, t = { cardholderName: !1 }, n = "country") {
+function V(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,20 +483,20 @@ function B(e, t = { cardholderName: !1 }, n = "country") {
 	});
 	return `${i(e)}/iframe/card?${a}`;
 }
-function V(e, t = "country") {
+function H(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 U(e = { cardholderName: !1 }, t = "country") {
+	return `${(z[t] ?? z.country) + (e.cardholderName ? te : 0)}px`;
 }
-function U(e = "country") {
-	return `${z[e] ?? z.country}px`;
+function W(e = "country") {
+	return `${B[e] ?? B.country}px`;
 }
-function W(e, t) {
+function G(e, t) {
 	let n = { ...t };
 	function r(t) {
 		if (t.source === e.contentWindow) switch (t.data.type) {
@@ -523,7 +542,7 @@ function W(e, t) {
 }
 //#endregion
 //#region src/mount.ts
-function G(e) {
+function K(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 +550,29 @@ function G(e) {
 	}
 	return e;
 }
-var K = {
+var q = {
 	width: "calc(100% + 8px)",
 	transition: "opacity 150ms ease-in, height 200ms ease-in-out",
 	margin: "0 -4px",
 	opacity: "0",
 	border: "0"
-}, q = {
+}, J = {
 	width: "100%",
 	transition: "height 200ms ease-in-out",
 	margin: "0",
 	opacity: "0",
 	border: "0"
-}, J = {
+}, Y = {
+	position: "absolute",
+	top: "0",
+	left: "0",
+	width: "100%",
+	height: "100%",
+	margin: "0",
+	opacity: "0",
+	transition: "none",
+	pointerEvents: "none"
+}, X = {
 	position: "absolute",
 	top: "0",
 	left: "-4px",
@@ -553,15 +582,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 Z({ src: e, title: t, name: n, height: r, allow: i, className: a, style: o = q }) {
 	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 Q({ 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 = j(r);
+	Object.assign(t.style, X), 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 +602,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 = q.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 +611,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 = G(t, {
 		...n,
 		onHeightChange: (e) => {
 			c = e, o ? t.style.height = e : h(), n.onHeightChange?.(e);
@@ -606,15 +635,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: P({
+			iframeStyle: r,
+			buttonProps: n.buttonProps
+		})
+	}, o = M(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, Y), 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: P({
+					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 ne(e, t) {
+	let n = K(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t;
+	return Q({
 		host: n,
-		iframe: Y({
-			src: B(r, i, a),
+		iframe: Z({
+			src: V(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: U(i, a)
 		}),
 		listenerOptions: o,
 		skeletonOptions: {
@@ -625,15 +702,15 @@ function Z(e, t) {
 		}
 	});
 }
-function Q(e, t) {
-	let n = G(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t;
-	return X({
+function re(e, t) {
+	let n = K(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t;
+	return Q({
 		host: n,
-		iframe: Y({
-			src: V(r, i),
+		iframe: Z({
+			src: H(r, i),
 			title: "Secure bank account payment method form powered by Amos",
 			name: "amos-bank-account-payment-method-form",
-			height: U(i)
+			height: W(i)
 		}),
 		listenerOptions: a,
 		skeletonOptions: {
@@ -643,61 +720,41 @@ function Q(e, t) {
 		}
 	});
 }
-function $(e, t) {
-	let n = G(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Y({
-		src: S(r),
+function ie(e, t) {
+	let n = K(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Z({
+		src: F(r),
 		title: "Secure Google Pay button powered by Amos",
 		name: "amos-google-pay-button",
-		height: o.height ?? C(),
+		height: o.height ?? I(),
 		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: J
 	});
-	return {
+	return Object.assign(s.style, a), $({
+		host: n,
 		iframe: s,
-		update: c.update,
-		destroy() {
-			c.destroy(), s.remove();
-		}
-	};
+		listenerOptions: o,
+		iframeStyle: a,
+		attachListeners: L
+	});
 }
-function ee(e, t) {
-	let n = G(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Y({
+function ae(e, t) {
+	let n = K(e), { renderToken: r, iframeClassName: i, iframeStyle: a, ...o } = t, s = Z({
 		src: v(r),
 		title: "Secure Apple Pay button powered by Amos",
 		name: "amos-apple-pay-button",
 		height: o.height ?? y(),
 		allow: "payment",
 		className: i,
-		style: q
+		style: J
 	});
-	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?.();
-		}
-	});
-	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
+	});
 }
 //#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 { C as SKELETON_STYLES, b as attachApplePayButtonListeners, L as attachGooglePayButtonListeners, G as attachPaymentMethodFormListeners, h as confirmPaymentIntent, g as confirmSetupIntent, a as createMessage, j as createPaymentMethodFormSkeleton, M as createWalletButtonSkeleton, r as decodeJwt, w as ensureSkeletonStyles, R as formatGooglePayPaymentData, y as getApplePayButtonInitialHeight, v as getApplePayButtonSrc, W as getBankAccountFormInitialHeight, H as getBankAccountFormSrc, U as getCreditCardFormInitialHeight, V as getCreditCardFormSrc, i as getEmbedOrigin, I as getGooglePayButtonInitialHeight, F as getGooglePayButtonSrc, ae as mountAmosApplePayButton, re as mountAmosBankAccountPaymentMethodForm, ne as mountAmosCreditCardPaymentMethodForm, ie as mountAmosGooglePayButton, m as resetForm, P as resolveWalletButtonSkeletonBorderRadius, _ as sendConfirmationResult, s as sendParentReadyMessage, d as updateAmount, c as updateAppearance, l as updateApplePayButton, u as updateGooglePayButton, f as updateMerchantName, p as validateForm };

package/dist/messaging.d.ts

@@ -43,7 +43,8 @@ export declare function updateGooglePayButton({ iframe, props, height, }: {
     height?: string;
 }): void;
 /**
- * Push the express-checkout amount into the embedded Google Pay iframe.
+ * Push the express-checkout amount into the embedded wallet iframe.
+ * `amount` is a major-currency decimal string (e.g. `"50.00"` for $50.00).
  */
 export declare function updateAmount({ iframe, amount, }: {
     iframe: Iframe;

package/dist/mount.d.ts

@@ -116,6 +116,9 @@ export type AmosGooglePayButtonMountController = GooglePayButtonController & {
  * Mount the secure Google Pay button (express checkout) into a
  * container element. Returns a controller exposing the underlying
  * iframe, an `update()` method, and a `destroy()` method.
+ *
+ * A button-shaped skeleton is shown immediately and replaced by the
+ * iframe once appearance is applied.
  */
 export declare function mountAmosGooglePayButton(container: Container, options: AmosGooglePayButtonOptions): AmosGooglePayButtonMountController;
 /**
@@ -150,6 +153,9 @@ export type AmosApplePayButtonMountController = ApplePayButtonController & {
  * Mount the secure Apple Pay button (express checkout) into a
  * container element. Returns a controller exposing the underlying
  * iframe, an `update()` method, and a `destroy()` method.
+ *
+ * A button-shaped skeleton is shown immediately and replaced by the
+ * iframe once appearance is applied.
  */
 export declare function mountAmosApplePayButton(container: Container, options: AmosApplePayButtonOptions): AmosApplePayButtonMountController;
 export {};

package/dist/types.d.ts

@@ -145,7 +145,10 @@ export type Message = {
     type: "UPDATE_HEIGHT";
     height: string;
 } | {
-    /** Parent → embed: express-checkout amount changed. */
+    /**
+     * Parent → embed: express-checkout amount changed. Major-currency
+     * decimal string (e.g. `"50.00"` for $50.00).
+     */
     type: "UPDATE_AMOUNT";
     amount: string;
 } | {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/amos-js",
-  "version": "0.9.15",
+  "version": "0.9.17",
   "main": "dist/index.js",
   "repository": {
     "type": "git",

package/src/apple-pay.ts

@@ -38,7 +38,11 @@ export function getApplePayButtonInitialHeight(): string {
  * Options accepted by {@link attachApplePayButtonListeners}.
  */
 export type ApplePayButtonListenerOptions = {
-  /** The amount of the payment, in the same format passed in props. */
+  /**
+   * Major-currency decimal string shown in the Apple Pay sheet
+   * (e.g. `"50.00"` for $50.00). Converted to cents in
+   * `paymentIntentCreateAttributes.amount`.
+   */
   amount: string;
   /** A user-visible merchant name. */
   merchantName: string;