Overview

This page documents every method, option, and event payload exposed by the embedded checkout SDK.

`CaiboCheckout.init(options)`

Initializes the checkout iframe and binds event listeners.

Options

Option	Type	Required	Default	Description
`mode`	`string`	—	`'inline'`	Display mode: `'inline'` or `'modal'`.
`paymentUrl`	`string`	Required	—	Full checkout URL: `.../main?requestId=…&token=…` where `token` is a checkout session token.
`containerId`	`string`	Inline only	—	ID of the `<div>` to mount the iframe into.
`width`	`string`	—	`'480px'`	Modal width (modal) or iframe width (inline).
`height`	`string`	—	`'700px'`	CSS height of the iframe.
`onSuccess`	`function`	—	—	Called when payment completes successfully.
`onFailure`	`function`	—	—	Called when payment fails or is declined.
`onCancel`	`function`	—	—	Called when user cancels or closes the modal.
`onPending`	`function`	—	—	Called for async payment flows (e.g. waiting for bank confirmation).
`onReady`	`function`	—	—	Called when the checkout page has loaded inside the iframe.

containerId is required only for mode: 'inline'. In 'modal' mode the SDK creates its own overlay attached to document.body.

paymentUrl must carry a short-lived token, not your apiKey. The merchant apiKey is a long-lived secret and must stay on your server. Mint a token with POST /payment-requests/{id}/checkout-session and pass the response’s token as the token query parameter.

`CaiboCheckout.destroy()`

Removes the iframe (inline) or the overlay (modal), cleans up all event listeners, and restores document.body scroll. Called automatically on success, failure, and cancel. Call it manually only to close programmatically (for example, from a custom abort button).

CaiboCheckout.destroy();

Event Payload

All callbacks receive a single data object. The shape depends on the event:

Event	Payload	Description
`payment.success`	`{ url, requestId, paymentId }`	Redirect URL, request & payment IDs.
`payment.failure`	`{ url, requestId, paymentId }`	Failure URL with identifiers.
`payment.pending`	`{ url, requestId }`	Waiting URL for async flows.
`payment.cancel`	`{}`	User-initiated cancellation.
`payment.ready`	`{}`	Checkout page loaded.

Example Payloads

// payment.success
{ url: 'https://merchant.com/success', requestId: '12345', paymentId: '67890' }

// payment.failure
{ url: 'https://merchant.com/failure', requestId: '12345', paymentId: '67890' }

// payment.pending
{ url: 'https://merchant.com/waiting', requestId: '12345' }

// payment.cancel  (user-initiated)
{}

Lifecycle Summary

init

Call CaiboCheckout.init(options) to render the iframe and start listening for postMessage events.

onReady

Fired once the checkout page has rendered inside the iframe.

Terminal event

Exactly one of onSuccess, onFailure, onPending, or onCancel is fired.

destroy (auto)

The SDK removes the iframe/overlay and cleans up listeners. Body scroll is restored.

Next Steps

Framework Examples — React, Angular, Vue 3.
Browser Support & Notes — compatibility matrix and security notes.

Embedded Checkout (SDK)

SDK API Reference

Overview

`CaiboCheckout.init(options)`

Options

`CaiboCheckout.destroy()`

Event Payload

Example Payloads

Lifecycle Summary

Next Steps

​Overview

​CaiboCheckout.init(options)

​Options

​CaiboCheckout.destroy()

​Event Payload

​Example Payloads

​Lifecycle Summary

​Next Steps

Overview

`CaiboCheckout.init(options)`

Options

`CaiboCheckout.destroy()`

Event Payload

Example Payloads

Lifecycle Summary

Next Steps