3DS Intermediate Message Displayed as Error

[MattAppleton]

Describe the bug

When a payment requires 3D Secure authentication, Formie displays the intermediate "Please follow the instructions on-screen" message using red error styling. This creates a poor user experience as the red colour indicates something has gone wrong, when in fact the payment is progressing normally through the expected 3DS flow.

Expected Behaviour

The 3DS authentication message should be displayed as an informational notification (e.g., blue, orange, or neutral colour), not as an error. The payment is not failing - it's simply requiring an additional authentication step.

Actual Behaviour

The message "This payment requires 3D Secure authentication. Please follow the instructions on-screen to continue." is displayed with:

• Red text colour
• Error alert styling
• Appears briefly before the 3DS iframe/challenge opens

This causes users to think something has gone wrong, even though the payment will succeed after 3DS completion.

Steps to reproduce

1. Create a form with Opayo payment integration
2. Submit payment using a test card that triggers 3DS challenge (e.g., cardholder name "CHALLENGE")
3. Observe the red error message flash before 3DS iframe appears
4. Complete 3DS challenge - payment succeeds

Form settings

• Multi-page form: No
• Submission Method: Ajax
• Client-side Validation: Yes
• Custom Form Templates: Yes

Craft CMS version

5.8.19

Plugin version

3.1.6

Multi-site?

yes

Additional context

Evidence

Server Log (formie.log)

2025-12-07 15:58:05 [INFO] Couldn't save submission due to errors - {"pay":["This payment requires 3D Secure authentication. Please follow the instructions on-screen to continue."]}.

Browser Console

afterAjaxSubmit @ formie.js:1
onAjaxError @ formie.js:1    ← Triggers error display

The onAjaxError handler is being called, which applies error styling to what is actually an expected intermediate state.

Suggested Fix

Option A: Different Styling for 3DS Messages (Recommended)

Detect when the "error" is actually a 3DS authentication request and apply different styling:

/* Suggestion: Add a new class for 3DS/authentication messages */
.fui-alert-3ds,
.fui-alert-info {
    background-color: #fff3cd; /* Amber/warning yellow */
    border-color: #ffc107;
    color: #856404;
}

Or use blue for informational:

.fui-alert-info {
    background-color: #cce5ff;
    border-color: #b8daff;
    color: #004085;
}

Option B: Suppress Display for 3DS Messages

Don't display the message at all since the 3DS iframe appears immediately after:

// In formie.js or opayo.js
if (error.includes('3D Secure authentication')) {
    // Don't show error alert - 3DS iframe will appear
    return;
}

Option C: Change Message Classification

The server-side code could return this as a "notice" or "info" type rather than an "error":

// Instead of adding to errors array
$submission->addError('pay', '3D Secure message...');

// Add to a separate notices/info array
$submission->addNotice('pay', '3D Secure message...');

Impact

• User confusion: Red error message makes users think payment failed
• Support burden: Users may abandon payment or contact support unnecessarily
• Trust: Red errors during checkout reduce confidence in the payment process

[engram-design]

Happy to look at this. We log this sort of thing as an error mainly to hook into Craft’s element saving lifecycle.

Flagging something having a validation error means that it doesn’t proceed to save, which is what we want. We could certainly introduce a purpose-built check for a submission needing to validate a 3DS check, but that’s not only more work, it’s also a tiny bit restrictive.

Not all “holds” in the payment process are for 3DS, some are for redirecting away like Mollie. It’s essentially whenever there’s a client-facing action to be done after an initial server-side preflight.

But yeah, we currently use an error to classify this, and happy to look at ways to change that.