Overview

This page shows the smallest working integration for both display modes of the embedded checkout SDK. Use inline when you want the payment UI to appear within your page layout, or modal when you want a centered overlay above your page.

Prerequisites

Two server-side calls run before any browser code:

Create the payment request — see Create a Payment Request. Receive REQUEST_ID.
Mint a checkout session token — see Mint a Checkout Session Token. Receive CHECKOUT_TOKEN (15-minute TTL).

Your backend then hands REQUEST_ID and CHECKOUT_TOKEN to the browser through your own authenticated endpoint. The browser never sees your apiKey.

# 1) Mint the token from your server (NOT from the browser)
curl -X POST "https://apay.caibo.digital/payment-requests/REQUEST_ID/checkout-session" \
  -H "X-API-Key: $CAIBO_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'
# → { "token": "CHECKOUT_TOKEN", "paymentRequestId": REQUEST_ID,
#     "expiresAt": "...", "ttlSeconds": 900 }

Include the SDK

Add the SDK script to your page. It exposes the global CaiboCheckout object.

<script src="https://pay.caibo.digital/assets/js/checkout-sdk.js"></script>

Replace REQUEST_ID and CHECKOUT_TOKEN in the examples below with the values returned by the two server-side calls above.

Inline Mode

The checkout appears directly within a <div> on your page. Ideal for single-page checkout flows.

<div id="caibo-checkout"></div>

<script>
  CaiboCheckout.init({
    mode: 'inline',
    containerId: 'caibo-checkout',
    paymentUrl: 'https://pay.caibo.digital/main?requestId=REQUEST_ID&token=CHECKOUT_TOKEN',
    height: '700px',
    onSuccess: function(data) { console.log('Payment succeeded', data); },
    onFailure: function(data) { console.log('Payment failed', data); },
    onCancel:  function(data) { console.log('Payment cancelled', data); }
  });
</script>

When to use inline

Single-step checkout

The whole purchase flow lives on one page; embed the iframe as the next step.

Custom layout control

You decide the iframe size and surrounding elements (totals, terms, support links).

The checkout opens as a centered modal with backdrop overlay. No container element needed. The modal handles its own UI — backdrop, close button (×), and the Esc key — all firing onCancel.

<button onclick="pay()">Pay Now</button>

<script>
  function pay() {
    CaiboCheckout.init({
      mode: 'modal',
      paymentUrl: 'https://pay.caibo.digital/main?requestId=REQUEST_ID&token=CHECKOUT_TOKEN',
      width:  '480px',
      height: '700px',
      onSuccess: function(data) { console.log('Payment succeeded', data); },
      onFailure: function(data) { console.log('Payment failed', data); },
      onCancel:  function(data) { console.log('Modal closed', data); }
    });
  }
</script>

Cart-style flows

Trigger payment from a button without disturbing the underlying page.

Optional payment

Subscriptions, top-ups, donations — the modal can be opened and closed at will.

Behavior Summary

Aspect	Inline	Modal
Container required	Yes — `containerId`	No — overlay attached to `<body>`
Backdrop	None	Provided by the SDK
Close mechanisms	Programmatic via `destroy()`	Backdrop click, × button, Esc key (all `onCancel`)
Body scroll lock	Not applied	`document.body.style.overflow = 'hidden'` while open
Auto-cleanup on event	Yes (`success`, `failure`, `cancel`)	Yes (`success`, `failure`, `cancel`)

Next Steps

Mint a Checkout Session Token — server-side endpoint reference, scope rules, and error handling.
SDK API Reference — every option, event, and payload field.
Framework Examples — React, Angular, and Vue 3 snippets.

Embedded Checkout (SDK)

Quick Start — Inline & Modal

Overview

Prerequisites

Include the SDK

Inline Mode

When to use inline

Single-step checkout

Custom layout control

Cart-style flows

Optional payment

Behavior Summary

Next Steps

​Overview

​Prerequisites

​Include the SDK

​Inline Mode

​When to use inline

Single-step checkout

Custom layout control

​Modal Mode

​When to use modal

Cart-style flows

Optional payment

​Behavior Summary

​Next Steps

Overview

Prerequisites

Include the SDK

Inline Mode

When to use inline

Modal Mode

When to use modal

Behavior Summary

Next Steps