Payment Flows OOB
Visa Secure using EMV® 3DS User Experience Guidelines
Payment Flow - Out of Band (OOB)
Out of Band (OOB)
Users verify transactions in their issuer’s authentication service. Issuers can choose which service to make available for user OOB authentication, such as authentication through the issuer’s mobile application.
In-app native challenges are built with 3DS SDK templates for a streamlined experience that matches the merchant’s native user interface. The guidelines in this section account for the technical specifications of the 3DS SDK, which are slightly different to the technical specifications of the HTML user experience.
HTML based challenges allow for greater issuer flexibility in designing the challenge experience. We have included three sections in our guidelines to specifically address the UX of HTML challenges for in-app, mobile browser and desktop browser experiences. HTML based challenges allow issuers to:
- Use rich text for the challenge instruction screens
- Allow users to choose a backup authentication method should they not be able to complete OOB authentication
In both experiences, it is highly recommended that issuers send users a push notification to their OOB authentication service upon showing users the OOB challenge information text. This has been shown to improve the user experience by giving users a direct route to their issuer’s OOB authentication service, as opposed to manually navigating to it.
Mobile In-App Native
Full Flow
Redline Specifications
Full FlowRedline Specifications
View PDF of screens seen in this full flow here
UX Elements
| Element | Code/Requirement | CSS Styling |
|---|---|---|
| Challenge Info Header | The page must display the headline Let’s make sure it’s you above the Challenge Info text. | - Padding-top: 24px; - Padding-left: 32px; - Font-family: Open Sans; - Font-size: 20; - Font-weight: semibold; - Color:#222222; |
| Challenge Info Text | This text must include the following language: Before placing your order, you must verify payment to [Merchant] for [Amount]. Step 1 - Open the [Issuer] app on your mobile device to verify. Step 2 - Return to this page and tap complete to finish placing your order. |
- Padding: 12px 31px 48px 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 “Complete”. | - 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; |
| 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 San;, - 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. |
Mobile In-App HTML
Full Flow
Redline Specifications
Full FlowRedline Specifications
View PDF of screens seen in this full flow here
UX Elements
| Element | Code/Requirement | CSS Styling |
|---|---|---|
| Challenge Info Header | The page must display the headline Let’s make sure it’s you above the Challenge Info text. | - Padding-top: 24px; - Padding-left: 32px; - Font-family: Open Sans; - Font-size: 20; - Font-weight: semibold; - Color:#222222; |
| Challenge Info Text | This text must include the following language: Before placing your order, you must verify payment to [Merchant] for [Amount]. 1. Open the [Issuer] app on your mobile device to verify. 2. Return to this page and tap complete to finish placing your order. The usage of rich text ordered lists is recommended so that users can clearly understand the authentication steps. |
- 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 “ Complete”. | - Width: 312px; - Height: 40px; - Background-color: #003AAC; - Border:#003AAC; - Padding-bottom: 24px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; - Color:#FFFFFF; - Text-align: center; - Text-transform: uppercase; - Display: inline-block; |
| Backup Authentication Method Text | This text must include the following language: Having Trouble? |
- Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; |
| Backup Authentication Method Label | A form element that should align with the left side of the bottom margin displaying “ Choose another security option”. | - Font-family: Open Sans; - Font-size: 12; - Font-weight: regular; - Color: #003EA9; |
| 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 San;, - 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 HTML
Full Flow
Redline Specifications
Accessibility Guidelines
Full FlowRedline SpecificationsAccessibility Guidelines
UX Elements
| Element | Accessibility Guidelines |
|---|---|
| Challenge Info Header | - Name: Lets make sure its you - Description: point to instruction text with aria-describedby - Role: dialog |
| Visa Logo | - Text alternative: visa logo |
| 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 |
| Close Screen | - Name: close - Description: none - Role: button |
UX Elements
| Element | Code/Requirement | CSS Styling |
|---|---|---|
| Challenge Info Header | The page must display the headline Let’s make sure it’s you above the Challenge Info text. | - Padding-top: 24px; - Padding-left: 32px; - Font-family: Open Sans; - Font-size: 20; - Font-weight: semibold; - Color: #222222; |
| Challenge Info Text | This text must include the following language: Before placing your order, you must verify payment to [Merchant] for [Amount]. 1. Open the [Issuer] app on your mobile device to verify. 2. Return to this page and tap complete to finish placing your order. The usage of rich text ordered lists is recommended so that users can clearly understand the authentication steps. |
- Padding: 12px 31px 24px 32px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: regular; - Color: #222222; Open the [Issuer] app - Font-weight: bold; |
| Submit Authentication Label | A form element that should align with the center of the bottom margin displaying “ Complete”. | - Width: 312px; - Height: 40px; - Background-color:#003AAC; - Border: #003AAC; - Padding-bottom: 24px; - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; - Color:#FFFFFF; - Text-align: center; - Text-transform: uppercase; - Display: inline-block; |
| Backup Authentication Method Text | This text must include the following language: Having Trouble? |
- Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; |
| Backup Authentication Method Label | A form element that should align with the left side of the bottom margin displaying “ Choose another security option”. | - Font-family: Open Sans; - Font-size: 12; - Font-weight: regular; - Color:#003EA9; |
| 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 San;, - 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. |
Premature Completion Requirements
In each of the device channels shown above, it is possible for users to click the “Complete” button prior to OOB authentication taking place. In the event that users click the “Complete” button prior to OOB authentication, it is recommended that issuers display a premature completion screen that adheres to the following guidelines so that users understand that they need to authenticate in their issuer’s OOB authentication service.
UX Elements
| Element | Code/Requirement | CSS Styles |
|---|---|---|
| Need Help Info Header | The page must display the headline Oops! Did you click “Complete” before going to your Digital Bank app first? above the Need Help Info text. | - Padding-top: 24px; - Padding-right: 31px; - Padding-left: 32px; - Font-family: Open Sans; - Font-size: 20; - Font-weight: semibold; - Color: #222222; |
| Need Help Info Text | This text must include the following language: Step 1 - Open the [Issuer] app on your mobile device to verify. Step 2 - Return to this page and tap complete to finish placing your order. |
- Padding: 12px 31px 48px 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 “Complete”. | - Width: 312px; - Height: 40px; - Background-color:#003AAC; - Border:#003AAC; - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; - Color: #ffffff; - Text-align: center; - Text-transform: uppercase; - Display: inline-block; |
| 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?’. |
- Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; |
| 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. |
Error Flows
Key Screen
Redline Specifications
Accessibility Guidelines
Key ScreenRedline SpecificationsAccessibility Guidelines
| Element | Accessibility Guidelines |
|---|---|
| Challenge Info Header | - Name: Verification failed - Description: point to instruction text with aria-describedby - Role: dialog |
| Close Window | - Name: close - Description: none - Role: button |
| Go Back Label | - Name: go back - Description: none - Role: button |
UX Elements
| Element | Code/Requirement | CSS styles |
|---|---|---|
| Challenge Info Header | The page must display the headline Verification Failed above the Challenge Info text. | - Font-family: Open Sans; - Font-size: 20; - Font-weight: semibold; - Color: #222222; |
| Challenge Info Text | Oops! [Issuer] is having trouble verifying it’s you. Please try again. | - 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 “ Go Back”. This label closes the Challenge screen and routes user back to the previous screen |
- Width: 312px; - Height: 40px; - Background-color:#003AAC; - Border: #003AAC; - Font-family: Open Sans; - Font-size: 14; - Font-weight: semibold; - Color: #FFFFFF; - Text-align: center; - Text-transform: uppercase; - Display: inline-block; |