# チェックアウトを開く

> `book()` メソッドは1つのイベントのチェックアウトを開き、呼び出しごとのオーバーライドと、独自のシステムに引き継げるクライアントコンテキストを受け取ります。

`book()` はチェックアウトを開くメソッドです。クライアント上のその他すべては、これを設定するか、その動作を監視します。

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

`eventID` は販売する開催予定イベントの識別子です。イベントの共有コードおよび埋め込みコードで使用する id と同じものです。

呼び出しは直ちに戻ります – パネルまたはウィンドウを開き、訪問者が完了するのを待ちません。次に何が起こるかに対応するには、[イベント](/developers/js-client/events.md)を使用してください。

## オプション

| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| `checkoutMode` | string | インスタンス値 | この予約にのみ適用する `'pane'` または `'popup'`。 |
| `clientContext` | object | `null` | チェックアウトの準備が整った時点で渡される任意のデータ。以下を参照してください。 |
| `collectConsent` | boolean | インスタンス値 | 利用規約に関する通知への同意を訪問者に求めるかどうか。 |
| `backdrop` | boolean | インスタンス値 | チェックアウトの背後にあるページを暗くするかどうか。 |
| `backdropColor` | string | インスタンス値 | 暗くする領域の色。 |
| `pane` | object | インスタンス値 | インラインパネルの `{ width, height }`。 |
| `popup` | object | インスタンス値 | ポップアップウィンドウの `{ width, height }`。 |

指定しなかった項目には、インスタンスの作成時に設定した値が使用されます。そのため、呼び出しごとのオプションは置き換えではなく追加です。

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

## クライアントコンテキスト

`clientContext` は独自に設計するオブジェクトです。クライアントはチェックアウトから準備完了の通知を受けるまでこれを保持し、その後渡します。どのボタンがクリックされたか、訪問者がどのキャンペーンから到達したか、社内の顧客参照情報など、ページだけが把握している情報をチェックアウトセッションに引き継ぐために使用します。

コンテキストはイベント id ごとに保存されるため、同じページから2つの異なるイベントを予約しても、それぞれのコンテキストは分けて保持されます。

機密情報を入れないでください。これはブラウザを通じてチェックアウトに送信され、ページを調べる人なら誰でも確認できます。

## 1つのページから複数のイベントを開く

1つのインスタンスで任意の数のイベントを処理できます。一度だけ作成し、毎回異なる id を渡してください。

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

## クライアントを破棄した後

すでに破棄したインスタンスで `book()` を呼び出すと、コンソールにエラーが記録され、何も開きません。これは意図的な動作です – 破棄されたインスタンスはチェックアウトからのメッセージを受信しなくなるため、開いたウィンドウを閉じたり監視したりできません。代わりに新しいインスタンスを作成してください。

## チェックアウトを閉じる

チェックアウトは訪問者自身が閉じます。ペインモードでは Escape キーまたは暗くなった領域のクリック、ポップアップモードではウィンドウコントロールを使用します。予約が完了したときも、チェックアウトは自動的に閉じます。

コードから閉じるための公開メソッドはありません。閉じたタイミングを知る必要がある場合は、`checkout.closed` イベントを監視してください。