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. Horizontal mark Creates trust by associating the SRC System operating images with the pay button.

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.

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.

Recommended display:

Alternative display:

Required

4 Horizontal mark

Consists of the Click to Pay icon and the SRC System operating images.

CX GUIDELINES:

  • Use the Click to Pay icon and SRC System operating images provided by the SRC System.
  • Display directly below the pay button.

Technical bits

Technical bits

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

  • getSrcProfile()