# 開啟結帳頁

> `book()` 方法會開啟單一活動的結帳頁，並接受每次呼叫的覆寫設定，以及可一路傳遞至你自有系統的客戶端內容。

`book()` 是用來開啟結帳頁的方法。客戶端上的其他所有設定都是用來配置或監測它。

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

`eventID` 是要銷售的已排期活動識別碼。它與活動分享及嵌入程式碼中使用的 ID 相同。

此呼叫會立即返回 – 它會開啟面板或視窗，並不會等待訪客完成操作。使用 [事件](/developers/js-client/events.md) 回應接下來發生的情況。

## 選項

| 名稱 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| `checkoutMode` | 字串 | 實例值 | 僅限此次預訂使用 `'pane'` 或 `'popup'`。 |
| `clientContext` | 物件 | `null` | 結帳頁準備就緒後傳遞給它的任意資料。請參閱下文。 |
| `collectConsent` | 布林值 | 實例值 | 是否要求訪客接受條款通知。 |
| `backdrop` | 布林值 | 實例值 | 是否將結帳頁後方的頁面變暗。 |
| `backdropColor` | 字串 | 實例值 | 變暗區域的顏色。 |
| `pane` | 物件 | 實例值 | 內嵌面板的 `{ width, height }`。 |
| `popup` | 物件 | 實例值 | 彈出式視窗的 `{ width, height }`。 |

任何未提供的項目都會回退使用建立實例時設定的值，因此每次呼叫的選項是附加設定，而非一組替換設定。

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

## 客戶端內容

`clientContext` 是由你自行設計的物件。客戶端會保留它，直到結帳頁發出已準備就緒的訊號，然後再將它傳遞過去。你可以用它將只有你的頁面知道的資訊 – 例如點擊了哪個按鈕、訪客透過哪個活動來訪、內部客戶參考編號 – 傳遞至結帳工作階段。

內容會按活動 ID 分開儲存，因此從同一頁面預訂兩個不同活動時，兩者的內容會保持獨立。

請勿在其中放入任何敏感資料。它會透過瀏覽器傳送至結帳頁，任何檢查頁面的人都可以看到。

## 從同一頁面開啟多個活動

一個實例可處理任意數量的活動。只需建立一次，並在每次呼叫時傳入不同的 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` 事件。