Checkout modes

The checkout opens in one of two modes.

Pane is an inline panel rendered inside your page. On desktop it slides in from the right, capped at pane.width; on mobile it slides up from the bottom. The visitor stays on your site, and the panel closes when they press Escape or click the dimmed area.

Popup is a separate browser window, centred on the visitor's screen. The client watches for the window being closed so it can clear the backdrop.

Inline checkout requires a trusted origin

Pane mode renders the Entase checkout in an iframe on your domain, so it is only permitted for domains you have explicitly authorized. Add every domain that opens the checkout to Trusted origins in Settings → Integrations — see Integrations and checkout customization.

Whether the www. prefix is included matters. If you are not sure which form your site serves, add both.

If your domain is not on the list, the checkout still works — it simply opens as a pop-up window.

How 'auto' is resolved

With the default checkoutMode: 'auto', the client decides in this order:

1. Not HTTPS → pop-up. Inline checkout is never used on an insecure page.
2. localhost or 127.0.0.1 → pane, with a warning logged to the console. This is a development convenience so you can build against the inline layout; it says nothing about whether your production domain is allowed.
3. Otherwise → the client asks Entase whether this origin may use inline checkout, sending pk to identify the account. If the answer includes pane, the mode becomes pane.

Until that answer arrives, the mode is popup. This is the behaviour most likely to surprise you: the check is asynchronous, so a book() call fired immediately on page load — before the visitor has had a chance to click anything — can still open a pop-up on a perfectly well-configured domain. In practice a real click always arrives long after the check has completed. If you open the checkout automatically, force the mode instead of relying on detection.

Forcing a mode

Set checkoutMode explicitly to skip detection entirely:

const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY', checkoutMode: 'popup' });

Or override it for a single booking:

entase.book('EVENT_ID', { checkoutMode: 'popup' });

Forcing 'pane' on a domain that is not a trusted origin does not grant permission — the panel opens, but the checkout inside it cannot communicate with your page. Use 'popup' as a deliberate choice, and leave 'auto' in place when you want inline checkout wherever it is allowed.

An unrecognized value is ignored and treated as 'auto'.

Reading and changing the mode at runtime

entase.getCheckoutMode();        // 'pane' or 'popup' — never 'auto'
entase.setCheckoutMode('popup'); // applies to every later book() call

getCheckoutMode() returns the resolved mode, so it reports what will actually happen. Setting the mode back to 'auto' re-runs detection.

Pop-up blockers

Browsers only allow window.open() during a user gesture. Call book() directly inside a click handler — not after an await, a fetch, or a setTimeout, by which point the gesture has expired and the pop-up is blocked.

// Blocked: the gesture is gone by the time book() runs.
button.addEventListener('click', async () => {
  const event = await fetch('/api/current-event').then(r => r.json());
  entase.book(event.id);
});

// Fine: resolve the id first, open on the click.
button.addEventListener('click', () => entase.book(button.dataset.eventId));

This affects pop-up mode only. Pane mode builds an element in the page and is not subject to it.