# Kassalägen

> Hur klienten väljer mellan den inbäddade panelen och ett popupfönster, varför betrodda ursprung avgör det och vad du kan förvänta dig under lokal utveckling.

Kassan öppnas i ett av två lägen.

**Panel** är en inbäddad panel som renderas på din sida. På datorer glider den in från höger, begränsad till `pane.width`; på mobiler glider den upp från botten. Besökaren stannar på din webbplats och panelen stängs när de trycker på Escape eller klickar på det nedtonade området.

**Popup** är ett separat webbläsarfönster som är centrerat på besökarens skärm. Klienten övervakar om fönstret stängs så att den kan ta bort bakgrunden.

## Inbäddad kassa kräver ett betrott ursprung

Panelläget renderar Entase-kassan i en iframe på din domän, så det är endast tillåtet för domäner som du uttryckligen har auktoriserat. Lägg till varje domän som öppnar kassan under **Betrodda ursprung** i Inställningar → Integrationer – se [Integrationer och anpassning av kassan](/organizers/settings/integrations-and-checkout-customization.md).

Det spelar roll om prefixet `www.` ingår. Om du inte är säker på vilken form din webbplats använder ska du lägga till båda.

Om din domän inte finns med i listan fungerar kassan ändå – den öppnas bara som ett popupfönster.

## Så fastställs `'auto'`

Med standardinställningen `checkoutMode: 'auto'` fattar klienten beslutet i följande ordning:

1. **Inte HTTPS** → popup. Inbäddad kassa används aldrig på en osäker sida.
2. **`localhost` eller `127.0.0.1`** → panel, med en varning som loggas i konsolen. Detta underlättar utveckling så att du kan bygga mot den inbäddade layouten; det säger inget om huruvida din produktionsdomän är tillåten.
3. **Annars** → klienten frågar Entase om detta ursprung får använda inbäddad kassa och skickar `pk` för att identifiera kontot. Om svaret omfattar panel blir läget panel.

Tills svaret kommer är läget **popup**. Detta är det beteende som mest sannolikt överraskar dig: kontrollen är asynkron, så ett anrop till `book()` som görs direkt när sidan laddas – innan besökaren har hunnit klicka på något – kan fortfarande öppna en popup på en helt korrekt konfigurerad domän. I praktiken sker ett riktigt klick alltid långt efter att kontrollen har slutförts. Om du öppnar kassan automatiskt ska du tvinga läget i stället för att förlita dig på identifieringen.

## Tvinga ett läge

Ange `checkoutMode` explicit för att helt hoppa över identifieringen:

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

Eller åsidosätt det för en enskild bokning:

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

Att tvinga `'pane'` på en domän som inte är ett betrott ursprung ger inte behörighet – panelen öppnas, men kassan inuti den kan inte kommunicera med din sida. Använd `'popup'` som ett medvetet val och behåll `'auto'` när du vill ha inbäddad kassa där det är tillåtet.

Ett okänt värde ignoreras och behandlas som `'auto'`.

## Läsa och ändra läget under körning

```js
entase.getCheckoutMode();        // 'pane' eller 'popup' – aldrig 'auto'
entase.setCheckoutMode('popup'); // gäller för varje senare book()-anrop
```

`getCheckoutMode()` returnerar det *fastställda* läget, så det rapporterar vad som faktiskt kommer att hända. Om läget återställs till `'auto'` körs identifieringen igen.

## Popupblockerare

Webbläsare tillåter endast `window.open()` under en användaråtgärd. Anropa `book()` direkt i en klickhanterare – inte efter ett `await`, ett `fetch` eller ett `setTimeout`; då har åtgärden redan upphört och popupen blockeras.

```js
// Blockeras: användaråtgärden har upphört när book() körs.
button.addEventListener('click', async () => {
  const event = await fetch('/api/current-event').then(r => r.json());
  entase.book(event.id);
});

// Fungerar: hämta först id:t, öppna vid klicket.
button.addEventListener('click', () => entase.book(button.dataset.eventId));
```

Detta påverkar endast popupläget. Panelläget skapar ett element på sidan och omfattas inte av det.