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.

​
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 MERCHANT_ID, REQUEST_ID, and API_KEY in the examples below with the actual values from your merchant account and the payment request creation API response.

​
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?merchantId=MERCHANT_ID&requestId=REQUEST_ID&apiKey=API_KEY',
    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?merchantId=MERCHANT_ID&requestId=REQUEST_ID&apiKey=API_KEY',
      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