On This Page
FILTER BY TAG

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.
VAS.UnifiedCheckout(sessionJWT)
 Parameters
Name
Type
Required?
Description
sessionJWT
string
Yes
Signed 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.
Example
const client = await VAS.UnifiedCheckout(sessionJWT);

UnifiedCheckoutInterface

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

client.createCheckout(options?)

client.createCheckout(options?)
 Parameters
Name
Type
Required?
Description
options
CreateCheckoutOptions
No
Configuration for the checkout
CreateCheckoutOptions
 Properties
Property
Type
Default
Description
autoProcessing
boolean
Inferred from capture context.
false
:
mount()
 returns transient token.
Returns
Promise<Checkout>
Example
const checkout = await client.createCheckout({ autoProcessing: false });

client.createTrigger(paymentType, options?)

client.createTrigger(paymentType, options?)
 Parameters
Name
Type
Required?
Description
paymentType
AllowedPaymentType
Yes
Support trigger of the UI from client- driven button.
options
CreateTriggerOptions
No
The configuration for the trigger.
Returns
Trigger
Example
const trigger = client.createTrigger(CLICKTOPAY);

client.on(event, callback)

Subscribes to a client-level event and returns an unsubscribe function.
client.on(event, callback)
 Parameters
Name
Type
Required?
Description
event
string
Yes
Event name.
Possible values:
  • *
  • created
  • destroyed
  • error
callback
function
Yes
Handler 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);
});

// Later
unsubscribe();

client.off(event, callback?)

Removes an event handler. This method is permissive — calling it with an unknown event or callback does not throw.
client.off(event, callback?)
 Parameters
Name
Type
Required?
Description
event
string
Yes
Event name to unsubscribe from
callback
function
No
Specific handler to remove. When this is not included, all handlers for the event are removed.

client.destroy()

Permanently destroys the client. Returns a
destroyed
 event, clears all event listeners, and marks the instance as destroyed.
You can call
destroy()
 multiple times.

client.isDestroyed()

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

Checkout

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

checkout.mount(target)

Subscribes to a client-level event and returns an unsubscribe function.
checkout.mount(target)
 Parameters
Name
Type
Required?
Description
target
string
 or
CheckoutContainers
No
CSS selector string for sidebar mode, or an object with
paymentSelection
 and
paymentScreen
 for embedded mode. Omit for full sidebar
CheckoutContainers
 Properties
Property
Type
Default
Description
paymentSelection
string
Yes
CSS selector for the button list container
paymentScreen
string
No
CSS selector for the payment form container. If omitted, payment screens appear in sidebar mode
Returns
Promise<string>
: This is a transient token JWT when
autoProcessing: false
.
Errors
Returns
UnifiedCheckoutError
. For information about how to handle mount error codes, see Handle Errors.
Example
// Sidebar
const result = await checkout.mount('#buttons');

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

checkout.unmount()

Removes the payment UI from the page. The checkout is not destroyed — you can call
mount()
 again.

checkout.isMounted()

Returns
true
 when the checkout UI is mounted.

checkout.isDestroyed()

Returns
true
 when
destroy()
 is called.

checkout.on(event, handler)

Subscribes to a checkout-level event and returns an unsubscribe function.
Valid events:
  • mounted
  • ready
  • unready
  • unmounted
  • destroyed
  • paymentMethodSelected
  • paymentMethodCancelled
  • paymentMethodUpdate"
  • error
  • *

checkout.off(event, handler?)

Removes a checkout event handler.

checkout.destroy()

Permanently destroys the checkout. This field 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?)

Launches the payment method UI.
trigger.mount(target?)
 Parameters
Name
Type
Required?
Description
target
string
No
CSS 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()

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

trigger.isMounted()

Returns a boolean value.

trigger.isDestroyed()

Returns a boolean value.

trigger.on(event, handler)

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

trigger.off(event, handler?)

Removes a trigger event handler.

trigger.destroy()

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

Use
on()
 to subscribe to events. this returns an unsubscribe function:
const unsubscribe = checkout.on('ready', (data) => {
  console.log('Ready:', data.availablePaymentMethods);
});

// Later, remove the handler
unsubscribe();
You can use
off()
 to remove a specific handler:
function onReady(data) { /* ... */ }

checkout.on('ready', onReady);
checkout.off('ready', onReady);
RELATED TO THIS PAGE