On This Page
FILTER BY TAG

Loading the JavaScript Library

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 must retrieve these values from the
clientLibrary
 and
clientLibraryIntegrity
 fields that are returned in the JWT from
https://apitest.cybersource.com
/uc/v1/sessions
. You can use these values to create your script tags.
You must perform this process for each transaction, as these values are 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
/uc/v1/sessions
 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
clientLibraryIntegrity
 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 and protects against fraud. 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.
For information about the client-side API, see JavaScript API Reference.

JavaScript Example: Initializing the SDK

const client = await VAS.UnifiedCheckout(sessionJWT);
In this example,
sessionJWT
 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.
// Sidebar
const result = await checkout.mount('#buttons');

// Embedded
const result = await checkout.mount({
  paymentSelection: '#buttons',
  paymentScreen: '#form'
});

JavaScript Example: Client-Defined Trigger for
Click to Pay
 or PAN Entry

When you display
CLICKTOPAY
 or
PANENTRY
 as allowed payment types, you can load the UI without displaying the
Unified Checkout
 checkout button. You can do this by creating a trigger that defines what event loads the UI.
You can create a trigger only for
CLICKTOPAY
 or
PANENTRY
 payment methods: 
//PAN Entry

const trigger = client.createTrigger('PANENTRY');

//Click to Pay

const trigger = client.createTrigger('CLICKTOPAY');
IMPORTANT
When you use the
client.createTrigger()
 method for
Click to Pay
, you must create a custom UI. See Click to Pay UI Guidelines.

JavaScript Example: Processing a Payment

Payment is initiated when
Unified Checkout
 captures the customer's payment information by calling the
client.createCheckout()
. When
autoProcessing
 is set to
true
, the payment is completed. When
autoProcessing
 is set to
false
, you can manually complete the payment using
checkout.complete(token)
. See Authorizations with a Transient Token.
// Automatic (default when completeMandate is in session)
const checkout = await client.createCheckout({ autoProcessing: true });
const result = await checkout.mount('#buttons');
// result is the completed transaction — no need to call complete()

// Manual - similar to v0
const checkout = await client.createCheckout({ autoProcessing: false });
const token = await checkout.mount('#buttons');
const result = await checkout.complete(token);

JavaScript Example: Authorization

Collect payment information and process an authorization. You must initiate a separate capture request to move funds and complete the transaction. 
async function launchCheckout() {
  try {
    const client = await VAS.UnifiedCheckout(sessionJWT);
    const 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 {
    checkout.destroy();
    client.destroy();
  }
}

launchCheckout();

Because the session includes
completeMandate
,
autoProcessing
 defaults to
true
 and
mount()
 returns the completed payment result directly.

JavaScript Example: Sale

Collect payment information and process a sale. A sale is a combined authorization and capture in a single step.
async function launchCheckout() {
  try {
    const client = await VAS.UnifiedCheckout(sessionJWT);
    const 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 {
    checkout.destroy();
    client.destroy();
  }
}

launchCheckout();

JavaScript Example: Sale with
Decision Manager

Collect payment information and process a sale while running
Decision Manager
 fraud screening before the payment is initiated.
async function launchCheckout() {
  try {
    const client = await VAS.UnifiedCheckout(sessionJWT);
    const 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 {
    checkout.destroy();
    client.destroy();
  }
}

launchCheckout();

JavaScript Example: No Service Orchestration

Collect payment information and receive a transient token. Your server handles payment authorization and any follow-on services directly.
async function launchCheckout() {
  try {
    const client = await VAS.UnifiedCheckout(sessionJWT);
    const checkout = await client.createCheckout({ autoProcessing: false });
    const transientToken = await checkout.mount('#payment-buttons');

    // transientToken is a JWT — send it to your server
    // Your server uses the transient token to authorize the payment
    sendToServer(transientToken);
  } catch (error) {
    if (error.name === 'UnifiedCheckoutError') {
      handleError(error.reason, error.message);
    }
  } finally {
    checkout.destroy();
    client.destroy();
  }
}

launchCheckout();
Without a
completeMandate
,
autoProcessing
 defaults to
false
 and the
mount()
 call returns a transient token that you pass to your server for payment authorization. For information about how to use the transient token in an authorization request, see Transient Tokens.

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="sessionJWT"
    value="[INSERT sessionJWT HERE]"
  />
  <script type="text/javascript">
    const sessionJWT = document.getElementById("sessionJWT").value;
    
    async function launchCheckout() {
      try {
        const client = await VAS.UnifiedCheckout(sessionJWT);
        const 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 {
        checkout.destroy();
        client.destroy();
      }
    }

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

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"
    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>
RELATED TO THIS PAGE