# Checkout-Modi

> Wéi de Client tëscht dem inline Panel an enger Pop-up-Fënster wielt, firwat vertrauenswürdeg Originnen dat bestëmmen, a wat Dir bei der lokaler Entwécklung erwaarde kënnt.

De Checkout geet an engem vun zwou Modi op.

**Pane** ass en inline Panel, deen an Ärer Säit gerendert gëtt. Um Desktop rutscht en vu riets eran, begrenzt op `pane.width`; um Handy rutscht en vun ënnen erop. De Visiteur bleift op Ärem Site, an de Panel geet zou, wann hien Escape dréckt oder op dat ofgedäischtert Gebitt klickt.

**Popup** ass eng separat Browserfënster, déi am Zentrum vum Écran vum Visiteur ugewise gëtt. De Client iwwerwaacht, ob d'Fënster zougemaach gëtt, fir den Hannergrond ewechzehuelen.

## Inline-Checkout erfuerdert eng vertrauenswierdeg Origin

De Pane-Modus rendert den Entase-Checkout an engem iframe op Ärer Domain, dofir ass en nëmme fir Domainen erlaabt, déi Dir explizitt autoriséiert hutt. Füügt all Domain, déi de Checkout opmécht, bei **Vertrauenswierdeg Originnen** an den Astellungen → Integratiounen derbäi – kuckt [Integratiounen an Checkout-Adaptatioun](/organizers/settings/integrations-and-checkout-customization.md).

Ob de Präfix `www.` dobäi ass, ass wichteg. Wann Dir net sécher sidd, wéi eng Form Äre Site benotzt, füügt béid derbäi.

Wann Är Domain net an der Lëscht steet, funktionéiert de Checkout trotzdem – en geet einfach als Pop-up-Fënster op.

## Wéi `'auto'` opgeléist gëtt

Mat dem Standard `checkoutMode: 'auto'` decidéiert de Client an dëser Reiefolleg:

1. **Net HTTPS** → Pop-up. Inline-Checkout gëtt ni op enger onsécherer Säit benotzt.
2. **`localhost` oder `127.0.0.1`** → Pane, mat enger Warnung, déi an der Konsole protokolléiert gëtt. Dëst ass eng Erliichterung fir d'Entwécklung, fir datt Dir mam inline Layout entwéckele kënnt; et seet näischt doriwwer aus, ob Är Produktiouns-Domain erlaabt ass.
3. **Soss** → de Client freet Entase, ob dës Origin den inline Checkout benotze kann, a schéckt `pk`, fir de Kont z'identifizéieren. Wann d'Äntwert Pane enthält, gëtt de Modus Pane.

Bis dës Äntwert ukënnt, ass de Modus **Popup**. Dat ass dat Verhalen, dat Iech am warscheinlechsten iwwerrascht: d'Iwwerpréiwung ass asynchron, dofir kann en `book()`-Opruff, deen direkt beim Luede vun der Säit ausgeléist gëtt – ier de Visiteur d'Chance hat, op eppes ze klicken – nach ëmmer e Pop-up op enger perfekt konfiguréierter Domain opmaachen. An der Praxis kënnt e richtege Klick ëmmer eréischt laang nodeems d'Iwwerpréiwung ofgeschloss ass. Wann Dir de Checkout automatesch opmaacht, forcéiert de Modus amplaz Iech op d'Erkennung ze verloossen.

## E Modus forcéieren

Setzt `checkoutMode` explizitt, fir d'Erkennung komplett z'iwwersprangen:

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

Oder iwwerschreift en fir eng eenzel Buchung:

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

D'Forcéiere vu `'pane'` op enger Domain, déi keng vertrauenswierdeg Origin ass, gëtt keng Erlaabnis – de Panel geet op, awer de Checkout dran kann net mat Ärer Säit kommunizéieren. Benotzt `'popup'` als bewosst Wiel, a loosst `'auto'` stoen, wann Dir inline Checkout iwwerall do wëllt, wou en erlaabt ass.

En net erkannten Wäert gëtt ignoréiert a wéi `'auto'` behandelt.

## De Modus wärend der Lafzäit liesen an änneren

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

`getCheckoutMode()` gëtt de *opgeléiste* Modus zeréck, also weist et, wat tatsächlech geschitt. Wann Dir de Modus nees op `'auto'` setzt, gëtt d'Erkennung nei ausgefouert.

## Pop-up-Blockéierer

Browser erlaben `window.open()` nëmme wärend enger Benotzergeste. Rufft `book()` direkt an engem Klick-Handler op – net no engem `await`, engem `fetch` oder engem `setTimeout`, well bis dohinner d'Geste ofgelaf ass an de Pop-up blockéiert gëtt.

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

Dëst betrëfft nëmmen de Pop-up-Modus. De Pane-Modus baut en Element op der Säit op an ass deem net ënnerworf.