# Ouverture du checkout

> La méthode book() ouvre le checkout pour un événement et accepte des remplacements propres à chaque appel, ainsi qu’un contexte client que vous pouvez transmettre à vos propres systèmes.

`book()` est la méthode qui ouvre le checkout. Tout le reste sur le client le configure ou l’observe.

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

`eventID` est l’identifiant de l’événement programmé à vendre. Il s’agit du même identifiant que celui utilisé dans les codes de partage et d’intégration de votre événement.

L’appel renvoie immédiatement – il ouvre le panneau ou la fenêtre et n’attend pas que le visiteur ait terminé. Utilisez les [événements](/developers/js-client/events.md) pour réagir à ce qui se passe ensuite.

## Options

| Nom | Type | Par défaut | Description |
|---|---|---|---|
| `checkoutMode` | chaîne | valeur de l’instance | `'pane'` ou `'popup'` pour cette réservation uniquement. |
| `clientContext` | objet | `null` | Données arbitraires transmises au checkout une fois qu’il est prêt. Voir ci-dessous. |
| `collectConsent` | booléen | valeur de l’instance | Indique s’il faut demander au visiteur d’accepter l’avis relatif aux conditions. |
| `backdrop` | booléen | valeur de l’instance | Indique s’il faut assombrir la page derrière le checkout. |
| `backdropColor` | chaîne | valeur de l’instance | Couleur de la zone assombrie. |
| `pane` | objet | valeur de l’instance | `{ width, height }` pour le panneau intégré. |
| `popup` | objet | valeur de l’instance | `{ width, height }` pour la fenêtre contextuelle. |

Tout élément omis reprend la valeur avec laquelle l’instance a été construite. Les options propres à chaque appel s’ajoutent donc aux options existantes au lieu de les remplacer.

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

## Contexte client

`clientContext` est un objet que vous concevez vous-même. Le client le conserve jusqu’à ce que le checkout indique qu’il est prêt, puis le lui transmet. Utilisez-le pour transmettre à la session de checkout des informations que seule votre page connaît – le bouton qui a été cliqué, la campagne par laquelle un visiteur est arrivé, une référence client interne.

Le contexte est stocké par identifiant d’événement. Ainsi, réserver deux événements différents depuis la même page conserve leurs contextes distincts.

N’y mettez aucune information sensible. Il est transmis au checkout via le navigateur et est visible par toute personne inspectant la page.

## Ouvrir plusieurs événements depuis une même page

Une instance gère autant d’événements que nécessaire. Créez-la une seule fois et transmettez un identifiant différent à chaque appel :

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

## Après la destruction du client

Appeler `book()` sur une instance que vous avez déjà détruite consigne une erreur dans la console et n’ouvre rien. C’est intentionnel – une instance détruite n’écoute plus les messages du checkout, donc la fenêtre qu’elle a ouverte ne pourrait ni être fermée ni être observée. Créez plutôt une nouvelle instance.

## Fermer le checkout

Le visiteur ferme lui-même le checkout : avec la touche Échap ou en cliquant sur la zone assombrie en mode panneau, ou à l’aide des commandes de la fenêtre en mode contextuel. Le checkout se ferme également de lui-même lorsqu’une réservation est finalisée.

Il n’existe aucune méthode publique pour le fermer depuis votre code. Si vous devez savoir quand il s’est fermé, écoutez l’événement `checkout.closed`.