Displaying linked cards

Overview

Once a customer’s identity has been verified or the customer chose to skip verification on a previous visit, the Card tray (P5) is displayed within the credit/debit payment selection (P2).

THE SCREEN CONSISTS OF THESE ELEMENTS:
  1. Identifier Tells the customer which mobile number or email was used to find their linked cards and gives an option to access a different set of linked cards.
  2. Card tray Displays the customer’s linked cards, using the last used card as the default.
  3. Pay button Allows the customer to pay when ready. The lock icon indicates that the payment is secure.
  4. Co-badged card Provide a way for customers to choose which payment network processes their purchase when co-badged cards are displayed in the Click to Pay card tray in order to adhere to regional regulations.

Why is this important

This is the key feature of Click to Pay. It allows the customer to see all of their linked cards within the credit/debit payment section and use them for fast, easy checkout without manual card entry.

Related CX demo:

Required

1 Identifier

Tells the customer which mobile number or email was used to look for their linked cards.
Choosing “Switch ID” allows the customer to access a different set of cards linked to another identifier (e.g. personal vs business).

CX GUIDELINES:
  • Display the masked identifier (mobile number or email) above the card tray
    • Masking Rules can be found in Annex B of the SRC Core Specification located at www.emvco.com.
  • Display “Switch ID” as a clickable hyperlink so the customer can access a different set of cards.
    • “Switch ID” should be underlined to indicate it is a hyperlink, using a high contrast colour.

Required

2 Card tray

Contains the customer’s cards which are linked to Click to Pay. Cards displayed may be from any supported SRC System. By default, the first card shown is the customer’s last used card.

CX GUIDELINES:
  • For each linked card, display:
    • Card art.
    • Card description.
    • (Optional) SRC System Operating Image.
    • Masked card number.
    • (Optional) Digital card feature.
  • If the customer has more than one linked card:
    • Display either the “Show one card” or “Show all cards” state.
    • Use a radio button or similar affordance to select a card.
EXAMPLES:

Display all cards

Display one card

Collapsed

Expanded

Best practice

3 Pay button

The primary call to action on the pay screen.

CX GUIDELINES:
  • Use a lock icon to communicate security.
  • Include the amount to be paid, currency symbol and or 3-digit currency code.
  • Include the last 4 card digits to contextualise the purchase when possible and create more trust.
EXAMPLES:

Show amount to be paid

Show amount and last 4 card digits

Required

4 Co-badged card

Co-badged payment cards support both an international payment system and domestic payment system.
When a co-badged card appears in the Click to Pay tray, customers must be able to choose their preferred network, with the payment processed through that chosen network. Customers benefit from the intuitive, streamlined checkout process during card selection that aligns with their needs and goals.

CX GUIDELINES:
  • Display the co-badged card as a single card in the card tray
  • To reduce cognitive load, display available payment network logos directly below the co-badged card only when selected.
    • Provide a clear way for customers to select the network and honour the selection for processing the payment
    • Display the digital card details from the selected network
  • If the co-badged card is the first card displayed in the card tray, the network options will be shown by default
  • If two different last used card timestamps are provided for a co-badged card, use the most recent last used timestamp to determine the display order
EXAMPLES:

Button selector

None selected:

 

Pre-selected:

Radio selector

None selected:

 

Pre-selected:

Best practice

Technical bits

The following method must have been called and the response(s) received before the card tray can be displayed:

  • getSrcProfile()
USING PAR WITH CO-BADGED CARDS

Where it is available, PAR can be used by Merchants and PSPs to match co-badged cards from different SRC Systems, allowing them to be shown as a single card.


A card that supports both an international payment system and a domestic payment system should have a PAR value which will be the same for both the international and the domestic payment systems.

If PAR is available, the SRC Systems should return the PAR value. To avoid duplication, the PAR value can be used to match the co-badged cards from different SRC Systems and display them as a single card (rather than two) in the card list.

DESCRIPTOR NAME

It is recommended that the content of the data element descriptorName contains either:

  • The names of both schemes
  • No scheme names