Afrekenmodi

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.

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:

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

Of overschrijf deze voor één boeking:

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

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.

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