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
.
  1. Load the
    Unified Checkout
     JavaScript library.

    ADDITIONAL INFORMATION

    Include the library in your webpage's HTML.
  2. Initialize the accept object with the capture context JWT.

    ADDITIONAL INFORMATION

    Use the JWT obtained from the server-side setup in Step 2.
  3. Initialize the unified payment object with optional parameters.

    ADDITIONAL INFORMATION

    Configure the payment object according to your requirements.
  4. 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