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

# Browser Support & Notes

> Browser compatibility matrix for the Caibo embedded checkout SDK and important integration notes covering 3DS, wallets, scroll lock, and CSP.

# Overview

The embedded checkout SDK targets all evergreen desktop and mobile browsers. The matrix below summarizes support for the SDK itself and for the wallet payment methods that work inside the iframe.

## Browser Compatibility

| Browser     | Embedded Checkout |          Apple Pay         | Google Pay |
| ----------- | :---------------: | :------------------------: | :--------: |
| Chrome 90+  |        Yes        | No (iOS/macOS Safari only) |     Yes    |
| Safari 14+  |        Yes        |             Yes            |     Yes    |
| Firefox 88+ |        Yes        |             No             |     Yes    |
| Edge 90+    |        Yes        |             No             |     Yes    |

<Note>
  Apple Pay availability follows Apple's platform restrictions and is independent of the SDK — it requires Safari on iOS or macOS.
</Note>

## Important Notes

<AccordionGroup>
  <Accordion title="3DS flows">
    3-D Secure authentication navigates **within the iframe** — this is the expected behavior. The final authentication result is delivered to the parent window via `postMessage`, so your `onSuccess` / `onFailure` callbacks fire as usual.
  </Accordion>

  <Accordion title="Apple Pay / Google Pay">
    Both wallets work normally inside the iframe; no extra configuration is required on your side. Make sure your domain is registered with the wallet provider as part of your merchant onboarding.
  </Accordion>

  <Accordion title="Non-embedded mode">
    Opening the checkout URL directly (without the SDK) behaves as before — full-page redirects are used. The `embedded=true` flag is appended only when launched through `CaiboCheckout.init()`.
  </Accordion>

  <Accordion title="Modal scroll lock">
    While the modal is open, the SDK sets `document.body.style.overflow = 'hidden'` to prevent background scrolling. The original value is restored automatically when `destroy()` runs (either via a terminal event or a manual call).
  </Accordion>

  <Accordion title="CSP / Security">
    The SDK accepts `postMessage` from the checkout origin only. For stricter Content Security Policy setups, configure `frame-ancestors` on the backend so only your approved origins can embed the iframe.
  </Accordion>

  <Accordion title="Checkout session token expiry">
    Tokens are valid for 15 minutes from issuance. If a customer leaves the page open past that, the iframe will start receiving `401 Unauthorized` for every API call and the checkout UI will appear stuck. Mint a fresh token server-side and re-open the iframe to recover. See [Mint a Checkout Session Token](/ipg/iframe-checkout/checkout-session-token).
  </Accordion>
</AccordionGroup>

## Troubleshooting Quick Checks

<CardGroup cols={2}>
  <Card title="Iframe blank / white page" icon="square-xmark">
    Open DevTools inside the iframe. The most common causes are: (1) `paymentUrl` is missing the `token=` parameter, (2) the token expired (15-minute TTL — check the Network tab for `401`s), or (3) `originDomain` on the payment request does not match the page hosting the iframe.
  </Card>

  <Card title="No callbacks fire" icon="bell-slash">
    Confirm the SDK script loaded and that `CaiboCheckout.init()` returned without error. Check the browser console for cross-origin warnings.
  </Card>

  <Card title="403 Forbidden in the iframe" icon="shield-xmark">
    The token is being sent to an endpoint that is not on the token's [allow-list](/ipg/iframe-checkout/checkout-session-token), or the `paymentRequestId` in the URL/query does not match the bound id. Mint a token bound to the correct payment request.
  </Card>

  <Card title="Modal cannot be closed" icon="rectangle-xmark">
    Backdrop click, **×**, and **Esc** all fire `onCancel`. If you bound `onCancel` to a no-op, the modal will still tear down via `destroy()`.
  </Card>

  <Card title="Wallet button missing" icon="wallet">
    Apple Pay only renders on Safari (iOS / macOS). Google Pay needs an HTTPS context and a supported Chromium-based browser.
  </Card>

  <Card title="Deprecation warning about apiKey" icon="triangle-exclamation">
    The checkout page emits a `console.warn` if the iframe URL still carries `apiKey=`. Migrate to [checkout session tokens](/ipg/iframe-checkout/checkout-session-token) — the `apiKey` is a long-lived secret and must not appear in browser URLs.
  </Card>
</CardGroup>

## Next Steps

* [How Embedded Checkout Works](/ipg/iframe-checkout/how-it-works) — architecture and event flow.
* [SDK API Reference](/ipg/iframe-checkout/sdk-api-reference) — full option and payload list.