EMV® Secure Remote Commerce User Interface Guidelines and Requirements

2021-06-07T00:00:00+00:00 v1.1 Specifications

Secure Remote Commerce

EMV® Secure Remote Commerce User Interface Guidelines and Requirements Version 1.1 June 2021 EMV Secure Remote Commerce User Interface Guidelines and Requirements Version 1.1

of 23

Legal Notice

The EMV® Specifications are provided "AS IS" without warranties of any kind, and EMVCo neither assumes nor accepts any liability for any errors or omissions contained in these Specifications. EMVCO DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NONINFRINGEMENT, AS TO THESE SPECIFICATIONS. EMVCo makes no representations or warranties with respect to intellectual property rights of any third parties in or in relation to the Specifications. EMVCo undertakes no responsibility to determine whether any implementation of the EMV® Specifications may violate, infringe, or otherwise exercise the patent, copyright, trademark, trade secret, know-how, or other intellectual property rights of third parties, and thus any person who implements any part of the EMV® Specifications should consult an intellectual property attorney before any such implementation. Without limiting the foregoing, the Specifications may provide for the use of public key encryption and other technology, which may be the subject matter of patents in several countries. Any party seeking to implement these Specifications is solely responsible for determining whether its activities require a license to any such technology, including for patents on public key encryption technology. EMVCo shall not be liable under any theory for any party’s infringement of any intellectual property rights in connection with the EMV® Specifications.

1.1

of 23 Revision Log—Version 1.1

Updated instances of SRC payment/SRC icon to Click to Pay icon.
Replaced Figures 3.2, 3.3, 3.4 and 3.5 to include the Click to Pay icon in the Practical Examples.
Updated references to API tables to reflect most recent updates. 1.1 1. 1. 1. 1. 1. 2. 3. 3. 3. 3. 3. 1.1 of 23 Figures Figure 3.1: Figure 3.2: Figure 3.3: Figure 3.4: Figure 3. Tables Table 1. Table 2. Table 3. Table 3. Table 3. Table 3. Table 3. 1.1 of 23 1

Introduction

This document, EMV® Secure Remote Commerce User Interface Guidelines and Requirements (hereafter "the SRC UI Guidelines"), describes the user interface (UI) components, corresponding elements, guidelines and requirements within Consumer interactions in the SRC checkout. This document is intended to be a complementary document to the EMV Secure Remote Commerce Specification. The reader therefore needs to have read the Specifications and understood the principles and functions of Secure Remote Commerce (SRC). 1.1

Scope

This document provides the SRC UI Element and Component Library which identifies the SRC User Interface (UI) components, component elements, presentation guidelines, requirements and their assembly on specific screens. Any UI screen is optional based on implementation and use case. UI components and elements are conditionally required whenever there is a UI present. Note: Elements included in this document may change depending on geographical and regional requirements.

1.2 Constraints

Example screens are provided only for illustrative purposes. Implementations may vary.
The example screens included in this document are for a mobile experience. However, these guidelines can be adjusted to accommodate different screen sizes. 1.1 of 23 1.3

References

The following documents are related to or are associated with SRC and are located at https://www.emvco.com/. Table 1.1: References Reference Specification SRC API SRC JavaScript SDK SRC Reproduction Requirements SRC Data Dictionary Publication Name EMV® Secure Remote Commerce—Specification EMV® Secure Remote Commerce Specification—API EMV® Secure Remote Commerce Specification—JavaScript SDK EMV® Secure Remote Commerce Click to Pay Trademark Reproduction Requirements EMV® Secure Remote Commerce—Data Dictionary 1.4 Audience This document is intended for SRC System Participants that deliver UI components and elements for an SRC experience. 1.5

Definitions

For the definition of terms used in this document, refer to Table 1.3 Definitions in the Secure Remote Commerce Specification.

1.1

of 23 2 UI Element & Component Library This library outlines the User Interface (UI) elements and components that can exist in various touchpoints of the SRC experience. A UI component is a general term used to refer to any group of user interface elements packaged together to facilitate a user interaction. UI elements are foundational building blocks that can exist alone or joined together as components. This library outlines component presentation guidelines, corresponding SRC data elements, requirements and the component’s purpose in the SRC experience.

2.1 Presentation Details Table 2.1 provides the SRC UI Element and Component Library. The following list identifies the information provided within the table:

