> ## 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.

# Quick Start — Inline & Modal

> Copy-paste minimal integrations of the Caibo embedded checkout SDK in inline and modal modes.

# 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](/ipg/iframe-checkout/create-payment-request). Receive `REQUEST_ID`.
2. **Mint a checkout session token** — see [Mint a Checkout Session Token](/ipg/iframe-checkout/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`.

```bash theme={null}
# 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.

```html theme={null}
<script src="https://pay.caibo.digital/assets/js/checkout-sdk.js"></script>
```

<Tip>
  Replace `REQUEST_ID` and `CHECKOUT_TOKEN` in the examples below with the values returned by the two server-side calls above.
</Tip>

## Inline Mode

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

```html theme={null}
<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

<CardGroup cols={2}>
  <Card title="Single-step checkout" icon="rectangle">
    The whole purchase flow lives on one page; embed the iframe as the next step.
  </Card>

  <Card title="Custom layout control" icon="layer-group">
    You decide the iframe size and surrounding elements (totals, terms, support links).
  </Card>
</CardGroup>

## Modal Mode

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`.

```html theme={null}
<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

<CardGroup cols={2}>
  <Card title="Cart-style flows" icon="cart-shopping">
    Trigger payment from a button without disturbing the underlying page.
  </Card>

  <Card title="Optional payment" icon="hand-pointer">
    Subscriptions, top-ups, donations — the modal can be opened and closed at will.
  </Card>
</CardGroup>

## 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](/ipg/iframe-checkout/checkout-session-token) — server-side endpoint reference, scope rules, and error handling.
* [SDK API Reference](/ipg/iframe-checkout/sdk-api-reference) — every option, event, and payload field.
* [Framework Examples](/ipg/iframe-checkout/framework-examples) — React, Angular, and Vue 3 snippets.