Loading the JavaScript Library {#uc-getting-started-cs-js-library-intro}
========================================================================

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.visaacceptance.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.visaacceptance.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](/docs/vas/en-us/unified-checkout/developer/all/rest/unified-checkout/uc-appendix-js-reference-v1.md "").

JavaScript Example: Initializing the SDK {#uc-getting-started-cs-js-library-example}
====================================================================================

```
const client = await VAS.UnifiedCheckout(sessionJWT);
```

In this example, `sessionJWT` refers to the capture context JWT.

JavaScript Example: Displaying the Button List {#uc-getting-started-cs-js-button-example}
=========================================================================================

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 {#uc-getting-started-cs-js-trigger-ctp-pan-example}
==============================================================================================================================

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](/docs/vas/en-us/unified-checkout/developer/all/rest/unified-checkout/uc-pay-methods-intro/uc-pay-methods-dig-wallets/uc-pay-methods-dig-wallets-ctp/uc-appendix-ui-ux.md "").

JavaScript Example: Processing a Payment {#uc-getting-started-cs-js-payment-example}
====================================================================================

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](/docs/vas/en-us/unified-checkout/developer/all/rest/unified-checkout/uc-tokens-intro/uc-auth-tokens.md "").

```
// 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 {#uc-session-integrate-ex-auth}
=================================================================

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 {#uc-session-integrate-ex-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` {#uc-session-integrate-ex-sale-dm}
===================================================================================

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 {#uc-session-integrate-ex-manual-tkn}
==================================================================================

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](/docs/vas/en-us/unified-checkout/developer/all/rest/unified-checkout/uc-tokens-intro.md "").

JavaScript Example: Setting Up with Full Sidebar {#uc-getting-started-button-widget-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 {#uc-getting-started-button-widget-embedded}
=======================================================================================================

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>
```