Card tray

Once the customer’s identity has been verified, their linked cards are displayed.

In situ example

This pattern includes:

  • Masked mobile number or email (associated with linked cards)
  • Link: “Switch ID” (access a different set of cards linked to another ID)
  • For each card displayed:
    • Card art

    • Card description

    • (Optional) SRC System Operating Image

    • Masked card number

    • (Optional) Digital card feature

    • (If applicable) Co-badge network selector
  • CTA: Lock + Pay [amount] button
  • Secondary CTA: allows customer to enter a
card manually

Card ordering

Last card used is selected by default. Remaining cards are displayed in descending order based on the last used time stamp. Cards without a last used time stamp are displayed in ascending order based on the date they were enrolled.

Modality

How the customer selects their card is determined by the merchant / PSP. In this example, the card tray is presented as a radio button list.

EXAMPLES:
<p>Display all cards</p>

Display all cards

<p>Display one card (collapsed)</p>

Display one card (collapsed)

<p>Display one card (Expanded)</p>

Display one card (Expanded)

Co-badged card

To adhere to specific requirements, when a co-badged card is displayed as a single card in the Click to Pay card tray, customers must be provided with a way to choose which payment network processes their purchase. Merchants or PSPs must honor that choice.

CX pattern details

  • Show as a single card in the card tray
  • When a co-badge card is selected, expand the single card view to show the network options
  • Maintain consistent logo quality and size for each brand displayed
  • Clearly show how cardholders can select a brand using standard select methods including, but not limited to, buttons or radio selectors
  • If a co-badge card is displayed as the first card listed in the card tray and pre-selected; automatically display the network options
  • 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)

 

Button selector
(pre-selected)

Radio selector
(none selected)

 

Radio selector
(pre-selected)

Merchant pre-selected network: A merchant or PSP can set their preferred network as seen in the pre-selected option above, but the customer is given the choice to select their preferred network.