On This Page

JavaScript Example: Setting Up with the Embedded Component

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

VAS.UnifiedCheckout(sessionJWT)

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"
    id="sessionJWT"
    name="sessionJWT"
    value="[INSERT sessionJWT HERE]"
  />
  <script type="text/javascript">
    const sessionJWT = document.getElementById("sessionJWT").value;

    async function launchCheckout() {
      let client;
      let checkout;

      try {
        client = await VAS.UnifiedCheckout(sessionJWT);
        checkout = await client.createCheckout();
        const result = await checkout.mount('#payment-buttons');

        // result contains the completed payment result JWT
        // Send result to your server for verification
        sendToServer(result);
      } catch (error) {
        if (error.name === 'UnifiedCheckoutError') {
          handleError(error.reason, error.message);
        }
      } finally {
        if (checkout) {
          checkout.destroy();
        }

        if (client) {
          client.destroy();
        }
      }
    }

    launchCheckout();
  </script>
</body>
</html>