Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.caibo.digital/llms.txt

Use this file to discover all available pages before exploring further.

​
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:
  1. Create the payment request — see Create a Payment Request. Receive REQUEST_ID.
  2. 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>

​
When to use modal

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

AspectInlineModal
Container requiredYes — containerIdNo — overlay attached to <body>
BackdropNoneProvided by the SDK
Close mechanismsProgrammatic via destroy()Backdrop click, × button, Esc key (all onCancel)
Body scroll lockNot applieddocument.body.style.overflow = 'hidden' while open
Auto-cleanup on eventYes (success, failure, cancel)Yes (success, failure, cancel)

​
Next Steps