# De checkout openen

> De methode book() opent de checkout voor één evenement en accepteert overschrijvingen per aanroep plus een clientcontext die u kunt doorgeven aan uw eigen systemen.

`book()` is de methode die de checkout opent. Al het andere op de client configureert of observeert deze.

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

`eventID` is de identificatiecode van het geplande evenement waarvoor u tickets wilt verkopen. Dit is dezelfde id die wordt gebruikt in de deel- en insluitcodes van uw evenement.

De aanroep retourneert onmiddellijk – deze opent het paneel of venster en wacht niet tot de bezoeker klaar is. Gebruik [gebeurtenissen](/developers/js-client/events.md) om te reageren op wat er daarna gebeurt.

## Opties

| Naam | Type | Standaard | Beschrijving |
|---|---|---|---|
| `checkoutMode` | string | instantiewaarde | `'pane'` of `'popup'` alleen voor deze boeking. |
| `clientContext` | object | `null` | Willekeurige gegevens die aan de checkout worden doorgegeven zodra deze klaar is. Zie hieronder. |
| `collectConsent` | boolean | instantiewaarde | Of de bezoeker gevraagd moet worden de kennisgeving over de voorwaarden te accepteren. |
| `backdrop` | boolean | instantiewaarde | Of de pagina achter de checkout gedimd moet worden. |
| `backdropColor` | string | instantiewaarde | Kleur van het gedimde gebied. |
| `pane` | object | instantiewaarde | `{ width, height }` voor het ingesloten paneel. |
| `popup` | object | instantiewaarde | `{ width, height }` voor het pop-upvenster. |

Alles wat u weglaat, valt terug op de waarde waarmee de instantie is aangemaakt. Opties per aanroep vormen dus een aanvulling en geen vervangende set.

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

## Clientcontext

`clientContext` is een object dat u zelf ontwerpt. De client bewaart het totdat de checkout aangeeft dat deze klaar is en geeft het dan door. Gebruik dit om informatie die alleen uw pagina kent – op welke knop is geklikt, via welke campagne een bezoeker is binnengekomen, een interne klantreferentie – mee te geven aan de checkout-sessie.

De context wordt per evenement-id opgeslagen, dus wanneer u twee verschillende evenementen vanaf dezelfde pagina boekt, blijven de contexten gescheiden.

Zet er geen gevoelige gegevens in. Deze worden via de browser naar de checkout verzonden en zijn zichtbaar voor iedereen die de pagina inspecteert.

## Meerdere evenementen vanaf één pagina openen

Eén instantie verwerkt een willekeurig aantal evenementen. Maak deze één keer aan en geef telkens een andere id door:

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

## Nadat de client is vernietigd

Als u `book()` aanroept op een instantie die u al hebt vernietigd, wordt er een fout in de console geregistreerd en wordt er niets geopend. Dit is bewust zo – een vernietigde instantie luistert niet langer naar berichten van de checkout, waardoor het venster dat deze opende niet kon worden gesloten of geobserveerd. Maak in plaats daarvan een nieuwe instantie aan.

## De checkout sluiten

De bezoeker sluit de checkout zelf: met Escape of door in pane-modus op het gedimde gebied te klikken, of met de vensterknoppen in pop-upmodus. De checkout sluit zichzelf ook wanneer een boeking is voltooid.

Er is geen openbare methode om deze vanuit uw code te sluiten. Als u moet weten wanneer deze is gesloten, luister dan naar de gebeurtenis `checkout.closed`.