Click to Pay

UI Examples

Click to Pay

is the card entry payment option within your payment page.

Figure:

Figure:

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

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:

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.

Figure:

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.

Figure:

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:

Figure:

Figure: