Step 3: Set Up the Client-Side Component

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

Load the

Unified Checkout

JavaScript library:

ADDITIONAL INFORMATION

<script src="
https://apitest.cybersource.com/uc/v1/assets/1.0.0/UnifiedCheckout.js"></script>

Replace the domain with the production URL for live environments:

Test
:
https://apitest.cybersource.com
Production
:
https://api.cybersource.com

You must include the library in your webpage's HTML.

Initialize the SDK by calling

VAS.UnifiedCheckout()

. This returns a client instance:

ADDITIONAL INFORMATION

const client = await VAS.UnifiedCheckout(sessionJWT);

Use the JWT obtained from the server-side setup in Step 2: Set Up the Server-Side Component.

Initialization validates the JWT signature, checks that the current page origin matches

targetOrigins

, and prepares the SDK for use. If the JWT is invalid or expired, a

UnifiedCheckoutError

is returned.

Create a checkout to render a list of available payment methods and handles the payment flow:

ADDITIONAL INFORMATION

const checkout = await client.createCheckout();

When you include

autoProcessing

and set it to

true

,

mount()

returns the completed payment result:

// Explicit auto-processing
const checkout = await client.createCheckout({ autoProcessing: true });

When you include it and set it to

false

,

mount()

returns a transient token that you pass to

checkout.complete()

:

// Explicit manual processing
const checkout = await client.createCheckout({ autoProcessing: false });

The default value of

autoProcessing

us

true

when a

completeMandate

is included in the session.

Mount the checkout by calling

mount()

. This attaches the payment UI to your page. The argument determines the display mode:

Sidebar Mode

The payment screen appears as an overlay sidebar. Pass a CSS selector for the payment button list, or omit it entirely:

// Full sidebar — buttons and payment screen both in sidebar
const result = await checkout.mount();

// Buttons embedded, payment screen in sidebar
const result = await checkout.mount('#payment-buttons');

Embedded Mode

Both the button list and payment screen render inline within your page layout:

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

Mount Result

When

autoProcessing

is enabled,

mount()

resolves with the completed payment result JWT once the customer finishes the payment flow.

When

autoProcessing

is disabled,

mount()

resolves with a transient token JWT. You then call

checkout.complete()

to finish the payment:

const checkout = await client.createCheckout({ autoProcessing: false });
const transientToken = await checkout.mount('#payment-buttons');

// Later, complete the payment
const result = await checkout.complete(transientToken);

Unmount

You can remove the payment UI from the page without destroying the checkout:

checkout.unmount();

// Later, mount again
const result = await checkout.mount('#payment-buttons');

AFTER COMPLETING THE TASK