UI Guidelines

Overview

Unified Checkout builds the Click to Pay UI based on the EMV Click to Pay XC Guidelines V1.1. Unified Checkout has simplified the integration of the UI. The only UI work that you must complete is the placement of the payment option.

Unified Checkout captures all card details that are manually entered by the cardholder. This enables the cardholder to enroll in Click to Pay and removes the requirement for the cardholder to manually enter their card details the next time they check out.

Unified Checkout provides a standard payment label in the Unified Checkout JavaScript that is loaded in your checkout page. One of these scenarios occurs when the cardholder selects the button:

• The cardholder is recognized.
• The cardholder is not recognized but has a Click to Pay account.
• The cardholder does not have a Click to Pay account.

You can also trigger the Unified Checkout flow using a custom button. If you are using your own custom button, your payment button or widget must display the Click to Pay image for the cardholder. For information about a custom button, see JavaScript Example: Client-Defined Trigger for Click to Pay or PAN Entry.

Your implementation consultant asks you for a mock-up of your payment flow for confirmation that it is compliant with the Click to Pay UI design standards.

Recognized Click to Pay Drop-In UI Customer

The cardholder is presented with their stored Click to Pay cards in the UI when they are on a recognized device:

Unrecognized Click to Pay Drop-In UI Customer

When the cardholder has a Click to Pay account but is not on a registered device, they receive a one-time password to their registered email address and phone number to authenticate their identity before their stored Click to Pay credentials are shown:

No Click to Pay Drop-In UI Account

When the cardholder does not have a Click to Pay account, they can provide a new email address to perform a new lookup or they can choose to enter their card details manually. The cardholder can make a one-time payment or complete the payment and choose to create a Click to Pay account for future use:

Examples

This section contains UI examples of how to display Click to Pay on your payment page. For information about how to display the UI, see JavaScript API Reference.

Click to Pay Drop-In UI Replaces PAN Capture

Click to Pay is the card entry payment option within your payment page.

For information about how to configure this UI, see Loading the JavaScript Library and Invoking the Accept Function.

Click to Pay Drop-In UI as Radio Button

Click to Pay is a radio button for the card entry payment option within your payment page. When the cardholder selects this option, the Click to Pay payment flow is loaded.

Click to Pay Drop-In UI Icon on Radio Button

You can host the radio selection option for card payment with the Click to Pay icon displayed on the payment label. The Unified Checkout flow loads when the cardholder selects this option. For information about customizing how to trigger Unified Checkout, see JavaScript Example: Client-Defined Trigger for Click to Pay or PAN Entry.

Load Click to Pay Drop-In UI Automatically from Trigger

You can load the Unified Checkout JavaScript flow within your own payment button without requiring the cardholder to select a card payment option. This example shows a recognized user payment flow where the cardholder's information is shown automatically next to the other payment methods hosted within your payment page. For information about customizing how to trigger Unified Checkout, see JavaScript Example: Client-Defined Trigger for Click to Pay or PAN Entry.

Card Payment Options with Click to Pay Drop-In UI

Do not present the Unified Checkout payment button as a separate payment method from the card payment button. If you do this, the cardholder is not prompted with their Click to Pay cards and must manually enter their payment details. They also do not have the option to store their card within Click to Pay for future use.

These examples show multiple card payment options and Click to Pay in a UI: