# Afrekenmodi

> Hoe de client kiest tussen het inline paneel en een pop-upvenster, waarom vertrouwde origins daarbij bepalend zijn en wat je kunt verwachten tijdens lokale ontwikkeling.

Het afrekenen wordt in een van twee modi geopend.

**Pane** is een inline paneel dat binnen je pagina wordt weergegeven. Op desktop schuift het vanaf rechts naar binnen, met een maximale breedte van `pane.width`; op mobiel schuift het vanaf de onderkant omhoog. De bezoeker blijft op je site en het paneel sluit wanneer diegene op Escape drukt of op het gedimde gebied klikt.

**Popup** is een afzonderlijk browservenster, gecentreerd op het scherm van de bezoeker. De client controleert of het venster wordt gesloten, zodat de achtergrond kan worden verwijderd.

## Inline afrekenen vereist een vertrouwde origin

De Pane-modus geeft het Entase-afrekenen weer in een iframe op je domein en is daarom alleen toegestaan voor domeinen die je expliciet hebt geautoriseerd. Voeg elk domein dat het afrekenen opent toe aan **Trusted origins** in Instellingen → Integraties – zie [Integraties en aanpassing van het afrekenen](/organizers/settings/integrations-and-checkout-customization.md).

Of het voorvoegsel `www.` is opgenomen, is van belang. Als je niet zeker weet welke vorm je site gebruikt, voeg dan beide toe.

Als je domein niet in de lijst staat, werkt het afrekenen nog steeds – het wordt dan alleen als pop-upvenster geopend.

## Hoe `'auto'` wordt bepaald

Met de standaardinstelling `checkoutMode: 'auto'` beslist de client in deze volgorde:

1. **Geen HTTPS** → pop-up. Inline afrekenen wordt nooit gebruikt op een onbeveiligde pagina.
2. **`localhost` of `127.0.0.1`** → pane, met een waarschuwing in de console. Dit is een gemak voor ontwikkeling, zodat je kunt bouwen met de inline lay-out; het zegt niets over de vraag of je productiedomein is toegestaan.
3. **Anders** → de client vraagt Entase of deze origin inline afrekenen mag gebruiken en stuurt `pk` mee om het account te identificeren. Als het antwoord pane bevat, wordt de modus pane.

Totdat dat antwoord binnenkomt, is de modus **popup**. Dit gedrag zal je waarschijnlijk het meest verrassen: de controle is asynchroon, dus een `book()`-aanroep die direct bij het laden van de pagina wordt uitgevoerd – voordat de bezoeker de kans heeft gehad om ergens op te klikken – kan nog steeds een pop-up openen op een perfect geconfigureerd domein. In de praktijk komt een echte klik altijd pas lang nadat de controle is voltooid. Als je het afrekenen automatisch opent, forceer dan de modus in plaats van op detectie te vertrouwen.

## Een modus forceren

Stel `checkoutMode` expliciet in om detectie volledig over te slaan:

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

Of overschrijf deze voor één boeking:

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

Het forceren van `'pane'` op een domein dat geen vertrouwde origin is, verleent geen toestemming – het paneel wordt geopend, maar het afrekenen daarin kan niet met je pagina communiceren. Gebruik `'popup'` als bewuste keuze en laat `'auto'` staan wanneer je inline afrekenen wilt gebruiken waar dat is toegestaan.

Een niet-herkende waarde wordt genegeerd en behandeld als `'auto'`.

## De modus tijdens runtime uitlezen en wijzigen

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

`getCheckoutMode()` retourneert de *bepaalde* modus en meldt dus wat er daadwerkelijk zal gebeuren. Door de modus terug te zetten naar `'auto'` wordt de detectie opnieuw uitgevoerd.

## Pop-upblokkeerders

Browsers staan `window.open()` alleen toe tijdens een gebruikersactie. Roep `book()` rechtstreeks aan in een click-handler – niet na een `await`, een `fetch` of een `setTimeout`; dan is de actie inmiddels verlopen en wordt de pop-up geblokkeerd.

```js
// 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));
```

Dit heeft alleen invloed op de pop-upmodus. De Pane-modus maakt een element op de pagina en valt hier niet onder.