@verbb/formie-browser 1.0.11 → 1.0.12

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 1.0.12 - 2026-07-02
+
+### Added
+- Add Opayo **Drop-in Checkout** support to the `opayo` payment module via `sagepayCheckout`, including iframe mount on field init, `tokenise()` on authorize, and merchant session key refresh on tokenisation failure. **Own Form** mode continues to use `sagepayOwnForm`.
+
+### Fixed
+- Hide PayPal buttons after successful authorization so users are not prompted to pay again before submitting the form. Buttons are restored automatically when authorization is cleared after a failed submit.
+
 ## 1.0.11 - 2026-06-26
 
 ### Added

package/dist/chunks/{api-BYe9YPko.js → api-DqpfkZWL.js}

@@ -810,13 +810,26 @@ function Ie(e) {
 					}), t.abort(o.transport.errorMessage));
 				},
 				onAfterStage: async (t, r) => {
-					t.stage !== "dispatch" || !e.onAfterSubmit || await e.onAfterSubmit({
+					if (!(t.stage !== "dispatch" || !e.onAfterSubmit) && !(!(await e.onAfterSubmit({
 						field: n.target,
 						services: s,
 						options: o,
 						provider: o.provider,
 						result: r
-					});
+					}))?.remount || !e.mount)) {
+						if (d && e.unmount) {
+							let t = await m();
+							await e.unmount({
+								api: t,
+								widget: d,
+								field: n.target,
+								services: s,
+								options: o,
+								provider: o.provider
+							});
+						}
+						d = null, await h();
+					}
 				}
 			};
 		}

