# Abrir el proceso de compra

> El método book() abre el proceso de compra para un evento y acepta anulaciones por llamada, además de un contexto de cliente que puedes trasladar a tus propios sistemas.

`book()` es el método que abre el proceso de compra. Todo lo demás en el cliente lo configura o lo supervisa.

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

`eventID` es el identificador del evento programado que se va a vender. Es el mismo id que se utiliza en los códigos para compartir e insertar de tu evento.

La llamada devuelve el control inmediatamente – abre el panel o la ventana y no espera a que el visitante termine. Usa [eventos](/developers/js-client/events.md) para reaccionar a lo que ocurra después.

## Opciones

| Nombre | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| `checkoutMode` | cadena | valor de la instancia | `'pane'` o `'popup'` solo para esta reserva. |
| `clientContext` | objeto | `null` | Datos arbitrarios que se entregan al proceso de compra cuando está listo. Consulta más abajo. |
| `collectConsent` | booleano | valor de la instancia | Si se debe pedir al visitante que acepte el aviso de condiciones. |
| `backdrop` | booleano | valor de la instancia | Si se debe atenuar la página detrás del proceso de compra. |
| `backdropColor` | cadena | valor de la instancia | Color del área atenuada. |
| `pane` | objeto | valor de la instancia | `{ width, height }` para el panel integrado. |
| `popup` | objeto | valor de la instancia | `{ width, height }` para la ventana emergente. |

Todo lo que omitas recurrirá al valor con el que se creó la instancia, por lo que las opciones por llamada se añaden en lugar de constituir un conjunto de reemplazo.

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

## Contexto de cliente

`clientContext` es un objeto diseñado por ti. El cliente lo conserva hasta que el proceso de compra indica que está listo y entonces lo entrega. Úsalo para trasladar información que solo conoce tu página – qué botón se pulsó, a qué campaña llegó un visitante, una referencia interna de cliente – a la sesión del proceso de compra.

El contexto se almacena por id de evento, por lo que reservar dos eventos distintos desde la misma página mantiene sus contextos separados.

No incluyas información confidencial. Se transmite al proceso de compra a través del navegador y es visible para cualquiera que inspeccione la página.

## Abrir varios eventos desde una misma página

Una instancia gestiona cualquier número de eventos. Créala una vez y pasa un id distinto cada vez:

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

## Después de destruir el cliente

Llamar a `book()` en una instancia que ya has destruido registra un error en la consola y no abre nada. Esto es deliberado – una instancia destruida deja de escuchar mensajes del proceso de compra, por lo que la ventana que abrió no podría cerrarse ni supervisarse. Crea una instancia nueva en su lugar.

## Cerrar el proceso de compra

El visitante cierra el proceso de compra por sí mismo: con Escape o haciendo clic en el área atenuada en el modo panel, o con los controles de la ventana en el modo emergente. El proceso de compra también se cierra cuando se completa una reserva.

No existe ningún método público para cerrarlo desde tu código. Si necesitas saber cuándo se cerró, escucha el evento `checkout.closed`.