On This Page

{#jumplink-list}  
[Markdown](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/uc-intro/uc-appendix/uc-appendix-ui-ux/uc-appendix-ui-ux-ex.md)  
Filter  
FILTER BY TAG

`Click to Pay` UI Examples {#uc-appendix-ui-ux-ex}
==================================================

This section contains UI examples of how you should display `Click to Pay` on your payment page. For information about how to display the UI, see [JavaScript API Reference](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/uc-intro/uc-appendix-js-reference.md "").

`Click to Pay` Replaces PAN Capture
-----------------------------------

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

#### Figure: {#uc-appendix-ui-ux-ex_fig-ctp-ex1}

`Click to Pay` Replaces PAN Capture UI Example 1 ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-ex1-645x375.svg/jcr:content/renditions/original)

#### Figure: {#uc-appendix-ui-ux-ex_fig-ctp-ex2}

`Click to Pay` Replaces PAN Capture UI Example 2 ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-ex2-645x375.svg/jcr:content/renditions/original) For information about how to configure this UI, see [Loading the JavaScript Library and Invoking the Accept Function](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/uc-intro/uc-getting-started-cs-setup-intro/uc-getting-started-cs-js-library-intro.md "").

`Click to Pay` 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.

#### Figure: {#uc-appendix-ui-ux-ex_fig-ctp-ex3}

`Click to Pay` Radio Button Example UI ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-ex3-645x375.svg/jcr:content/renditions/original)

`Click to Pay` 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](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/uc-intro/uc-getting-started-cs-setup-intro/uc-getting-started-cs-js-library-intro/uc-getting-started-cs-js-trigger-ctp-pan-example.md "").

#### Figure: {#uc-appendix-ui-ux-ex_fig-ctp-ex4}

`Click to Pay` Icon on Radio Button Example UI ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-ex4-645x375.svg/jcr:content/renditions/original)

Load `Click to Pay` Automatically From Trigger
----------------------------------------------

You can load the `Unified Checkout` JavaScript flow within your payment page 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](/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/uc-intro/uc-getting-started-cs-setup-intro/uc-getting-started-cs-js-library-intro/uc-getting-started-cs-js-trigger-ctp-pan-example.md "").

#### Figure: {#uc-appendix-ui-ux-ex_fig-ctp-ex5}

`Click to Pay` Loaded Automatically From Trigger UI ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-ex5-645x475.svg/jcr:content/renditions/original)

Card Payment Options with `Click to Pay` 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 will also 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:

#### Figure: {#uc-appendix-ui-ux-ex_fig-ctp-ex6}

Multiple Card Payment Options in UI Example 1 ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-ex6-645x375.svg/jcr:content/renditions/original)

#### Figure: {#uc-appendix-ui-ux-ex_fig-ctp-ex7}

Multiple Card Payment Options in UI Example 2 ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-ex7-645x325.svg/jcr:content/renditions/original)

#### Figure: {#uc-appendix-ui-ux-ex_fig-ctp-ex8}

Multiple Card Payment Options in UI Example 3 ![](/content/dam/new-documentation/documentation/en-us/topics/payments-processing/card-processing/unified-checkout/images/ctp-ex8-645x375.svg/jcr:content/renditions/original)  
RELATED TO THIS PAGE