Modal without a footer

[PoojMenon]

Hi,

We have a scenario where, when a user enters their card information on console, if they are in the EU, they might be redirected to the bank's website for 3D secure authentication.

We want to inform the customer of the redirect before moving to the bank's page.

I'm hoping to get some guidance on the use of the modal here.

1. Is it okay to remove the footer section?
2. Can the close icon be removed?

We do not want the user to take any action until they have been redirected - this is for informational purpose only.

@katieporter FYI

[kate-porter]

Hey @PoojMenon - thanks for creating a GH discussion on this!

To answer your first question, yes, you can remove the footer section.

I just pinged DSYS engineers on the second question. If you can remove the close icon, then you're all set. If you can't, you can just remove the modal header entirely, and move the "Redirecting to your bank..." headline into the modal body. I'll circle back on this one shortly!

[kate-porter]

Chatted with the team about this a little bit, and our recommendation would actually be to consider including the close icon or a cancel button.

When building resilient interfaces, it's important to predict failures. If the modal can't be dismissed and this request to redirect to the bank fails, what happens? Would the user end up trapped in this modal?

Even more importantly—and this slipped my mind when I shared this feedback in Figma—a modal must have something focusable within it. This allows keyboard users and screen reader users to get into the modal. If there isn't a focusable element in the modal, users of assistive technology will have trouble accessing and reading the modal content.

With all that in mind, do you think a close icon or a cancel button would make sense here?

[PoojMenon]

Hi Katie,
My concern with having the close icon or cancel button is that users might accidentally close the modal. The modal was intended only for informational purposes so that users can understand why they are being redirected. We don't want them to take any action on the page itself.

If a modal isn't the right approach, we could maybe add some text above the 'Confirm payment' button.

Copy could use some work, but your thoughts?

[kate-porter]

Yeah, this information text could work as well. I might recommend putting it below the button, just because it almost gets lots with the checkbox above it, because they look similar at a glance.

I do still think the modal could work for you, even if the user is able to close it. What would the consequence be if a user accidentally closed the modal?

[PoojMenon]

Hi Katie,

I think we can work with having the close icon in the modal. We'll be factoring in some additional messaging for when users accidentally cancel the redirect to the bank.

Thanks for your help.