On This Page

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.

Capture the transient token response and process the payment.

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.cybersource.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>

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.

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

JavaScript Example: Initializing the SDK

try {
        const accept = await Accept(captureContext);
        const up = await accept.unifiedPayments(sidebar);


      } catch (error) {
        // merchant logic for handling issues
        console.error("something went wrong: " + error);
      }

In this example,

captureContext

refers to the capture context JWT.

JavaScript Example: Displaying the Button List

After you initialize the Unified Checkout object, you can add the payment application and payment acceptance pages to your webpage. You can attach the embedded Unified Checkout tool and payment acceptance pages to any named element within your HTML. Typically, they are attached to explicit named components that are replaced with Unified Checkout’s iframes.

try {
    const accept = await Accept(captureContext);
    const up = await accept.unifiedPayments(sidebar);
    const tt = await up.show(showArgs);
} catch (error) {
    // merchant logic for handling issues
    console.error("something went wrong: " + error);
}

To display the Unified Checkout Button List within your payment page, a call is made to the unifiedPayments.Show() function. This function accepts a JSON object that links the

<div>

tags within your payment page to place the Unified Checkout button list and optional embeddable payment page.

const showArgs = {
    containers: {
        paymentSelection: '#buttonPaymentListContainer',
        paymentScreen: '#embeddedPaymentContainer'
    }
};

The response to the unifiedPayment.show() method is a JWT data object referred to here as a transient token. The transient token contains all the payment information captured during the Unified Checkout payment journey.

JavaScript Example: Processing a Payment

Payment is initiated when Unified Checkout captures the clients payment information by calling the

unifiedPayment.complete()

function and passing the transient token.

try {
    const accept = await Accept(captureContext);
    const up = await accept.unifiedPayments(sidebar);
    const tt = await up.show(showArgs);
    const completeResponse = await up.complete(tt);

    console.log(completeResponse); // merchant logic for handling complete response
} catch (error) {
    // merchant logic for handling issues
    console.error("something went wrong: " + error);
}
}

Unified Checkout can be leveraged to initiate payment, or you can call the payment APIs directly. See Authorizations with a Transient Token.

JavaScript Example: Setting Up with Full Sidebar

<html>
<head>
  <script
    src="[INSERT clientLibrary VALUE HERE]"
    integrity="[INSERT clientLibraryIntegrity VALUE HERE]”
    crossorigin=”anonymous"
  ></script>
</head>
<body>
  <h1>Unified Checkout Integration</h1>
  <input
    type="hidden"
    name="captureContext"
    value="[INSERT captureContext HERE]"
  />
  <script type="text/javascript">
    const sidebar = true;
    const captureContext = document.getElementById("captureContext").value;
const showArgs = { containers: {
paymentSelection: '#buttonPaymentListContainer', 
}
};
    
    async function launchCheckout() {
      try {
        const accept = await Accept(captureContext);
        const up = await accept.unifiedPayments(sidebar);
        const tt = await up.show(showArgs);
        const completeResponse = await up.complete(tt);
    
        console.log(completeResponse); // merchant logic for handling complete response
      } catch (error) {
        // merchant logic for handling issues
        console.error("something went wrong: " + error);
      }
    }

    // Call the function
    launchCheckout();
  </script>
</body>

JavaScript Example: Setting Up with the Embedded Component

The main difference between using an embedded component and the sidebar is that the

accept.unifiedPayments

object is set to

false

, and the location of the payment screen is passed in the containers argument.

IMPORTANT

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

<html>
<head>
  <script
    src="[INSERT clientLibrary VALUE HERE]"
    integrity="[INSERT clientLibraryIntegrity VALUE HERE]”
    crossorigin=”anonymous"
  ></script>
</head>
<body>
  <h1>Unified Checkout Integration</h1>
  <input
    type="hidden"
    name="captureContext"
    value="[INSERT captureContext HERE]"
  />
  <script type="text/javascript">
    const sidebar = false;
    const captureContext = document.getElementById("captureContext").value;
    const showArgs = {
      containers: { paymentSelection: "#buttonPaymentListContainer",
paymentScreen:	'#embeddedPaymentContainer' }
    };
    
    async function launchCheckout() {
      try {
        const accept = await Accept(captureContext);
        const up = await accept.unifiedPayments(sidebar);
        const tt = await up.show(showArgs);
        const completeResponse = await up.complete(tt);
    
        console.log(completeResponse); // merchant logic for handling complete response
      } catch (error) {
        // merchant logic for handling issues
        console.error("something went wrong: " + error);
      }
    }

    // Call the function
    launchCheckout();
  </script>
</body>

Client-Side Set Up

Loading the JavaScript Library and Invoking the Accept Function

JavaScript Example: Initializing the SDK

JavaScript Example: Displaying the Button List

JavaScript Example: Processing a Payment

Complete Integration Examples

JavaScript Example: Setting Up with Full Sidebar

JavaScript Example: Setting Up with the Embedded Component