Overlay checkout

Keep customers on your site by opening hosted Checkout in a modal iframe. Card fields stay inside Rollo's secure frame; your parent page never handles raw card data.

Flow

  1. Create a Checkout Session on your server.
  2. Pass the hosted URL (/pay/cs_...) to the overlay helper.
  3. Listen for rollo_checkout_complete via postMessage, or rely on your success URL.

Drop-in snippet

<!-- After bundling or copying src/lib/rolloOverlay.ts -->
<script type="module">
  import { openRolloCheckout } from '/rollo-overlay.js'

  document.querySelector('#buy').addEventListener('click', async () => {
    const { url } = await fetch('/api/create-checkout', { method: 'POST' })
      .then((r) => r.json())

    openRolloCheckout({
      checkoutUrl: url,
      onComplete: ({ sessionId }) => {
        window.location.href = '/thanks?cs=' + sessionId
      },
    })
  })
</script>

Security

Always create sessions server-side with a secret key. The overlay only loads your Rollo-hosted checkout origin. Do not inject third-party payment SDKs onto the parent document.