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:
  1. Load the JavaScript library.
  2. Initialize the accept object the capture context JWT. For information JSON Web Tokens, see JSON Web Tokens.
  3. Initialize the unified payment object with optional parameters.
  4. 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.

Loading the JavaScript Library and Invoking the Accept Function

Use the client library asset path returned by the capture context response to invoke
Unified Checkout
on your page.
Get the JavaScript library URL dynamically from the capture context response. When decoded, it appears in the JSON parameter
clientLibrary
as:
https://apitest.
cybersource
.com/up/v1/assets/x.y.z/SecureAcceptance.js
When you load the library, the capture context that you received from your initial server‑side request is used to invoke the accept function.
IMPORTANT
Use the
clientLibrary
parameter value in the capture context response to obtain the
Unified Checkout
JavaScript library URL. This ensures that you are always using the most up-to-date library. Do not hard-code the
Unified Checkout
JavaScript library URL.

Adding the Payment Application and Payment Acceptance

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
components that are replaced with
Click to Pay Drop-In UI
iframes
.
IMPORTANT
If you do not specify a location for the payment acceptance page, it is placed in the sidebar.