@verbb/formie-browser 1.0.10 → 1.0.12

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.10",
+  "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.10",
+    "@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 {};
     },
 });