On This Page

Step 3: Set Up the Client-Side Component

To add the payment interface to your e-commerce site, you need to set up the client-side component using the Unified Checkout JavaScript library. This setup involves two primary components:

The button widget, which lists available payment methods for the customer.

The payment acceptance page, which captures payment information from the cardholder. This can be integrated with your webpage or added as a sidebar.

For detailed information about Unified Checkout and the integration process, see the Unified Checkout Integration Guide
.

Load the Unified Checkout JavaScript library.

ADDITIONAL INFORMATION

Include the library in your webpage's HTML.

Initialize the accept object with the capture context JWT.

ADDITIONAL INFORMATION

Use the JWT obtained from the server-side setup in Step 2.

Initialize the unified payment object with optional parameters.

ADDITIONAL INFORMATION

Configure the payment object according to your requirements.

Display the button list or payment acceptance page (or both).

ADDITIONAL INFORMATION

Choose the appropriate display method for your e-commerce site.

RESULT

The system will provide a transient token in response to user interactions. You can use the transient token to retrieve the payment information captured by the UI by calling the Payment Details API. For information about the Payment Details API, see the Payment Details API section of the Unified Checkout Developer Guide.

JavaScript Examples: Set Up the Client-Side Component

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>

Setting Up with 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.

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>

AFTER COMPLETING THE TASK

Proceed to Step 4: Configure Unified Checkout.