@verbb/formie-browser 1.0.12 → 1.0.14

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

@@ -8,12 +8,12 @@ type BpointCardData = {
 };
 
 export const bpointModule = definePaymentModule<Record<string, never>, null, null>({
-    id: 'bpoint',
+    moduleId: 'formie:bpoint',
     defaultRequiredInputSuffixes: ['bpointToken'],
     load: async() => {
         return null;
     },
-    onBeforeAuthorize: async({ field, services }) => {
+    onBeforePayment: async({ field, services }) => {
         const existingValue = (field.querySelector('input[name$="[bpointToken]"]') as HTMLInputElement | null)?.value || '';
         if (existingValue.trim() !== '') {
             return true;

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

@@ -69,7 +69,7 @@ async function ensureEwayEncryptApi(): Promise<EwayEncryptApi> {
 }
 
 export const ewayModule = definePaymentModule<EwayProviderOptions, EwayEncryptApi | null, null>({
-    id: 'eway',
+    moduleId: 'formie:eway',
     defaultRequiredInputSuffixes: ['ewayTokenData'],
     load: async(ctx) => {
         const { provider } = ctx.options;
@@ -82,7 +82,7 @@ export const ewayModule = definePaymentModule<EwayProviderOptions, EwayEncryptAp
 
         return ensureEwayEncryptApi();
     },
-    onBeforeAuthorize: async(args) => {
+    onBeforePayment: async(args) => {
         const { field, services, provider, api } = args;
         const cseKey = provider.cseKey as string | undefined;
 

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

@@ -1,6 +1,6 @@
 import type {
-    FormieModuleDefinition,
-    FormieModuleInstance,
+    BrowserModuleDefinition,
+    BrowserModuleInstance,
     ModuleSetupContext,
 } from '#contracts/modules';
 import { DEFAULT_REQUIRED_INPUT_SUFFIXES } from '#modules/payments/constants';
@@ -10,19 +10,13 @@ import {
     type PaymentHostServices,
     normalizePaymentModuleOptions,
 } from '#modules/payments/host';
-import { waitForRequiredPaymentInputs } from '#modules/payments/utils';
+import { isPaymentFieldActive, waitForRequiredPaymentInputs } from '#modules/payments/utils';
 import { createDebug } from '#utils/debug';
 
 type Cleanup = () => void;
 type PaymentModuleRegistry = Record<string, { destroy: () => Promise<void> }>;
 const debug = createDebug('payments');
 
-function isTargetVisible(element: Element): boolean {
-    const node = element as HTMLElement;
-
-    return !node.closest('[data-formie-page-hidden]') && !node.closest('[hidden]');
-}
-
 export type PaymentModuleSetupContext<TProvider extends Record<string, unknown>> = Omit<ModuleSetupContext, 'options'> & {
     options: NormalizedPaymentModuleOptions<TProvider>;
     services: PaymentHostServices;
@@ -30,7 +24,7 @@ export type PaymentModuleSetupContext<TProvider extends Record<string, unknown>>
 
 type PaymentSetupResult = {
     destroy?: () => void | Promise<void>;
-    onBeforeStage?: (stageCtx: import('#contracts/modules').SubmitHookContext) => void | Promise<void>;
+    beforeSubmit?: (stageCtx: import('#contracts/modules').BeforeSubmitContext) => void | Promise<void>;
 };
 
 export type PaymentAfterSubmitResult = {
@@ -43,7 +37,7 @@ export type ManagedPaymentModuleAdapter<
     TApi,
     TWidget,
 > = {
-    id: string;
+    moduleId: string;
     defaultRequiredInputSuffixes?: string[];
     load: (ctx: PaymentModuleSetupContext<TProvider>) => Promise<TApi>;
     /** Redirect-only providers (Mollie, GoCardless): attach listeners, return destroy. No mount needed. */
@@ -63,16 +57,16 @@ export type ManagedPaymentModuleAdapter<
         options: NormalizedPaymentModuleOptions<TProvider>;
         provider: TProvider;
     }) => Promise<void> | void;
-    onBeforeAuthorize?: (args: {
+    onBeforePayment?: (args: {
         api: TApi;
         widget: TWidget | null;
         field: Element;
         services: PaymentHostServices;
         options: NormalizedPaymentModuleOptions<TProvider>;
         provider: TProvider;
-        stageCtx: import('#contracts/modules').SubmitHookContext;
+        stageCtx: import('#contracts/modules').BeforeSubmitContext;
     }) => Promise<boolean> | boolean;
-    /** Called after dispatch (on any result) to reset hidden inputs, clear UI, etc. */
+    /** Called after send (on any result) to reset hidden inputs, clear UI, etc. */
     onAfterSubmit?: (args: {
         field: Element;
         services: PaymentHostServices;
@@ -86,13 +80,15 @@ export function createManagedPaymentModule<
     TProvider extends Record<string, unknown>,
     TApi,
     TWidget,
->(adapter: ManagedPaymentModuleAdapter<TProvider, TApi, TWidget>): FormieModuleDefinition {
+>(adapter: ManagedPaymentModuleAdapter<TProvider, TApi, TWidget>): BrowserModuleDefinition {
     const defaultSuffixes = adapter.defaultRequiredInputSuffixes
-        ?? DEFAULT_REQUIRED_INPUT_SUFFIXES[adapter.id]
+        ?? DEFAULT_REQUIRED_INPUT_SUFFIXES[adapter.moduleId.split(':')[1]]
         ?? [];
 
     return {
-        id: adapter.id,
+        moduleId: adapter.moduleId,
+        version: 2,
+        surfaces: ['server-rendered', 'client-rendered'],
         kind: 'payment',
         match: (ctx) => {
             return !!(ctx.target.querySelector('[data-formie-field-type="payment"]')
@@ -104,12 +100,12 @@ export function createManagedPaymentModule<
             const registry = fieldWithRegistry.__formiePaymentModuleRegistry || {};
             fieldWithRegistry.__formiePaymentModuleRegistry = registry;
 
-            // Defensive singleton guard per field/provider: if this module somehow
-            // gets initialized again without teardown, clean the previous instance first.
-            const previous = registry[adapter.id];
+            // Each configured occurrence owns its provider state independently.
+            const occurrenceKey = ctx.entryKey ?? adapter.moduleId;
+            const previous = registry[occurrenceKey];
             if (previous?.destroy) {
                 debug.warn('Found stale payment module instance; destroying previous.', {
-                    moduleId: adapter.id,
+                    moduleId: adapter.moduleId,
                 });
                 try {
                     await previous.destroy();
@@ -119,7 +115,7 @@ export function createManagedPaymentModule<
             }
 
             const options = normalizePaymentModuleOptions<TProvider>(
-                adapter.id,
+                adapter.moduleId.split(':')[1],
                 ctx.options || {},
                 {
                     defaultRequiredInputSuffixes: defaultSuffixes,
@@ -141,7 +137,7 @@ export function createManagedPaymentModule<
 
             const getApi = async(): Promise<TApi> => {
                 if (!apiPromise) {
-                    debug.log('Loading payment provider API.', { moduleId: adapter.id });
+                    debug.log('Loading payment provider API.', { moduleId: adapter.moduleId });
                     apiPromise = adapter.load(setupCtx);
                 }
 
@@ -149,7 +145,7 @@ export function createManagedPaymentModule<
             };
 
             const ensureMounted = async() => {
-                if (!adapter.mount || widget || !isTargetVisible(ctx.target)) {
+                if (!adapter.mount || widget || !isPaymentFieldActive(ctx.target)) {
                     return;
                 }
 
@@ -164,15 +160,16 @@ export function createManagedPaymentModule<
                         provider: options.provider,
                     });
                     debug.log('Payment widget mounted.', {
-                        moduleId: adapter.id,
+                        moduleId: adapter.moduleId,
                         handle: options.handle,
                     });
-                } catch {
-                    // Mount failed; widget stays null
+                } catch (error) {
+                    // Propagate initialization failure to the required/optional policy.
                     debug.warn('Payment widget mount failed.', {
-                        moduleId: adapter.id,
+                        moduleId: adapter.moduleId,
                         handle: options.handle,
                     });
+                    throw error;
                 }
             };
 
@@ -190,10 +187,11 @@ export function createManagedPaymentModule<
                 }
             }
 
-            if (adapter.mount && isTargetVisible(ctx.target)) {
+            if (adapter.mount && isPaymentFieldActive(ctx.target)) {
                 await ensureMounted();
             }
 
+            // Remount when page flow or field conditions reveal this payment field.
             const visibilityEvents = ['formie:page:navigate:after', 'formie:submit:result'];
             visibilityEvents.forEach((eventName) => {
                 const handleVisibility = () => {
@@ -206,9 +204,14 @@ export function createManagedPaymentModule<
                 });
             });
 
+            // Conditions emit on the module bus (not only as page-nav DOM events).
+            cleanups.push(ctx.on('formie:conditions:evaluated', () => {
+                void ensureMounted();
+            }));
+
             const destroy = async() => {
                 debug.log('Destroying payment module.', {
-                    moduleId: adapter.id,
+                    moduleId: adapter.moduleId,
                     handle: options.handle,
                 });
                 cleanups.forEach((c) => c());
@@ -225,50 +228,48 @@ export function createManagedPaymentModule<
                         provider: options.provider,
                     });
                     debug.log('Payment widget unmounted.', {
-                        moduleId: adapter.id,
+                        moduleId: adapter.moduleId,
                         handle: options.handle,
                     });
                 }
 
-                if (registry[adapter.id]?.destroy === destroy) {
-                    delete registry[adapter.id];
+                if (registry[occurrenceKey]?.destroy === destroy) {
+                    delete registry[occurrenceKey];
                 }
                 debug.log('Payment module destroy complete.', {
-                    moduleId: adapter.id,
+                    moduleId: adapter.moduleId,
                     handle: options.handle,
                 });
             };
 
-            registry[adapter.id] = { destroy };
+            registry[occurrenceKey] = { destroy };
 
             return {
                 destroy,
-                onBeforeStage: async(stageCtx) => {
-                    if (customSetupResult?.onBeforeStage) {
-                        await customSetupResult.onBeforeStage(stageCtx);
+                beforeSubmit: async(stageCtx) => {
+                    if (customSetupResult?.beforeSubmit) {
+                        await customSetupResult.beforeSubmit(stageCtx);
                         return;
                     }
 
-                    if (stageCtx.stage !== 'authorize' || stageCtx.action !== 'submit') {
+                    if (stageCtx.action !== 'submit') {
                         return;
                     }
 
-                    // Multi-page forms can mount payment modules for fields on
-                    // hidden pages. Only enforce authorize checks for payment
-                    // fields on the active/visible page.
-                    const fieldElement = ctx.target as HTMLElement;
-                    const page = fieldElement.closest('[data-formie-page]') as HTMLElement | null;
-                    if (page?.hasAttribute('data-formie-page-hidden')) {
+                    // Skip authorize when the field is hidden by page flow or
+                    // conditional logic (e.g. Stripe vs bank-transfer choice).
+                    // Server-side payment tasks already skip these fields.
+                    if (!isPaymentFieldActive(ctx.target)) {
                         return;
                     }
 
                     await ensureMounted();
                     const api = await getApi();
 
-                    if (adapter.onBeforeAuthorize) {
+                    if (adapter.onBeforePayment) {
                         if (!authorizeInFlight) {
                             authorizeInFlight = (async() => {
-                                return adapter.onBeforeAuthorize!({
+                                return adapter.onBeforePayment!({
                                     api,
                                     widget,
                                     field: ctx.target,
@@ -283,8 +284,8 @@ export function createManagedPaymentModule<
                         }
 
                         const ok = await authorizeInFlight;
-                        debug.log('onBeforeAuthorize resolved.', {
-                            moduleId: adapter.id,
+                        debug.log('onBeforePayment resolved.', {
+                            moduleId: adapter.moduleId,
                             handle: options.handle,
                             ok,
                         });
@@ -311,15 +312,15 @@ export function createManagedPaymentModule<
 
                     if (!result.ok) {
                         debug.warn('Required payment input(s) missing.', {
-                            moduleId: adapter.id,
+                            moduleId: adapter.moduleId,
                             handle: options.handle,
                             missingSuffix: result.missingSuffix,
                         });
                         stageCtx.abort(options.transport.errorMessage);
                     }
                 },
-                onAfterStage: async(stagePayload, result) => {
-                    if (stagePayload.stage !== 'dispatch' || !adapter.onAfterSubmit) {
+                afterSubmit: async(stagePayload, result) => {
+                    if (!adapter.onAfterSubmit) {
                         return;
                     }
 

package/src/js/modules/payments/go-cardless.ts

@@ -9,7 +9,7 @@ type GoCardlessProviderOptions = {
 const REDIRECT_EVENT = getPaymentProviderActionEventName('go-cardless', 'redirect');
 
 export const goCardlessModule = definePaymentModule<GoCardlessProviderOptions, null, null>({
-    id: 'go-cardless',
+    moduleId: 'formie:go-cardless',
     defaultRequiredInputSuffixes: [],
     load: async() => null,
     setup: async({ services, root }) => {

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

@@ -1,6 +1,6 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 
-export const builtinPaymentModuleLoaders: Record<string, () => Promise<FormieModuleDefinition>> = {
+export const builtinPaymentModuleLoaders: Record<string, () => Promise<BrowserModuleDefinition>> = {
     // Keep payment providers lazy and separately addressable so forms only ship
     // the payment SDK wrapper code they actually declare in their manifest.
     'bpoint': () => import('#modules/payments/bpoint').then((module) => module.bpointModule),

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

@@ -10,7 +10,7 @@ type MollieProviderOptions = {
 const REDIRECT_EVENT = getPaymentProviderActionEventName('mollie', 'redirect');
 
 export const mollieModule = definePaymentModule<MollieProviderOptions, null, null>({
-    id: 'mollie',
+    moduleId: 'formie:mollie',
     defaultRequiredInputSuffixes: [],
     load: async() => null,
     setup: async({ services, root }) => {

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

@@ -96,10 +96,10 @@ const extractMonerisToken = (payload: unknown): MonerisTokenResult => {
 };
 
 export const monerisModule = definePaymentModule<MonerisProviderOptions, null, null>({
-    id: 'moneris',
+    moduleId: 'formie:moneris',
     defaultRequiredInputSuffixes: ['monerisTokenId'],
     load: async() => null,
-    onBeforeAuthorize: async(args) => {
+    onBeforePayment: async(args) => {
         const { field, services, options } = args;
         const fieldState = field as MonerisFieldState;
         const provider = options.provider as MonerisProviderOptions;

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

@@ -1,8 +1,12 @@
+import { getFormBrowserRequestOptions } from '#utils/request-profile';
+import { browserRequest, type BrowserRequestOptions } from '@verbb/formie-core';
 import opayoCss from '#theme-css/integrations/_opayo.css?inline';
 
 import { definePaymentModule } from '#modules/payments/api';
 import { ensureModuleStyles } from '#modules/styles';
+import { toggleThemeClasses } from '#theme/theme-classes';
 import { createDebug } from '#utils/debug';
+import { appendFormCsrfToFormData } from '#utils/csrf';
 import { getPaymentProviderActionEventName } from '#utils/event-names';
 import { loadScriptAndEnsureGlobal } from '#utils/scripts';
 
@@ -50,6 +54,7 @@ type OpayoProviderOptions = {
     useSandbox?: boolean;
     handle?: string;
     sessionToken?: string | null;
+    sessionEndpoint?: string;
     checkoutMode?: OpayoCheckoutMode;
 };
 
@@ -76,22 +81,23 @@ async function requestMerchantSessionKey(args: {
     form: HTMLFormElement;
     handle: string;
     sessionToken: string;
+    sessionEndpoint?: 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');
+    appendFormCsrfToFormData(formData, form);
+    formData.set('action', 'formie/payment-sessions/initialize');
     formData.append('handle', handle);
     formData.append('sessionToken', sessionToken);
 
     try {
-        const res = await fetch(form.action, {
+        const res = await browserRequest(args.sessionEndpoint || form.action, {
             method: 'POST',
             body: formData,
-        });
+        }, getFormBrowserRequestOptions(form));
 
         if (res.status < 200 || res.status >= 300) {
             services.addError(`${res.status}: ${res.statusText}`);
@@ -108,7 +114,7 @@ async function requestMerchantSessionKey(args: {
 
         if (!merchantSessionKey) {
             services.addError('Unable to get merchant session.');
-            debug.warn('merchantSessionKey missing in callback response.');
+            debug.warn('merchantSessionKey missing in session response.');
 
             return null;
         }
@@ -131,7 +137,7 @@ function ensureDropInContainerId(container: HTMLElement): string {
 }
 
 export const opayoModule = definePaymentModule<OpayoProviderOptions, null, OpayoDropInWidget | null>({
-    id: 'opayo',
+    moduleId: 'formie:opayo',
     defaultRequiredInputSuffixes: ['opayoTokenId'],
     load: async(ctx) => {
         const { provider } = ctx.options;
@@ -182,6 +188,7 @@ export const opayoModule = definePaymentModule<OpayoProviderOptions, null, Opayo
             form,
             handle,
             sessionToken: provider.sessionToken || '',
+            sessionEndpoint: provider.sessionEndpoint,
             services,
         });
 
@@ -226,6 +233,7 @@ export const opayoModule = definePaymentModule<OpayoProviderOptions, null, Opayo
                         form,
                         handle,
                         sessionToken: provider.sessionToken || '',
+            sessionEndpoint: provider.sessionEndpoint,
                         services,
                     }).then((newMerchantSessionKey) => {
                         if (!newMerchantSessionKey) {
@@ -257,7 +265,7 @@ export const opayoModule = definePaymentModule<OpayoProviderOptions, null, Opayo
     unmount: async({ widget }) => {
         widget?.checkout?.destroy?.();
     },
-    onBeforeAuthorize: async(args) => {
+    onBeforePayment: async(args) => {
         const { field, services, options, provider, widget } = args;
         const handle = (provider.handle || 'opayo') as string;
         const form = services.form;
@@ -306,6 +314,7 @@ export const opayoModule = definePaymentModule<OpayoProviderOptions, null, Opayo
             form,
             handle,
             sessionToken: provider.sessionToken || '',
+            sessionEndpoint: provider.sessionEndpoint,
             services,
         });
 
@@ -381,10 +390,14 @@ export const opayoModule = definePaymentModule<OpayoProviderOptions, null, Opayo
             dialog.innerHTML = `
                 <div class="formie-modal-backdrop" data-dialog-close></div>
                 <div class="formie-modal-content">
-                    <div class="formie-loading formie-loading-large" style="--formie-loading-width: 3rem; --formie-loading-height: 3rem; top: 50%; margin-top: -1.5rem;"></div>
+                    <div data-formie-opayo-loading style="--formie-loading-width: 3rem; --formie-loading-height: 3rem; top: 50%; margin-top: -1.5rem;"></div>
                     <iframe width="100%" height="100%" style="width: 100%; height: 100%; position: relative; z-index: 1;"></iframe>
                 </div>
             `;
+            const loading = dialog.querySelector<HTMLElement>('[data-formie-opayo-loading]');
+            if (loading) {
+                toggleThemeClasses(loading, form, 'loading', true);
+            }
             const iframe = dialog.querySelector('iframe');
             const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
             const callbackUrl = data.returnUrl || data.redirectUrl || '';

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

@@ -10,11 +10,15 @@ type PaddleGlobal = {
         eventCallback?: (e: { name: string; data?: unknown }) => void;
     }) => void;
     Checkout: {
-        open: (data: { items?: unknown[] }) => void;
+        open: (data: PaddleCheckout) => void;
         close: () => void;
     };
 };
 
+type PaddleCheckout = {
+    transactionId?: string;
+};
+
 type PaddleProviderOptions = {
     clientSideToken?: string;
     environment?: string;
@@ -25,7 +29,7 @@ const SCRIPT_ID = 'FORMIE_PADDLE_SCRIPT';
 const CHECKOUT_EVENT = getPaymentProviderActionEventName('paddle', 'initialize');
 
 export const paddleModule = definePaymentModule<PaddleProviderOptions, null, null>({
-    id: 'paddle',
+    moduleId: 'formie:paddle',
     defaultRequiredInputSuffixes: ['paddleCheckoutData'],
     load: async() => null,
     setup: async(ctx) => {
@@ -74,9 +78,9 @@ export const paddleModule = definePaymentModule<PaddleProviderOptions, null, nul
             },
         });
 
-        const openCheckout = (data?: { items?: unknown[] }) => {
-            if (!data?.items) {
-                services.addError('Missing Paddle checkout items.');
+        const openCheckout = (data?: PaddleCheckout) => {
+            if (!data?.transactionId) {
+                services.addError('Missing Paddle checkout transaction.');
 
                 return false;
             }
@@ -94,7 +98,7 @@ export const paddleModule = definePaymentModule<PaddleProviderOptions, null, nul
             return true;
         };
 
-        const unbindCheckout = services.events.onForm(CHECKOUT_EVENT, ((event: CustomEvent<{ data?: { items?: unknown[] } }>) => {
+        const unbindCheckout = services.events.onForm(CHECKOUT_EVENT, ((event: CustomEvent<{ data?: PaddleCheckout }>) => {
             openCheckout(event.detail?.data);
         }) as EventListener);
 

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

@@ -1,4 +1,5 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
+import { isPaymentFieldActive } from '#modules/payments/utils';
 
 type PaymentProviderConfig = {
     handle: string;
@@ -93,8 +94,10 @@ async function waitForRequiredInputs(root: Element, requiredInputSuffixes: strin
     return hasAllRequiredInputs(root, requiredInputSuffixes);
 }
 
-export const paymentModule: FormieModuleDefinition = {
-    id: 'payment',
+export const paymentModule: BrowserModuleDefinition = {
+    moduleId: 'formie:payment',
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'payment',
     match: () => true,
     setup: async(ctx) => {
@@ -110,25 +113,30 @@ export const paymentModule: FormieModuleDefinition = {
             destroy: () => {
                 void ctx.emit('formie:module:payment:destroy', {});
             },
-            onBeforeStage: async(stageCtx) => {
-                if (stageCtx.stage !== 'authorize') {
+            beforeSubmit: async(stageCtx) => {
+                if (stageCtx.action !== 'submit') {
                     return;
                 }
 
-                if (stageCtx.action !== 'submit') {
+                if (!hasPaymentField) {
                     return;
                 }
 
-                if (!hasPaymentField) {
+                // Same rule as managed payment modules: do not require tokens
+                // when every payment field is hidden by conditions or page flow.
+                const paymentFields = Array.from(
+                    targetRoot.querySelectorAll('[data-formie-field-type="payment"]'),
+                );
+                if (paymentFields.length > 0 && paymentFields.every((field) => !isPaymentFieldActive(field))) {
                     return;
                 }
 
-                await ctx.emit('formie:payment:authorize:before', {
+                await ctx.emit('formie:payment:payment:before', {
                     action: stageCtx.action,
                 });
 
                 for (const provider of providers) {
-                    await ctx.emit('formie:payment:provider:authorize:before', {
+                    await ctx.emit('formie:payment:provider:payment:before', {
                         provider,
                         action: stageCtx.action,
                     });
@@ -145,14 +153,14 @@ export const paymentModule: FormieModuleDefinition = {
                         const message = provider.errorMessage || 'Payment authorization is incomplete.';
                         stageCtx.abort(message);
 
-                        await ctx.emit('formie:payment:provider:authorize:error', {
+                        await ctx.emit('formie:payment:provider:payment:error', {
                             reason: 'missing-payment-token',
                             provider,
                             action: stageCtx.action,
                             missingSuffix: result.missingSuffix,
                         });
 
-                        await ctx.emit('formie:payment:authorize:error', {
+                        await ctx.emit('formie:payment:payment:error', {
                             reason: 'missing-payment-token',
                             providerHandle: provider.handle,
                             missingSuffix: result.missingSuffix,
@@ -162,18 +170,14 @@ export const paymentModule: FormieModuleDefinition = {
                         return;
                     }
 
-                    await ctx.emit('formie:payment:provider:authorize:after', {
+                    await ctx.emit('formie:payment:provider:payment:after', {
                         provider,
                         action: stageCtx.action,
                     });
                 }
             },
-            onAfterStage: async(stageCtx, result) => {
-                if (stageCtx.stage !== 'authorize') {
-                    return;
-                }
-
-                await ctx.emit('formie:payment:authorize:after', {
+            afterSubmit: async(stageCtx, result) => {
+                await ctx.emit('formie:payment:payment:after', {
                     action: stageCtx.action,
                     result,
                 });

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

@@ -84,7 +84,7 @@ function getScriptUrl(clientId: string, currency: string): string {
 }
 
 export const paypalModule = definePaymentModule<PayPalProviderOptions, PayPalGlobal | null, PayPalButtonsInstance | null>({
-    id: 'paypal',
+    moduleId: 'formie:paypal',
     defaultRequiredInputSuffixes: ['paypalOrderId', 'paypalAuthId'],
     load: async (ctx) => {
         const { provider } = ctx.options;

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

@@ -25,7 +25,7 @@ type PayWayProviderOptions = {
 const SCRIPT_ID = 'FORMIE_PAYWAY_SCRIPT';
 
 export const paywayModule = definePaymentModule<PayWayProviderOptions, null, PayWayFrame | null>({
-    id: 'payway',
+    moduleId: 'formie:payway',
     defaultRequiredInputSuffixes: ['paywayTokenId'],
     load: async (ctx) => {
         const { provider } = ctx.options;
@@ -79,7 +79,7 @@ export const paywayModule = definePaymentModule<PayWayProviderOptions, null, Pay
     unmount: async (args) => {
         args.widget?.destroy();
     },
-    onBeforeAuthorize: async (args) => {
+    onBeforePayment: async (args) => {
         const { widget, services } = args;
 
         if (!widget) {

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

@@ -23,7 +23,7 @@ type SquareProviderOptions = {
 const SCRIPT_ID = 'FORMIE_SQUARE_SCRIPT';
 
 export const squareModule = definePaymentModule<SquareProviderOptions, SquareGlobal | null, SquareCard | null>({
-    id: 'square',
+    moduleId: 'formie:square',
     defaultRequiredInputSuffixes: ['squarePaymentId'],
     load: async(ctx) => {
         const { provider } = ctx.options;
@@ -73,7 +73,7 @@ export const squareModule = definePaymentModule<SquareProviderOptions, SquareGlo
     unmount: async() => {
         // Square card doesn't expose destroy, detach handled by removing element
     },
-    onBeforeAuthorize: async(args) => {
+    onBeforePayment: async(args) => {
         const { widget, services } = args;
 
         if (!widget) {