# 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](https://developer.visa.com/images2/products/visa-3d-secure/fy2022/otp/Happy-OTP-InAppNative-FullFlowUK.pdf)

| **Element** | **Accessibility Guidelines** |
| --- | --- |
| **Logo** | - **Text alternative:** [Bank Name] Logo |
| **Challenge Information Text** | - **Role:** radio group<br>- **Name:** text message<br>- **Role:** radio<br>- **Input:** aria-checked=true<br>- **Name:** Email<br>- **Role:** radio<br>- **Input:** aria-checked=false |
| **Submit Authentication Label** | - **Name:** continue<br>- **Description**: none<br>- **Role:** button |
| **Need help Field** | - **Name:** Need help?<br>- **Role:** button<br>- **State:** collapsed |
| **Passcode Entry Field** | - **Label:** Verification code<br>- **Legend:** aria-lebeledby=verificationcode |
| **Resend Information Label** | - **Name:** resend code<br>- **Description:** none<br>- **Role:** button |

#### HTML - One Time Passcode Input Field

```markup

```

---

#### CSS - One Time Passcode Input Field

```markup

```

## 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;<br>- **Padding-left:** 32px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 20;<br>- **Font-weight:** Semibold;<br>- **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:_<br>_Radio Button: Text Message\*  <<masked phone number>>_<br>_Radio Button:  Email <<masked email>>_ | - **Padding:** 12px 31px 24px 32px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** Regular;<br>- **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;<br>- **Padding-left:** 32px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 20;<br>- **Font-weight:** Semibold;<br>- **Color:** #222222; |
| **Challenge Information Text** OTP Code Entry | This text **must** include the following language:<br>**_OTP by SMS:_** _We sent you a verification code by text message to <<masked phone number>>. You have 6 attempts._<br>**_OTP by Email:_** _We sent you a verification code to <<masked email address>>. You have 6 attempts._<br>The merchant name, purchase currency & purchases amount as included in the AReq message. | - **Padding:** 12px 31px 24px 32px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** Regular;<br>- **Color:** #222222; |
| **Challenge Information Label** | The display name for this field must be ‘ _Verification code’_. | - **Text-align:** center;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** Semibold;<br>- **Color:** #767676; |
| **Challenge Information Data Entry** | Input Box | - **Width:** 312px;<br>- **Height:** 40px;<br>- **Border-color:** #003EA9; |
| **Submit Authentication Label** | A form element that should align with the center of the bottom margin displaying “ _Continue_”. | - **Width:** 312px;<br>- **Height:** 40px;<br>- **Background-color:**#003AAC;<br>- **Border:**#003AAC;<br>- **Padding-top:** 24px;<br>- **Padding-bottom:** 16px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** Semibold;<br>- **Color:** #FFFFFF;<br>- **Text-align:** center;<br>- **Text-transform:** uppercase;<br>- **Display:** inline-block; |
| **Resend Information Label** | The display name for this field must be ‘ _Resend Code_’.<br>Challenge Information is resent to the customer.<br>A form element that should vertically align with the center of the bottom margin. | - **Text-align:** Center;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14<br>- **Font-weight:** Semibold<br>- **Color:** #003EA9;<br>- **Text-transform:** uppercase; |
| **Why Information Label** | Display the Why Information Label as a graphical control element that can be expanded.<br>The display name for this field must be ‘ _Need Help?_’. | - **Padding-bottom:** 16px;<br>- **Padding-left:** 32px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** Regular;<br>- **Color:**#003EA9 |
| **Why Information Text** | Display the Why Information Text only when the user selects the “Need Help? Label”.<br>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<br>- Description: point to instruction text with aria-describedby<br>- Role: dialog |
| **Challenge Information Text** | - **Role:** radio group<br>- **Name:** text message<br>- **Role:** radio<br>- **Input:** aria-checked=true<br>- **Name:** Email<br>- **Role:** radio<br>- **Input:** aria-checked=false |
| **Submit Authentication Label** | - **Name:** continue<br>- **Description:** none<br>- **Role:** button |
| **Use Another Method** | - **Name:** Choose another security option<br>- **Description:** none<br>- **Role:** link |
| **Need Help Field** | - **Name:** Need help?<br>- **Role:** button<br>- **State:** collapsed |
| **Code Entry** | - **Name:** Enter verification code<br>- **Description:** point to instruction text with aria-describedby<br>- **Role:** dialog |
| **Passcode Entry Field** | - **Label:** Verification code<br>- **Legend:** aria-lebeledby=verificationcode<br>- **Input:** type=text, name=Verification code, id=verification code |
| **Resend Information Label** | - **Name:** resend code<br>- **Description:** none<br>- **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.<br>_To verify payment to Electronic Store for (amount), (Issuer Name) will send you a one-time code. Choose how to receive your code:_<br>_Radio Button: Text Message\* <<masked phone number>>_<br>_Radio Button:  Email <<masked email>>_ | _**Headline**_<br>- **Padding-top:** 24px;<br>- **Padding-left:** 48px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 20;<br>- **Font-weight:** semibold;<br>- **Color:** #222222;<br>_**Body**_<br>- **Padding:** 12px 48px 24px 48px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** regular;<br>- **Color:**#222222;<br>_**Radio Button**_<br>- **Height:** 20px;<br>- **Width:** 20px; |
| **OTP Code Entry Screen** | The page must display the headline Enter verification code above the Challenge Info text.<br>This text **must** include the following language:<br>**OTP by SMS:** We sent you a verification code by text message to <<masked phone number>>. You have 6 attempts.<br>**OTP by Email:** We sent you a verification code to <<masked email address>>. You have 6 attempts.<br>The merchant name, purchase currency, & purchases amount as included in the AReq message. | _**Headline**_<br>- **Padding-top:** 24px;<br>- **Padding-left:** 48px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 20;<br>- **Font-weight: s** emibold;<br>- **Color:** #222222;<br>_**Body**_<br>- **Padding:** 12px 48px 24px 48px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** Regular;<br>- **Color:**#222222; |
| **Passcode Entry Field** | The display name for this field must be ‘ _Verification code_’ above an Input Box. | - **Text-align:** center;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** semibold;<br>- **Color:** #767676; |
| **Submit Authentication Field** | A form element that should align with the center of the bottom margin displaying “ _continue_”. | - **Width:** 312px;<br>- **Height:** 40px;<br>- **Background-color:** #003AAC;<br>- **Border:** #003AAC;<br>- **Padding-top:** 24px;<br>- **Padding-bottom:** 16px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** semibold;<br>- **Color:** #FFFFFF;<br>- **Text-align:** center;<br>- **Text-transform:** uppercase;<br>- **Display:** inline-block; |
| **Resend Information Field** | The display name for this field must be ‘ _Resend Code’_.<br>Challenge Information is resent to the customer.<br>A form element that should vertically align with the center of the bottom margin. | - **Text-align:** center;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** semibold;<br>- **Color:**#003EA9;<br>- **Text-transform:** uppercase; |
| **Need Help Field** | The display name for this field must be ‘ _Need Help?_’.<br>Display the “Need Help?’ Label as a graphical control element that can be expanded.<br>Display the Need Help Text only when the user selects the Need Help Label.<br>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;<br>- **Padding-left:** 32px;<br>- **Font-family:** Open San;<br>- **Font-size:** 14;<br>- **Font-weight:** regular;<br>- **Color:** #003EA9 |

### Error Flows

---

## Incorrect Code Entered

---

Key ScreensRedline SpecificationsAccessibility Guidelines

---

View PDF of screens seen in this full flow [here](https://developer.visa.com/dam/vdp/products/visa-3d-secure/fy2022/otp/Unhappy-OTP-InApp-Native-IncorrectCode-MaxAttempts-FullFlowUK.pdf)

| **Element** | **Accessibility Guidelines** |
| --- | --- |
| **Code Entry** | - **Name:** Enter verification code<br>- **Description:** point to instruction text with aria-describedby<br>- **Role:** dialog |
| **Passcode Entry Field** | - **Label:** Verification code<br>- **Legend:** aria-labeledby=verificationcode<br>- **Input:** type=text, name=Verification code, id=verification code<br>- **Text alternative:** “please enter a valid code” |
| **Submit Authentication Label** | - **Name:** continue<br>- **Description:** none<br>- **Role:** button |
| **Resend Information Label** | - **Name:** resend code<br>- **Description:** none<br>- **Role:** button |
| **Use Another Method** | - **Name:** Choose another security option<br>- **Description:** none<br>- **Role:** link |
| **Need Help Field** | - **Name:** Need help?<br>- **Role:** button<br>- **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.<br>The display name below the input box must be ‘ _Please enter a valid code’_. | **_Verification Code_**<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight: r** egular;<br>- **Color:**#D50000<br>  <br>**_Please enter a valid code_**<br>- **Font-family:** Open Sans;<br>- **Font-size:** 12;<br>- **Font-weight: r** egular;<br>- **Color:**#D50000 |
| **Submit Authentication Label** | A form element that should align with the center of the bottom margin displaying “ _Continue_”. | - **Width:** 312px;<br>- **Height:** 40px;<br>- **Background-color:** #003AAC;<br>- **Border:** #003AAC;<br>- **Padding-top:** 24px;<br>- **Padding-bottom:** 16px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** semibold;<br>- **Color:**#FFFFFF;<br>- **Text-align:** center;<br>- **Text-transform:** uppercase;<br>- **Display:** inline-block; |
| **Resend Information Label** | The display name for this field must be ‘ _Resend Code’_.<br>Challenge Information is resent to the customer.<br>A form element that should vertically align with the center of the bottom margin. | - **Text-align:** center;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** semibold;<br>- **Color:** #003EA9;<br>- **Text-transform:** uppercase; |
| **Use Another Authentication Method** (for Desktop Browser) | The display name for this field must be ‘ _Having Trouble?_’.<br>Display “ _Choose Another Security Option_’ Label.<br>A new screen must be displayed if this option is clicked on with another authentication method option (See Backup Authentication Method Section). | **_Having Trouble?_**<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** semibold;<br>  <br>_**Choose Another Security Option**_<br>- **Font-family:** Open Sans;<br>- **Font-size:** 12;<br>- **Font-weight:** regular;<br>- **Color:**#003EA9; |

### Resend Code

---

- Full Flow (Mobile)
- Full Flow (Desktop)

---

View PDF of screens seen in this full flow [here](https://developer.visa.com/images2/products/visa-3d-secure/fy2022/otp/Unhappy-OTP-InAppNative-ResendCode-FullFlowUK.pdf)

#### 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<br>- **Description:** point to instruction text with aria-describedby<br>- **Role:** dialog |
| **Go Back Label** | - **Name:** go back<br>- **Description:** none<br>- **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**<br>Verification Failed screen | The page must display the headline _Verification Failed_ above the Max Number of Attempts language. | - **Font-family:** Open Sans;<br>- **Font-size:** 20;<br>- **Font-weight:** Semibold;<br>- **Color:** #222222; |
| **Information Text**<br>Verification Failed screen | _Oops! You have reached the maximum number of attempts. Please try again._<br>The max number of attempts should not exceed 3 times. | - **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** Regular;<br>- **Color:**#222222; |
| **Button Label** | A form element that should align with the center of the bottom margin displaying “ _Go Back_”. | - **Width:** 312px;<br>- **Height:** 40px;<br>- **Background-color:** #003AAC;<br>- **Border:** #003AAC;<br>- **Padding-top:** 24px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** semibold;<br>- **Color:** #FFFFFF;<br>- **Text-align:** center;<br>- **Text-transform:** uppercase;<br>- **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.<br>_Please scan the QR code using your {Issuer Name} app on your mobile phone and follow the instructions._<br>_Show QR Code to scan_. | _**Header**_<br>- **Font-family:** Open Sans;<br>- **Font-size:** 20;<br>- **Font-weight:** semibold;<br>- **Color:** #222222;<br>_**Body**_<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** regular;<br>- **Color:** #222222;<br>_**QR Code**_<br>- **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;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** semibold;<br>- **Color:**#767676; |
| **Submit Authentication Label** | A form element that should align with the center of the bottom margin displaying “ _Continue_”. | - **Width:** 312px;<br>- **Height:** 40px;<br>- **Background-color:**#003AAC;<br>- **Border:**#003AAC;<br>- **Padding-top:** 24px;<br>- **Padding-bottom:** 16px;<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** semibold;<br>- **Color:**#FFFFFF;<br>- **Text-align:** center;<br>- **Text-transform:** uppercase;<br>- **Display:** inline-block; |
| **Use Another Authentication Method** | The display name for this field must be ‘ _Having Trouble?_’.<br>Display “ _Choose Another Security Option_’ Label.<br>A new screen must be displayed if this option is clicked on with another authentication method option (See Backup Authentication Method Section). | **_Having Trouble?_**<br>- **Font-family:** Open Sans;<br>- **Font-size:** 14;<br>- **Font-weight:** semibold;<br>**_Choose Another Security Option_**<br>- **Font-family:** Open Sans;<br>- **Font-size:** 12;<br>- **Font-weight:** regular;<br>- **Color:** #003EA9; |
| **Need Help Label** | The display name for this field must be ‘ _Need Help?_’.<br>Display the “Need Help?’ Label as a graphical control element that can be expanded. | - **Font-family:** Open San;<br>- **Font-size:** 14;<br>- **Font-weight:** Regular;<br>- **Color:** #003EA9 |
| **Need Help Text** | Display the Need Help Text only when the user selects the Need Help Label.<br>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.