Skip to main content

Get Started with Click to Pay Drop-In UI

This tutorial walks you through a complete Click to Pay Drop-In UI integration: boarding the product on your account, enabling it, requesting a server-side capture context, integrating the client-side JavaScript library, and configuring message-level encryption and customer authentication.

Add Click to Pay to a Merchant Account

Follow these steps to add Click to Pay Drop-In UI to an organization:

Open Portfolio Management

In the left navigation panel, click Portfolio Management.

Open Manage Merchants

Under Merchants, click Manage Merchants. The Manage Merchants page appears.

Add a merchant

Click + Add Merchant.

Choose where to board the merchant

Select where you want to board your merchant:

  • Select Board a new merchant account to create a new merchant account.
  • Select Add to an existing account to add a transacting merchant to an existing merchant organization.

Click Next.

Search for the merchant account

If you are adding a transacting organization to an existing merchant account, search for the merchant account in the Boarding Presets section.

Select a boarding package

If you have more than one boarding package, choose a boarding package from the drop-down menu, or enter text in the search field to find one. Click Next. If you have only one boarding package, the Boarding Package section does not display.

Enter merchant account information

In the Merchant Account Information section, click Start to enter account information.

Skip the hierarchy step

(Optional) Click Skip in the Hierarchy Details section to skip the hierarchy step.

Set up the transacting organization

Click Start in the Transacting Organization and Products section to set up a transacting organization and configure products for it. The Transacting Organization and Products page appears.

Enter transacting organization details

Under Transacting Organization Details, enter the transacting organization name and the organization ID.

Enable Unified Checkout

Under Product Enablement, find Unified Checkout and select Enabled in the Enablement drop-down menu.

Configure Unified Checkout

Click Configure to configure Unified Checkout.

Select Click to Pay as a payment method

Under Payment methods, select Click to Pay Drop-In UI.

Select supported card brands

Under Card Brands, select the card brands you want to enable in Unified Checkout. These card brands are supported by Click to Pay:

  • American Express
  • Mastercard
  • Visa

You can select Allow All to enable all card brands for your merchants. When you select Allow All, future additions to supported card brands are automatically available.

Enable integrated services

Under Integrated services, select Retrieve Sensitive Information at Portfolio Level.

Apply the configuration

Click Apply to save your configuration.

Enable Click to Pay

Click to Pay Drop-In UI uses network tokenization for transactions. These network tokens are stored in the vault of the token requestor ID (TRID) for the card scheme.

Request the Capture Context (Server-Side)

This section contains the information you need to set up your server. Initializing Click to Pay Drop-In UI within your webpage begins with a server-to-server call to the sessions API. This step authenticates your merchant credentials and establishes how the frontend components function. The sessions API request contains parameters that define how Click to Pay Drop-In UI performs.

The server-side component provides this information:

  • A transaction-specific public key that the customer's browser uses to protect the transaction.
  • An authenticated context description package that manages the payment experience on the client side. It includes available payment options such as card networks, payment interface styling, and interaction methods.

The functions are compiled in a JSON Web Token (JWT) object referred to as the capture context.

The capture context request is a signed JWT that includes all of the merchant-specific parameters. This request tells the frontend JavaScript library how to behave within your payment experience. The request provides authentication, one-time keys, and the target origin to the Unified Checkout integration, in addition to the allowed card networks and payment types.

Request the capture context from the sessions API before you initialize the client-side SDK in the next step. For the complete list of capture context fields, the endpoint, and REST examples, see the Capture Context reference.

JSON Web Tokens

JSON Web Tokens (JWTs) are digitally signed JSON objects based on the open standard RFC 7519. These tokens provide a compact, self-contained method for securely transmitting information between parties. These tokens are signed with an RSA-encoded public/private key pair. The signature is calculated using the header and body, which enables the receiver to validate that the content has not been tampered with.

A JWT takes the form of a string, and consists of three parts separated by dots:

<Header>.<Payload>.<Signature>

