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:

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.

Loading the JavaScript Library and Invoking the Accept Function

Use the client library asset path and client library integrity value that is returned by the capture context response 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

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

. You can use these values to create your script tags.

You must perform this process for each transaction, as these values may be unique for each transaction. You must avoid hard-coding values for the

clientLibrary

and

clientLibraryIntegrity

fields to prevent client-side errors.

For example, a response from

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

would include:

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

Below 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 from your initial server-side request is used to invoke the accept function.

IMPORTANT

Use the

clientLibrary

and

clientLibraryIntegriry

parameter values in the capture context response to obtain the Unified Checkout JavaScript library URL and the integrity value. This ensures that you are always using the most up-to-date library. Do not hard-code the Unified Checkout JavaScript library URL or integrity value.

Client-Side Set Up

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.

Client-Side Set Up