# De Checkout opmaachen

> D'Method `book()` mécht de Checkout fir een Event op a akzeptéiert Iwwerschreiwunge pro Opruff souwéi e Client-Kontext, deen Dir an Är eege Systemer weiderginn kënnt.

`book()` ass d'Method, déi de Checkout opmécht. Alles anescht um Client konfiguréiert oder observéiert en.

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

`eventID` ass den Identifizéierer vum geplangten Event, fir deen Tickete verkaaft solle ginn. Et ass déiselwecht ID, déi an den Deelen- an Embed-Codë vun Ärem Event benotzt gëtt.

Den Opruff kënnt direkt zeréck – e mécht de Panel oder d'Fënster op a waart net, bis de Visiteur fäerdeg ass. Benotzt [Eventer](/developers/js-client/events.md), fir op dat ze reagéieren, wat duerno geschitt.

## Optiounen

| Numm | Typ | Standard | Beschreiwung |
|---|---|---|---|
| `checkoutMode` | string | Instanzwäert | `'pane'` oder `'popup'` nëmme fir dës Buchung. |
| `clientContext` | object | `null` | Belibeg Donnéeën, déi un de Checkout weidergi ginn, soubal en bereet ass. Kuckt hei drënner. |
| `collectConsent` | boolean | Instanzwäert | Ob de Visiteur gefrot soll ginn, den Hiweis zu de Bedéngungen ze akzeptéieren. |
| `backdrop` | boolean | Instanzwäert | Ob d'Säit hannert dem Checkout ofgedonkelt soll ginn. |
| `backdropColor` | string | Instanzwäert | Faarf vum ofgedonkelte Beräich. |
| `pane` | object | Instanzwäert | `{ width, height }` fir den inline Panel. |
| `popup` | object | Instanzwäert | `{ width, height }` fir d'Pop-up-Fënster. |

Alles, wat Dir ewechloosst, fält op de Wäert zeréck, mat deem d'Instanz erstallt gouf. Dofir ergänzen d'Optiounen pro Opruff sech, amplaz e kompletten Ersatzset ze sinn.

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

## Client-Kontext

`clientContext` ass en Objet no Ärem eegene Konzept. De Client behält en, bis de Checkout signaliséiert, datt en bereet ass, a gëtt en dann weider. Benotzt en, fir Informatiounen, déi nëmmen Är Säit kennt – op wéi ee Knäppche geklickt gouf, iwwer wéi eng Campagne e Visiteur komm ass, eng intern Clientreferenz – an d'Checkout-Sessioun weiderzeginn.

De Kontext gëtt pro Event-ID gespäichert, soudatt bei der Buchung vun zwou verschiddenen Eventer vun derselwechter Säit hir Kontexter getrennt bleiwen.

Setzt keng sensibel Informatiounen dran. Si ginn duerch de Browser un de Checkout iwwerdroen a si fir jidderee siichtbar, deen d'Säit ënnersicht.

## Verschidden Eventer vun enger Säit opmaachen

Eng Instanz kann eng belibeg Zuel vun Eventer behandelen. Erstellt se eemol a gitt all Kéier eng aner ID weider:

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

## Nodeems de Client zerstéiert gouf

Wann Dir `book()` op enger Instanz oprufft, déi Dir schonn zerstéiert hutt, gëtt e Feeler an der Konsole protokolléiert an et geet näischt op. Dat ass bewosst esou – eng zerstéiert Instanz lauschtert net méi op Messagë vum Checkout, dofir kéint d'Fënster, déi si opgemaach huet, weder zougemaach nach observéiert ginn. Erstellt amplaz eng nei Instanz.

## De Checkout zoumaachen

De Visiteur mécht de Checkout selwer zou: mat der Escape-Tast oder duerch e Klick op den ofgedonkelte Beräich am Pane-Modus, respektiv iwwer d'Fënsterkontrollen am Pop-up-Modus. De Checkout mécht sech och selwer zou, wann eng Buchung ofgeschloss ass.

Et gëtt keng ëffentlech Method, fir en aus Ärem Code zouzemaachen. Wann Dir wësse musst, wéini en zougemaach gouf, lauschtert op d'Evenement `checkout.closed`.