The header and payload are Base64-encoded JSON and contain these claims:

  • Header: the algorithm and token type.
  • Payload: the claims of what the token represents.
  • Signature: the signature is computed from the header and payload using a secret or private key.

This is an example header:

{  "kid": "zu",  "alg": "RS256"}

This is an example payload:

{  "sub": "1234567890",  "name": "John Doe",  "iat": 1516239022}

Set Up the Client-Side SDK

This section contains the information you need to set up the client side. You use the Unified Checkout JavaScript library to integrate with your e-commerce website. It has two primary components:

  • The button widget, which presents Click to Pay Drop-In UI to the customer. There are different options available to display this to your customers.
  • The payment acceptance page, which captures payment information from the cardholder.
  • You can embed the payment acceptance page within your webpage or add it as a sidebar.

The Unified Checkout JavaScript library supports Click to Pay Drop-In UI and manual card entry payment methods. The response to these interactions is a transient token that you use to retrieve the payment information captured by the UI.

Load the JavaScript library

Use the client library asset path and client library integrity value that the capture context response returns to invoke Unified Checkout on your page.

You can retrieve these values from the clientLibrary and clientLibraryIntegrity fields that are returned in the JWT from the sessions endpoint: POST /uc/v1/sessions.

You can use these values to create your script tags. You must perform this process for each transaction, as these values might be unique for each transaction. You must avoid hard-coding values for the clientLibrary and clientLibraryIntegrity fields to prevent client-side errors.

For example, this request, POST /uc/v1/sessions, returns a response that includes:

"data": {    "clientLibrary": "[EXTRACT clientLibrary VALUE from here]",    "clientLibraryIntegrity": "[EXTRACT clientLibraryIntegrity VALUE from here]"}

This is an example script tag:

<script src="[INSERT clientLibrary VALUE HERE]"    integrity="[INSERT clientLibraryIntegrity VALUE HERE]"    crossorigin="anonymous"></script>

When you load the library, the capture context that you received from your initial server-side request is used to invoke the accept function.

Initialize the SDK

This example initializes the SDK and mounts the checkout UI. sessionJWT refers to the capture context JWT:

async function launchCheckout() {  try {    const client = await VAS.UnifiedCheckout(sessionJWT);    const checkout = await client.createCheckout({ autoProcessing: false });    const token = await checkout.mount('#buttons');    // result contains the Transient Token    // Send result to your server for retrieval of payment information    sendToServer(token);  } catch (error) {    if (error.name === 'UnifiedCheckoutError') {      handleError(error.reason, error.message);    }  } finally {    checkout.destroy();    client.destroy();  }}launchCheckout();

For the complete JavaScript interface, including the UnifiedCheckoutError class and other events, see the JavaScript API Reference.

Display the button

After you initialize the Unified Checkout object, you can add the payment application and payment acceptance pages to your webpage. You can attach the Unified Checkout embedded tool and payment acceptance pages to any named element within your HTML. Typically, they are attached to explicit named <div> components that are replaced with Click to Pay Drop-In UI iframes.

If you do not specify a location for the payment acceptance page, it is placed in the sidebar.

Mount the checkout UI with a full sidebar or as an embedded component:

const result = await checkout.mount('#buttons');
const result = await checkout.mount({  paymentSelection: '#buttons',  paymentScreen: '#form'});

The main difference between the embedded component and the sidebar is that the embedded mount() call passes the location of the payment screen in the containers argument, so the payment screen renders at the specified element instead of in the sidebar.

Wire the trigger

When you display CLICKTOPAY or PANENTRY as allowed payment types, you can load the UI without displaying the Unified Checkout checkout button. You can do this by creating a trigger that defines what event loads the UI. You can create a trigger only for CLICKTOPAY or PANENTRY payment methods:

// PAN Entryconst trigger = client.createTrigger('PANENTRY');// Click to Payconst trigger = client.createTrigger('CLICKTOPAY');

Configure Your Integration

This section contains the information you need to configure Unified Checkout in the :

  • Upload your encryption key.
  • Enable customer authentication.

For information about managing user permissions in the , see Manage Permissions.

Upload your encryption key

You can retrieve payment information from the Unified Checkout platform by invoking the Payment Credentials API. This API retrieves all of the data captured by Unified Checkout. This information is transmitted in an encrypted format to ensure the security of the payment information while in transit.

You can retrieve payment information from the Click to Pay Drop-In UI platform from the checkout response payloads. This information is also transmitted in an encrypted format to ensure that sensitive data is secure. To retrieve and decrypt this information, you must set up message-level encryption (MLE).

For information about enabling MLE, see How to Set up REST in the Getting Started with REST Developer Guide and follow the steps based on your integration method.

For information about enabling MLE, see How to Set up REST in the Getting Started with REST Developer Guide and follow the steps based on your integration method.

For information about enabling MLE, see How to Set up REST in the Getting Started with REST Developer Guide and follow the steps based on your integration method.

For information about enabling MLE, see How to Set up REST in the Getting Started with REST Developer Guide and follow the steps based on your integration method.

For information about enabling MLE, see How to Set up REST in the Getting Started with REST Developer Guide and follow the steps based on your integration method.

For information about enabling MLE, see How to Set up REST in the Getting Started with REST Developer Guide and follow the steps based on your integration method.

You must generate an encryption key pair to retrieve this encrypted payment information, and the public encryption key must be uploaded to the Unified Checkout system.

You must generate a public-private key pair to upload to the Unified Checkout system. The public key is uploaded to the Unified Checkout platform and is used to encrypt sensitive information in transit. The private key is used to decrypt the sensitive payment information on your server. Only the private key can properly decrypt the payment information.

Unified Checkout accepts only keys that meet these requirements:

  • Only RSA keys are supported. Elliptical curves are not supported.
  • The minimum accepted RSA key size is 2048 bits.
  • RSA keys must be in JWK format. For more information about JWK format, see RFC 7517.
  • The key ID must be a valid UUID.

When you have generated your encryption key pair, you can upload your key to the Unified Checkout platform. Keys can be loaded at any hierarchy level that is enabled for them and are used for all child entities that do not have keys loaded. You can upload a key at parent and child levels, but child keys override parent keys.

Follow these steps to upload your key pair:

  1. Log in to the :
    • Test:
    • Production:
  2. On the left navigation panel, choose Payment Configuration > Key Management. The Key Management page appears.
  3. Click +Generate key. The Create Key page appears.
  4. On the Create Key page, select Token Management MLE.
  5. Click Generate key.
  6. Enter your MLE public key value in JWK format.
  7. Click Create key.
  8. On the Key Management page, search for your key and select it.
  9. Click Activate. Your key is now active.

Enable customer authentication

When you enable customer authentication through Click to Pay Drop-In UI, you give permission to request that Visa and Mastercard provide an authenticated payload for each transaction. Authentication takes place within the authentication service of each card type. You must inspect the payload that is returned to you to determine if the transaction is authenticated.

When the customer completes a transaction using Visa or Mastercard Click to Pay Drop-In UI credentials, authentication is managed within Click to Pay Drop-In UI. When the customer checks out using manual card entry and does not save their card to Click to Pay Drop-In UI, the transaction is not processed through Click to Pay Drop-In UI, and you must complete authentication using your existing authentication method.

This image shows the Click to Pay Drop-In UI authentication flow:

Click to Pay Drop-In UI Authentication Flow

Authentication methods differ in each region and depend on the issuer, the cardholder device, and the Click to Pay Drop-In UI configuration. These authentication methods are available:

  • 3-D Secure (3DS)
  • Payment Passkey
  • Card verification value (CVV)
  • One-time password (OTP)

Next steps

After you complete this tutorial, your Click to Pay Drop-In UI integration is ready to test:

Last published: September 29, 2026