Required (R)—The presence of the UI component or element is expected
Optional (O)—The presence of the UI component or element is optional
Conditional (C)—The UI component of element is expected under certain conditions (as specified in the presentation description)
Notation (N)—Identifier of the UI component or element. UI components are labelled with a single letter (for example, A) while their corresponding elements are labelled with the component’s letter and a numeral (for example A1)
Components—Identifies the component name using bold text
Elements—Identifies the element name
API Data Element—A reference to an data element defined in the SRC API Specification and SRC Data Dictionary
User Interaction—Identifies the type of user interaction that the component or element facilitates
Clickable—An active element or component that when clicked, tapped or touched will produce a reaction
Selectable—A list of items on which the user is presented with multiple options to select
Display Only—An element or component that is non-actionable
Data Entry—An element that allows/requires the input of data from the Consumer 1.1 of 23 Table 2.1: SRC UI Element and Component Library Notation/Components/Elements User Interaction Display Type R/O/C A = SRC Trigger Clickable R Provides the starting point for an SRC experience and is placed on the Digital Payment Application. B = Click to Pay icon Indicates that the Consumer will be presented with an SRC experience. Display Only R C = Card Display Info Facilitates the Consumer recognition of available payment cards to facilitate card selection. Selectable R
C1 = Card Art - Provides the Consumer visual N/A R recognition and selection of their Digital Card.
C2 = Card Descriptor - Provides the Consumer with N/A R textual recognition of their Digital Card. API Data Elements N/A N/A
artUri
artHeight
artWidth For additional information see Table 2.19 in EMV Secure Remote Commerce Specification—API.
descriptorName
presentationName For additional information see Table 2.19 in EMV Secure Remote Commerce Specification—API. 1.1 of 23 Notation/Components/Elements User Interaction Display Type R/O/C
C3 = Digital Card Feature - Displays specific card related information provided by the SRC System. Display Only C C3 Condition: If entity displaying UI decides to show digital card feature for one card, then they must show digital card feature for all applicable cards in candidate list. This only applies for the applicable cards for which the UI is capable of displaying the relevant contentType. API Data Elements
digitalCardFeature For additional information see Table 2.20 in EMV Secure Remote Commerce Specification—API. Note: For contentType of TEXT_STRING, the UI must be capable of displaying 2 lines of text and any necessary wrapping must be at the word level. D = Navigation Clickable R N/A Provides Consumers a way to exit the SRC experience entirely and provides a clear way to move forward and backwards within the SRC experience.
D1 = Exit to Merchant - Provides a path for the O Consumer to revert back to the merchant website.
D2 = Call to action specific to screen - Provides a O path for the Consumer to move forward or backwards within the SRC experience. E = Screen Info Display Only R N/A Provides information to the Consumer regarding a particular screen.
E1 = Screen Title - States the purpose of and/or O action that the Consumer should take. 1.1 of 23 Notation/Components/Elements User Interaction Display Type R/O/C
E2 = Instructional Text - Extension of Screen Title O and provides more context if needed. F = Input Fields Provides Consumer fields to enter their identity or validation data. Data Entry R
F1 = Consumer Identity - Provides Consumer fields to R enter their identity information.
F2 = Validation - Provides Consumer a field to enter R their validation data. G = Consumer Controls Clickable R Provides a path or data field for Consumer to take action.
G1 = Add New Card - Provides a mechanism for O Consumers to associate a new card to their SRC Profile.
G2 = Resend Validation - Resends Validation Data O (OTP)
G3 = Link Path - Provides a path for the Consumer to O take further action in context to the element or component where it is being presented. API Data Elements
identityType
identityValue For additional information see Table 2.15 in EMV Secure Remote Commerce Specification—API.
validationData For additional information see Table 2.41 in EMV Secure Remote Commerce Specification—API. N/A 1.1 of 23 Notation/Components/Elements User Interaction Display Type R/O/C H = Shipping Address Display only O Enables the Consumer to view their shipping information. (with Optional edit)
H1 = First and Last Name O
name API Data Elements
H2 =Address Line 1 O
line1
H3 = Address Line 2 O
line2
H4 = Address Line 3 O
line3
H5 = City O
city
H6 = State/Province O
state
H7 = Country/Region O
countryCode
H8 = Postal Code/Zip Code
H9 = Phone Number O
zip For additional information see Table 2.4 in EMV Secure Remote Commerce Specification—API. O
countryCode
phoneNumber For additional information see Table 2.36 in EMV Secure Remote Commerce Specification—API. 1.1 of 23 Notation/Components/Elements
H10 = Contact Info I = Billing Address Enables Consumers to view their billing information.
I1 = First and Last Name
I2 =Address Line 1
I3 = Address Line 2
I4 = Address Line 3
I5 = City
I6 = State/Province
I7 = Country/Region
I8 = Postal Code/Zip Code User Interaction Display Type R/O/C O Display only (with Optional edit) O API Data Elements
mobileNumber
emailAddress For additional information see Table 2.8 in EMV Secure Remote Commerce Specification—API.
name O
line1 O
line2 O
line3 O
city O
state O
countryCode O
Zip For additional information see Table 2.4 in EMV Secure Remote Commerce Specification—API. 1.1 of 23 Notation/Components/Elements
I9 = Phone Number
I10 = Contact Info J = Consumer Identifier Provides personalisation and recognition for the Consumer K = DCF Logo Informs the Consumer which DCF they are interacting with throughout the SRC experience. User Interaction Display Type R/O/C O O Clickable O Display only O API Data Elements
countryCode
phoneNumber
For additional information see Table 2.36 in EMV Secure Remote Commerce Specification—API.
mobileNumber
emailAddress For additional information see Table 2.8 in EMV Secure Remote Commerce Specification—API.
identityType
identityValue For additional information see Table 2.15 in EMV Secure Remote Commerce Specification—API.
logoUri For additional information see Table 2.16 in EMV Secure Remote Commerce Specification—API. 1.1 of 23 3 SRC Screen Builder A screen is an assembly of UI components in a single scrollable view. This section provides reference examples depicting how screens can be built using SRC elements and components. A practical example is also provided to illustrate how a specific combination of components and elements will appear. Additionally, each SRC screen type example includes a table of available components and elements. Figure 3.1: Example Screens Example 1 Example 2 Example 3 Table 3.1: Example SRC Elements and Components N UI Element A
A1 B C G H Example Component A
Example Element A1 Example Component B Example Component C Example Component G Example Component H Practical Example Display Type R/O/C R R R O O

