@verbb/formie-browser 1.0.15 → 1.0.16

package/src/js/modules/captchas/recaptcha-v3.ts

@@ -17,21 +17,25 @@ export const recaptchaV3Module = defineCaptchaModule<RecaptchaProviderOptions, R
     defaultPlaceholderSelector: '[data-recaptcha-placeholder]',
     defaultTokenFieldNames: ['g-recaptcha-response'],
     load: ({ options }) => {
-        // Score-based flows use a site-key `render=` mode instead of an
-        // explicit widget render, so the loader needs the site key up front.
-        return loadRecaptchaGlobal(options.provider, false, options.provider.siteKey || undefined);
+        return loadRecaptchaGlobal(options.provider);
     },
-    mount: ({ api, provider }) => {
-        return new Promise((resolve) => {
-            api.ready(() => {
-                // There is no real widget id for v3. We store the site key as
-                // the "widget" value purely so the managed factory can treat
-                // this provider like every other captcha module instance.
-                resolve(provider.siteKey || 'recaptcha-v3');
-            });
+    mount: ({ api, container, provider, services }) => {
+        return new Promise((resolve, reject) => {
+            // An existing api.js may have loaded without render=<our site key>.
+            // Register this form explicitly, then execute its returned client ID.
+            void whenRecaptchaReady(api, async() => {
+                resolve(api.render(container, {
+                    sitekey: provider.siteKey || '',
+                    size: 'invisible',
+                    badge: provider.badge || 'bottomright',
+                    theme: provider.theme || 'light',
+                    'expired-callback': () => services.tokens.clear(),
+                    'error-callback': () => services.tokens.clear(),
+                }));
+            }).catch(reject);
         });
     },
-    challenge: async({ api, provider, placeholder, services, stageCtx }) => {
+    challenge: async({ api, widget, provider, placeholder, services, stageCtx }) => {
         // If a token already exists we can skip execution, which matters for
         // re-renders or multi-step flows where the same challenge was already
         // completed very recently.
@@ -42,7 +46,7 @@ export const recaptchaV3Module = defineCaptchaModule<RecaptchaProviderOptions, R
         // v3 returns its token directly from `execute()`, unlike widget-based
         // captchas that signal completion later via callbacks.
         await whenRecaptchaReady(api, async() => {
-            const token = await api.execute(provider.siteKey || '', { action: provider.action || 'submit' });
+            const token = await api.execute(widget, { action: provider.action || 'submit' });
 
             if (typeof token === 'string' && token.trim() !== '') {
                 services.tokens.write(token.trim());
@@ -59,7 +63,12 @@ export const recaptchaV3Module = defineCaptchaModule<RecaptchaProviderOptions, R
             stageCtx.abort(message);
         }
     },
-    unmount: ({ services }) => {
+    reset: ({ api, widget, services }) => {
+        api.reset(widget);
+        services.tokens.clear();
+    },
+    unmount: ({ api, widget, services }) => {
+        api.reset(widget);
         services.tokens.clear();
     },
 });

package/src/js/modules/fields/address-state.ts

@@ -39,6 +39,7 @@ type AddressStateOptions = {
     inputMode?: string;
     hideWhenUnused?: boolean;
     useSearchable?: boolean;
+    searchableOptionLimit?: number | null;
     useDatalist?: boolean;
     optionLabel?: 'name' | 'short';
     optionValue?: 'name' | 'short';
@@ -569,22 +570,23 @@ function updateFieldLabel(stateField: HTMLElement, label: string): void {
 function initSearchableSelect(
     select: HTMLSelectElement,
     placeholder: string | null,
+    maxOptions: number | null | undefined,
 ): () => void {
     select.setAttribute('data-formie-combobox-input', 'true');
 
     dispatchFieldEvent(select, 'combobox', 'before-init', {
         select,
-        options: { placeholder },
+        options: { placeholder, maxOptions },
     });
 
     const cleanup = initFormieCombobox(
         select as Parameters<typeof initFormieCombobox>[0],
-        { placeholder },
+        { placeholder, maxOptions },
     );
 
     dispatchFieldEvent(select, 'combobox', 'after-init', {
         combobox: (select as Parameters<typeof initFormieCombobox>[0])._formieTomSelect,
-        options: { placeholder },
+        options: { placeholder, maxOptions },
     });
 
     return cleanup;
@@ -694,7 +696,7 @@ async function applyCountryState(
         }
 
         if (useSearchable) {
-            fieldState.comboboxCleanup = initSearchableSelect(select, placeholder);
+            fieldState.comboboxCleanup = initSearchableSelect(select, placeholder, options.searchableOptionLimit);
         } else {
             select.removeAttribute('data-formie-combobox-input');
         }

package/src/js/modules/fields/combobox.ts

@@ -6,6 +6,7 @@ import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/sh
 import { ensureModuleStyles } from '#modules/styles';
 import { getThemeClasses } from '#theme/theme-classes';
 import { createDebug } from '#utils/debug';
+import { t } from '#utils/i18n';
 import { VALIDATION_SKIP_ATTR } from '#validation/skip';
 
 const SELECT_SELECTOR = 'select[data-formie-combobox-input]';
@@ -21,6 +22,8 @@ const NATIVE_THEME_CLASSES = [
 
 export type FormieComboboxOptions = {
     multiple?: boolean;
+    maxOptions?: number | null;
+    allowClear?: boolean;
     placeholder?: string | null;
 };
 
@@ -87,8 +90,23 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
 
     const mergedOptions: Record<string, unknown> = {
         create: false,
+        // Limit rendered results while retaining the full option list for searching.
+        maxOptions: options.maxOptions === undefined ? 100 : options.maxOptions,
         maxItems: multiple ? null : 1,
-        plugins: multiple ? ['remove_button'] : [],
+        plugins: multiple ? ['remove_button'] : options.allowClear ? {
+            remove_button: {
+                // Use a native button so clearing a single answer works with keyboard input too.
+                html: () => {
+                    const button = document.createElement('button');
+                    button.type = 'button';
+                    button.className = 'remove';
+                    button.title = t('Clear selection');
+                    button.setAttribute('aria-label', button.title);
+                    button.textContent = '×';
+                    return button;
+                },
+            },
+        } : [],
         hideSelected: multiple ? true : null,
         clearAfterSelect: multiple,
         closeAfterSelect: !multiple,

package/src/js/modules/fields/conditions.ts

@@ -300,6 +300,9 @@ export const conditionsModule: BrowserModuleDefinition = {
         });
 
         rebuild();
+        // Initial visibility and disabled state belong to module setup. Finish
+        // them before the form captures its clean baseline or announces readiness.
+        evaluateAll();
 
         await ctx.emit('formie:module:conditions:init', {
             count: entries.length,

package/src/js/modules/fields/file-upload.ts

@@ -3,6 +3,7 @@ import fileUploadCss from '#theme-css/fields/_file.css?inline';
 import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
+import { appendFormCsrfToFormData } from '#utils/csrf';
 import { getFieldModuleEventName, getFileUploadEventName, getFormStateEventName } from '#utils/event-names';
 import { requestJson } from '#utils/http';
 
@@ -429,11 +430,15 @@ function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, asset
         body.append('fieldHandle', fieldHandle);
     }
 
-    const submissionUidInput = form?.querySelector('input[name="submissionUid"]');
+    const passthroughNames = ['submissionUid', 'resumeToken', 'submissionEditToken', 'siteId', 'renderId', 'draftContext', 'draftContextToken'] as const;
 
-    if (submissionUidInput instanceof HTMLInputElement && submissionUidInput.value.trim()) {
-        body.append('submissionUid', submissionUidInput.value.trim());
-    }
+    passthroughNames.forEach((name) => {
+        const contextInput = form?.querySelector(`input[name="${name}"]`);
+
+        if (contextInput instanceof HTMLInputElement && contextInput.value.trim()) {
+            body.append(name, contextInput.value.trim());
+        }
+    });
 
     assets.forEach((asset) => {
         if (asset.assetId) {
@@ -444,6 +449,8 @@ function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, asset
         }
     });
 
+    appendFormCsrfToFormData(body, form);
+
     return body;
 }
 

package/src/js/modules/fields/phone-country.ts

@@ -164,6 +164,27 @@ function initPhoneField(phoneInput: PhoneInput, countryInput: HTMLInputElement,
     phoneInput.addEventListener('blur', syncCountry);
     syncCountry();
 
+    // Hidden input values also change their native reset default, so retain the initial country.
+    let defaultCountry = countryInput.value;
+    let destroyed = false;
+    void validator.promise.then(() => {
+        if (!destroyed) {
+            defaultCountry ||= validator.getSelectedCountryData()?.iso2?.toUpperCase() || '';
+        }
+    }, () => {});
+
+    const form = phoneInput.form;
+    const onReset = (event: Event) => {
+        queueMicrotask(() => {
+            if (!destroyed && !event.defaultPrevented && defaultCountry) {
+                validator.setCountry(defaultCountry.toLowerCase() as IntlCountryCode);
+                validator.setNumber(phoneInput.defaultValue);
+                syncCountry();
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     // Keep the country dropdown button in sync when the tel input is enabled/disabled after
     // init (multi-page page-hidden, or conditions). intl-tel-input disables the button to match
     // a disabled input at init, but won't re-enable it when `disabled` is later removed.
@@ -199,6 +220,8 @@ function initPhoneField(phoneInput: PhoneInput, countryInput: HTMLInputElement,
     });
 
     return () => {
+        destroyed = true;
+        form?.removeEventListener('reset', onReset);
         phoneInput.removeEventListener('countrychange', syncCountry);
         phoneInput.removeEventListener('blur', syncCountry);
         countryButtonObserver.disconnect();

package/src/js/modules/fields/rich-text.ts

@@ -168,6 +168,37 @@ function initRichTextField(container: HTMLElement, input: RichTextInput, options
     input.richText = editor;
     editor.content.innerHTML = input.value || '';
 
+    editor.content.setAttribute('role', 'textbox');
+    editor.content.setAttribute('aria-multiline', 'true');
+
+    const labels = Array.from(input.labels || []);
+    const ariaAttributes = ['aria-label', 'aria-labelledby', 'aria-invalid', 'aria-describedby', 'aria-errormessage'];
+    const syncAccessibility = () => {
+        ariaAttributes.forEach((attribute) => {
+            const value = input.getAttribute(attribute);
+
+            if (value !== null) {
+                editor.content.setAttribute(attribute, value);
+            } else {
+                editor.content.removeAttribute(attribute);
+            }
+        });
+
+        if (!input.hasAttribute('aria-label') && !input.hasAttribute('aria-labelledby') && labels.length) {
+            editor.content.setAttribute('aria-label', labels.map((label) => label.textContent?.trim() || '').join(' '));
+        }
+
+        editor.content.setAttribute('aria-required', input.getAttribute('aria-required') || String(input.required));
+    };
+    syncAccessibility();
+
+    // Validation updates the submitted textarea; expose the same state on the editor.
+    const accessibilityObserver = new MutationObserver(syncAccessibility);
+    accessibilityObserver.observe(input, { attributes: true, attributeFilter: [...ariaAttributes, 'aria-required', 'required'] });
+
+    const onLabelClick = () => editor.content.focus();
+    labels.forEach((label) => label.addEventListener('click', onLabelClick));
+
     const form = input.form;
     const onReset = (event: Event) => {
         // Wait for the textarea to regain its default value before updating Pell.
@@ -188,6 +219,8 @@ function initRichTextField(container: HTMLElement, input: RichTextInput, options
     });
 
     return () => {
+        accessibilityObserver.disconnect();
+        labels.forEach((label) => label.removeEventListener('click', onLabelClick));
         form?.removeEventListener('reset', onReset);
         container.innerHTML = '';
         delete input.richText;

package/src/js/modules/fields/summary.ts

@@ -1,6 +1,7 @@
 import summaryCss from '#theme-css/fields/_summary.css?inline';
 
 import type { BrowserModuleDefinition } from '#contracts/modules';
+import type { FormSubmitResult } from '#contracts/schema';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { toggleThemeClasses } from '#theme/theme-classes';
@@ -28,8 +29,10 @@ function getSummaryRequestUrl(): string {
 }
 
 function getSummaryRequestState(field: HTMLElement): SummaryRequestState {
-    const summaryTokenInput = field.querySelector('[data-formie-summary-token]') as HTMLInputElement | null;
-    const accessToken = summaryTokenInput?.value?.trim() || null;
+    const tokenElement = field.querySelector('[data-formie-summary-token]');
+    const accessToken = (tokenElement instanceof HTMLInputElement
+        ? tokenElement.value
+        : tokenElement?.getAttribute('data-formie-summary-token'))?.trim() || null;
 
     return {
         accessToken,
@@ -71,6 +74,9 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     let dirtyVersion = 0;
     let requestVersion = 0;
     let activeRequest: AbortController | null = null;
+    let destroyed = false;
+    const initialState = getSummaryRequestState(field);
+    let accessToken = initialState.accessToken;
 
     const getBlocks = (): HTMLElement | null => {
         const blocks = field.querySelector(BLOCKS_SELECTOR);
@@ -101,11 +107,10 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
         toggleThemeClasses(blocks, form, 'loading', false);
     };
 
-    const initialState = getSummaryRequestState(field);
     setLoadingState(!!initialState.accessToken);
 
     const queueFetch = (): void => {
-        if (!isVisible || (hasFetched && !isDirty)) {
+        if (destroyed || !isVisible || (hasFetched && !isDirty)) {
             return;
         }
 
@@ -114,7 +119,11 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     };
 
     const fetchSummary = debounce(async() => {
-        const state = getSummaryRequestState(field);
+        if (destroyed) {
+            return;
+        }
+
+        const state = { accessToken };
 
         if (!getBlocks() || !state.accessToken) {
             debug.warn('Missing state for fetch.', state);
@@ -170,7 +179,9 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
                 setLoadingState(false);
                 activeRequest = null;
 
-                if (isDirty) {
+                // Retry only when newer input arrived during this request. A
+                // failed request alone must not create an endless retry loop.
+                if (isDirty && dirtyVersion !== requestDirtyVersion) {
                     queueFetch();
                 }
             }
@@ -194,18 +205,56 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
         queueFetch();
     };
 
-    const handleSubmitResult = (): void => {
-        isDirty = true;
-        debug.log('Submit result received; refreshing.');
+    const handleSubmitResult = (event: Event): void => {
+        const result = (event as CustomEvent<FormSubmitResult>).detail;
+        const tokens = result?.meta?.summaryTokens;
+        const uid = field.dataset.formieFieldUid;
+
+        // AJAX navigation reuses the initial markup, which had no submission
+        // token. The accepted save now grants access to this summary field.
+        if (uid && tokens && typeof tokens === 'object') {
+            const token = (tokens as Record<string, unknown>)[uid];
+
+            if (typeof token === 'string' && token) {
+                accessToken = token;
+                // Page navigation can remount modules with updated configuration.
+                getContainer()?.setAttribute('data-formie-summary-token', token);
+            }
+        }
+
+        markDirty();
+        debug.log('Submit result received; refreshing.', { uid, hasToken: !!accessToken });
         queueFetch();
     };
 
     const handlePageNavigate = (): void => {
-        isDirty = true;
+        markDirty();
         debug.log('Page navigation received; refreshing.');
         queueFetch();
     };
 
+    const handleReset = (event: Event): void => {
+        queueMicrotask(() => {
+            if (event.defaultPrevented || destroyed) {
+                return;
+            }
+
+            // A new submission must not display or fetch the previous visitor's
+            // completed values while its initial markup is reused.
+            requestVersion += 1;
+            activeRequest?.abort();
+            activeRequest = null;
+            accessToken = null;
+            getContainer()?.removeAttribute('data-formie-summary-token');
+            field.querySelectorAll('input[data-formie-summary-token]').forEach((input) => input.remove());
+            hasFetched = false;
+            getBlocks()?.replaceChildren();
+            setLoadingState(false);
+            markDirty();
+            queueFetch();
+        });
+    };
+
     // Defer the summary fetch until the field is near view. This avoids extra
     // requests for hidden pages or summaries the user never reaches.
     const observer = new IntersectionObserver((entries) => {
@@ -228,14 +277,18 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     observer.observe(field);
     form.addEventListener('input', handleFieldMutation);
     form.addEventListener('change', handleFieldMutation);
+    form.addEventListener('reset', handleReset);
     root.addEventListener('formie:page:navigate:after', handlePageNavigate as EventListener);
     root.addEventListener('formie:submit:result', handleSubmitResult as EventListener);
 
     return () => {
+        destroyed = true;
+        requestVersion += 1;
         activeRequest?.abort();
         observer.disconnect();
         form.removeEventListener('input', handleFieldMutation);
         form.removeEventListener('change', handleFieldMutation);
+        form.removeEventListener('reset', handleReset);
         root.removeEventListener('formie:page:navigate:after', handlePageNavigate as EventListener);
         root.removeEventListener('formie:submit:result', handleSubmitResult as EventListener);
         debug.log('Field destroyed.');

package/src/js/modules/fields/text-limit.ts

@@ -323,12 +323,23 @@ export const textLimitModule: BrowserModuleDefinition = {
             };
         });
 
+        const onReset = (event: Event) => {
+            // Native reset restores input values after the reset event.
+            queueMicrotask(() => {
+                if (!event.defaultPrevented) {
+                    counterInputs.forEach(updateCounter);
+                }
+            });
+        };
+        ctx.form?.addEventListener('reset', onReset);
+
         await ctx.emit('formie:module:text-limit:init', {
             count: inputs.length,
         });
 
         return {
             destroy: () => {
+                ctx.form?.removeEventListener('reset', onReset);
                 unbinds.forEach((unbind) => {
                     unbind();
                 });

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

@@ -132,6 +132,9 @@ export function createManagedPaymentModule<
             const cleanups: Cleanup[] = [];
             let apiPromise: Promise<TApi> | null = null;
             let widget: TWidget | null = null;
+            let mountPromise: Promise<void> | null = null;
+            let destructionPromise: Promise<void> | null = null;
+            let destroyed = false;
             let customSetupResult: PaymentSetupResult | null = null;
             let authorizeInFlight: Promise<boolean> | null = null;
 
@@ -145,32 +148,59 @@ export function createManagedPaymentModule<
             };
 
             const ensureMounted = async() => {
-                if (!adapter.mount || widget || !isPaymentFieldActive(ctx.target)) {
+                const mount = adapter.mount;
+
+                if (destroyed || !mount || widget || !isPaymentFieldActive(ctx.target)) {
                     return;
                 }
 
-                const api = await getApi();
-
-                try {
-                    widget = await adapter.mount({
-                        api,
-                        field: ctx.target,
-                        services,
-                        options,
-                        provider: options.provider,
-                    });
-                    debug.log('Payment widget mounted.', {
-                        moduleId: adapter.moduleId,
-                        handle: options.handle,
-                    });
-                } catch (error) {
-                    // Propagate initialization failure to the required/optional policy.
-                    debug.warn('Payment widget mount failed.', {
-                        moduleId: adapter.moduleId,
-                        handle: options.handle,
+                // Conditions can fire again while a provider is requesting its session.
+                // Share the whole mount, including API loading, with submission callers.
+                if (!mountPromise) {
+                    mountPromise = (async() => {
+                        try {
+                            const api = await getApi();
+
+                            if (destroyed || !isPaymentFieldActive(ctx.target)) {
+                                return;
+                            }
+
+                            services.removeError();
+                            widget = await mount({
+                                api,
+                                field: ctx.target,
+                                services,
+                                options,
+                                provider: options.provider,
+                            });
+                            debug.log('Payment widget mounted.', {
+                                moduleId: adapter.moduleId,
+                                handle: options.handle,
+                            });
+                        } catch (error) {
+                            // Setup and submission callers still receive provider failures.
+                            debug.warn('Payment widget mount failed.', {
+                                moduleId: adapter.moduleId,
+                                handle: options.handle,
+                            });
+                            throw error;
+                        }
+                    })().finally(() => {
+                        mountPromise = null;
                     });
-                    throw error;
                 }
+
+                return mountPromise;
+            };
+
+            const handleVisibility = () => {
+                // Event listeners have no awaited caller to handle a rejection.
+                // Allow the next visibility or submission attempt to retry the mount.
+                void ensureMounted().catch(() => {
+                    if (!destroyed && isPaymentFieldActive(ctx.target)) {
+                        services.addError(options.transport.errorMessage);
+                    }
+                });
             };
 
             // Clear stale payment feedback at the start of every submit attempt.
@@ -194,10 +224,6 @@ export function createManagedPaymentModule<
             // 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 = () => {
-                    void ensureMounted();
-                };
-
                 ctx.root.addEventListener(eventName, handleVisibility as EventListener);
                 cleanups.push(() => {
                     ctx.root.removeEventListener(eventName, handleVisibility as EventListener);
@@ -205,41 +231,48 @@ 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();
-            }));
+            cleanups.push(ctx.on('formie:conditions:evaluated', handleVisibility));
 
-            const destroy = async() => {
-                debug.log('Destroying payment module.', {
-                    moduleId: adapter.moduleId,
-                    handle: options.handle,
-                });
-                cleanups.forEach((c) => c());
+            const destroy = (): Promise<void> => {
+                if (destructionPromise) return destructionPromise;
+                destroyed = true;
+                destructionPromise = (async() => {
+                    debug.log('Destroying payment module.', {
+                        moduleId: adapter.moduleId,
+                        handle: options.handle,
+                    });
+                    cleanups.forEach((cleanup) => cleanup());
 
-                if (widget && adapter.unmount) {
-                    const api = await getApi();
+                    // A session request may finish after teardown starts. Release the
+                    // resulting widget before another instance can use this container.
+                    await mountPromise?.catch(() => {});
+                    const mountedWidget = widget;
+                    widget = null;
 
-                    await adapter.unmount({
-                        api,
-                        widget,
-                        field: ctx.target,
-                        services,
-                        options,
-                        provider: options.provider,
-                    });
-                    debug.log('Payment widget unmounted.', {
+                    try {
+                        if (mountedWidget && adapter.unmount) {
+                            const api = await getApi();
+
+                            await adapter.unmount({
+                                api,
+                                widget: mountedWidget,
+                                field: ctx.target,
+                                services,
+                                options,
+                                provider: options.provider,
+                            });
+                        }
+                    } finally {
+                        if (registry[occurrenceKey]?.destroy === destroy) {
+                            delete registry[occurrenceKey];
+                        }
+                    }
+                    debug.log('Payment module destroy complete.', {
                         moduleId: adapter.moduleId,
                         handle: options.handle,
                     });
-                }
-
-                if (registry[occurrenceKey]?.destroy === destroy) {
-                    delete registry[occurrenceKey];
-                }
-                debug.log('Payment module destroy complete.', {
-                    moduleId: adapter.moduleId,
-                    handle: options.handle,
-                });
+                })();
+                return destructionPromise;
             };
 
             registry[occurrenceKey] = { destroy };

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

@@ -3,6 +3,7 @@ import { browserRequest, type BrowserRequestOptions } from '@verbb/formie-core';
 import opayoCss from '#theme-css/integrations/_opayo.css?inline';
 
 import { definePaymentModule } from '#modules/payments/api';
+import { findPaymentInputBySuffix } from '#modules/payments/utils';
 import { ensureModuleStyles } from '#modules/styles';
 import { toggleThemeClasses } from '#theme/theme-classes';
 import { createDebug } from '#utils/debug';
@@ -277,6 +278,12 @@ export const opayoModule = definePaymentModule<OpayoProviderOptions, null, Opayo
             return false;
         }
 
+        // A completed challenge resumes the original transaction. The server
+        // verifies this reference and its ownership; no new card token is needed.
+        if (findPaymentInputBySuffix(field, 'opayo3DSComplete')?.value.trim()) {
+            return true;
+        }
+
         if (isDropInCheckoutMode(provider)) {
             if (!widget) {
                 services.addError('Opayo drop-in checkout is not ready.');