開啟結帳頁 · JavaScript 用戶端

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

JavaScript

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

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

此呼叫會立即返回 – 它會開啟面板或視窗，並不會等待訪客完成操作。使用事件回應接下來發生的情況。

選項

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

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

JavaScript

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

客戶端內容

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

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

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

從同一頁面開啟多個活動

一個實例可處理任意數量的活動。只需建立一次，並在每次呼叫時傳入不同的 ID：

JavaScript

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 事件。