# Checkout-Modi

> Wie der Client zwischen dem eingebetteten Panel und einem Pop-up-Fenster wählt, warum vertrauenswürdige Origins darüber entscheiden und was bei der lokalen Entwicklung zu erwarten ist.

Der Checkout wird in einem von zwei Modi geöffnet.

**Pane** ist ein eingebettetes Panel, das innerhalb Ihrer Seite gerendert wird. Auf Desktop-Geräten fährt es von rechts ein und ist auf `pane.width` begrenzt; auf Mobilgeräten fährt es von unten hoch. Der Besucher bleibt auf Ihrer Website, und das Panel wird geschlossen, wenn er Escape drückt oder auf den abgedunkelten Bereich klickt.

**Popup** ist ein separates Browserfenster, das auf dem Bildschirm des Besuchers zentriert wird. Der Client überwacht, ob das Fenster geschlossen wird, damit er den Hintergrund entfernen kann.

## Eingebetteter Checkout erfordert eine vertrauenswürdige Origin

Der Pane-Modus rendert den Entase-Checkout in einem iframe auf Ihrer Domain und ist daher nur für Domains erlaubt, die Sie ausdrücklich autorisiert haben. Fügen Sie unter Einstellungen → Integrationen bei **Trusted origins** jede Domain hinzu, die den Checkout öffnet – siehe [Integrationen und Anpassung des Checkouts](/organizers/settings/integrations-and-checkout-customization.md).

Ob das Präfix `www.` enthalten ist, ist relevant. Wenn Sie nicht sicher sind, welche Variante Ihre Website bereitstellt, fügen Sie beide hinzu.

Wenn Ihre Domain nicht in der Liste steht, funktioniert der Checkout dennoch – er wird lediglich als Pop-up-Fenster geöffnet.

## So wird `'auto'` aufgelöst

Bei der Standardeinstellung `checkoutMode: 'auto'` entscheidet der Client in dieser Reihenfolge:

1. **Nicht HTTPS** → Pop-up. Auf einer unsicheren Seite wird der eingebettete Checkout nie verwendet.
2. **`localhost` oder `127.0.0.1`** → Pane, mit einer in der Konsole protokollierten Warnung. Dies erleichtert die Entwicklung mit dem eingebetteten Layout; es sagt nichts darüber aus, ob Ihre Produktionsdomain zulässig ist.
3. **Andernfalls** → Der Client fragt Entase, ob diese Origin den eingebetteten Checkout verwenden darf, und sendet zur Identifizierung des Kontos `pk`. Wenn die Antwort Pane enthält, wird der Modus zu Pane.

Bis diese Antwort eintrifft, ist der Modus **Popup**. Dieses Verhalten wird Sie vermutlich am ehesten überraschen: Die Prüfung erfolgt asynchron, sodass ein `book()`-Aufruf, der unmittelbar beim Laden der Seite ausgelöst wird – bevor der Besucher Gelegenheit hatte, etwas anzuklicken –, selbst auf einer perfekt konfigurierten Domain noch ein Pop-up öffnen kann. In der Praxis erfolgt ein echter Klick immer lange nach Abschluss der Prüfung. Wenn Sie den Checkout automatisch öffnen, erzwingen Sie den Modus, statt sich auf die Erkennung zu verlassen.

## Einen Modus erzwingen

Setzen Sie `checkoutMode` explizit, um die Erkennung vollständig zu überspringen:

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

Oder überschreiben Sie ihn für eine einzelne Buchung:

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

Das Erzwingen von `'pane'` auf einer Domain, die keine vertrauenswürdige Origin ist, erteilt keine Berechtigung – das Panel wird geöffnet, aber der darin enthaltene Checkout kann nicht mit Ihrer Seite kommunizieren. Verwenden Sie `'popup'` bewusst, und behalten Sie `'auto'` bei, wenn Sie den eingebetteten Checkout überall dort verwenden möchten, wo er erlaubt ist.

Ein nicht erkannter Wert wird ignoriert und als `'auto'` behandelt.

## Den Modus zur Laufzeit lesen und ändern

```js
entase.getCheckoutMode();        // 'pane' oder 'popup' – niemals 'auto'
entase.setCheckoutMode('popup'); // gilt für jeden späteren book()-Aufruf
```

`getCheckoutMode()` gibt den *aufgelösten* Modus zurück und zeigt daher an, was tatsächlich passieren wird. Wenn Sie den Modus wieder auf `'auto'` setzen, wird die Erkennung erneut ausgeführt.

## Pop-up-Blocker

Browser erlauben `window.open()` nur während einer Nutzerinteraktion. Rufen Sie `book()` direkt innerhalb eines Click-Handlers auf – nicht nach einem `await`, einem `fetch` oder einem `setTimeout`; zu diesem Zeitpunkt ist die Interaktion bereits abgelaufen und das Pop-up wird blockiert.

```js
// Blockiert: Die Nutzerinteraktion ist vorbei, wenn book() ausgeführt wird.
button.addEventListener('click', async () => {
  const event = await fetch('/api/current-event').then(r => r.json());
  entase.book(event.id);
});

// In Ordnung: Lösen Sie die ID zuerst auf und öffnen Sie beim Klick.
button.addEventListener('click', () => entase.book(button.dataset.eventId));
```

Dies betrifft nur den Pop-up-Modus. Der Pane-Modus erstellt ein Element auf der Seite und unterliegt dieser Einschränkung nicht.