# Öppna kassan

> Metoden book() öppnar kassan för ett evenemang och accepterar åsidosättningar per anrop samt ett klientkontext som du kan föra vidare till dina egna system.

`book()` är metoden som öppnar kassan. Allt annat på klienten konfigurerar eller övervakar den.

```js
entase.book(eventID);
entase.book(eventID, options);
```

`eventID` är identifieraren för det schemalagda evenemang som ska säljas. Det är samma id som används i evenemangets delnings- och inbäddningskoder.

Anropet returnerar omedelbart – det öppnar panelen eller fönstret och väntar inte på att besökaren ska bli klar. Använd [händelser](/developers/js-client/events.md) för att reagera på vad som händer härnäst.

## Alternativ

| Namn | Typ | Standard | Beskrivning |
|---|---|---|---|
| `checkoutMode` | sträng | instansvärde | `'pane'` eller `'popup'` endast för denna bokning. |
| `clientContext` | objekt | `null` | Godtyckliga data som lämnas till kassan när den är redo. Se nedan. |
| `collectConsent` | boolesk | instansvärde | Om besökaren ska ombes acceptera meddelandet om villkor. |
| `backdrop` | boolesk | instansvärde | Om sidan bakom kassan ska tonas ned. |
| `backdropColor` | sträng | instansvärde | Färgen på det nedtonade området. |
| `pane` | objekt | instansvärde | `{ width, height }` för den inbäddade panelen. |
| `popup` | objekt | instansvärde | `{ width, height }` för popupfönstret. |

Allt du utelämnar återgår till det värde som instansen skapades med, så alternativ per anrop kompletterar i stället för att ersätta en uppsättning.

```js
entase.book('EVENT_ID', {
  pane: { width: '60vw' },
  backdrop: false,
  clientContext: { source: 'homepage-hero' }
});
```

## Klientkontext

`clientContext` är ett objekt som du själv utformar. Klienten behåller det tills kassan signalerar att den är redo och lämnar sedan över det. Använd det för att föra information som bara din sida känner till – vilken knapp som klickades på, vilken kampanj en besökare kom via, en intern kundreferens – vidare till kassasessionen.

Kontexten lagras per evenemangs-id, så om du bokar två olika evenemang från samma sida hålls deras kontexter separata.

Lägg inte in något känsligt i den. Den skickas till kassan via webbläsaren och är synlig för alla som inspekterar sidan.

## Öppna flera evenemang från en sida

En instans hanterar valfritt antal evenemang. Skapa den en gång och skicka ett annat id varje gång:

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

document.querySelectorAll('[data-event-id]').forEach(button => {
  button.addEventListener('click', () => {
    entase.book(button.dataset.eventId, {
      clientContext: { source: button.dataset.source }
    });
  });
});
```

## Efter att klienten har förstörts

Om du anropar `book()` på en instans som du redan har förstört loggas ett fel i konsolen och inget öppnas. Detta är avsiktligt – en förstörd instans lyssnar inte längre efter meddelanden från kassan, så fönstret som den öppnade kunde inte stängas eller övervakas. Skapa i stället en ny instans.

## Stänga kassan

Besökaren stänger kassan själv: med Escape eller genom att klicka på det nedtonade området i panelläget, eller med fönsterkontrollerna i popupläget. Kassan stängs också automatiskt när en bokning slutförs.

Det finns ingen offentlig metod för att stänga den från din kod. Om du behöver veta när den stängdes, lyssna efter händelsen `checkout.closed`.