On This Page

Loading the JavaScript Library and Invoking the Accept Function

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

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();

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

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

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.

Loading the JavaScript Library and Invoking the Accept Function

JavaScript Example: Initializing the SDK

JavaScript Example: Displaying the Button List

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

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