`Click to Pay Drop-In UI`

The 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. 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 server-side component and a client-side JavaScript library.

The server-side component authenticates your merchant identity and instructs the system to act within your payment environment. The response contains limited-use public keys. The keys are used for end-to-end encryption and contain merchant-specific payment information that drives the interaction of the application. The client-side JavaScript library dynamically and securely places digital payment options into your e-commerce page.

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.

The figure below shows the Click to Pay Drop-In UI for a recognized user.

Example of the payment application with Click to Pay. — Embedded Component

`Click to Pay` Customer Workflows

This section provides an overview of the Click to Pay Drop-In UI user experience. The Click to Pay Drop-In UI is designed to provide 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 as follows:

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 you the pages a customer encounters based on their status:

Recognized Click to Pay Customer

Unrecognized Click to Pay Customer

Guest Customer

`Click to Pay Drop-In UI` Flow

To integrate Unified Checkout into your platform, you must follow several integration steps. This section gives a high-level overview of how to integrate and launch Unified Checkout on your webpage and process a transaction using the data that Unified Checkout collects for you. You can find the detailed specifications of the APIs later in this document.

You send a server‑to‑server API request for a capture context. This request is fully authenticated and returns a JSON Web Token (JWT) that is necessary to invoke the frontend JavaScript library. For information on setting up the server side, see Server-Side Set Up.

You invoke the Unified Checkout JavaScript library using the JWT response from the capture context request. For information on setting up the client side, see Client-Side Set Up.

You use the response from the Click to Pay Drop-In UI to retrieve payment credentials for payment processing or other steps.

The figure below illustrates the system's payment flow.

Diagram that shows the sequence and flow of a Click to Pay payment. — `Click to Pay` Payment Flow

For more information on the specific APIs referenced, see these topics:

Capture Context API

Payment Details API

Payment Credentials API

Server-Side Set Up

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

The server-side component provides this information:

A transaction-specific public key is used by the customer's browser 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
. For information JSON Web Tokens, see JSON Web Tokens.

Client-Side Set Up

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 lists the payment methods available to the customer.

The payment acceptance page, which captures payment information from the cardholder. You can integrate the payment acceptance page with your webpage or add it as a sidebar.

The Unified Checkout JavaScript library supports Click to Pay and manual card entry payment methods.

Follow these steps to set up the client:

Load the JavaScript library.

Initialize the accept object the capture context JWT. For information JSON Web Tokens, see JSON Web Tokens.

Initialize the unified payment object with optional parameters.

Show the button list or payment acceptance page or both.

The response to these interactions is a transient token that you use to retrieve the payment information captured by the UI.

Transient Tokens

The response to a successful customer interaction with the Click to Pay Drop-In UI is a transient token. The transient token is a reference to the payment data collected on your behalf. Tokens enable secure card payments without risking exposure to sensitive payment information. The transient token is a short-term token with a duration of 15 minutes.

Capture Context API

This section contains the information you need to request the capture context using the capture context API.

The capture context request is a signed JSON Web Token (JWT) that includes all of the merchant-specific parameters. This request tells the frontend JavaScript library how to behave within your payment experience. For information on JSON Web Tokens, see JSON Web Tokens.

You can define the payment cards that you want to accept in the capture context. Use the

allowedCardNetworks

field to define the card types.

Available card networks for card entry:

American Express

Diners Club

Discover

JCB

Mastercard

Visa

For more information on enabling and managing Click to Pay, see Enabling Click to Pay.

IMPORTANT

When integrating with Cybersource APIs, Cybersource recommends that you dynamically parse the response for the fields that you are looking for. Additional fields may be added in the future.

You must ensure that your integration can handle new fields that are returned in the response. While the underlying data structures will not change, you must also ensure that your integration can handle changes to the order in which the data is returned. Cybersource uses semantic versioning practices, which enables you to retain backwards compatibility as new fields are introduced in minor version updates.

Endpoint

Production:

POST https://api.cybersource.com/up/v1/capture-contexts

Test:

POST https://apitest.cybersource.com/up/v1/capture-contexts

Required Fields for Requesting the Capture Context

Your capture context request must include these fields:

allowedPaymentTypes
clientVersion
country
locale
orderInformation.amountDetails.currency
orderInformation.amountDetails.totalAmount
targetOrigins: The URL in this field value must contain
https
.