package/dist/chunks/{bpoint-C0VOftX9.js → bpoint-Dlq34XH1.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 //#region src/js/modules/payments/bpoint.ts
 var t = e({
 	id: "bpoint",

package/dist/chunks/{eway-CS6Y1Yvo.js → eway-D9_m8ooj.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 import { r as t } from "./async-nPFRNQ06.js";
 import { r as n } from "./scripts-CbQ7agX3.js";
 //#region src/js/modules/payments/eway.ts

package/dist/chunks/{go-cardless-BTPD668l.js → go-cardless-DAT3ZaQf.js}

@@ -1,5 +1,5 @@
 import { s as e } from "./event-names-BCI2FLD8.js";
-import { t } from "./api-BYe9YPko.js";
+import { t } from "./api-DqpfkZWL.js";
 //#region src/js/modules/payments/go-cardless.ts
 var n = e("go-cardless", "redirect"), r = t({
 	id: "go-cardless",

package/dist/chunks/{mollie-CXgBwvo6.js → mollie-Bibhl67p.js}

@@ -1,5 +1,5 @@
 import { s as e } from "./event-names-BCI2FLD8.js";
-import { t } from "./api-BYe9YPko.js";
+import { t } from "./api-DqpfkZWL.js";
 //#region src/js/modules/payments/mollie.ts
 var n = e("mollie", "redirect"), r = t({
 	id: "mollie",

package/dist/chunks/{moneris-B6oLu7nj.js → moneris-H2wSqk9h.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 //#region src/js/modules/payments/moneris.ts
 var t = {
 	940: "Invalid profile ID (tokenization request).",

package/dist/chunks/opayo-CR0DtsLa.js

@@ -0,0 +1,179 @@
+import { s as e } from "./event-names-BCI2FLD8.js";
+import { t } from "./api-DqpfkZWL.js";
+import { t as n } from "./debug-BV0DvdHx.js";
+import { r } from "./scripts-CbQ7agX3.js";
+import { t as i } from "./styles-BfoIZwJp.js";
+//#endregion
+//#region src/js/modules/payments/opayo.ts
+i("opayo", ["@layer formie-theme{.formie-opayo-drop-in{box-sizing:border-box;width:100%;min-height:10rem}}"]);
+var a = "FORMIE_OPAYO_SCRIPT", o = "https://live.opayo.eu.elavon.com/api/v1/js/sagepay.js", s = "https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js", c = "[data-formie-opayo-drop-in]", l = n("payments", "opayo"), u = e("opayo", "challenge"), d = "formie:payment:opayo:challenge:response";
+function f(e) {
+	return e.checkoutMode === "dropIn";
+}
+async function p(e) {
+	let { form: t, handle: n, sessionToken: r, services: i } = e, a = new FormData();
+	a.append("action", "formie/payment-webhooks/process-callback"), a.append("merchantSessionKey", "true"), a.append("handle", n), a.append("sessionToken", r);
+	try {
+		let e = await fetch(t.action, {
+			method: "POST",
+			body: a
+		});
+		return e.status < 200 || e.status >= 300 ? (i.addError(`${e.status}: ${e.statusText}`), l.warn("Merchant session request failed.", {
+			status: e.status,
+			statusText: e.statusText
+		}), null) : (await e.json()).merchantSessionKey || (i.addError("Unable to get merchant session."), l.warn("merchantSessionKey missing in callback response."), null);
+	} catch {
+		return i.addError("Network error. Please try again."), l.warn("Network error requesting merchant session."), null;
+	}
+}
+function m(e) {
+	return e.id ||= `formie-opayo-drop-in-${Math.random().toString(36).slice(2, 9)}`, e.id;
+}
+var h = t({
+	id: "opayo",
+	defaultRequiredInputSuffixes: ["opayoTokenId"],
+	load: async (e) => {
+		let { provider: t } = e.options, n = t.useSandbox ? s : o;
+		return await r(f(t) ? "sagepayCheckout" : "sagepayOwnForm", {
+			id: a,
+			src: n,
+			timeoutMs: 1e4
+		}), null;
+	},
+	mount: async ({ field: e, services: t, provider: n }) => {
+		if (!f(n)) return null;
+		let r = t.form, i = window.sagepayCheckout, a = e.querySelector(c);
+		if (!r?.action) return t.addError("Form action is missing."), l.warn("Missing form action before drop-in mount."), null;
+		if (!i) return t.addError("Opayo script failed to load."), l.warn("sagepayCheckout global not available."), null;
+		if (!a) return t.addError("Opayo drop-in container is missing."), l.warn("Drop-in container not found in payment field."), null;
+		let o = n.handle || "opayo", s = await p({
+			form: r,
+			handle: o,
+			sessionToken: n.sessionToken || "",
+			services: t
+		});
+		if (!s) return null;
+		let u = m(a), d = {
+			checkout: null,
+			merchantSessionKey: s,
+			pendingAuthorize: null,
+			retriedTokenise: !1
+		};
+		return d.checkout = i({
+			merchantSessionKey: s,
+			containerSelector: `#${u}`,
+			onTokenise: (e) => {
+				let i = d.pendingAuthorize;
+				if (d.pendingAuthorize = null, !i) {
+					l.warn("Drop-in tokenisation completed without a pending authorize step.");
+					return;
+				}
+				if (e.success && e.cardIdentifier) {
+					t.updateInputs("opayoTokenId", e.cardIdentifier), t.updateInputs("opayoSessionKey", d.merchantSessionKey), l.log("Drop-in tokenization succeeded.", { hasCardIdentifier: !!e.cardIdentifier }), i(!0);
+					return;
+				}
+				if (!d.retriedTokenise) {
+					d.retriedTokenise = !0, p({
+						form: r,
+						handle: o,
+						sessionToken: n.sessionToken || "",
+						services: t
+					}).then((n) => {
+						if (!n) {
+							t.addError(e.errors?.[0]?.message || "Tokenization failed."), l.warn("Drop-in tokenization failed after session refresh.", e), i(!1);
+							return;
+						}
+						d.merchantSessionKey = n, d.pendingAuthorize = i, d.checkout.tokenise({ newMerchantSessionKey: n });
+					});
+					return;
+				}
+				t.addError(e.errors?.[0]?.message || "Tokenization failed."), l.warn("Drop-in tokenization failed.", e), i(!1);
+			}
+		}), l.log("Drop-in checkout mounted.", { containerId: u }), d;
+	},
+	unmount: async ({ widget: e }) => {
+		e?.checkout?.destroy?.();
+	},
+	onBeforeAuthorize: async (e) => {
+		let { field: t, services: n, options: r, provider: i, widget: a } = e, o = i.handle || "opayo", s = n.form;
+		if (!s?.action) return n.addError("Form action is missing."), l.warn("Missing form action before authorize."), !1;
+		if (f(i)) return a ? (a.retriedTokenise = !1, new Promise((e) => {
+			a.pendingAuthorize = e, a.checkout.tokenise();
+		})) : (n.addError("Opayo drop-in checkout is not ready."), l.warn("Drop-in authorize requested before widget mount."), !1);
+		let c = window.sagepayOwnForm;
+		if (!c) return n.addError("Opayo script failed to load."), l.warn("sagepayOwnForm global not available."), !1;
+		let u = t.querySelector("[data-opayo-card=\"cardholder-name\"]")?.value ?? "", d = t.querySelector("[data-opayo-card=\"card-number\"]")?.value ?? "", m = t.querySelector("[data-opayo-card=\"expiry-date\"]")?.value ?? "", h = t.querySelector("[data-opayo-card=\"security-code\"]")?.value ?? "";
+		d = d.replace(/[\s/]/g, ""), m = m.replace(/[\s/]/g, "");
+		let g = await p({
+			form: s,
+			handle: o,
+			sessionToken: i.sessionToken || "",
+			services: n
+		});
+		return g ? new Promise((e) => {
+			c({ merchantSessionKey: g }).tokeniseCardDetails({
+				cardDetails: {
+					cardholderName: u,
+					cardNumber: d,
+					expiryDate: m,
+					securityCode: h
+				},
+				onTokenised: (t) => {
+					t.success && t.cardIdentifier ? (n.updateInputs("opayoTokenId", t.cardIdentifier), n.updateInputs("opayoSessionKey", g), l.log("Tokenization succeeded.", { hasCardIdentifier: !!t.cardIdentifier }), e(!0)) : (n.addError(t.errors?.[0]?.message || "Tokenization failed."), l.warn("Tokenization failed.", t), e(!1));
+				}
+			});
+		}) : !1;
+	},
+	setup: async (e) => {
+		let { services: t } = e;
+		e.target;
+		let n = null, r = !1, i = () => {
+			n?.parentNode && n.parentNode.removeChild(n), n = null;
+		}, a = t.events.onForm(u, ((e) => {
+			let a = e.detail?.data;
+			if (!a?.acsUrl || !a?.creq) return;
+			r = !1, l.log("Received payment challenge event.", {
+				hasAcsUrl: !!a.acsUrl,
+				hasCreq: !!a.creq
+			});
+			let o = t.form?.querySelector("input[name*=\"opayoSessionKey\"]")?.value || "", s = document.createElement("div");
+			s.className = "formie-modal", s.id = `formie-opayo-dialog-${Math.random().toString(36).slice(2, 9)}`, s.innerHTML = "\n                <div class=\"formie-modal-backdrop\" data-dialog-close></div>\n                <div class=\"formie-modal-content\">\n                    <div class=\"formie-loading formie-loading-large\" style=\"--formie-loading-width: 3rem; --formie-loading-height: 3rem; top: 50%; margin-top: -1.5rem;\"></div>\n                    <iframe width=\"100%\" height=\"100%\" style=\"width: 100%; height: 100%; position: relative; z-index: 1;\"></iframe>\n                </div>\n            ";
+			let c = s.querySelector("iframe"), u = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), d = a.returnUrl || a.redirectUrl || "", f = `<form action="${u(a.acsUrl)}" method="post">
+                <input type="hidden" name="creq" value="${u(a.creq || "")}" />
+                <input type="hidden" name="threeDSSessionData" value="${u(a.threeDSSessionData || "")}" />
+                <input type="hidden" name="MD" value="${u(o)}" />
+                <input type="hidden" name="TermUrl" value="${u(d)}" />
+                <input type="hidden" name="ThreeDSNotificationURL" value="${u(d)}" />
+            </form><script>document.forms[0].submit();<\/script>`;
+			i(), document.body.appendChild(s), n = s, c?.contentWindow && (c.contentWindow.document.open(), c.contentWindow.document.write(f), c.contentWindow.document.close());
+		})), o = (e) => {
+			if (e.data?.message === d) {
+				if (!n) {
+					l.log("Ignoring 3DS response without active dialog.");
+					return;
+				}
+				if (r) {
+					l.warn("Ignoring duplicate 3DS response while processing.");
+					return;
+				}
+				if (r = !0, l.log("Received payment challenge response message.", e.data?.value), i(), t.removeError(), e.data?.value?.error) {
+					t.addError(e.data.value.error.message), t.releaseSubmitLoading(), r = !1;
+					return;
+				}
+				t.updateInputs("opayo3DSComplete", e.data.value?.transactionId ?? ""), t.triggerSubmit();
+			}
+		};
+		return window.addEventListener("message", o), { destroy: () => {
+			a(), window.removeEventListener("message", o), i(), r = !1;
+		} };
+	},
+	onAfterSubmit: async ({ services: e }) => {
+		e.updateInputs([
+			"opayoTokenId",
+			"opayoSessionKey",
+			"opayo3DSComplete"
+		], "");
+	}
+});
+//#endregion
+export { h as opayoModule };

package/dist/chunks/{paddle-GRlsm5mm.js → paddle-DkvIxQdG.js}

@@ -1,5 +1,5 @@
 import { s as e } from "./event-names-BCI2FLD8.js";
-import { t } from "./api-BYe9YPko.js";
+import { t } from "./api-DqpfkZWL.js";
 import { r as n } from "./scripts-CbQ7agX3.js";
 //#region src/js/modules/payments/paddle.ts
 var r = "FORMIE_PADDLE_SCRIPT", i = e("paddle", "initialize"), a = t({

package/dist/chunks/{paypal-CdcZnf6r.js → paypal-CQpAF7Ua.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 import { r as t } from "./scripts-CbQ7agX3.js";
 import { t as n } from "./styles-BfoIZwJp.js";
 //#endregion
@@ -11,49 +11,52 @@ function i(e) {
 	return String(n[0]?.id || r[0]?.id || "").trim();
 }
 function a(e, t) {
+	e?.close && e.close(), t.removeAttribute("data-formie-paypal-rendered"), t.innerHTML = "";
+}
+function o(e, t) {
 	return `https://www.paypal.com/sdk/js?${[
 		"intent=authorize",
 		`currency=${encodeURIComponent(t)}`,
 		`client-id=${encodeURIComponent(e)}`
 	].join("&")}`;
 }
-var o = e({
+var s = e({
 	id: "paypal",
 	defaultRequiredInputSuffixes: ["paypalOrderId", "paypalAuthId"],
 	load: async (e) => {
 		let { provider: n } = e.options, i = n.clientId;
 		return i?.trim() ? (await t("paypal", {
 			id: r,
-			src: a(i, n.currency || "AUD")
+			src: o(i, n.currency || "AUD")
 		}), window.paypal) : (console.error("[formie] Missing clientId for PayPal."), null);
 	},
 	mount: async (e) => {
-		let { api: t, field: n, services: r, options: a, provider: o } = e, s = n.querySelector("[data-formie-paypal-button]");
-		if (!s || !t || s.getAttribute("data-formie-paypal-rendered") === "true") return null;
-		s.innerHTML = "";
-		let c = !!o.useSandbox, l = r.resolveCurrency({
-			value: o.currency,
+		let { api: t, field: n, services: r, options: o, provider: s } = e, c = n.querySelector("[data-formie-paypal-button]");
+		if (!c || !t || c.getAttribute("data-formie-paypal-rendered") === "true") return null;
+		c.innerHTML = "";
+		let l = !!s.useSandbox, u = r.resolveCurrency({
+			value: s.currency,
 			defaultCurrency: "AUD"
 		});
-		if (!l.ok) return r.addError("error" in l ? l.error : "Invalid PayPal currency."), null;
-		let u = l.value, d = {
-			layout: o.buttonLayout || "vertical",
-			color: o.buttonColor || "gold",
-			shape: o.buttonShape || "rect",
-			label: o.buttonLabel || "paypal",
-			width: o.buttonWidth || 250,
-			height: o.buttonHeight || 35
+		if (!u.ok) return r.addError("error" in u ? u.error : "Invalid PayPal currency."), null;
+		let d = u.value, f = {
+			layout: s.buttonLayout || "vertical",
+			color: s.buttonColor || "gold",
+			shape: s.buttonShape || "rect",
+			label: s.buttonLabel || "paypal",
+			width: s.buttonWidth || 250,
+			height: s.buttonHeight || 35
 		};
-		d.layout === "horizontal" && (d.tagline = o.buttonTagline ?? !0);
-		let f = {
-			env: c ? "sandbox" : "production",
-			style: d,
+		f.layout === "horizontal" && (f.tagline = s.buttonTagline ?? !0);
+		let p = null, m = {
+			env: l ? "sandbox" : "production",
+			style: f,
 			createOrder: (e, t) => {
 				r.removeError();
 				let n = r.resolveAmount({
-					type: o.amountType,
-					fixed: o.amountFixed,
-					variable: o.amountVariable
+					type: s.amountType,
+					fixed: s.amountFixed,
+					variable: s.amountVariable
 				});
 				if (!n.ok) {
 					let e = "error" in n ? n.error : "Invalid PayPal amount.";
@@ -63,7 +66,7 @@ var o = e({
 					intent: "AUTHORIZE",
 					application_context: { user_action: "CONTINUE" },
 					purchase_units: [{ amount: {
-						currency_code: u,
+						currency_code: d,
 						value: String(n.value)
 					} }]
 				});
@@ -74,22 +77,20 @@ var o = e({
 			onApprove: async (e, t) => {
 				try {
 					let n = i(await t.order.authorize());
-					r.updateInputs("paypalOrderId", e.orderID), r.updateInputs("paypalAuthId", n || ""), n ? r.addSuccess("Payment authorized. Finalize the form to complete payment.") : r.addSuccess("PayPal approval received. Finalizing payment on submit.");
+					r.updateInputs("paypalOrderId", e.orderID), r.updateInputs("paypalAuthId", n || ""), n ? r.addSuccess("Payment authorized. Finalize the form to complete payment.") : r.addSuccess("PayPal approval received. Finalizing payment on submit."), a(p, c);
 				} catch {
 					r.addError("Unable to authorize payment. Please try again.");
 				}
 			}
-		}, p = t.Buttons(f);
-		return s.setAttribute("data-formie-paypal-rendered", "true"), p.render(s);
+		}, h = t.Buttons(m);
+		return c.setAttribute("data-formie-paypal-rendered", "true"), p = h.render(c), p;
 	},
 	unmount: async (e) => {
 		e.widget?.close && e.widget.close();
 		let t = e.field.querySelector("[data-formie-paypal-button]");
 		t && (t.removeAttribute("data-formie-paypal-rendered"), t.innerHTML = "");
 	},
-	onAfterSubmit: async ({ services: e }) => {
-		e.updateInputs(["paypalOrderId", "paypalAuthId"], ""), e.removeSuccess(), e.removeError();
-	}
+	onAfterSubmit: async ({ services: e, result: t }) => (e.updateInputs(["paypalOrderId", "paypalAuthId"], ""), e.removeSuccess(), e.removeError(), !t?.ok || t?.nextPage ? { remount: !0 } : {})
 });
 //#endregion
-export { o as paypalModule };
+export { s as paypalModule };

package/dist/chunks/{payway-CfmYOS__.js → payway-CwDkC7YZ.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 import { r as t } from "./scripts-CbQ7agX3.js";
 import { t as n } from "./styles-BfoIZwJp.js";
 //#endregion

package/dist/chunks/{square-BY--5M-X.js → square-DwdcOI1G.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 import { r as t } from "./scripts-CbQ7agX3.js";
 //#region src/js/modules/payments/square.ts
 var n = "FORMIE_SQUARE_SCRIPT", r = e({

package/dist/chunks/{stripe-uusYjWty.js → stripe-DaoG2FT1.js}

@@ -1,5 +1,5 @@
 import { s as e } from "./event-names-BCI2FLD8.js";
-import { t } from "./api-BYe9YPko.js";
+import { t } from "./api-DqpfkZWL.js";
 import { r as n, t as r } from "./theme-classes-Tv7q7ToE.js";
 import { r as i } from "./scripts-CbQ7agX3.js";
 import { t as a } from "./styles-BfoIZwJp.js";

package/dist/css/theme/fields/_check-radio.css

@@ -116,8 +116,10 @@
 
     .formie-field-option:has(> input[data-formie-other-option]),
     .formie-other-option {
+        display: flex;
         flex-wrap: wrap;
-        align-items: flex-start;
+        align-items: center;
+        width: 100%;
     }
 
     .formie-field-option:has(> input[data-formie-other-option]:checked) > .formie-other-option-text,

package/dist/css/theme/integrations/_opayo.css

@@ -0,0 +1,9 @@
+@layer formie-theme {
+
+    /* Opayo drop-in checkout iframe mount point. */
+    .formie-opayo-drop-in {
+        width: 100%;
+        min-height: 10rem;
+        box-sizing: border-box;
+    }
+}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { c as e, d as t, l as n, o as r, r as i, t as a, u as o } from "./chunks/event-names-BCI2FLD8.js";
-import { a as s, c, d as l, f as u, i as d, l as f, n as p, o as m, p as h, r as g, s as _, t as v, u as y } from "./chunks/api-BYe9YPko.js";
+import { a as s, c, d as l, f as u, i as d, l as f, n as p, o as m, p as h, r as g, s as _, t as v, u as y } from "./chunks/api-DqpfkZWL.js";
 import { a as b, i as x, n as ee, r as te, t as S } from "./chunks/debug-BV0DvdHx.js";
 import { n as ne, r as C, t as w } from "./chunks/theme-classes-Tv7q7ToE.js";
 import { t as T } from "./chunks/http-D-JExro7.js";
@@ -1407,17 +1407,17 @@ var L = class {
 	table: () => import("./chunks/table-CAjCJHrL.js").then((e) => e.tableModule),
 	"text-limit": () => import("./chunks/text-limit-Bn18WrPU.js").then((e) => e.textLimitModule)
 }, Zt = {
-	bpoint: () => import("./chunks/bpoint-C0VOftX9.js").then((e) => e.bpointModule),
-	eway: () => import("./chunks/eway-CS6Y1Yvo.js").then((e) => e.ewayModule),
-	"go-cardless": () => import("./chunks/go-cardless-BTPD668l.js").then((e) => e.goCardlessModule),
-	mollie: () => import("./chunks/mollie-CXgBwvo6.js").then((e) => e.mollieModule),
-	moneris: () => import("./chunks/moneris-B6oLu7nj.js").then((e) => e.monerisModule),
-	opayo: () => import("./chunks/opayo-DPUA5CKr.js").then((e) => e.opayoModule),
-	paddle: () => import("./chunks/paddle-GRlsm5mm.js").then((e) => e.paddleModule),
-	paypal: () => import("./chunks/paypal-CdcZnf6r.js").then((e) => e.paypalModule),
-	payway: () => import("./chunks/payway-CfmYOS__.js").then((e) => e.paywayModule),
-	square: () => import("./chunks/square-BY--5M-X.js").then((e) => e.squareModule),
-	stripe: () => import("./chunks/stripe-uusYjWty.js").then((e) => e.stripeModule)
+	bpoint: () => import("./chunks/bpoint-Dlq34XH1.js").then((e) => e.bpointModule),
+	eway: () => import("./chunks/eway-D9_m8ooj.js").then((e) => e.ewayModule),
+	"go-cardless": () => import("./chunks/go-cardless-DAT3ZaQf.js").then((e) => e.goCardlessModule),
+	mollie: () => import("./chunks/mollie-Bibhl67p.js").then((e) => e.mollieModule),
+	moneris: () => import("./chunks/moneris-H2wSqk9h.js").then((e) => e.monerisModule),
+	opayo: () => import("./chunks/opayo-CR0DtsLa.js").then((e) => e.opayoModule),
+	paddle: () => import("./chunks/paddle-DkvIxQdG.js").then((e) => e.paddleModule),
+	paypal: () => import("./chunks/paypal-CQpAF7Ua.js").then((e) => e.paypalModule),
+	payway: () => import("./chunks/payway-CwDkC7YZ.js").then((e) => e.paywayModule),
+	square: () => import("./chunks/square-DwdcOI1G.js").then((e) => e.squareModule),
+	stripe: () => import("./chunks/stripe-DaoG2FT1.js").then((e) => e.stripeModule)
 }, Qt = {
 	...Xt,
 	...Jt,

package/dist/js/modules/payments/factories.d.ts

@@ -8,6 +8,10 @@ type PaymentSetupResult = {
     destroy?: () => void | Promise<void>;
     onBeforeStage?: (stageCtx: import('#contracts/modules').SubmitHookContext) => void | Promise<void>;
 };
+export type PaymentAfterSubmitResult = {
+    /** Tear down the current widget and mount again (for example after a failed payment). */
+    remount?: boolean;
+};
 export type ManagedPaymentModuleAdapter<TProvider extends Record<string, unknown>, TApi, TWidget> = {
     id: string;
     defaultRequiredInputSuffixes?: string[];
@@ -47,7 +51,7 @@ export type ManagedPaymentModuleAdapter<TProvider extends Record<string, unknown
         options: NormalizedPaymentModuleOptions<TProvider>;
         provider: TProvider;
         result?: import('#contracts/schema').FormSubmitResult;
-    }) => void | Promise<void>;
+    }) => void | Promise<void> | PaymentAfterSubmitResult | Promise<PaymentAfterSubmitResult>;
 };
 export declare function createManagedPaymentModule<TProvider extends Record<string, unknown>, TApi, TWidget>(adapter: ManagedPaymentModuleAdapter<TProvider, TApi, TWidget>): FormieModuleDefinition;
 export {};

package/dist/js/modules/payments/factories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factories.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/payments/factories.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"factories.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/payments/factories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,sBAAsB,EAEtB,kBAAkB,EACrB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAEH,KAAK,8BAA8B,EACnC,KAAK,mBAAmB,EAE3B,MAAM,wBAAwB,CAAC;AAchC,MAAM,MAAM,yBAAyB,CAAC,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAAG;IACrH,OAAO,EAAE,8BAA8B,CAAC,SAAS,CAAC,CAAC;IACnD,QAAQ,EAAE,mBAAmB,CAAC;CACjC,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,oBAAoB,EAAE,iBAAiB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtG,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACnC,yFAAyF;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,2BAA2B,CACnC,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACzC,IAAI,EACJ,OAAO,IACP;IACA,EAAE,EAAE,MAAM,CAAC;IACX,4BAA4B,CAAC,EAAE,MAAM,EAAE,CAAC;IACxC,IAAI,EAAE,CAAC,GAAG,EAAE,yBAAyB,CAAC,SAAS,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnE,uGAAuG;IACvG,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,yBAAyB,CAAC,SAAS,CAAC,GAAG;QAAE,IAAI,EAAE,WAAW,CAAA;KAAE,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC3G,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE;QACX,GAAG,EAAE,IAAI,CAAC;QACV,KAAK,EAAE,OAAO,CAAC;QACf,QAAQ,EAAE,mBAAmB,CAAC;QAC9B,OAAO,EAAE,8BAA8B,CAAC,SAAS,CAAC,CAAC;QACnD,QAAQ,EAAE,SAAS,CAAC;KACvB,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QACb,GAAG,EAAE,IAAI,CAAC;QACV,MAAM,EAAE,OAAO,CAAC;QAChB,KAAK,EAAE,OAAO,CAAC;QACf,QAAQ,EAAE,mBAAmB,CAAC;QAC9B,OAAO,EAAE,8BAA8B,CAAC,SAAS,CAAC,CAAC;QACnD,QAAQ,EAAE,SAAS,CAAC;KACvB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE;QACvB,GAAG,EAAE,IAAI,CAAC;QACV,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,OAAO,CAAC;QACf,QAAQ,EAAE,mBAAmB,CAAC;QAC9B,OAAO,EAAE,8BAA8B,CAAC,SAAS,CAAC,CAAC;QACnD,QAAQ,EAAE,SAAS,CAAC;QACpB,QAAQ,EAAE,OAAO,oBAAoB,EAAE,iBAAiB,CAAC;KAC5D,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACjC,mFAAmF;IACnF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACnB,KAAK,EAAE,OAAO,CAAC;QACf,QAAQ,EAAE,mBAAmB,CAAC;QAC9B,OAAO,EAAE,8BAA8B,CAAC,SAAS,CAAC,CAAC;QACnD,QAAQ,EAAE,SAAS,CAAC;QACpB,MAAM,CAAC,EAAE,OAAO,mBAAmB,EAAE,gBAAgB,CAAC;KACzD,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,wBAAwB,GAAG,OAAO,CAAC,wBAAwB,CAAC,CAAC;CAC7F,CAAC;AAEF,wBAAgB,0BAA0B,CACtC,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACzC,IAAI,EACJ,OAAO,EACT,OAAO,EAAE,2BAA2B,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,sBAAsB,CA4QxF"}

package/dist/js/modules/payments/opayo.d.ts

@@ -5,7 +5,7 @@ type SagePayTokeniseResult = {
         message: string;
     }>;
 };
-type SagePayGlobal = {
+type SagePayOwnFormGlobal = {
     (opts: {
         merchantSessionKey: string;
     }): {
@@ -15,9 +15,24 @@ type SagePayGlobal = {
         }) => void;
     };
 };
+type SagePayCheckoutInstance = {
+    tokenise: (opts?: {
+        newMerchantSessionKey?: string;
+    }) => void;
+    destroy: () => void;
+};
+type SagePayCheckoutGlobal = {
+    (opts: {
+        merchantSessionKey: string;
+        containerSelector: string;
+        onTokenise?: (result: SagePayTokeniseResult) => void;
+        reusableCardIdentifier?: string;
+    }): SagePayCheckoutInstance;
+};
 declare global {
     interface Window {
-        sagepayOwnForm?: SagePayGlobal;
+        sagepayOwnForm?: SagePayOwnFormGlobal;
+        sagepayCheckout?: SagePayCheckoutGlobal;
     }
 }
 export declare const opayoModule: import("../../..").FormieModuleDefinition;

package/dist/js/modules/payments/opayo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"opayo.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/payments/opayo.ts"],"names":[],"mappings":"AAKA,KAAK,qBAAqB,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACvC,CAAC;AAEF,KAAK,aAAa,GAAG;IACjB,CAAC,IAAI,EAAE;QAAE,kBAAkB,EAAE,MAAM,CAAA;KAAE,GAAG;QACpC,mBAAmB,EAAE,CAAC,IAAI,EAAE;YACxB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACpC,WAAW,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;SACxD,KAAK,IAAI,CAAC;KACd,CAAC;CACL,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,cAAc,CAAC,EAAE,aAAa,CAAC;KAClC;CACJ;AAeD,eAAO,MAAM,WAAW,2CAwOtB,CAAC"}
+{"version":3,"file":"opayo.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/payments/opayo.ts"],"names":[],"mappings":"AAUA,KAAK,qBAAqB,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACvC,CAAC;AAEF,KAAK,oBAAoB,GAAG;IACxB,CAAC,IAAI,EAAE;QAAE,kBAAkB,EAAE,MAAM,CAAA;KAAE,GAAG;QACpC,mBAAmB,EAAE,CAAC,IAAI,EAAE;YACxB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACpC,WAAW,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;SACxD,KAAK,IAAI,CAAC;KACd,CAAC;CACL,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC3B,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE;QAAE,qBAAqB,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IACzB,CAAC,IAAI,EAAE;QACH,kBAAkB,EAAE,MAAM,CAAC;QAC3B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;QACrD,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACnC,GAAG,uBAAuB,CAAC;CAC/B,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,cAAc,CAAC,EAAE,oBAAoB,CAAC;QACtC,eAAe,CAAC,EAAE,qBAAqB,CAAC;KAC3C;CACJ;AAwFD,eAAO,MAAM,WAAW,2CAsUtB,CAAC"}

package/dist/js/modules/payments/paypal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paypal.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/payments/paypal.ts"],"names":[],"mappings":"AA4EA,eAAO,MAAM,YAAY,2CAyIvB,CAAC"}
+{"version":3,"file":"paypal.d.ts","sourceRoot":"","sources":["../../../../src/js/modules/payments/paypal.ts"],"names":[],"mappings":"AAqFA,eAAO,MAAM,YAAY,2CAoJvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verbb/formie-browser",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -70,7 +70,7 @@
     "@placekit/autocomplete-js": "^2.2.1",
     "@uppy/core": "^5.2.0",
     "@uppy/xhr-upload": "^5.2.0",
-    "@verbb/formie-core": "1.0.11",
+    "@verbb/formie-core": "1.0.12",
     "expression-language": "^2.5.4",
     "flatpickr": "^4.6.13",
     "friendly-challenge": "^0.9.19",

package/src/css/theme/fields/_check-radio.css

@@ -116,8 +116,10 @@
 
     .formie-field-option:has(> input[data-formie-other-option]),
     .formie-other-option {
+        display: flex;
         flex-wrap: wrap;
-        align-items: flex-start;
+        align-items: center;
+        width: 100%;
     }
 
     .formie-field-option:has(> input[data-formie-other-option]:checked) > .formie-other-option-text,

package/src/css/theme/integrations/_opayo.css

@@ -0,0 +1,9 @@
+@layer formie-theme {
+
+    /* Opayo drop-in checkout iframe mount point. */
+    .formie-opayo-drop-in {
+        width: 100%;
+        min-height: 10rem;
+        box-sizing: border-box;
+    }
+}

package/src/js/modules/payments/factories.ts

@@ -33,6 +33,11 @@ type PaymentSetupResult = {
     onBeforeStage?: (stageCtx: import('#contracts/modules').SubmitHookContext) => void | Promise<void>;
 };
 
+export type PaymentAfterSubmitResult = {
+    /** Tear down the current widget and mount again (for example after a failed payment). */
+    remount?: boolean;
+};
+
 export type ManagedPaymentModuleAdapter<
     TProvider extends Record<string, unknown>,
     TApi,
@@ -74,7 +79,7 @@ export type ManagedPaymentModuleAdapter<
         options: NormalizedPaymentModuleOptions<TProvider>;
         provider: TProvider;
         result?: import('#contracts/schema').FormSubmitResult;
-    }) => void | Promise<void>;
+    }) => void | Promise<void> | PaymentAfterSubmitResult | Promise<PaymentAfterSubmitResult>;
 };
 
 export function createManagedPaymentModule<
@@ -318,13 +323,33 @@ export function createManagedPaymentModule<
                         return;
                     }
 
-                    await adapter.onAfterSubmit({
+                    const afterSubmitResult = await adapter.onAfterSubmit({
                         field: ctx.target,
                         services,
                         options,
                         provider: options.provider,
                         result,
                     });
+
+                    if (!afterSubmitResult?.remount || !adapter.mount) {
+                        return;
+                    }
+
+                    if (widget && adapter.unmount) {
+                        const api = await getApi();
+
+                        await adapter.unmount({
+                            api,
+                            widget,
+                            field: ctx.target,
+                            services,
+                            options,
+                            provider: options.provider,
+                        });
+                    }
+
+                    widget = null;
+                    await ensureMounted();
                 },
             };
         },

package/src/js/modules/payments/opayo.ts

@@ -1,15 +1,20 @@
+import opayoCss from '#theme-css/integrations/_opayo.css?inline';
+
 import { definePaymentModule } from '#modules/payments/api';
+import { ensureModuleStyles } from '#modules/styles';
 import { createDebug } from '#utils/debug';
 import { getPaymentProviderActionEventName } from '#utils/event-names';
 import { loadScriptAndEnsureGlobal } from '#utils/scripts';
 
+ensureModuleStyles('opayo', [opayoCss]);
+
 type SagePayTokeniseResult = {
     success: boolean;
     cardIdentifier?: string;
     errors?: Array<{ message: string }>;
 };
 
-type SagePayGlobal = {
+type SagePayOwnFormGlobal = {
     (opts: { merchantSessionKey: string }): {
         tokeniseCardDetails: (opts: {
             cardDetails: Record<string, string>;
@@ -18,34 +23,123 @@ type SagePayGlobal = {
     };
 };
 
+type SagePayCheckoutInstance = {
+    tokenise: (opts?: { newMerchantSessionKey?: string }) => void;
+    destroy: () => void;
+};
+
+type SagePayCheckoutGlobal = {
+    (opts: {
+        merchantSessionKey: string;
+        containerSelector: string;
+        onTokenise?: (result: SagePayTokeniseResult) => void;
+        reusableCardIdentifier?: string;
+    }): SagePayCheckoutInstance;
+};
+
 declare global {
     interface Window {
-        sagepayOwnForm?: SagePayGlobal;
+        sagepayOwnForm?: SagePayOwnFormGlobal;
+        sagepayCheckout?: SagePayCheckoutGlobal;
     }
 }
 
+type OpayoCheckoutMode = 'ownForm' | 'dropIn';
+
 type OpayoProviderOptions = {
     useSandbox?: boolean;
     handle?: string;
     sessionToken?: string | null;
+    checkoutMode?: OpayoCheckoutMode;
+};
+
+type OpayoDropInWidget = {
+    checkout: SagePayCheckoutInstance;
+    merchantSessionKey: string;
+    pendingAuthorize: ((success: boolean) => void) | null;
+    retriedTokenise: boolean;
 };
 
 const SCRIPT_ID = 'FORMIE_OPAYO_SCRIPT';
 const SCRIPT_SRC_LIVE = 'https://live.opayo.eu.elavon.com/api/v1/js/sagepay.js';
 const SCRIPT_SRC_SANDBOX = 'https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js';
+const DROP_IN_SELECTOR = '[data-formie-opayo-drop-in]';
 const debug = createDebug('payments', 'opayo');
 const CHALLENGE_EVENT = getPaymentProviderActionEventName('opayo', 'challenge');
 const CHALLENGE_RESPONSE_MESSAGE = 'formie:payment:opayo:challenge:response';
 
-export const opayoModule = definePaymentModule<OpayoProviderOptions, null, null>({
+function isDropInCheckoutMode(provider: OpayoProviderOptions): boolean {
+    return provider.checkoutMode === 'dropIn';
+}
+
+async function requestMerchantSessionKey(args: {
+    form: HTMLFormElement;
+    handle: string;
+    sessionToken: string;
+    services: {
+        addError: (message: string) => void;
+    };
+}): Promise<string | null> {
+    const { form, handle, sessionToken, services } = args;
+    const formData = new FormData();
+    formData.append('action', 'formie/payment-webhooks/process-callback');
+    formData.append('merchantSessionKey', 'true');
+    formData.append('handle', handle);
+    formData.append('sessionToken', sessionToken);
+
+    try {
+        const res = await fetch(form.action, {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (res.status < 200 || res.status >= 300) {
+            services.addError(`${res.status}: ${res.statusText}`);
+            debug.warn('Merchant session request failed.', {
+                status: res.status,
+                statusText: res.statusText,
+            });
+
+            return null;
+        }
+
+        const response = await res.json();
+        const merchantSessionKey = response.merchantSessionKey;
+
+        if (!merchantSessionKey) {
+            services.addError('Unable to get merchant session.');
+            debug.warn('merchantSessionKey missing in callback response.');
+
+            return null;
+        }
+
+        return merchantSessionKey as string;
+    } catch {
+        services.addError('Network error. Please try again.');
+        debug.warn('Network error requesting merchant session.');
+
+        return null;
+    }
+}
+
+function ensureDropInContainerId(container: HTMLElement): string {
+    if (!container.id) {
+        container.id = `formie-opayo-drop-in-${Math.random().toString(36).slice(2, 9)}`;
+    }
+
+    return container.id;
+}
+
+export const opayoModule = definePaymentModule<OpayoProviderOptions, null, OpayoDropInWidget | null>({
     id: 'opayo',
     defaultRequiredInputSuffixes: ['opayoTokenId'],
     load: async(ctx) => {
         const { provider } = ctx.options;
         const useSandbox = Boolean(provider.useSandbox);
         const src = useSandbox ? SCRIPT_SRC_SANDBOX : SCRIPT_SRC_LIVE;
+        const globalName = isDropInCheckoutMode(provider) ? 'sagepayCheckout' : 'sagepayOwnForm';
 
-        await loadScriptAndEnsureGlobal<Window['sagepayOwnForm']>('sagepayOwnForm', {
+        await loadScriptAndEnsureGlobal<Window['sagepayOwnForm'] | Window['sagepayCheckout']>(globalName, {
             id: SCRIPT_ID,
             src,
             timeoutMs: 10000,
@@ -53,9 +147,118 @@ export const opayoModule = definePaymentModule<OpayoProviderOptions, null, null>
 
         return null;
     },
+    mount: async({ field, services, provider }) => {
+        if (!isDropInCheckoutMode(provider)) {
+            return null;
+        }
+
+        const form = services.form;
+        const sagepayCheckout = window.sagepayCheckout;
+        const container = field.querySelector<HTMLElement>(DROP_IN_SELECTOR);
+
+        if (!form?.action) {
+            services.addError('Form action is missing.');
+            debug.warn('Missing form action before drop-in mount.');
+
+            return null;
+        }
+
+        if (!sagepayCheckout) {
+            services.addError('Opayo script failed to load.');
+            debug.warn('sagepayCheckout global not available.');
+
+            return null;
+        }
+
+        if (!container) {
+            services.addError('Opayo drop-in container is missing.');
+            debug.warn('Drop-in container not found in payment field.');
+
+            return null;
+        }
+
+        const handle = (provider.handle || 'opayo') as string;
+        const merchantSessionKey = await requestMerchantSessionKey({
+            form,
+            handle,
+            sessionToken: provider.sessionToken || '',
+            services,
+        });
+
+        if (!merchantSessionKey) {
+            return null;
+        }
+
+        const containerId = ensureDropInContainerId(container);
+        const widget: OpayoDropInWidget = {
+            checkout: null as unknown as SagePayCheckoutInstance,
+            merchantSessionKey,
+            pendingAuthorize: null,
+            retriedTokenise: false,
+        };
+
+        widget.checkout = sagepayCheckout({
+            merchantSessionKey,
+            containerSelector: `#${containerId}`,
+            onTokenise: (result) => {
+                const resolve = widget.pendingAuthorize;
+                widget.pendingAuthorize = null;
+
+                if (!resolve) {
+                    debug.warn('Drop-in tokenisation completed without a pending authorize step.');
+                    return;
+                }
+
+                if (result.success && result.cardIdentifier) {
+                    services.updateInputs('opayoTokenId', result.cardIdentifier);
+                    services.updateInputs('opayoSessionKey', widget.merchantSessionKey);
+                    debug.log('Drop-in tokenization succeeded.', {
+                        hasCardIdentifier: !!result.cardIdentifier,
+                    });
+                    resolve(true);
+
+                    return;
+                }
+
+                if (!widget.retriedTokenise) {
+                    widget.retriedTokenise = true;
+                    void requestMerchantSessionKey({
+                        form,
+                        handle,
+                        sessionToken: provider.sessionToken || '',
+                        services,
+                    }).then((newMerchantSessionKey) => {
+                        if (!newMerchantSessionKey) {
+                            services.addError(result.errors?.[0]?.message || 'Tokenization failed.');
+                            debug.warn('Drop-in tokenization failed after session refresh.', result);
+                            resolve(false);
+
+                            return;
+                        }
+
+                        widget.merchantSessionKey = newMerchantSessionKey;
+                        widget.pendingAuthorize = resolve;
+                        widget.checkout.tokenise({ newMerchantSessionKey });
+                    });
+
+                    return;
+                }
+
+                services.addError(result.errors?.[0]?.message || 'Tokenization failed.');
+                debug.warn('Drop-in tokenization failed.', result);
+                resolve(false);
+            },
+        });
+
+        debug.log('Drop-in checkout mounted.', { containerId });
+
+        return widget;
+    },
+    unmount: async({ widget }) => {
+        widget?.checkout?.destroy?.();
+    },
     onBeforeAuthorize: async(args) => {
-        const { field, services, options } = args;
-        const provider = options.provider as OpayoProviderOptions;
+        const { field, services, options, provider, widget } = args;
         const handle = (provider.handle || 'opayo') as string;
         const form = services.form;
 
@@ -66,7 +269,23 @@ export const opayoModule = definePaymentModule<OpayoProviderOptions, null, null>
             return false;
         }
 
-        const sagepayOwnForm = (window as Window).sagepayOwnForm;
+        if (isDropInCheckoutMode(provider)) {
+            if (!widget) {
+                services.addError('Opayo drop-in checkout is not ready.');
+                debug.warn('Drop-in authorize requested before widget mount.');
+
+                return false;
+            }
+
+            widget.retriedTokenise = false;
+
+            return new Promise<boolean>((resolve) => {
+                widget.pendingAuthorize = resolve;
+                widget.checkout.tokenise();
+            });
+        }
+
+        const sagepayOwnForm = window.sagepayOwnForm;
 
         if (!sagepayOwnForm) {
             services.addError('Opayo script failed to load.');
@@ -83,72 +302,40 @@ export const opayoModule = definePaymentModule<OpayoProviderOptions, null, null>
         cardNumber = cardNumber.replace(/[\s/]/g, '');
         expiryDate = expiryDate.replace(/[\s/]/g, '');
 
-        return new Promise<boolean>((resolve) => {
-            const formData = new FormData();
-            formData.append('action', 'formie/payment-webhooks/process-callback');
-            formData.append('merchantSessionKey', 'true');
-            formData.append('handle', handle);
-            formData.append('sessionToken', provider.sessionToken || '');
-
-            fetch(form.action, {
-                method: 'POST',
-                body: formData,
-            }).then(async(res) => {
-                if (res.status < 200 || res.status >= 300) {
-                    services.addError(`${res.status}: ${res.statusText}`);
-                    debug.warn('Merchant session request failed.', {
-                        status: res.status,
-                        statusText: res.statusText,
-                    });
-                    resolve(false);
-
-                    return;
-                }
+        const merchantSessionKey = await requestMerchantSessionKey({
+            form,
+            handle,
+            sessionToken: provider.sessionToken || '',
+            services,
+        });
 
-                try {
-                    const response = await res.json();
-                    const merchantSessionKey = response.merchantSessionKey;
+        if (!merchantSessionKey) {
+            return false;
+        }
 
-                    if (!merchantSessionKey) {
-                        services.addError('Unable to get merchant session.');
-                        debug.warn('merchantSessionKey missing in callback response.');
+        return new Promise<boolean>((resolve) => {
+            sagepayOwnForm({ merchantSessionKey }).tokeniseCardDetails({
+                cardDetails: {
+                    cardholderName,
+                    cardNumber,
+                    expiryDate,
+                    securityCode,
+                },
+                onTokenised: (result) => {
+                    if (result.success && result.cardIdentifier) {
+                        services.updateInputs('opayoTokenId', result.cardIdentifier);
+                        services.updateInputs('opayoSessionKey', merchantSessionKey);
+                        debug.log('Tokenization succeeded.', {
+                            hasCardIdentifier: !!result.cardIdentifier,
+                        });
+
+                        resolve(true);
+                    } else {
+                        services.addError(result.errors?.[0]?.message || 'Tokenization failed.');
+                        debug.warn('Tokenization failed.', result);
                         resolve(false);
-
-                        return;
                     }
-
-                    sagepayOwnForm({ merchantSessionKey }).tokeniseCardDetails({
-                        cardDetails: {
-                            cardholderName,
-                            cardNumber,
-                            expiryDate,
-                            securityCode,
-                        },
-                        onTokenised: (result) => {
-                            if (result.success && result.cardIdentifier) {
-                                services.updateInputs('opayoTokenId', result.cardIdentifier);
-                                services.updateInputs('opayoSessionKey', merchantSessionKey);
-                                debug.log('Tokenization succeeded.', {
-                                    hasCardIdentifier: !!result.cardIdentifier,
-                                });
-
-                                resolve(true);
-                            } else {
-                                services.addError(result.errors?.[0]?.message || 'Tokenization failed.');
-                                debug.warn('Tokenization failed.', result);
-                                resolve(false);
-                            }
-                        },
-                    });
-                } catch {
-                    services.addError('Unable to parse merchant session response.');
-                    debug.warn('Failed to parse merchant session response.');
-                    resolve(false);
-                }
-            }).catch(() => {
-                services.addError('Network error. Please try again.');
-                debug.warn('Network error requesting merchant session.');
-                resolve(false);
+                },
             });
         });
     },

package/src/js/modules/payments/paypal.ts

@@ -64,6 +64,15 @@ function extractAuthIdFromAuthorization(result: Record<string, unknown> | null):
     return authId.trim();
 }
 
+function hidePayPalButtons(widget: PayPalButtonsInstance | null, placeholder: HTMLElement): void {
+    if (widget?.close) {
+        widget.close();
+    }
+
+    placeholder.removeAttribute('data-formie-paypal-rendered');
+    placeholder.innerHTML = '';
+}
+
 function getScriptUrl(clientId: string, currency: string): string {
     const params = [
         'intent=authorize',
@@ -137,6 +146,8 @@ export const paypalModule = definePaymentModule<PayPalProviderOptions, PayPalGlo
             style.tagline = provider.buttonTagline ?? true;
         }
 
+        let widget: PayPalButtonsInstance | null = null;
+
         const paypalOptions: PayPalButtonsOptions = {
             env: useSandbox ? 'sandbox' : 'production',
             style,
@@ -183,6 +194,8 @@ export const paypalModule = definePaymentModule<PayPalProviderOptions, PayPalGlo
                         // Allow submit to continue using order ID fallback on the backend.
                         services.addSuccess('PayPal approval received. Finalizing payment on submit.');
                     }
+
+                    hidePayPalButtons(widget, placeholder);
                 } catch {
                     services.addError('Unable to authorize payment. Please try again.');
                 }
@@ -191,9 +204,9 @@ export const paypalModule = definePaymentModule<PayPalProviderOptions, PayPalGlo
 
         const buttons = api.Buttons(paypalOptions);
         placeholder.setAttribute('data-formie-paypal-rendered', 'true');
-        const instance = buttons.render(placeholder);
+        widget = buttons.render(placeholder);
 
-        return instance;
+        return widget;
     },
     unmount: async (args) => {
         if (args.widget?.close) {
@@ -206,9 +219,16 @@ export const paypalModule = definePaymentModule<PayPalProviderOptions, PayPalGlo
             placeholder.innerHTML = '';
         }
     },
-    onAfterSubmit: async ({ services }) => {
+    onAfterSubmit: async ({ services, result }) => {
         services.updateInputs(['paypalOrderId', 'paypalAuthId'], '');
         services.removeSuccess();
         services.removeError();
+
+        // Restore buttons when auth was cleared but payment did not fully complete.
+        if (!result?.ok || result?.nextPage) {
+            return { remount: true };
+        }
+
+        return {};
     },
 });

package/dist/chunks/opayo-DPUA5CKr.js

@@ -1,113 +0,0 @@
-import { s as e } from "./event-names-BCI2FLD8.js";
-import { t } from "./api-BYe9YPko.js";
-import { t as n } from "./debug-BV0DvdHx.js";
-import { r } from "./scripts-CbQ7agX3.js";
-//#region src/js/modules/payments/opayo.ts
-var i = "FORMIE_OPAYO_SCRIPT", a = "https://live.opayo.eu.elavon.com/api/v1/js/sagepay.js", o = "https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js", s = n("payments", "opayo"), c = e("opayo", "challenge"), l = "formie:payment:opayo:challenge:response", u = t({
-	id: "opayo",
-	defaultRequiredInputSuffixes: ["opayoTokenId"],
-	load: async (e) => {
-		let { provider: t } = e.options;
-		return await r("sagepayOwnForm", {
-			id: i,
-			src: t.useSandbox ? o : a,
-			timeoutMs: 1e4
-		}), null;
-	},
-	onBeforeAuthorize: async (e) => {
-		let { field: t, services: n, options: r } = e, i = r.provider, a = i.handle || "opayo", o = n.form;
-		if (!o?.action) return n.addError("Form action is missing."), s.warn("Missing form action before authorize."), !1;
-		let c = window.sagepayOwnForm;
-		if (!c) return n.addError("Opayo script failed to load."), s.warn("sagepayOwnForm global not available."), !1;
-		let l = t.querySelector("[data-opayo-card=\"cardholder-name\"]")?.value ?? "", u = t.querySelector("[data-opayo-card=\"card-number\"]")?.value ?? "", d = t.querySelector("[data-opayo-card=\"expiry-date\"]")?.value ?? "", f = t.querySelector("[data-opayo-card=\"security-code\"]")?.value ?? "";
-		return u = u.replace(/[\s/]/g, ""), d = d.replace(/[\s/]/g, ""), new Promise((e) => {
-			let t = new FormData();
-			t.append("action", "formie/payment-webhooks/process-callback"), t.append("merchantSessionKey", "true"), t.append("handle", a), t.append("sessionToken", i.sessionToken || ""), fetch(o.action, {
-				method: "POST",
-				body: t
-			}).then(async (t) => {
-				if (t.status < 200 || t.status >= 300) {
-					n.addError(`${t.status}: ${t.statusText}`), s.warn("Merchant session request failed.", {
-						status: t.status,
-						statusText: t.statusText
-					}), e(!1);
-					return;
-				}
-				try {
-					let r = (await t.json()).merchantSessionKey;
-					if (!r) {
-						n.addError("Unable to get merchant session."), s.warn("merchantSessionKey missing in callback response."), e(!1);
-						return;
-					}
-					c({ merchantSessionKey: r }).tokeniseCardDetails({
-						cardDetails: {
-							cardholderName: l,
-							cardNumber: u,
-							expiryDate: d,
-							securityCode: f
-						},
-						onTokenised: (t) => {
-							t.success && t.cardIdentifier ? (n.updateInputs("opayoTokenId", t.cardIdentifier), n.updateInputs("opayoSessionKey", r), s.log("Tokenization succeeded.", { hasCardIdentifier: !!t.cardIdentifier }), e(!0)) : (n.addError(t.errors?.[0]?.message || "Tokenization failed."), s.warn("Tokenization failed.", t), e(!1));
-						}
-					});
-				} catch {
-					n.addError("Unable to parse merchant session response."), s.warn("Failed to parse merchant session response."), e(!1);
-				}
-			}).catch(() => {
-				n.addError("Network error. Please try again."), s.warn("Network error requesting merchant session."), e(!1);
-			});
-		});
-	},
-	setup: async (e) => {
-		let { services: t } = e;
-		e.target;
-		let n = null, r = !1, i = () => {
-			n?.parentNode && n.parentNode.removeChild(n), n = null;
-		}, a = t.events.onForm(c, ((e) => {
-			let a = e.detail?.data;
-			if (!a?.acsUrl || !a?.creq) return;
-			r = !1, s.log("Received payment challenge event.", {
-				hasAcsUrl: !!a.acsUrl,
-				hasCreq: !!a.creq
-			});
-			let o = t.form?.querySelector("input[name*=\"opayoSessionKey\"]")?.value || "", c = document.createElement("div");
-			c.className = "formie-modal", c.id = `formie-opayo-dialog-${Math.random().toString(36).slice(2, 9)}`, c.innerHTML = "\n                <div class=\"formie-modal-backdrop\" data-dialog-close></div>\n                <div class=\"formie-modal-content\">\n                    <div class=\"formie-loading formie-loading-large\" style=\"--formie-loading-width: 3rem; --formie-loading-height: 3rem; top: 50%; margin-top: -1.5rem;\"></div>\n                    <iframe width=\"100%\" height=\"100%\" style=\"width: 100%; height: 100%; position: relative; z-index: 1;\"></iframe>\n                </div>\n            ";
-			let l = c.querySelector("iframe"), u = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), d = a.returnUrl || a.redirectUrl || "", f = `<form action="${u(a.acsUrl)}" method="post">
-                <input type="hidden" name="creq" value="${u(a.creq || "")}" />
-                <input type="hidden" name="threeDSSessionData" value="${u(a.threeDSSessionData || "")}" />
-                <input type="hidden" name="MD" value="${u(o)}" />
-                <input type="hidden" name="TermUrl" value="${u(d)}" />
-                <input type="hidden" name="ThreeDSNotificationURL" value="${u(d)}" />
-            </form><script>document.forms[0].submit();<\/script>`;
-			i(), document.body.appendChild(c), n = c, l?.contentWindow && (l.contentWindow.document.open(), l.contentWindow.document.write(f), l.contentWindow.document.close());
-		})), o = (e) => {
-			if (e.data?.message === l) {
-				if (!n) {
-					s.log("Ignoring 3DS response without active dialog.");
-					return;
-				}
-				if (r) {
-					s.warn("Ignoring duplicate 3DS response while processing.");
-					return;
-				}
-				if (r = !0, s.log("Received payment challenge response message.", e.data?.value), i(), t.removeError(), e.data?.value?.error) {
-					t.addError(e.data.value.error.message), t.releaseSubmitLoading(), r = !1;
-					return;
-				}
-				t.updateInputs("opayo3DSComplete", e.data.value?.transactionId ?? ""), t.triggerSubmit();
-			}
-		};
-		return window.addEventListener("message", o), { destroy: () => {
-			a(), window.removeEventListener("message", o), i(), r = !1;
-		} };
-	},
-	onAfterSubmit: async ({ services: e }) => {
-		e.updateInputs([
-			"opayoTokenId",
-			"opayoSessionKey",
-			"opayo3DSComplete"
-		], "");
-	}
-});
-//#endregion
-export { u as opayoModule };