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 add the payment interface to your e‑commerce site. 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 set up the payment acceptance page to be integrated with your webpage or added as a sidebar.
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
<div>
 components that are replaced with
Unified Checkout
’s
iframes
.
IMPORTANT
If you do not specify a location for the payment acceptance page, it is placed in the side bar.