Visa Secure using EMV® 3DS User Experience Guidelines

Introduction

Welcome to the UX product guidelines for Visa Secure using EMV 3DS flows on web browsers and mobile apps. Whether you’re a designer, developer, product manager, or business decision-maker, these guidelines will help you create the best experience for your customers.

Visa Secure (previously known as Verified by Visa) is Visa’s program that governs Visa transactions using the 3-D Secure standard. The program provides the rules and policies merchants and issuers must follow to invoke authentication for eCommerce transactions, enabling verification of the cardholder’s identity before the transaction is sent for authorization.

Depending on the authentication solution the Issuer chooses, there are many authentication methods available for an Issuer to use. Visa recommends that issuers use risk-based authentication as their authentication approach, when appropriate—recognizing that in some cases regulatory requirements may have specific “step-up” or challenge authentication requirements. Please reference regulatory requirements for specific challenge requirements.

Challenge anatomy

The layout of every challenge follows a natural hierarchy. A consistent hierarchy leads to a better customer experience.

Zoom

Global UI Components

Zoom

Global UI Requirements

Element	Requirement
Header Zone	Contains all labels managed by the 3DS Requestor and is located at the top of the screen. Note: The Browser UI does not include a header zone.
Branding Zone	There must be no competitive branding including but not limited to MasterCard Identity Check, American Express SafeKey, and JCB’s J/Secure. Issuer Name/Logo The Issuer’s logo must be displayed on an authentication page and must appear in the upper left corner. Only the logo of the issuer is allowed. Logos of other issuer services are not allowed Third-party names or logos are not permitted Visa Logo The Visa logo must be displayed on an authentication page must appear in the upper right corner. The Visa logo can be obtained from Visa Product Brand Standards https://www.productbrandstandards.com/account/login?ReturnUrl=%2F.
Challenge Zone	Contains processing and challenge information and is located between the Branding zone and the Information zone. No hover/visited state No motion/animation design or sound
Information Zone	Contains additional information for the cardholder and is located at the bottom of the screen.
Page Background	The background requirement for any 3DS user interface page will vary depending on the type of user interface. For Native Interfaces A white background must be used to maintain consistency, and to avoid color-clashes between issuer and merchant color schemes For Browser/HTML interfaces A white background must be used to maintain consistency, and to avoid color-clashes between issuer and merchant color schemes The Issuer may use its color scheme that their consumers are familiar with and associate with the Issuer.
No External Links	There must be no external links or advertising, no links to other sites, and no advertising or other communications messages.

Responsive design

Merchants expect Visa Secure to be adaptive to all screen sizes (e.g., phone, tablet, and desktop devices).

Zoom

Layout

In this section, we explore how merchants could implement Visa Secure guidelines based on our layout recommendations and guidelines for merchants. Choices will vary based on technical capabilities and existing platforms.

Modal view example

Merchants should implement a modal view for the authentication screen that sits above their checkout page, however, we advise using full width and full height layouts for small screens.

Processing Screen (Frictionless -Risk-based Authentication)

A Frictionless Flow occurs when the Issuer authenticates the cardholder without cardholder involvement by evaluating the transaction’s risk level. The Merchant sends an authentication request message to the Issuer with all the required data to facilitate risk-based authentication. The Issuer evaluates the transaction and responds with either no additional verification requested or a challenge request. If a challenge request is received, one of the below challenge methods can be used.

During the message exchanges, a screen should be displayed to the cardholder to indicate that 3-D Secure processing is occurring.

Processing Screen – Browser

Zoom

Processing screen must include a spinning wheel and the Visa logo underneath

Processing Screen – Mobile

Zoom

Processing screen must include a spinning wheel and the Visa logo underneath

Challenge Methods

This section contains descriptions for Visa Secure challenge methods, which includes both browser and native version of the flow.

Overview

When customers are asked to verify transactions, they are presented with a challenge flow. The challenge method that's used is determined by the issuer. To ensure a smooth customer experience, issuers and ACS providers are required to display explanatory text on challenge screens.

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.

Zoom

Specifications - OTP / Email (Mobile)

Zoom

Specifications - OTP / SMS (Mobile)

