On This Page

Click to Pay
 UI Guidelines

The UI that is built in
Unified Checkout
 for
Click to Pay
 is built 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.
IMPORTANT
You must include
Click to Pay
 as one of the presented payment methods and not as a separate payment method.
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.
IMPORTANT
Your implementation consultant will ask 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
 Customer

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

Figure:

Recognized
Click to Pay
 Customer UI

Unrecognized
Click to Pay
 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:

Figure:

Unrecognized
Click to Pay
 Customer on a Recognized Device UI

No
Click to Pay
 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:

Figure:

No
Click to Pay
 Account UI
RELATED TO THIS PAGE