3-D Secure End User UI Mockups

error_outline
note

EMV 3D Secure 2.1 is a new offering by Elavon. If you have identified any errors or gaps in the content, please contact: #SEDevPortalSupport@elavon.com

UI mockups of end-user screens

The screens on this page intends to give you an idea of the various screens an end user would see on their mobile app or browser when shopping on a merchant's website or app. Note that these are sample screens. EMVco and different issuers have their own UI guidelines that developers need to follow while designing UI screens that an end user would see on the mobile app or the website.

A 3D Secure authentication can either have a frictionless flow (issuer validates the cardholder's authentication without any further interaction) or a challenge flow (issuer challenges the cardholder to provide additional information before validating the cardholder).

error_outline
note

Click on a screen to view an enlarged version. You might need to scroll the page to see the enlarged screen.

Initial screens common to both frictionless or challenge flows

These screens show the intial screens when the user starts interacting with your mobile app or website.

User interaction: User selects a product on the merchant's app or website (either on mobile or desktop), adds the selected item to the cart, and proceeds to checkout.

Mobile app Browser
![](mobile_cart.png?resize=200,400)
![](desktop_cart.png?resize=600,400)

User interaction: On the checkout screen, user reviews already saved card details to be used for shopping, the billing address, and the delivery address and places the order, which triggers the EMV 3D Secure flow.

Mobile app Browser
![](mobile_checkout.png?resize=200,400)
![](desktop_checkout.png?resize=600,400)

User interaction: While the app/browser displays the 'processing' or 'order-in-progress' screen, the 3DS server sends the cardholder details to the issuer who evaluates the transaction risk based on the information shared by the 3DS requestor.

Mobile app Browser
![](mobile_processing.png?resize=200,400)
![](desktop_processing.png?resize=600,400)

After the data is sent to the issuer, following are the possible scenarios:

Frictionless flow

User interaction: Issuer determines that the transaction doesn't need further authentication and the app/broswer displays the order confirmation page to the user.

Mobile app Browser
![](mobile_orderconfirmation.png?resize=200,400)
![](desktop_orderconfirmation.png?resize=600,400)

Challenge flow - OOB authentication using a single device

When the same device is used for shopping and authentication.

User interaction: Issuer decides to challenge the cardholder and pushes the challenge screen to the device. In this example, the challenge screen in the merchant's app asks the user to open the bank app on the phone to authorize the payment, whereas the challenge screen on the browser asks for user's registered email or phone to send the verification code.

Mobile app Browser
![](mobile_bankapppostauthorizationtext button.png?resize=200,400)
![](desktop_verificationoptions.png?resize=600,400)

User interaction: The user gets an alert on the bank app to authorize the payment. In this example for the browser, the bank sends an authentictaion code to the user's registered email.

Mobile app Browser
![](mobile_authorizepaymentalert.png?resize=200,400)
![](desktop_codeentry.png?resize=600,400)

User interaction: The bank app displays the minimum transaction details required to authorize the payment. User reviews the details and clicks confirm to proceed with the transaction.

In this example for the browser, the user enters the authentictaion code and submits it for verification by the bank.

Mobile app Browser
![](mobile_purchasedetails.png?resize=200,400)
![](desktop_codeentered.png?resize=600,400)

User interaction: The bank app requests the user to touch the Home button of the phone to verify the user (this is the second factor of authentication).

error_outline
note

The bank app could also ask for other forms of authentication such as face recognition, voice recognition, a challenge question, or a PIN.

Mobile app
![](mobile_fingerpintconfirmation.png?resize=200,400)

User interaction: If the second factor of authentication is also verified (for an app) or the code is verified (for a browser), the purchase gets confirmed and user is displayed the merchant page (which was still open in the background).

Mobile app Browser
![](mobile_fingerpintauthorized.png?resize=200,400) ![](mobile_orderconfirmation.png?resize=200,400)
![](desktop_orderconfirmation.png?resize=600,400)

Challenge flow - OOB authentication using multiple devices

When the one device is used for shopping and another device for authentication.

User interaction: Issuer decides to challenge the cardholder and pushes the challenge screen notification to the browser and also to the other registered device (mobile).

error_outline
note

The challenge screen presentation to the user on the mobile app depends on merchant's implementation of the checkout page. Example screens in this scenario assumes that the merchant has chosen an overlay screen. However, the challenge screen displayed in the browser is completely under the control of the issuer's ACS.

Sample Images
![](desktop_checkout.png?resize=600,400) ![](mobile_lock screennotification.png?resize=200,400)

User interaction: The challenge screen asks the user to open the bank app on the phone to authorize the payment. The user also gets an alert on the bank app to authorize the payment.

Sample Image
![](desktop_authnotification.png?resize=600,400)

User interaction: User reviews the transaction details on the bank app and clicks confirm to proceed with the transaction. The bank app requests the user to touch the Home button of the phone to verify the user (this is the second factor of authentication).

error_outline
note

The bank app could have also asked for other forms of authentication such as face recognition, voice recognition, a challenge question, or a PIN.

Sample Images
![](mobile_authorizepaymentalert.png?resize=200,400) ![](mobile_purchasedetails.png?resize=200,400) ![](mobile_fingerpintconfirmation.png?resize=200,400)

User interaction: If the second factor of authentication is also verified, the bank app on the mobile displays a transaction verified page and the browser displays the order confirmation page.

Sample Images
![](mobile_fingerpintauthorized.png?resize=200,400) ![](desktop_orderconfirmation.png?resize=600,400)

Challenge flow - OOB authentication using one-time passcode (OTP) via SMS or email

User interaction: Issuer decides to challenge the cardholder and pushes the challenge screen notification that asks the user to select a registered email ID or a mobile number to receive the code (OTP).

Mobile app Browser
![](mobile_verificationcodeoptions.png?resize=200,400)
![](desktop_verificationoptions.png?resize=600,400)

User interaction: After the user selects a preferred destination for the code, the challenge screen asks the user to enter the code sent by the bank.

Mobile app Browser
![](mobile_verificationtextmessage.png?resize=200,400)
![](desktop_phonecodeentry.png?resize=600,400)

User interaction: The user gets a text/email alert and enters the code on the purchase authentication page and clicks confirm.

Mobile app Browser
![](mobile_verificationcodeentered.png?resize=200,400)
![](desktop_phonecodeentered.png?resize=600,400)

User interaction: The bank validates the OTP and after validation, the merchant confirmation page is displayed to the user.

Mobile app Browser
![](mobile_processing.png?resize=200,400) ![](mobile_orderconfirmation.png?resize=200,400)
![](desktop_processing.png?resize=600,400) ![](desktop_orderconfirmation.png?resize=600,400)

Challenge flow - OOB authentication using knowledge-based authentication

User interaction: Issuer decides to challenge the cardholder and pushes the challenge screen notification that informs the user that they will be asked 2 (or a number decided by the issuer) security questions to verify the payment.

error_outline
note

The form of knowledge-based authentication, or the number of authentication questions, or the number of attempts allowed for each authentication question can vary for each issuer.

Mobile app Browser
![](mobile_securityquestion.png?resize=200,400)
![](desktop_knowledgeauth.png?resize=600,400)

User interaction: If the user answers all questions correctly, the order confirmation page is displayed.

Mobile app Browser
![](mobile_orderconfirmation.png?resize=200,400)
![](desktop_orderconfirmation.png?resize=600,400)