Skip to main content

JavaScript API Reference

This reference provides details about the JavaScript API for creating the Click to Pay Drop-In UI payment form.

VAS.UnifiedCheckout(sessionJWT)

This is a factory function that initializes the SDK. It returns a frozen, immutable client interface.

const client = await VAS.UnifiedCheckout(sessionJWT);

VAS.UnifiedCheckout(sessionJWT) parameters:

NameTypeRequired?Description
sessionJWTstringYesSigned JSON Web Token (JWT) from the server-side session endpoint

Returns: Promise<UnifiedCheckoutInterface>

Errors: Returns UnifiedCheckoutError with reason CAPTURE_CONTEXT_INVALID if the JWT signature is invalid, or UNUSED_TARGET_ORIGINS if the current page origin is not in the JWT's targetOrigins list.

UnifiedCheckoutInterface

The client object returned by VAS.UnifiedCheckout(). All methods throw an Error if called after destroy().

client.createCheckout(options?) method · Returns Promise<Checkout>

Parameters:

NameTypeRequired?Description
optionsCreateCheckoutOptionsNoConfiguration for the checkout

CreateCheckoutOptions properties:

PropertyTypeDefaultDescription
autoProcessingbooleanInferred from capture context.false: mount() returns a transient token.

Returns: Promise<Checkout>

Example:

const checkout = await client.createCheckout({ autoProcessing: false });
client.createTrigger(paymentType, options?) method · Returns Trigger

Parameters:

NameTypeRequired?Description
paymentTypeAllowedPaymentTypeYesPayment type used to trigger the UI from a client-driven button.
optionsCreateTriggerOptionsNoThe configuration for the trigger.

Returns: Trigger

Example:

const trigger = client.createTrigger('CLICKTOPAY');
client.on(event, callback) method · Returns Unsubscribe function

Subscribes to a client-level event and returns an unsubscribe function.

Parameters:

NameTypeRequired?Description
eventstringYesEvent name. Possible values: *, created, destroyed, error
callbackfunctionYesHandler function that receives event-specific payload.

Returns: Unsubscribe: a function that removes the handler when called.

Errors: Returns Error when event is not a valid event name, with reason TRIGGER_PAYMENT_TYPE_NOT_SUPPORTED when the payment type cannot be used with a trigger.

Example:

const unsubscribe = client.on('error', (err) => {  console.error(err.source, err.code, err.message);});// Laterunsubscribe();
client.off(event, callback?) method

Removes an event handler. This method is permissive — calling it with an unknown event or callback does not throw.

Parameters:

NameTypeRequired?Description
eventstringYesEvent name to unsubscribe from
callbackfunctionNoSpecific handler to remove. When this is not included, all handlers for the event are removed.
client.destroy() method

Permanently destroys the client. Returns a destroyed event, clears all event listeners, and marks the instance as destroyed.

This method can be called multiple times.

client.isDestroyed() method · Returns boolean

Returns a value of true if client.destroy() is called.

Checkout

This object is returned by client.createCheckout() and manages the full checkout UI lifecycle.

checkout.mount(target) method · Returns Promise<string>

Parameters:

NameTypeRequired?Description
targetstring or CheckoutContainersNoCSS selector string for sidebar mode, or an object with paymentSelection and paymentScreen for embedded mode. Omit for full sidebar.

CheckoutContainers properties:

PropertyTypeDefaultDescription
paymentSelectionstringYesCSS selector for the button list container
paymentScreenstringNoCSS selector for the payment form container. If omitted, payment screens appear in sidebar mode

Returns: Promise<string>: a transient token JWT when autoProcessing: false.

Errors: Returns UnifiedCheckoutError. For information about how to handle mount error codes, see Error Handling.

Example:

// Sidebarconst result = await checkout.mount('#buttons');// Embeddedconst result = await checkout.mount({  paymentSelection: '#buttons',  paymentScreen: '#form'});
checkout.unmount() method

Removes the payment UI from the page. The checkout is not destroyed, so mount() can be called again.

checkout.isMounted() method · Returns boolean

Returns true when the checkout UI is mounted.

checkout.isDestroyed() method · Returns boolean

Returns true when destroy() is called.

checkout.on(event, handler) method · Returns Unsubscribe function

Subscribes to a checkout-level event and returns an unsubscribe function.

These are the valid events:

  • mounted
  • ready
  • unready
  • unmounted
  • destroyed
  • paymentMethodSelected
  • paymentMethodCancelled
  • paymentMethodUpdate
  • error
  • *
checkout.off(event, handler?) method

Removes a checkout event handler.

checkout.destroy() method

Permanently destroys the checkout. This method removes the payment UI, cleans up iframes, and emits a destroyed event.

Trigger

The trigger is returned by client.createTrigger() and programmatically launches a specific payment method.

trigger.mount(target?) method · Returns Promise<string>

Launches the payment method UI.

Parameters:

NameTypeRequired?Description
targetstringNoCSS selector for embedded mode. Omit for sidebar mode.

Returns: Promise<string>: a transient token or completed payment result.

Example:

const result = await trigger.mount('#payment-screen');
trigger.unmount() method

Hides the payment method UI. The trigger is not destroyed.

trigger.isMounted() method · Returns boolean

Returns a boolean value.

trigger.isDestroyed() method · Returns boolean

Returns a boolean value.

trigger.on(event, handler) method

Subscribes to trigger events. Same event names and payloads as checkout events.

trigger.off(event, handler?) method

Removes a trigger event handler.

trigger.destroy() method

Permanently destroys the trigger.

Events

Click to Pay provides a type-safe event system for monitoring the payment lifecycle. Events are emitted at the client and integration levels.

Subscribe to Events

The on() method subscribes to events and returns an unsubscribe function:

const unsubscribe = checkout.on('ready', (data) => {  console.log('Ready:', data.availablePaymentMethods);});// Later, remove the handlerunsubscribe();

The off() method removes a specific handler:

function onReady(data) { /* ... */ }checkout.on('ready', onReady);checkout.off('ready', onReady);

Last published: September 29, 2026