On This Page

{#jumplink-list}  
[Markdown](/docs/vas/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/uc-intro/uc-getting-started-cs-setup-intro/uc-getting-started-cs-js-library-intro.md)  
Filter  
FILTER BY TAG

Loading the JavaScript Library and Invoking the Accept Function {#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 can retrieve these values from the clientLibrary and clientLibraryIntegrity fields that are returned in the JWT from `https://apitest.visaacceptance.com``/up/v1/capture-contexts`. 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.visaacceptance.com``/up/v1/capture-contexts` 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 {#uc-getting-started-cs-js-library-example}
====================================================================================

```
try {
        const accept = await Accept(captureContext);
        const up = await accept.unifiedPayments(sidebar);


      } catch (error) {
        // merchant logic for handling issues
        console.error("something went wrong: " + error);
      }
```

In this example, `captureContext` 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.

```
try {
    const accept = await Accept(captureContext);
    const up = await accept.unifiedPayments(sidebar);
    const tt = await up.show(showArgs);
} catch (error) {
    // merchant logic for handling issues
    console.error("something went wrong: " + error);
}
```

To display the `Unified Checkout` Button List within your payment page, a call is made to the unifiedPayments.Show() function. This function accepts a JSON object that links the `<div>` tags within your payment page to place the `Unified Checkout` button list and optional embeddable payment page.

```
const showArgs = {
    containers: {
        paymentSelection: '#buttonPaymentListContainer',
        paymentScreen: '#embeddedPaymentContainer'
    }
};
```

The response to the unifiedPayment.show() method is a JWT data object referred to here as a transient token. The transient token contains all the payment information captured during the `Unified Checkout` payment journey.

JavaScript Example: Client-Defined Trigger for `Click to Pay` or PAN Entry {#uc-getting-started-cs-js-trigger-ctp-pan-exampl}
=============================================================================================================================

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 by calling the `createTrigger()` method on an existing unified payments object and pass in these two parameters:

* The payment method that the trigger is linked to. This is required.
* The container for the payment screen. It is required when you are in embedded mode. IMPORTANT

  > You can create a trigger only for ` CLICKTOPAY ` or ` PANENTRY ` payment methods.

```
// Example: Basic usage with full sidebar experience
// Create a trigger
const trigger = up.createTrigger("CLICKTOPAY");

// Show the trigger
// In this example, when a button in your UI is clicked
const myButton = document.getElementById("myButton");

myButton.addEventListener("click", async () => {
  const transientToken = await trigger.show();
  console.log(transientToken);
})
```

```
// Example: Payment screen in a container
// Define the container for the payment screen to be rendered in 
var options = { containers: { paymentScreen: '#paymentScreenContainer' } };
// Create the trigger
const trigger = up.createTrigger("CLICKTOPAY", options);

// Show the trigger
// In this example, when a button in your UI is clicked
const myButton = document.getElementById("myButton");

myButton.addEventListener("click", async () => {
  const transientToken = await trigger.show();
  console.log(transientToken);
})
```

> IMPORTANT
> When you use the ` createTrigger() ` method for ` Click to Pay `, you must create a custom UI. See [Click to Pay UI Guidelines](/docs/vas/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/uc-intro/uc-appendix/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 `unifiedPayment.complete()` function and passing the transient token. IMPORTANT

> If you are updating an existing ` Unified Checkout ` configuration to use the complete mandate, you must update your JavaScript to include the unifedPayment.complete() function.

```
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);
}
}
```

When you include this in your capture context, `Unified Checkout` is leveraged to initiate payment and any follow-on services that you include in your capture context request. Alternatively, you can call the payment APIs directly. See [Authorizations with a Transient Token](/docs/vas/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/uc-intro/uc-auth-tokens.md "").  
RELATED TO THIS PAGE