On This Page

{#jumplink-list}  
[Markdown](/docs/cybs/en-us/click-to-pay/developer/all/rest/click-to-pay/uc-appendix-ui-ux.md)  
Filter  
FILTER BY TAG

`Click to Pay` UI Guidelines {#uc_appendix_ui_ux}
=================================================

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](/docs/cybs/en-us/click-to-pay/developer/all/rest/click-to-pay/uc-getting-started-cs-js-trigger-ctp-pan-example.md "").

> 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: {#uc_appendix_ui_ux_fig-ctp-recog-device}

Recognized `Click to Pay` Customer UI ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-recog-device-445x200.svg/jcr:content/renditions/original)

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: {#uc_appendix_ui_ux_fig-ctp-recog-account}

Unrecognized `Click to Pay` Customer on a Recognized Device UI ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-recog-account-445x330.svg/jcr:content/renditions/original)

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: {#uc_appendix_ui_ux_fig-ctp-no-account}

No `Click to Pay` Account UI ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-no-account-445x330.svg/jcr:content/renditions/original)