Payment Flows KBA
Visa Secure using EMV® 3DS User Experience Guidelines
Payment Flow - Knowledge Based Authentication (KBA)
Knowledge Based Authentication (KBA)
Customers verify transactions by answering knowledge-based questions. Issuers can choose which methods to make available for customers.
Mobile In-App Native
- Full Flow
- Redline Specifications
- Accessibility Guidelines
- HTML Code
Zoom
View PDF of screens seen in this full flow here
Zoom
Zoom
Zoom
Zoom
Zoom
| Element | Accessibility Guidelines |
|---|---|
| Logo | - Text alternative: [Name] Logo |
| Checkbox selected | - Input: aria-checked-true |
| Checkbox group | - Fieldset: aria-required-true - Legend: aria-describedby=validation-error-message |
| Submit Authentication Label | - Name: Submit - Description: None - Role: Button |
| Why Information Label | - Name: Need Help? - Role: Button - State: Collapsed |
HTML - Security Questions
CSS - Security Questions
UX Elements
| Element | Code/Requirement | CSS Styles |
|---|---|---|
| Challenge Info Header Confirmation of Payment prior to Authentication | The page must display the headline Let’s make sure it’s you above the Challenge Info text. | - Padding-bottom: 24px - Font-family: Open Sans - Font-size: 20px - Font-weight: semibold - Color: #222222 |
| Challenge Info Text Confirmation of Payment prior to Authentication |
This text must include the following language: Let’s make sure it’s you. Verify payment to {Merchant name} for {purchase amount} by answering {X} security questions. The merchant name, purchase currency, & purchases amount as included in the AReq message. It is recommended to ask a minimum of 2 security questions. |
- Padding-top: 12px - Font-family: Open Sans - Font-size: 14px - Font-weight: regular - Color: #222222 |
| Challenge Info Header Challenge Page | The page must display the headline Let’s make sure it’s you above the Challenge Info text. | - Padding-top: 12px - Font-family: Open Sans - Font-size: 14px - Font-weight: regular - Color: #222222 |
| Challenge Info Text | The display name for this field must be {Question X of X} and {the actual Question} | - Font-family: Open Sans - Font-size: 14px; - Question X of X should be Font-weight: regular - Actual question should be Font-weight: semibold - Color: #222222 |
| Challenge Info Label If not a multiple choice question | The display name for this field must be ‘Your Answer’. | - Font-family: Open Sans - Font-size: 14px - Font-weight: regular - Color: #616188 |
| Challenge Info Data Entry If not a multiple choice question |
Input Box | - Height: 48px ; - Width: 312px; - Border-color: #616188; |
| Challenge Info Label For multiple choice question |
The display name for this field must be ‘Please select all that apply’. | - Font-family: Open Sans; - Font-size: 12px; - Font-weight: regular; - Color:#616188; |
| Challenge Info Data Entry For multiple choice question |
Multiple Check boxes | - Border-color: #003EA9; - Width: 20px; - Height: 20px; |
| Submit Authentication Label | A form element that should align with the center of the bottom margin displaying “Submit”. | - Width: 312px; - Height: 40px; - Background-color: #003AAC; - Border:#003AAC; - Color: white; - Padding: 10px 16px; - Text-align: center; - Text-decoration: none; - Text-transform: uppercase; - Display: inline-block; - Font-family: Open Sans; - Font-size: 14px; |
| 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?’. |
|
| 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
- Full Flow
- Redline Specifications
- Accessibility Guidelines
Zoom
Zoom
Zoom
Zoom
Zoom
Zoom
Zoom
Zoom
Zoom
| Element | Accessibility Guidelines - Input Field |
|---|---|
| Close | - Name: Close - Description: None - Role: Button |
| Dialog | - Name: Verification Failed - Description: Point to instruction text with aria-describedby - Role: Dialog |
| Go Back Label | - Name: Go Back - Description: None - Role: Button |
UX Elements
| Element | Accessibility Guidelines - Checkbox |
|---|---|
| Logo | - Text alternative: [Name] Logo |
| Checkbox selected | - Input: aria-checked-true |
| Checkbox group | - Fieldset: aria-required-true - Legend: aria-describedby=validation-error-message |
| Submit Authentication Label | - Name: Submit - Description: None - Role: Button |
| Why Information Label | - Name: Need Help? - Role: Button - State: Collapsed |
Error Flow - Verification Failed
- Full Flow
- Redline Specifications
- Accessibility Guidelines
Zoom
Zoom
Zoom
UX Elements
| Element | Content/Requirement | CSS Styles |
| Error Message Headline | The page must display the headline Verification Failed | - Font-family: Open Sans
- Font-size: 20 px;
- Font-weight: Semibold
- Color:#222222 |
| Error Message Text | Oops! One or more answers you entered do not match our records. Please try again. | - Font-family: Open Sans
- Font-size: 14px
- Font-weight: Regular
- Color: #222222 |
| Submit Authentication Label | A form element that should align with the center of the bottom margin displaying “Go Back”. | |
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.