For a complete list of fields you can include in your request, see the Cybersource REST API Reference.

                {
  {
    "targetOrigins": [
      "https://unified-payments.appspot.com"
    ],
    "clientVersion": "0.19",
    "allowedCardNetworks" : [ "VISA", "MASTERCARD", "AMEX" ],
    "allowedPaymentTypes" : [ "CLICKTOPAY" ],
    "country": "US",
    "locale": "en_US",
    "captureMandate": {
      "billingType": "FULL",
      "requestEmail": true,
      "requestPhone": true,
      "requestShipping": true,
      "shipToCountries": [
        "US",
        "UK"
      ],
      "showAcceptedNetworkIcons": true
    },
    "orderInformation": {
      "amountDetails": {
        "totalAmount": "21.00",
        "currency": "USD"
      },
      "billTo": {
        "address1": "1111 Park Street",
        "address2": "Apartment 24B",
        "administrativeArea": "NY",
        "country": "US",
        "district": "district",
        "locality": "New York",
        "postalCode": "00000",
        "company": {
          "name": "Visa Inc",
          "address1": "900 Metro Center Blvd",
          "administrativeArea": "CA",
          "buildingNumber": "1",
          "country": "US",
          "district": "district",
          "locality": "Foster City",
          "postalCode": "94404"
        },
        "email": "maya.tran@company.com",
        "firstName": "Maya",
        "lastName": "Tran",
        "middleName": "S",
        "title": "Ms",
        "phoneNumber": "1234567890",
        "phoneType": "phoneType"
      },
      "shipTo": {
        "address1": "Visa",
        "address2": "123 Main Street",
        "address3": "Apartment 102",
        "administrativeArea": "CA",
        "buildingNumber": "string",
        "country": "US",
        "locality": "Springfield",
        "postalCode": "99999",
        "firstName": "Joe",
        "lastName": "Soap"
      }
    }
  }
}

                eyJraWQiOiJqNCIsImFsZyI6IlJTMjU2In0.eyJmbHgiOnsicGF0aCI6Ii9mbGV4L3YyL3Rva2VucyIsImRhdGEiOiJHeUhXV0d5SG5lK2Fld1JsalVUaGJoQUFFQVZMbTR6QTA0UHBqaGFXOHVSZ2UvNFQweEtIbW9KUWNYaE1hd0RmVzVQVFBLNXBlZ05vRkVocnNacjdnbldLeHBRdTNWSm4vTDBjbmZOaTRSdjdlTElcdTAwM2QiLCJvcmlnaW4iOiJodHRwczovL3N0YWdlZmxleC5jeWJlcnNvdXJjZS5jb20iLCJqd2siOnsia3R5IjoiUlNBIiwiZSI6IkFRQUIiLCJ1c2UiOiJlbmMiLCJuIjoibVhHbi1DbllDX1pkODVQdTJaaDluVDdZOUpQX1RjUV9BSzlBQTFHQkJfOFVXd2FHWEZIMGxfa2EwXzV0ekFleU5uVWZLQ016WFFHV2dMZ2hnZXdLMjJzWlVXVTdDT0k4RkNTWktpUjBYRGJ2TTVZYkYxejk0TmNmWVJGc0p0ZzhTbE1jY0stS00tOUFjdldYQWlxUEs0Mk5GZnlIVE5uX3BpVDdhZHRDMGFZQlhCdkw2WXFmcWM5bXBua05FQTJVN0x5VWFyRy1rVFVIQW8xX2tjdW1tTEF1X1Y5OEQyMndsaHMtekhEcnFVTFhsNEdKSGF6WjNXVWJDWHc5c0o2dFowVmVnX1Bpbnhmck9mazA0RWNaVlM5clBXWW1HRnA3V2NyR0FQTkRCQzFPZ0NKNW1mRmpMNEtpcVpVNURpTWFsbURGdzg5VVp1bllBVWlrdUU1SURRIiwia2lkIjoiMDBDeWg5UHhhdDdCUkMwa0pXUG5hUVJsOU9jTGMzZVoifX0sImN0eCI6W3siZGF0YSI6eyJhbGxvd2VkUGF5bWVudFR5cGVzIjpbeyJwYWdlIjoxLCJ0eXBlIjoiUEFORU5UUlkifSx7InBhZ2UiOjIsInR5cGUiOiJTUkNWSVNBIn0seyJwYWdlIjozLCJ0eXBlIjoiU1JDTUFTVEVSQ0FSRCJ9LHsicGFnZSI6NCwidHlwZSI6IlNSQ0FNRVgifSx7InBhZ2UiOjUsInR5cGUiOiJHT09HTEVQQVkifSx7InBhZ2UiOjYsInR5cGUiOiJBUFBMRVBBWSJ9XSwicGF5bWVudENvbmZpZ3VyYXRpb25zIjp7IlNSQ1ZJU0EiOnsib3JpZ2luIjoiaHR0cHM6Ly9zYW5kYm94LWFzc2V0cy5zZWN1cmUuY2hlY2tvdXQudmlzYS5jb20iLCJwYXRoIjoiL2NoZWNrb3V0LXdpZGdldC9yZXNvdXJjZXMvanMvc3JjLWktYWRhcHRlci92aXNhU2RrLmpzIiwicGFuRW5jcnlwdGlvbktleSI6eyJrdHkiOiJSU0EiLCJlIjoiQVFBQiIsInVzZSI6ImVuYyIsImtpZCI6IldaTEQzS0VBUFdJRThMS0pEMU0xMTNYMXExamZUZE5pNTI0al9aQWxLVmtlanBxM0EiLCJuIjoic1pQSXVzRGY3eVFubmhCa1U5bXUxNFZPTzNDcnVpM2I3ckFmMktZZW9iVVJtWEExN2IxSlg5amcwQ2QtdmdwbXV5VHJ4QlVTYy00YjAtVVBnU3dHRnFQV1VweDA4RXhxcndQRE92Rm9qQm91MndseXE4YmN5MFVzLUJmZUN6U0U1bE1WZFNYVFhYWGNOcXUtcWIyMmpDQ0NKQUxweHNBcnNib01PWHNMZWRoM000WE5RNVhHQXRSZjdiLS11VFk1RHI5S0xZeVV2WktBblkwNE1LSlBFTzU0WWlJRk01RFRBaE5PbXMwODlqZE1keC1VUklLSmpQVTItUnBIRzF1OExDRzAyOFJUSXBQc05iUmFudVM1VEFZX3pseERnYjFoS0ozNlliWkVOSExnOVBYVEJoZE9NbFU5MERUTGxmY2JMVGEtRDdEZ2xqQWFXQ3V2ekxQYUd3In0sInBhcmFtZXRlcnMiOnsic3JjSW5pdGlhdG9ySWQiOiJSNDVOMzQzRDZLWFpSWU1CSVhMSTIxeDgtWGtMaWh4Q21lcFMzaEFlUm91RWcwaTVVIiwic3JjaURwYUlkIjoiOTBhZDlhN2QtOTU5Ni00ZWQxLWE3MTEtMmJjOTllM2JjNWZmIiwic3JjaVRyYW5zYWN0aW9uSWQiOiIzMWJkNTRjZi1hOGIyLTQwMTEtODQ0Ny1jYjczZDM4OGU0NjYiLCJkcGFUcmFuc2FjdGlvbk9wdGlvbnMiOnsiZHBhTG9jYWxlIjoiZW5fVVMiLCJwYXlsb2FkVHlwZUluZGljYXRvciI6IkZVTEwiLCJyZXZpZXdBY3Rpb24iOiJjb250aW51ZSIsImRwYUFjY2VwdGVkQmlsbGluZ0NvdW50cmllcyI6W10sImRwYUFjY2VwdGVkU2hpcHBpbmdDb3VudHJpZXMiOltdLCJkcGFCaWxsaW5nUHJlZmVyZW5jZSI6IkFMTCIsImRwYVNoaXBwaW5nUHJlZmVyZW5jZSI6IkFMTCIsImNvbnN1bWVyTmFtZVJlcXVlc3RlZCI6dHJ1ZSwiY29uc3VtZXJFbWFpbEFkZHJlc3NSZXF1ZXN0ZWQiOnRydWUsImNvbnN1bWVyUGhvbmVOdW1iZXJSZXF1ZXN0ZWQiOnRydWUsInRyYW5zYWN0aW9uQW1vdW50Ijp7InRyYW5zYWN0aW9uQW1vdW50IjoiMS4wMSIsInRyYW5zYWN0aW9uQ3VycmVuY3lDb2RlIjoiVVNEIn0sInBheW1lbnRPcHRpb25zIjp7ImRwYUR5bmFtaWNEYXRhVHRsTWludXRlcyI6MTUsImR5bmFtaWNEYXRhVHlwZSI6IlRBVlYiLCJkcGFQYW5SZXF1ZXN0ZWQiOmZhbHNlfX19fSwiU1JDTUFTVEVSQ0FSRCI6eyJvcmlnaW4iOiJodHRwczovL3NhbmRib3guc3JjLm1hc3RlcmNhcmQuY29tIiwicGF0aCI6Ii9zZGsvc3Jjc2RrLm1hc3RlcmNhcmQuanMiLCJwYW5FbmNyeXB0aW9uS2V5Ijp7Imt0eSI6IlJTQSIsImUiOiJBUUFCIiwidXNlIjoiZW5jIiwia2lkIjoiMjAyMzAyMDcyMjM1MjEtc2FuZGJveC1mcGFuLWVuY3J5cHRpb24tc3JjLW1hc3RlcmNhcmQtaW50Iiwia2V5X29wcyI6WyJlbmNyeXB0Iiwid3JhcEtleSJdLCJhbGciOiJSU0EtT0FFUC0yNTYiLCJuIjoidDA2SThzamxTLXJyczd1Q2FnSDhldm9ldW1hUm92S3ppWlNJOVMyTjlJRFE5dFcyUGFwZlJhOUxjMUt2ZUVCRFZzMjdQa2hrVTVPeUhnUDBpRWpUdUtWcHZoNTlUNGxhLW1CU0lsczdVZWNVUUxMYTBXa21idEw3ak5kbHRBNWZxN0FoY0FyNXFjYTk4OHFyTGQ3SXlyOUUwQzNUeGJUOXRvMWlRY3B6OG9jWk9EUlhvaWRGQW5PVkw1WUdGbWxzcmVEYko0VmhzaTBwQWRjY1FjaWwteWRTZ3VyS0ItcnFLcHBiOWVwb211NFFVaDMzODJDdjhOb2JZbUYzb3M4bkdHZ0dQLWN5WG8wbnNLY1BBZ2ZybFF6b3M3cUh4VU9yRmUyeF9sWjFHMUFFLVhya3J4akJ5czlxNTNHTVJTTkNROGMtX21jRjlwYnE0SFlCcy12RDVRIn0sInBhcmFtZXRlcnMiOnsic3JjaVRyYW5zYWN0aW9uSWQiOiIzMWJkNTRjZi1hOGIyLTQwMTEtODQ0Ny1jYjczZDM4OGU0NjYiLCJzcmNpRHBhSWQiOiI5ODQ4Y2ZmNC1jODY0LTRmMTgtOWYwMy1hOGY1MGE2OTJlZGRfc3lzdGVtdGVzdCIsInNyY0luaXRpYXRvcklkIjoiNmY1ZDZjMDktZjhlMi00MzMwLWEzZGYtMjBiOWFkN2E0NTJiIiwiZHBhVHJhbnNhY3Rpb25PcHRpb25zIjp7InRyYW5zYWN0aW9uVHlwZSI6IlBVUkNIQVNFIiwiZHBhTG9jYWxlIjoiZW5fVVMiLCJkcGFBY2NlcHRlZFNoaXBwaW5nQ291bnRyaWVzIjpbXSwiY29uc3VtZXJFbWFpbEFkZHJlc3NSZXF1ZXN0ZWQiOnRydWUsImNvbnN1bWVyUGhvbmVOdW1iZXJSZXF1ZXN0ZWQiOnRydWUsInRyYW5zYWN0aW9uQW1vdW50Ijp7InRyYW5zYWN0aW9uQW1vdW50IjoiMS4wMSIsInRyYW5zYWN0aW9uQ3VycmVuY3lDb2RlIjoiVVNEIn0sImRwYUFjY2VwdGVkQmlsbGluZ0NvdW50cmllcyI6W10sImRwYUJpbGxpbmdQcmVmZXJlbmNlIjoiRlVMTCIsImRwYVNoaXBwaW5nUHJlZmVyZW5jZSI6IkZVTEwiLCJjb25zdW1lck5hbWVSZXF1ZXN0ZWQiOnRydWUsInBheWxvYWRUeXBlSW5kaWNhdG9yIjoiRlVMTCIsInBheW1lbnRPcHRpb25zIjp7ImR5bmFtaWNEYXRhVHlwZSI6IkNBUkRfQVBQTElDQVRJT05fQ1JZUFRPR1JBTV9TSE9SVF9GT1JNIn19fX0sIlNSQ0FNRVgiOnsib3JpZ2luIjoiaHR0cHM6Ly9xd3d3LmFleHAtc3RhdGljLmNvbSIsInBhdGgiOiIvYWthbWFpL3JlbW90ZWNvbW1lcmNlL3NjcmlwdHMvYW1leFNESy0xLjAuMC5qcyIsInBhbkVuY3J5cHRpb25LZXkiOnsia3R5IjoiUlNBIiwiZSI6IkFRQUIiLCJ1c2UiOiJlbmMiLCJraWQiOiJzcmMtYW1leC1jYXJkLWVuYy0yMDI0IiwiYWxnIjoiUlNBLU9BRVAtMjU2IiwibiI6Im1FazBibUxDMlpRVy1hNEtYMW5EWTNaZlBMRnJIOHRuVXlJYjVrVEtnemFlYWdpbWFINFhxUDRadzA1aWk2TXZkdk4wVDJweVNKUTRqb2toUEMySVdlbWlWUEc4ZkNQQk1KeHhqeTJFdTlvdGJpd0dSQkNneHdjdS1hY2pZYXVwVlB0RE43ZW5nSERkbk9nYXJsb0dyUFVNNklFRVpXX3ZFQjljU3JNX0JhOFNjQzhSYWZnTlNZODFpeGF4UEE4Y09oQUF2ckxRN0toRTVReFN6SU1mcnpiMUxCWUdMNFlQQnVuZk5BMnczZnZMd2ZCbDJfLVJGUkNVbVBFdjFOdVhxeG8xUk4wOGoydW44ZWljR3ZudDBndC0yMW5HcmJjNnhwcDdwWlkyb2otaGMwWlVsTnlFX2tKcExTNU9VWjhHZU9acDRxVlJ4aGtJUEd4RWVGLVFXaVNnOHVXazF4Nm5jdGhyTVVKWVYxSFB1OHRIa0pEbThBYS1Ec2hQTmVpeERqX1ZGVkVTOFYteUlJUndnLVUyODJXUGIwVDJ0S1JYZG5qbE52Y2xCc0lfNFZ3ZzVjV0VoU2tTc3pVQXkxUENTRm5rWjVJRU9yaGdfMFRwZTdhaU84dzVzUndOaFpuUnBKeUlzUHQtbE1Dbzd6cjg1QjJ2eGNvUGZmU1NwM0ZaIn0sInBhcmFtZXRlcnMiOnsic3JjaVRyYW5zYWN0aW9uSWQiOiIzMWJkNTRjZi1hOGIyLTQwMTEtODQ0Ny1jYjczZDM4OGU0NjYiLCJzcmNJbml0aWF0b3JJZCI6ImQyZTdkOTc1LWIwYWEtNGZhYS05YTUxLTY4MDAyMjkwZDc1NiIsImRwYURhdGEiOnsiZHBhTmFtZSI6InRlc3QgU2hvcCB3ZWJzaXRlIFJlZ2lzdHJhdGlvbiIsImRwYUxvZ29VcmkiOiJodHRwOi8vd3d3LnRlc3RzcmNyZWdpc3RyYXRpb24uY29tIiwiZHBhUHJlc2VudGF0aW9uTmFtZSI6InRlc3QgU2hvcCB3ZWJzaXRlIFJlZ2lzdHJhdGlvbiIsImRwYVVyaSI6Imh0dHA6Ly93d3cudGVzdHNyY3JlZ2lzdHJhdGlvbi5jb20ifSwiZHBhVHJhbnNhY3Rpb25PcHRpb25zIjp7ImRwYUxvY2FsZSI6ImVuX1VTIiwiZHBhQWNjZXB0ZWRCaWxsaW5nQ291bnRyaWVzIjpbXSwiZHBhQWNjZXB0ZWRTaGlwcGluZ0NvdW50cmllcyI6W10sImRwYUJpbGxpbmdQcmVmZXJlbmNlIjoiQUxMIiwiZHBhU2hpcHBpbmdQcmVmZXJlbmNlIjoiQUxMIiwiY29uc3VtZXJOYW1lUmVxdWVzdGVkIjp0cnVlLCJjb25zdW1lckVtYWlsQWRkcmVzc1JlcXVlc3RlZCI6dHJ1ZSwiY29uc3VtZXJQaG9uZU51bWJlclJlcXVlc3RlZCI6dHJ1ZSwicmV2aWV3QWN0aW9uIjoiY29udGludWUiLCJ0aHJlZURzUHJlZmVyZW5jZSI6Ik5PTkUiLCJwYXltZW50T3B0aW9ucyI6W3siZHluYW1pY0RhdGFUeXBlIjoiRFlOQU1JQ19DQVJEX1NFQ1VSSVRZX0NPREUiLCJkcGFEeW5hbWljRGF0YVR0bE1pbnV0ZXMiOiIxNSJ9XX19fSwiR09PR0xFUEFZIjp7ImNsaWVudExpYnJhcnkiOiJodHRwczovL3BheS5nb29nbGUuY29tL2dwL3AvanMvcGF5LmpzIiwicGF5bWVudE9wdGlvbnMiOnsiZW52aXJvbm1lbnQiOiJURVNUIn0sInBheW1lbnREYXRhUmVxdWVzdCI6eyJhcGlWZXJzaW9uIjoyLCJhcGlWZXJzaW9uTWlub3IiOjAsIm1lcmNoYW50SW5mbyI6eyJtZXJjaGFudElkIjoiQkNSMkRONFQ3RERZQlRUViIsIm1lcmNoYW50TmFtZSI6IlVuaWZpZWQgQ2hlY2tvdXQgTWVyY2hhbnQifSwiYWxsb3dlZFBheW1lbnRNZXRob2RzIjpbeyJ0eXBlIjoiQ0FSRCIsInBhcmFtZXRlcnMiOnsiYWxsb3dlZEF1dGhNZXRob2RzIjpbIlBBTl9PTkxZIiwiQ1JZUFRPR1JBTV8zRFMiXSwiYWxsb3dlZENhcmROZXR3b3JrcyI6WyJWSVNBIiwiTUFTVEVSQ0FSRCIsIkFNRVgiXSwiYmlsbGluZ0FkZHJlc3NSZXF1aXJlZCI6dHJ1ZSwiYmlsbGluZ0FkZHJlc3NQYXJhbWV0ZXJzIjp7ImZvcm1hdCI6IkZVTEwiLCJwaG9uZU51bWJlclJlcXVpcmVkIjp0cnVlfX0sInRva2VuaXphdGlvblNwZWNpZmljYXRpb24iOnsidHlwZSI6IlBBWU1FTlRfR0FURVdBWSIsInBhcmFtZXRlcnMiOnsiZ2F0ZXdheSI6ImN5YmVyc291cmNlIiwiZ2F0ZXdheU1lcmNoYW50SWQiOiJwc19ocGEifX19XSwidHJhbnNhY3Rpb25JbmZvIjp7InRvdGFsUHJpY2VTdGF0dXMiOiJGSU5BTCIsInRvdGFsUHJpY2UiOiIxLjAxIiwiY291bnRyeUNvZGUiOiJVUyIsImN1cnJlbmN5Q29kZSI6IlVTRCJ9LCJlbWFpbFJlcXVpcmVkIjp0cnVlLCJzaGlwcGluZ0FkZHJlc3NSZXF1aXJlZCI6dHJ1ZSwic2hpcHBpbmdBZGRyZXNzUGFyYW1ldGVycyI6eyJwaG9uZU51bWJlclJlcXVpcmVkIjp0cnVlfX19LCJBUFBMRVBBWSI6eyJzZXNzaW9uUGF0aCI6Ii9mbGV4L3YyL2FwcGxlL3BheW1lbnQtc2Vzc2lvbnMiLCJtZXJjaGFudElkZW50aWZpZXIiOiJtZXJjaGFudC5jb20uY3liZXJzb3VyY2Uuc3RhZ2VmbGV4IiwiZGlzcGxheU5hbWUiOiJVQyBUZXN0In19LCJjYXB0dXJlTWFuZGF0ZSI6eyJiaWxsaW5nVHlwZSI6IkZVTEwiLCJyZXF1ZXN0RW1haWwiOnRydWUsInJlcXVlc3RQaG9uZSI6dHJ1ZSwicmVxdWVzdFNoaXBwaW5nIjp0cnVlLCJzaGlwVG9Db3VudHJpZXMiOltdLCJzaG93QWNjZXB0ZWROZXR3b3JrSWNvbnMiOnRydWV9LCJvcmRlckluZm9ybWF0aW9uIjp7ImFtb3VudERldGFpbHMiOnsidG90YWxBbW91bnQiOiIxLjAxIiwiY3VycmVuY3kiOiJVU0QifX0sInRhcmdldE9yaWdpbnMiOlsiaHR0cHM6Ly90aGUtdXAtZGVtby5hcHBzcG90LmNvbSJdLCJpZnJhbWVzIjp7Im1jZSI6Ii9tY2UvaWZyYW1lLmh0bWwiLCJidXR0b25zIjoiL2J1dHRvbmxpc3QvaWZyYW1lLmh0bWwiLCJzcmMiOiIvc2VjdXJlLXJlbW90ZS1jb21tZXJjZS9zcmMuaHRtbCIsImN0cCI6Ii9jdHAvY3RwLmh0bWwiLCJnb29nbGVwYXkiOiIvZ29vZ2xlcGF5L2dvb2dsZXBheS5odG1sIiwiYXBwbGVwYXkiOiIvYXBwbGVwYXkvYXBwbGVwYXkuaHRtbCIsInBhemUiOiIvcGF6ZS9wYXplLmh0bWwifSwiY2xpZW50VmVyc2lvbiI6IjAuMTkiLCJjb3VudHJ5IjoiVVMiLCJsb2NhbGUiOiJlbl9VUyIsImFsbG93ZWRDYXJkTmV0d29ya3MiOlsiVklTQSIsIk1BU1RFUkNBUkQiLCJBTUVYIl0sImNyIjoiNmM0dUcyemFXdVBvbkxLM0R2NEwxVlJpTFVOMkFVczY4QU84bVdaUTA0X1RNLVFDdDhNUDNTQklvcGQ2Y2NtOTdmSEo1QXViVzh6VFhJTW91TTRjQWFrbm80NktIVndGRFpxQ0tfWTVwMEVzRHJmdFVTREFrZ21KZ0pNbHJ2cnYzTkpFOWdzcldBMl8zdDJBR2hQbEtfMU9rZyIsInNlcnZpY2VPcmlnaW4iOiJodHRwczovL3N0YWdldXAuY3liZXJzb3VyY2UuY29tIiwiY2xpZW50TGlicmFyeSI6Imh0dHBzOi8vc3RhZ2V1cC5jeWJlcnNvdXJjZS5jb20vdXAvdjEvYXNzZXRzLzAuMTkuMC9TZWN1cmVBY2NlcHRhbmNlLmpzIiwibG9nZ2luZ1BhdGgiOiIvdXAvdjEvbG9nLWV2ZW50cyIsImFzc2V0c1BhdGgiOiIvdXAvdjEvYXNzZXRzLzAuMTkuMCIsImNsaWVudExpYnJhcnlJbnRlZ3JpdHkiOiJzaGEyNTYtWllDT2tucVh5bjRad3NyOFYwaE5OcjZaUitZYThJbHNkdFplTkhPbDJYVVx1MDAzZCJ9LCJ0eXBlIjoiZ2RhLTAuOS4wIn1dLCJpc3MiOiJGbGV4IEFQSSIsImV4cCI6MTcxMDk2NDc4MCwiaWF0IjoxNzEwOTYzODgwLCJqdGkiOiI4SWs4bHU2NEh3NmpDVDhsIn0.XWXmjiZZGyHWIhT1hbBnc2xfhcYczpBYxhTn4g9NMt2utMaPR8wWcZ8TYDXd8HRLBWZkktkXxFFetJ4Tc6dQ4irZ6KmalWItWEUJpjN-5sLC4Qr1gG1JOOH5_hK6n_1hnjcQeRUBg-MsCSRBE_MA6ROSZgyfc1_WwL0g1TQUiKN5SvaM_37ooimebPQfvYyXyR_6Zkn9fu51w6NF_Qj0wtuQP4J4P3cgyZzzOFNKuHOwi7ISmyW6BcQXQrec577SRBfcMhhC3PBxl5OrXua4qUJ_qYbplA8P4n6f2--onAYef3UXFHmc28eRiTEeN0l0P1Yj45CIotbuw36mZrnRPQ

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

                { 
          "flx" : { 
          // filled with token metadata 
          }, 
          "ctx" : [ { 
          // filled with data related to your capture context request parameters 
          "data" : { 
          "clientLibrary" : "https://apitest.
                  cybersource
                  .com/up/v1/assets/0.19.0/SecureAcceptance.js" 
          }, 
          "type" : "gda-0.9.0" 
          } ], 
          "iss" : "Flex API", 
          "exp" : "1710964780", 
          "iat" : "1710963880", 
          "jti" : "8Ik8lu64Hw6jCT8l" 
          }

