Checkout-Modi

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.

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:

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

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

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

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.

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