Zoom

SMS/Email Requirements – Mobile (In-App)

#	Data Elements from EMV 3DS specification	Content/Requirement
1	Challenge Information Header OTP Choice Screen	The page must display the headline Keep Your Account Safe above the Challenge Info text for OTP Choice Screen.
2	Challenge Information Text OTP Choice Screen	We’re almost done. To product your purchase, we’re sending you a verification from (Issuer Name). Where would you like it sent? Radio Button: My email <<masked email>> Radio Button: My mobile <<masked phone number>>
3	Challenge Information Header OTP Code Entry	The page must display the headline Verify by phone above the Challenge Info text.
4	Challenge Information Text OTP Code Entry	This text must include the following language: *OTP by SMS:* We just sent you a verification code to your registered mobile number <<masked phone number>>. You are authorizing a payment to (merchantName) {purchaseCurrency} (purchase amount). *OTP by Email:* We just sent you a verification code to your registered email address <<masked email address>>. You are authorizing a payment to (merchantName) {purchaseCurrency} (purchase amount). The merchant name, purchase currency, & purchases amount as included in the AReq message.
5	Challenge Information Label	The display name for this field must be ‘Verification Code’.
6	Challenge Information Data Entry	Input Box
7	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Confirm”.
8	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.
9	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?’.
10	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.

Specifications - Browser

Zoom

SMS/Email Requirements – Browser

#	Zone	Element	Content/Requirement
1	Challenge	OTP Choice Screen	The page must display the headline Keep Your Account Safe above the OTP Choice Information. We’re almost done. To product your purchase, we’re sending you a verification from (Issuer Name). Where would you like it sent? Radio Button: My email <<masked email>> Radio Button: My mobile <<masked phone number>>
2	Challenge	OTP Code Entry Screen	The page must display the headline Verify by phone above the Challenge Info text. This text must include the following language: *OTP by SMS:* We just sent you a verification code to your registered mobile number <<masked phone number>>. You are authorizing a payment to (merchantName) {purchaseCurrency} (purchase amount). *OTP by Email:* We just sent you a verification code to your registered email address <<masked email address>>. You are authorizing a payment to (merchantName) {purchaseCurrency} (purchase amount). The merchant name, purchase currency, & purchases amount as included in the AReq message.
3	Challenge	Passcode Entry Field	The display name for this field must be ‘Verification Code’ above an Input Box.
4	Challenge	Submit Authentication Field	A form element that should align with the center of the bottom margin displaying “Confirm”.
5	Challenge	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.
6	Information	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.
7	N/A	Authentication Successful	Challenge window closes and cardholder is brought to Successful Purchase Page. *Please see below for Incorrect Authentication Attempts

Zoom

Verification Code Incorrect Specifications Requirements - Browser

Zoom

Verification Code Incorrect Requirements

The One-time Passcode SMS/Email Browser Requirements are displayed until cardholder inputs verification code incorrect then follow below for incorrect input:

#	Element	Content/Requirement
1	Error Message	The page must display the headline This is not the correct code. Please try again. Above the Passcode Entry Field.
2	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’
3	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Confirm”.
4	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.
5	Use Another Authentication Method	The display name for this field must be ‘Having Trouble?’. Display “Chose 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).

Verification Code Left Blank Specifications - Browser

Zoom

Verification Code Left Blank Requirements - Browser

The One-time Passcode SMS/Email Browser Requirements are displayed until cardholder does not input a verification code and clicks confirm, then follow below:

#	Element	Content/Requirement
1	Verification Code Left Blank Error Message	The page must display the headline Please fill out the required field. Above the Passcode Entry Field.
2	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’
3	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Confirm”.
4	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.
5	Use Another Authentication Method	The display name for this field must be ‘Having Trouble?’. Display “Chose 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).

Incorrect Number of Digits Entered - Browser

Zoom

The One-time Passcode SMS/Email Browser Requirements are displayed until cardholder inputs the incorrect number of digits, then follow below:

#	Element	Content/Requirement
1	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 all X digits’ include the total number of digits.
2	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Confirm”.
3	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.
4	Use Another Authentication Method	The display name for this field must be ‘Having Trouble?’. Display “Chose 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).