Payment Details API

This section contains the information you need to retrieve the non-sensitive data associated with a Unified Checkout transient token and the payment details API. This API can be used to retrieve personally identifiable information, such as the cardholder name and billing and shipping details, without retrieving payment credentials; which helps ease the PCI compliance burden.

There are two methods of authentication:

HTTP Signature Authentication

JSON Web Token

IMPORTANT

When integrating with Cybersource APIs, Cybersource recommends that you dynamically parse the response for the fields that you are looking for. Additional fields may be added in the future.

Endpoint

Production:

GET https://api.cybersource.com/up/v1/payment-details/
{id}

Test:

GET https://apitest.cybersource.com/up/v1/payment-details/
{id}

The

{id}

is the full JWT received from Unified Checkout as the result of capturing payment information. The transient token is a JWT object that you retrieved as part of a successful capture of payment information from a cardholder.

Payment Credentials API

This section contains the information you need to retrieve the full payment credentials collected by the Unified Checkout tool using the payment credentials API. The payment information is returned in a redundantly signed and encrypted payment object. It uses the JSON Web Tokens (JWTs) as the data standard for communicating this sensitive data.

IMPORTANT

Payment information returned by the

payment-credentials

endpoint will contain Personal Identifiable Information (PII). Retrieving this sensitive information requires your system to comply with PCI security standards. For more information on PCI security standards, see: https://www.pcisecuritystandards.org/

The response is returned using a JWE data object that is encrypted with your public key created during the Unified Checkout tool's integration. For more information, see Upload Your Encryption Key.

To decrypt the JWE response, use your private key created during the Unified Checkout tool's integration. The decrypted content is a JWS data object containing a JSON payload. This payload can be validated with the Unified Checkout public signature key.

IMPORTANT

When integrating with Cybersource APIs, Cybersource recommends that you dynamically parse the response for the fields that you are looking for. Additional fields may be added in the future.

Endpoint

Production:

GET https://api.cybersource.com/flex/v2/payment-credentials/
{ReferenceID}

Test:

GET https://apitest.cybersource.com/flex/v2/payment-credentials/
{ReferenceID}

The

{ReferenceID}

is the reference ID returned in the

field when you created the payment credentials.

`Unified Checkout` Configuration

This section contains information necessary to configure Unified Checkout in the Business Center:

Upload Your Encryption Key

Enable Click to Pay

Manage Permissions

Supported Countries for `Click to Pay`

Click to Pay is supported in these countries:

Argentina

Australia

Austria

Brazil

Canada

China

Colombia

Costa Rica

Czech Republic

Denmark

Dominican Republic

Ecuador

El Salvador

Finland

France

Germany

Honduras

Hong Kong

Hungary

