# Otwieranie checkoutu

> Metoda book() otwiera checkout dla jednego wydarzenia i przyjmuje nadpisania dla pojedynczego wywołania oraz kontekst klienta, który możesz przekazać dalej do własnych systemów.

`book()` to metoda otwierająca checkout. Wszystko inne po stronie klienta go konfiguruje lub monitoruje.

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

`eventID` to identyfikator zaplanowanego wydarzenia, na które mają być sprzedawane bilety. Jest to ten sam identyfikator, który jest używany w kodach udostępniania i osadzania wydarzenia.

Wywołanie zwraca wynik natychmiast – otwiera panel lub okno i nie czeka na zakończenie procesu przez odwiedzającego. Użyj [zdarzeń](/developers/js-client/events.md), aby reagować na to, co wydarzy się dalej.

## Opcje

| Nazwa | Typ | Wartość domyślna | Opis |
|---|---|---|---|
| `checkoutMode` | string | wartość instancji | `'pane'` lub `'popup'` tylko dla tej rezerwacji. |
| `clientContext` | object | `null` | Dowolne dane przekazywane do checkoutu, gdy będzie gotowy. Zobacz poniżej. |
| `collectConsent` | boolean | wartość instancji | Czy poprosić odwiedzającego o zaakceptowanie komunikatu o warunkach. |
| `backdrop` | boolean | wartość instancji | Czy przyciemnić stronę za checkoutem. |
| `backdropColor` | string | wartość instancji | Kolor przyciemnionego obszaru. |
| `pane` | object | wartość instancji | `{ width, height }` dla panelu osadzonego na stronie. |
| `popup` | object | wartość instancji | `{ width, height }` dla wyskakującego okna. |

Wszystko, co pominiesz, użyje wartości, z którą utworzono instancję, więc opcje dla pojedynczego wywołania są dodatkami, a nie pełnym zestawem zastępującym ustawienia.

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

## Kontekst klienta

`clientContext` to obiekt zaprojektowany przez Ciebie. Klient przechowuje go, dopóki checkout nie zasygnalizuje gotowości, a następnie go przekazuje. Użyj go do przekazywania do sesji checkoutu informacji, które zna tylko Twoja strona – który przycisk został kliknięty, z jakiej kampanii przyszedł odwiedzający, wewnętrznego identyfikatora klienta.

Kontekst jest przechowywany osobno dla każdego identyfikatora wydarzenia, więc rezerwowanie dwóch różnych wydarzeń z tej samej strony zachowuje ich konteksty oddzielnie.

Nie umieszczaj w nim żadnych poufnych danych. Jest przekazywany do checkoutu przez przeglądarkę i widoczny dla każdego, kto sprawdza stronę.

## Otwieranie kilku wydarzeń z jednej strony

Jedna instancja obsługuje dowolną liczbę wydarzeń. Utwórz ją raz i za każdym razem przekaż inny identyfikator:

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

## Po zniszczeniu klienta

Wywołanie `book()` na instancji, którą już zniszczono, zapisuje błąd w konsoli i niczego nie otwiera. Jest to celowe – zniszczona instancja nie nasłuchuje już komunikatów z checkoutu, więc otwarte przez nią okno nie mogłoby zostać zamknięte ani monitorowane. Zamiast tego utwórz nową instancję.

## Zamykanie checkoutu

Odwiedzający sam zamyka checkout: klawiszem Escape lub kliknięciem przyciemnionego obszaru w trybie panelu, a w trybie wyskakującego okna – za pomocą kontrolek okna. Checkout zamyka się również sam po zakończeniu rezerwacji.

Nie ma publicznej metody umożliwiającej zamknięcie go z poziomu kodu. Jeśli chcesz wiedzieć, kiedy został zamknięty, nasłuchuj zdarzenia `checkout.closed`.