Max Number of Attempts Specifications - Browser

Zoom

Max Number of Attempts Requirements

The One-time Passcode SMS/Email Browser Requirements are displayed until cardholder reaches the Max Number of Attempts, then follow below:

#	Element	Content/Requirement
1	Error Message	The page must display the headline This is not the correct code. Please try again. Above the Passcode Entry Field. The max number of attempts should not exceed 3 times.
2	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’
3	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Confirm”.
4	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.
5	Use Another Authentication Method	The display name for this field must be ‘Having Trouble?’. Display “Chose 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).
6	Max Number of Attempts Reached	The page must display the headline ‘Get New Verification Code’. Above the Max Number of Attempts language. You’ve reached the maximum number of attempts with your current verification code. To continue, we’ll send you another code to verify your identity. We’ll send you a verification code by text message to <<masked phone number>>. The max number of attempts should not exceed 3 times.
7	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.

Backup Authentication Method (Automated Phone + Biometrics) Specifications - Browser

Zoom

The One-time Passcode SMS/Email Browser Requirements are displayed until cardholder choose to send verification code to another security option:

#	Element	Content/Requirement
1	Backup Authentication Method page	Backup Authentication Method page
2	Backup Authentication Methods	Radio Button must be used with the following language. *Automated Phone Call:* Get Security code via phone call to <<masked phone number>> or <<masked phone number>>. *Biometrics:* Receive a push notification from your banking app to use fingerprint or face. *QR Code:* Generate a one-time token that is valid for time of the transaction.
3	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Continue” one a radio button is chosen.
4	Automated Phone Call	The page must display the headline Select a phone number by phone above the Challenge Info text. Radio Button: My mobile <<masked phone number>> Radio Button: My landline <<masked phone number>>
5	Passcode Entry Field	The display name for this field must be ‘Verification Code’ above an Input Box .
6	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Confirm”.
7	Use Another Authentication Method	The display name for this field must be ‘Having Trouble?’. Display “Chose 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).
8	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 .
9	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.

Zoom

Backup Authentication Method (Biometric) - Browser

The One-time Passcode SMS/Email Browser Requirements are displayed until cardholder choose to send verification code to another security option:

#	Element	Code/Requirement
1	Backup Authentication Method page	The page must display the headline ‘Select Your Security Option’ above the Backup Authentication Method Choice.
2	Backup Authentication Methods	Radio Button must be used for backup methods. Not all options need to be supported, if these options are used the following language must be used. *Automated Phone Call:* Get Security code via phone call to <<masked phone number>> or <<masked phone number>>. *Biometrics:* Receive a push notification from your banking app to use fingerprint or face. *QR Code:* Generate a one-time token that is valid for time of the transaction.
3	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Continue” one a radio button is chosen.
4	Biometrics	The page must display the headline Please approve this through your {Issuer Name} app then return to this page. A graphic with biometrics app can be shown with no animation or sound.
5	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Confirm”.
6	Use Another Authentication Method	The display name for this field must be ‘Having Trouble?’. Display “Chose 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).
7	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.
8	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.
9	Return to Checkout Page	Once consumer successfully completes biometric authentication and returns to checkout page, a successful purchase screen must be displayed.

Backup Authentication Method (QR Code) - Browser

Zoom

The One-time Passcode SMS/Email Browser Requirements are displayed until cardholder choose to send verification code to another security option:

#	Element	Content/Requirement
1	Backup Authentication Method page	The page must display the headline ‘Select Your Security Option’ above the Backup Authentication Method Choice.
2	Backup Authentication Methods	Radio Button must be used for backup methods. Not all options need to be supported, if these options are used the following language must be used. *Automated Phone Call:* Get Security code via phone call to <<masked phone number>> or <<masked phone number>>. *Biometrics:* Receive a push notification from your banking app to use fingerprint or face. *QR Code:* Generate a one-time token that is valid for time of the transaction.
3	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Continue” one a radio button is chosen.
4	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.
5	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Confirm”.
6	Passcode Entry Field	The display name for this field must be ‘Verification Code’ above an Input Box.
7	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Confirm”.
8	Use Another Authentication Method	The display name for this field must be ‘Having Trouble?’. Display “Chose 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).
9	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.
10	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

