Skip to main content

Click to Pay Drop-In UI

Click to Pay Drop-In UI powered by Unified Checkout provides an interface for easy acceptance of Click to Pay payments from Visa, Mastercard, and American Express cards. The Click to Pay Drop-In UI handles manual card entry for the non-Click to Pay payment schemes referenced in this guide.

Throughout this guide we refer to both Click to Pay Drop-In UI and Unified Checkout.

Click to Pay Drop-In UI consists of a set of server-side APIs and a client-side JavaScript library.

The server-side APIs authenticate your merchant identity, instruct the system to act within your payment environment, and provide a way to retrieve the payment data following a successful Click to Pay Drop-In UI interaction.

The provided JavaScript library enables you to place a payment application within your e-commerce environment. This embedded component offers Click to Pay and card entry to your customers.

Whether a customer uses a stored Click to Pay card or enters their payment information manually, the Click to Pay Drop-In UI handles all user interactions and provides a response to your e-commerce system.

All UI/UX must follow the UI/UX guidelines. For information about configuring your UI/UX, see UI/UX Guidelines.

The Click to Pay Drop-In UI enables a portfolio to receive an encrypted payload and send a request to the API to retrieve the payment details. The format of the decrypted payment details is determined by the transaction type. The details are either a network token and cryptogram or the primary account number (PAN), expiration details, and card verification value (CVV).

These figures show the Click to Pay Drop-In UI for a recognized user.

Unified Checkout UI with Card Payment Button
Unified Checkout UI without Card Payment Button

Browser Support

Unified Checkout supports these browser versions:

  • Firefox 121
  • Google Chrome/Chromium-based browsers 118
  • Microsoft Edge 118
  • Safari 16

Customer Workflows

This section provides an overview of the Click to Pay Drop-In UI user experience. The Click to Pay Drop-In UI provides customers with a friction-free payment experience across many payment experiences. The user experience has been optimized for mobile use and performs equally well on mobile and desktop devices. Click to Pay recognizes customers under these conditions:

  • The customer is a recognized Click to Pay customer.
  • The customer is not recognized but is a Click to Pay customer.
  • The customer is a guest at checkout.

These workflows show the pages a customer encounters based on their status:

This section provides an overview of the Click to Pay Drop-In UI recognized experience. This interaction occurs when a customer's device is recognized by the Click to Pay Drop-In UI.

A customer's device is recognized under these conditions:

  • When the customer has used Click to Pay on their device through any Click to Pay channel.
  • When the customer chooses to have their device remembered during a previous transaction, or when they enter their one-time password (OTP).

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

Recognized Click to Pay Customer UI

This section provides an overview of the Click to Pay Drop-In UI unrecognized experience. This interaction occurs when a customer's device is not recognized by the Click to Pay Drop-In UI. This condition occurs when the customer has a Click to Pay account but has not opted to have their details stored on the device. In this flow, the customer receives an OTP on their registered mobile device or their email address. The OTP can be received from any of the supported card networks, but will return cards that are stored in Click to Pay across all of the user's supported card networks. A Visa cardholder receives an OTP to their registered email address and phone number to authenticate their identity. A Mastercard cardholder receives an OTP on their registered phone number. After the user's identity is authenticated, their stored Click to Pay credentials are shown:

Unrecognized Click to Pay Customer on a Recognized Device UI

This section provides an overview of the Click to Pay Drop-In UI guest experience. This interaction occurs when the customer has not previously created a Click to Pay account, or their issuer has not provisioned their card into Click to Pay.

In the guest experience, the Click to Pay Drop-In UI captures the PAN details and the cardholder chooses to create a Click to Pay account or to check out as a guest. In both cases, the payment credentials are available for processing transactions using your payment gateway.

The cardholder can make a one-time payment or complete the payment and choose to create a Click to Pay account for future use using their chosen email address and phone number combination. A user can select Switch ID or Edit within the contact details tab to look up new payment details:

Guest UI

Unified Checkout offers flexible integration methods for your page's checkout experience. For a comparison of the Checkout, Trigger, and Components patterns, including their UI and a summary of how each behaves, see Integration Patterns.

Last published: September 29, 2026