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.

Global UI Components

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 (applies to Mobile view only)
  • 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).

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.

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

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

Processing Screen – Mobile

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.

Specifications - OTP / Email (Mobile)

Specifications - OTP / SMS (Mobile)

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

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

Verification Code Incorrect Specifications Requirements - Browser

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

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

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

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

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.

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

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. 

Specifications - KBA (Mobile)

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

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

#

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

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.

Important Information on Copyright and Disclaimers

© 2019 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.