Knowledge-based authentication (KBA)

Customers verify transactions by answering knowledge-based questions. Issuers can choose which methods to make available for customers.

Zoom

Specifications - KBA (Mobile)

Zoom

Knowledge Based Requirements – Mobile (In-App)

#	Element	Code/Requirement
1	Challenge Info Header Confirmation of Payment prior to Authentication	The page must display the headline Keep your account safe above the Challenge Info text.
2	Challenge Info Text Confirmation of Payment prior to Authentication	This text must include the following language: Your authorizing a payment to (merchantName) for {purchaseCurrency} (purchase amount). Let’s make sure it’s you. Please answer {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.
3	Challenge Info Header Challenge Page	The page must display the headline Verify your purchase above the Challenge Info text.
4	Challenge Info Text	The display name for this field must be {Question 1} and {the actual Question}.
5	Challenge Info Label If not a multiple choice question	The display name for this field must be ‘Your Answer’.
6	Challenge Info Data Entry If not a multiple choice question	Input Box
7	Challenge Info Label For multiple choice question	The display name for this field must be ‘Please select all that apply’.
8	Challenge Info Data Entry For multiple choice question	Multiple Check boxes
9	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Confirm”.
10	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?’.
11	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.

Knowledge Based Specifications – Browser

Zoom

Knowledge Based Requirements – Incorrect Answer - Browser

#	Element	Content/Requirement
1	Error Message	The page must display the headline You have answered one or more question incorrectly. Please try again. Above the Information Entry Field.
2	Submit Authentication Label	A form element that should align with the center of the bottom margin displaying “Continue”.
3	Confirmation of Payment prior to Authentication	This text must include the following language: Your authorizing a payment to (merchantName) for {purchaseCurrency} (purchase amount). Let’s make sure it’s you. Please answer {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.
Display # 3-10 above for consumer to try again

Cancel / Close

Zoom

#	Element	Code/Requirement
1	Cancel/Close	The cardholder must be provided with a means of not proceeding with challenge entry. However, if the cardholder selects ‘Cancel or Close’, the issuer must present an alert.
2	Cancel/Close Alert	If the cardholder clicks on the ‘Cancel or Close’, or if the cardholder clicks on the Back button, an alert, must be displayed to inform the cardholder that the transaction will terminate. The page must display the headline Are You Sure? above the Exit text. If you cancel, you will not be able to authorize a payment to (merchantName) {purchaseCurrency} (purchase amount). This means you will not be able to purchase the item in your basket.
3	Return to Authentication page	A form element that should align with the center of the margin displaying “I Changed My Mind”.
4	Complete Cancel/Close	The display name for this field must be ‘Yes, I want to Cancel’. If the cardholder clicks OK, the ACS must return a failed authentication response to the participating merchant to prevent fraudulent users from avoiding authentication. This alert should appear to advise the cardholder that continuing with the cancellation terminates the purchase with the participating merchant.

Previous Releases

Click here to download the UI Guidelines with Visa Secure using 3DS 1.0 PDF.

Design Best Practices

A set of UX principles

In our world of UX, we live by three main principles, which are below. The overall effect is a quick and easy-to-follow flow for customers.

Keep it clear
Think human, not robotic
Be trustworthy

Accessibility

According to the Web Accessibility Initiative, the percentage of people with disabilities in many populations is between 10% and 20%; an estimated 285 million people have a form of visual impairment; and 10-15% of the world's population has dyslexia. We recommend that designers refer to international standards according to the AA-level Web Content Accessibility Guidelines 2.0. We've collected a quick list of suggestions for different areas.

For full accessibility guidelines, visit Visa Global Accessibility Requirements.

UI Resources

Visa 3DS_UIAssets_Mobile_Browser.sketch

Related Guides

Please visit Visa Online at https://secure.visaonline.com/, sign in and search for “Visa Secure” for related Program and Implementation guides. If you do not have a sign in credential to Visa Online, please work with your issuer or acquirer.

Legal Disclaimer

Important Information on Copyright and Disclaimers

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.