Backup Authentication
Visa Secure using EMV® 3DS User Experience Guidelines
Backup Authentication
Cardholders may prefer certain authentication challenge types over others. Thus, it is recommended for card issuers to cater to cardholder’s preferences and offer a choice in authentication method, if possible.
In this section, we will use the Out of Band (OOB) authentication challenge as an example. When the user lands on the OOB authentication information screen, an information label ‘Choose Another Security Option’ is presented at the bottom of the screen. The user clicks on this label to view backup authentication methods available from their card issuer.
UX Elements
| Element | Content/Requirement |
|---|---|
| Backup Authentication Text | Text that must include the following language: “Having Trouble?” |
| Backup Authentication Label | A form element that should align with the left margin of the screen displaying “Choose another security option” We suggest underlining this element to make it clear to cardholders about their choice of authentication method. |
Screens
Redline Specifications
Accessibility Guidelines
HTML Code
| Element | Accessibility Guidelines |
|---|---|
| Headline | - Name: Choose another security option - Description: point to instruction text with aria-describedby - Role: dialog |
| Challenge Information Text | - Role: radio group - Name: Get security code sent to my mobile - Role: radio - Input: aria-checked=true - Name: Get security code sent to my email - Role: radio - Input: aria-checked=false - Name: Verify with my bank app - Role: radio - Input: aria-checked=false |
| Submit Authentication Label | - Name: continue - Description: none - Role: button |
| Use Another Method | - Name: I changed my mind. Go back. - Description: none - Role: link |
| Need Help Field | - Name: Need help? - Role: button - State: collapsed |
HTML - One Time Passcode
HTML - Knowledge Based Authentication
CSS - One Time Passcode Input Field
UX Elements
| Element | Content/Requirement | CSS Styles |
|---|---|---|
| Backup Authentication Info Header | The page must display the headline “Choose Another Security Option” above the available authentication challenges. | - Padding-top: 24px; - Padding-left: 32px; - Font-family: Open Sans; - Font-size: 20; - Font-weight: semibold; - Color: #222222; |
| Backup Authentication Choices | A single-select list with radio buttons that displays the authentication methods available to the cardholder. For example: [OTP SMS] Get security code sent to my mobile [Customer mobile] [OTP Email] Get security code sent to my email [Customer email]* [Knowledge Based Authentication] Answer security questions |
- Padding: 12px 31px 24px 32px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: regular; - Color:#222222; |
| Submit Authentication Label | A form element that should align with the center of the bottom margin displaying “Continue”. | - Width: 312px; - Height: 40px; - Background-color: #003AAC; - Border: #003AAC; - Padding-top: 24px; - Padding-bottom: 16px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; - Color: #FFFFFF; - Text-align: center; - Text-transform: uppercase; - Display: inline-block; |
| Backup Authentication Label | A form element that should align with the left margin of the screen displaying “I changed my mind. Go back.” We suggest having this option in case the user does not want to change the authentication method and prefers the original authentication method. |
- Font-family: Open Sans; - Font-size: 14; - Font-weight: regular; - Color:#0051DC; |
- Note: For European issuers complying to PSD2 SCA, one-time passcodes may not be sent to the user’s email address.
Legal Disclaimer
Important Information on Copyright and Disclaimers
© 2022 Visa. All Rights Reserved
Notice: The trademarks, logos, trade names and service marks, whether registered or unregistered (collectively the “Trademarks”) are Trademarks owned by Visa. All other trademarks not attributed to Visa are the property of their respective owners, are used for identification purposes only and do not imply product endorsement or affiliation with Visa.
Note: This document is not part of the Visa Core Rules and Visa Product and Service Rules. In the event of any conflict between any content in this document, any document referenced herein, any exhibit to this document, or any communications concerning this document, and any content in the Visa Core Rules and Visa Product and Service Rules, the Visa Core Rules and Visa Product and Service Rules shall govern and control.
Note: Please note that the screens are for illustrative purposes only.
DISCLAIMERS: THIS DOCUMENT IS PROVIDED ON AN "AS IS,” "WHERE IS,” BASIS, "WITH ALL FAULTS" KNOWN AND UNKNOWN. TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, VISA EXPLICITLY DISCLAIMS ALL WARRANTIES, EXPRESS OR IMPLIED, REGARDING THE LICENSED WORK AND TITLES, INCLUDING ANY IMPLIED WARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT OF THIRD-PARTY INTELLECTUAL PROPERTY RIGHTS.