India

Indonesia

Ireland

Italy

Jordan

Kuwait

Malaysia

Mexico

Netherlands

New Zealand

Nicaragua

Norway

Panama

Paraguay

Peru

Poland

Qatar

Saudi Arabia

Singapore

Slovakia

South Africa

Spain

Sweden

Switzerland

Ukraine

United Arab Emirates

United Kingdom

United States

Uruguay

Supported Locales

The locale field within the capture context request consists of an ISO 639 language code, an underscore (_), and an ISO 3166 region code. The locale controls the language in which the application is rendered. The following locales are supported:

ar_AE

ca_ES

cs_CZ

da_DK

de_AT

de_DE

el_GR

en_AU

en_CA

en_GB

en_IE

en_NZ

en_US

es_AR

es_CL

es_CO

es_ES

es_MX

es_PE

es_US

fi_FI

fr_CA

fr_FR

he_IL

hr_HR

hu_HU

id_ID

it_IT

ja_JP

km_KH

ko_KR

lo_LA

ms_MY

nb_NO

nl_NL

pl_PL

pt_BR

ru_RU

sk_SK

sv_SE

th_TH

tl_PH

tr_TR

vi_VN

zh_CN

zh_HK

zh_MO

zh_SG

zh_TW

`Click to Pay Drop-In UI`

Figure:

`Click to Pay` Customer Workflows

`Click to Pay Drop-In UI` Flow

Figure:

Server-Side Set Up

Client-Side Set Up

Transient Tokens

Capture Context API

Endpoint

Required Fields for Requesting the Capture Context

Payment Details API

Endpoint

Payment Credentials API

Endpoint

`Unified Checkout` Configuration

Supported Countries for `Click to Pay`

Supported Locales

Click to Pay Drop-In UI

Figure:

Click to Pay Customer Workflows

Click to Pay Drop-In UI Flow

Figure:

Server-Side Set Up

Client-Side Set Up

Transient Tokens

Capture Context API

Endpoint

Required Fields for Requesting the Capture Context

Payment Details API

Endpoint

Payment Credentials API

Endpoint

Unified Checkout Configuration

Supported Countries for Click to Pay

Supported Locales

`Click to Pay Drop-In UI`

`Click to Pay` Customer Workflows

`Click to Pay Drop-In UI` Flow

`Unified Checkout` Configuration

Supported Countries for `Click to Pay`