1.1 N I UI Element Example Component I

of 23 Display Type R/O/C O 3.1 SRC Trigger The SRC Trigger, through Consumer interaction initiates an SRC experience and will be placed on the Digital Payment Application. The SRC Trigger enables Consumers to expect an SRC experience. For further details please refer to the EMV Secure Remote Commerce Click to Pay Trademark Reproduction Requirements located in the Trademark Centre on emvco.com.

3.2 Consumer Identity Entry The Consumer Identity Entry screen enables Consumers (if prompted) to input additional data in order to complete SRC recognition and establish the Consumer’s SRC Profile as described in the EMV Secure Remote Commerce Specification. Figure 3.2: Example Screens—Consumer Identity Entry Example 1 Example 2 Example 3 Practical Example for Example 1

1.1 Table 3.2: SRC Element and Components—Consumer Identity Entry Notation B D

D1
D2 E
E1
E2 F
F1 UI Element Click to Pay icon Navigation
Exit to Merchant
Call to action specific to screen Screen Info
Screen Title
Instructional Text (Underline could represent text) Input Fields
Consumer Identity of 23 Display Type R/O/C R R O O R O O R R 1.1 of 23 3.3 Consumer Assurance The Consumer Assurance screen enables the Consumer to enter the validation data required to access the SRC Candidate List. Figure 3.3: Example Screens—Consumer Assurance Example 1 Example 2 Example 3 Practical Example of Example 1 Table 3.3: SRC Element and Components—Consumer Assurance N B D
D1
D2 E
E1
E2 F Click to Pay icon Navigation
Exit to Merchant UI Element
Call to action specific to screen Screen Info
Screen Title
Instructional Text Input Fields Display Type R/O/C R R O O R O O R

1.1 N

F2 G
G2
Assurance User Controls
Resend Assurance UI Element of 23 Display Type R/O/C R O O 3.4 SRC Candidate List The SRC Candidate List screen enables Consumers to view and select their Digital Cards or add a new Digital Card. Because the cards are tied to a specific Consumer Identity, the Consumer Identity needs to be validated in order to display the SRC Candidate List. If the Consumer has more cards than what the screen allows, the screen should facilitate the ability to scroll to view the remaining Digital Cards. Figure 3.4: Example Screens—SRC Candidate List Example 1 Example 2 Example 3 Practical Example of Example 1

1.1 Table 3.4: SRC Element and Components—SRC Candidate List N B C

C1
C2
C3 D
D1
D2 E
E1
E2 G
G1 J UI Element Click to Pay icon Card Display
Card Art (When applicable, supports image display) Customized card art or generic
Card Descriptor
Digital Card Feature Navigation
Exit to Merchant
Call to action specific to screen Screen Info
Screen Title
Instructional Text User Controls
Add new card Consumer Identifier of 23 Display Type R/O/C R R R R C R O O R O O O O O 1.1 of 23 3.5 Payment Method and Cardholder Information Confirmation The Payment Method and Cardholder Information Confirmation screen enables Consumers to verify and confirm their information and payment method before completing the SRC experience. Figure 3.5: Example Screens—Payment Method and Cardholder Information Confirmation Example 1 Example 2 Example 3 Practical Example of Example 1 1.1 of 23 Table 3.5: SRC Element and Components—Payment Method and Cardholder Information Confirmation N B C
C1
C2
C3 D
D1
D2 E
E1
E2 G
G3 H I J K UI Element Click to Pay icon Card Display
Card Art
Card Descriptor
Digital Card Feature Navigation
Exit to Merchant
Call to action specific to screen Screen Info
Screen Title
Instructional Text User Controls
Link Path Shipping Address Billing Address Consumer Identifier DCF Logo Display Type R/O/C R R R R C R R O O O O O O O O 1.1 of 23 *** END OF DOCUMENT *** © 2021 EMVCo, LLC. All rights reserved. Reproduction, distribution and other use of this document is permitted only pursuant to the applicable agreement between the user and EMVCo found at www.emvco.com. EMV® is a registered trademark or trademark of EMVCo, LLC in the United States and other countries.