Payment Flows OTP
Visa Secure using EMV® 3DS User Experience Guidelines
Payment Flow - One-Time Passcode (OTP)
One-Time Passcode (OTP)
Customers verify transactions using a secure code sent by text or email. Issuers can choose which delivery channels to make available for the customer. We recommend providing both to the customer.
Mobile In-App Native
- Full Flow
- Redline Specifications
- Accessibility Guidelines
- HTML Code
View PDF of screens seen in this full flow here
| Element | Accessibility Guidelines |
|---|---|
| Logo | - Text alternative: [Bank Name] Logo |
| Challenge Information Text | - Role: radio group - Name: text message - Role: radio - Input: aria-checked=true - Name: Email - Role: radio - Input: aria-checked=false |
| Submit Authentication Label | - Name: continue - Description: none - Role: button |
| Need help Field | - Name: Need help? - Role: button - State: collapsed |
| Passcode Entry Field | - Label: Verification code - Legend: aria-lebeledby=verificationcode |
| Resend Information Label | - Name: resend code - Description: none - Role: button |
HTML - One Time Passcode Input Field
CSS - One Time Passcode Input Field
UX Elements
| Data Elements from EMV 3DS specification | Content/Requirement | CSS Styles |
|---|---|---|
| Challenge Information Header OTP Choice Screen | The page must display the headline Let's make sure it's you above the Challenge Info text for OTP Choice Screen. | - Padding-top: 24px; - Padding-left: 32px; - Font-family: Open Sans; - Font-size: 20; - Font-weight: Semibold; - Color: #222222; |
| Challenge Information Text OTP Choice Screen | To verify payment to Electronic Store for (amount), (Issuer Name) will send you a one-time code. Choose how to receive your code: Radio Button: Text Message* < Radio Button: Email < |
- Padding: 12px 31px 24px 32px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: Regular; - Color: #222222; |
| Challenge Information Header OTP Code Entry | The page must display the headline Enter verification code above the Challenge Info text. | - Padding-top: 24px; - Padding-left: 32px; - Font-family: Open Sans; - Font-size: 20; - Font-weight: Semibold; - Color: #222222; |
| Challenge Information Text OTP Code Entry | This text must include the following language: OTP by SMS: We sent you a verification code by text message to < OTP by Email: We sent you a verification code to < The merchant name, purchase currency & purchases amount as included in the AReq message. |
- Padding: 12px 31px 24px 32px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: Regular; - Color: #222222; |
| Challenge Information Label | The display name for this field must be ‘ Verification code’. | - Text-align: center; - Font-family: Open Sans; - Font-size: 14; - Font-weight: Semibold; - Color: #767676; |
| Challenge Information Data Entry | Input Box | - Width: 312px; - Height: 40px; - Border-color: #003EA9; |
| 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; |
| Resend Information Label | The display name for this field must be ‘ Resend Code’. Challenge Information is resent to the customer. A form element that should vertically align with the center of the bottom margin. |
- Text-align: Center; - Font-family: Open Sans; - Font-size: 14 - Font-weight: Semibold - Color: #003EA9; - Text-transform: uppercase; |
| Why Information Label | Display the Why Information Label as a graphical control element that can be expanded. The display name for this field must be ‘ Need Help?’. |
- Padding-bottom: 16px; - Padding-left: 32px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: Regular; - Color:#003EA9 |
| Why Information Text | Display the Why Information Text only when the user selects the “Need Help? Label”. Text provided by the Issuer to be displayed to the cardholder to explain why the cardholder is being asked to perform the authentication task. |
Desktop Browser
In this use case, the customer initiates a 3DS transaction from a desktop browser. See below for the authentication challenge user experience.
- Full Flow
- Redline Specifications
- Accessibility Guidelines
| Element | Accessibility Guidelines |
|---|---|
| Headline | - Name: Let’s make sure its you - Description: point to instruction text with aria-describedby - Role: dialog |
| Challenge Information Text | - Role: radio group - Name: text message - Role: radio - Input: aria-checked=true - Name: Email - Role: radio - Input: aria-checked=false |
| Submit Authentication Label | - Name: continue - Description: none - Role: button |
| Use Another Method | - Name: Choose another security option - Description: none - Role: link |
| Need Help Field | - Name: Need help? - Role: button - State: collapsed |
| Code Entry | - Name: Enter verification code - Description: point to instruction text with aria-describedby - Role: dialog |
| Passcode Entry Field | - Label: Verification code - Legend: aria-lebeledby=verificationcode - Input: type=text, name=Verification code, id=verification code |
| Resend Information Label | - Name: resend code - Description: none - Role: button |
UX Elements
| Element | Content/Requirement | CSS Styles |
|---|---|---|
| OTP Choice Screen | The page must display the headline Let's make sure it's you above the Challenge Info text for OTP Choice Screen. To verify payment to Electronic Store for (amount), (Issuer Name) will send you a one-time code. Choose how to receive your code: Radio Button: Text Message* < Radio Button: Email < |
Headline - Padding-top: 24px; - Padding-left: 48px; - Font-family: Open Sans; - Font-size: 20; - Font-weight: semibold; - Color: #222222; Body - Padding: 12px 48px 24px 48px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: regular; - Color:#222222; Radio Button - Height: 20px; - Width: 20px; |
| OTP Code Entry Screen | The page must display the headline Enter verification code above the Challenge Info text. This text must include the following language: OTP by SMS: We sent you a verification code by text message to < OTP by Email: We sent you a verification code to < The merchant name, purchase currency, & purchases amount as included in the AReq message. |
Headline - Padding-top: 24px; - Padding-left: 48px; - Font-family: Open Sans; - Font-size: 20; - Font-weight: s emibold; - Color: #222222; Body - Padding: 12px 48px 24px 48px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: Regular; - Color:#222222; |
| Passcode Entry Field | The display name for this field must be ‘ Verification code’ above an Input Box. | - Text-align: center; - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; - Color: #767676; |
| Submit Authentication Field | 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; |
| Resend Information Field | The display name for this field must be ‘ Resend Code’. Challenge Information is resent to the customer. A form element that should vertically align with the center of the bottom margin. |
- Text-align: center; - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; - Color:#003EA9; - Text-transform: uppercase; |
| Need Help Field | The display name for this field must be ‘ Need Help?’. Display the “Need Help?’ Label as a graphical control element that can be expanded. Display the Need Help Text only when the user selects the Need Help Label. Text provided by the Issuer to be displayed to the cardholder to explain why the cardholder is being asked to perform the authentication task. |
- Padding-bottom: 16px; - Padding-left: 32px; - Font-family: Open San; - Font-size: 14; - Font-weight: regular; - Color: #003EA9 |
Error Flows
Incorrect Code Entered
Key ScreensRedline SpecificationsAccessibility Guidelines
View PDF of screens seen in this full flow here
| Element | Accessibility Guidelines |
|---|---|
| Code Entry | - Name: Enter verification code - Description: point to instruction text with aria-describedby - Role: dialog |
| Passcode Entry Field | - Label: Verification code - Legend: aria-labeledby=verificationcode - Input: type=text, name=Verification code, id=verification code - Text alternative: “please enter a valid code” |
| Submit Authentication Label | - Name: continue - Description: none - Role: button |
| Resend Information Label | - Name: resend code - Description: none - Role: button |
| Use Another Method | - Name: Choose another security option - Description: none - Role: link |
| Need Help Field | - Name: Need help? - Role: button - State: collapsed |
The One-time Passcode SMS/Email Browser Requirements are displayed until cardholder inputs verification code then follow below for incorrect input:
| Element | Content/Requirement | CSS Styling |
|---|---|---|
| Passcode Entry Field | The display name for this field must be ‘ Verification Code’ above an Input Box. The display name below the input box must be ‘ Please enter a valid code’. |
Verification Code - Font-family: Open Sans; - Font-size: 14; - Font-weight: r egular; - Color:#D50000 Please enter a valid code - Font-family: Open Sans; - Font-size: 12; - Font-weight: r egular; - Color:#D50000 |
| 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; |
| Resend Information Label | The display name for this field must be ‘ Resend Code’. Challenge Information is resent to the customer. A form element that should vertically align with the center of the bottom margin. |
- Text-align: center; - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; - Color: #003EA9; - Text-transform: uppercase; |
| Use Another Authentication Method (for Desktop Browser) | The display name for this field must be ‘ Having Trouble?’. Display “ Choose Another Security Option’ Label. A new screen must be displayed if this option is clicked on with another authentication method option (See Backup Authentication Method Section). |
Having Trouble? - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; Choose Another Security Option - Font-family: Open Sans; - Font-size: 12; - Font-weight: regular; - Color:#003EA9; |
Resend Code
- Full Flow (Mobile)
- Full Flow (Desktop)
View PDF of screens seen in this full flow here
Maximum Number of Attempts Exceeded
In order to protect customers from fraud risk, we recommend that a customer only be allowed to attempt to complete an authentication challenge a maximum of five (5) times. See below for the user experience in which a customer exceeds the maximum number of authentication attempts allowed.
- Full Flow (Mobile)
- Full Flow (Desktop)
- Redline Specifications
- Accessibility Guidelines
| Element | Accessibility Guidelines |
|---|---|
| Information Text | - Name: verification failed - Description: point to instruction text with aria-describedby - Role: dialog |
| Go Back Label | - Name: go back - Description: none - Role: button |
The One-time Passcode SMS/Email Browser Requirements are displayed until cardholder reaches the Max Number of Attempts, then follow below:
| Element | Content/Requirement | CSS Styling |
|---|---|---|
| Information Header Verification Failed screen |
The page must display the headline Verification Failed above the Max Number of Attempts language. | - Font-family: Open Sans; - Font-size: 20; - Font-weight: Semibold; - Color: #222222; |
| Information Text Verification Failed screen |
Oops! You have reached the maximum number of attempts. Please try again. The max number of attempts should not exceed 3 times. |
- Font-family: Open Sans; - Font-size: 14; - Font-weight: Regular; - Color:#222222; |
| Button Label | A form element that should align with the center of the bottom margin displaying “ Go Back”. | - Width: 312px; - Height: 40px; - Background-color: #003AAC; - Border: #003AAC; - Padding-top: 24px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; - Color: #FFFFFF; - Text-align: center; - Text-transform: uppercase; - Display: inline-block; |
QR Code
One-time passcodes may be delivered by issuers to their cardholders via a variety of methods. QR code-driven OTP authentication may be used as a backup authentication method.
| Element | Content/Requirement | CSS Styling |
|---|---|---|
| QR Code | The page must display the headline Scan QR Code above QR Code. Please scan the QR code using your {Issuer Name} app on your mobile phone and follow the instructions. Show QR Code to scan. |
Header - Font-family: Open Sans; - Font-size: 20; - Font-weight: semibold; - Color: #222222; Body - Font-family: Open Sans; - Font-size: 14; - Font-weight: regular; - Color: #222222; QR Code - Padding: 16px 166px 16px 166px |
| Passcode Entry Field | The display name for this field must be ‘ Verification Code’ above an Input Box. | - Text-align: center; - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; - Color:#767676; |
| 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; |
| Use Another Authentication Method | The display name for this field must be ‘ Having Trouble?’. Display “ Choose Another Security Option’ Label. A new screen must be displayed if this option is clicked on with another authentication method option (See Backup Authentication Method Section). |
Having Trouble? - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; Choose Another Security Option - Font-family: Open Sans; - Font-size: 12; - Font-weight: regular; - Color: #003EA9; |
| Need Help Label | The display name for this field must be ‘ Need Help?’. Display the “Need Help?’ Label as a graphical control element that can be expanded. |
- Font-family: Open San; - Font-size: 14; - Font-weight: Regular; - Color: #003EA9 |
| Need Help Text | Display the Need Help Text only when the user selects the Need Help Label. Text provided by the Issuer to be displayed to the cardholder to explain why the cardholder is being asked to perform the authentication task. |
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 purpose 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.