Loading the JavaScript Library and Invoking the Accept Function {#ctp-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 can retrieve these values from the clientLibrary and clientLibraryIntegrity fields that are returned in the JWT from POST `https://api.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 may be 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.

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

```
async function launchCheckout() {
  try {
	const client = await VAS.UnifiedCheckout(sessionJWT);
	const checkout = await client.createCheckout({ autoProcessing: false }); 
	const token = await checkout.mount('#buttons');
    // result contains the Transient Token
    // Send result to your server for retrieval of payment information
    sendToServer(token);
  } catch (error) {
    if (error.name === 'UnifiedCheckoutError') {
      handleError(error.reason, error.message);
    }
  } finally {
    checkout.destroy();
    client.destroy();
  }
}

launchCheckout();
```

{#ctp-getting-started-cs-js-library-example_codeblock_qsv_chn_djc}  
In this example, `sessionJWT` refers to the capture context JWT.

JavaScript Example: Displaying the Button List {#ctp-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'
});
```

{#ctp-getting-started-cs-js-button-example_codeblock_fpp_pb1_2jc}

JavaScript Example: Client-Defined Trigger for `Click to Pay` or PAN Entry {#ctp-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');
```

{#ctp-getting-started-cs-js-trigger-ctp-pan-example_codeblock_ffr_qb1_2jc} IMPORTANT
When you use the ` client.createTrigger() ` method for ` Click to Pay `, you must create a custom UI to trigger ` Click to Pay `. See [Click to Pay UI Examples](/docs/cybs/en-us/click-to-pay/developer/all/rest/click-to-pay/ctp-ui-screens/ctp-appendix-ui-ux-ex.md "").