# 概覽

> Entase JavaScript 用戶端可從你的網站開啟結帳流程，並以內嵌面板或彈出式視窗顯示，無需將訪客帶往其他頁面。

Entase JavaScript 用戶端是一個從我們 CDN 載入的小型程式庫。它讓你的網站能夠完成一項原本無法自行完成的工作：**就地開啟 Entase 結帳流程**，讓訪客無需離開目前所在頁面即可購買門票。

它會處理面板或彈出式視窗、背景遮罩、頁面捲動鎖定、同意步驟、語言地區設定及追蹤參數。你的程式碼決定*何時*開啟結帳流程，以及*為哪個活動*開啟。

## 它不是甚麼

用戶端不會顯示活動列表、日期、價格或供應情況。如想使用可顯示節目的現成小工具，請改用嵌入程式碼 – 只需複製及貼上，無需進行開發工作。請參閱[在網站上嵌入活動](/organizers/sharing-and-embedding/embedding-events-on-your-website.md)。

不過，兩者並非互相替代。嵌入式小工具會在底層載入這個相同的用戶端來開啟其結帳流程，因此你可以透過嵌入設定傳遞用戶端選項。請參閱[進階嵌入選項](/developers/js-client/embed-advanced-options.md)。

## 何時使用

如你擁有自己的活動頁面，並希望自己的「購買門票」按鈕開啟 Entase 結帳流程，請直接使用用戶端：

```html
<button id="buy">Buy tickets</button>

<script src="https://js.entase.com/client.js"></script>
<script>
  const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' });
  document.getElementById('buy').addEventListener('click', () => {
    entase.book('EVENT_ID');
  });
</script>
```

這就是整個整合流程。本節其餘內容均屬細節調整：有哪些選項、結帳流程如何決定使用面板還是彈出式視窗，以及你可以監聽哪些事件。

## 兩種結帳模式

結帳流程會以下列其中一種方式開啟：

- **面板** – 頁面內的嵌入式面板，在桌面裝置從右側滑入，在流動裝置則從底部滑入。訪客無需離開你的網站。
- **彈出式視窗** – 獨立的瀏覽器視窗。

面板模式提供較佳體驗，但只適用於你已在 Entase 設定中新增為受信任來源的網域。用戶端會偵測可使用哪一種模式，並在不允許內嵌結帳時改用彈出式視窗。這是在整合前最重要的行為之一 – 請參閱[結帳模式](/developers/js-client/checkout-modes.md)。

## 要求

- 透過 **HTTPS** 提供的頁面。在一般 HTTP 上，用戶端一律使用彈出式視窗。
- 如想使用內嵌結帳，請在「設定」→「整合」中將你的網域新增至**受信任來源**。請參閱[整合與結帳自訂](/organizers/settings/integrations-and-checkout-customization.md)。
- 無需建置步驟、打包工具或套件管理器。此程式庫只是一個 script 標籤。

## 下一步

- [安裝用戶端](/developers/js-client/installing-the-client.md) – 載入指令碼及建立執行個體。
- [建構函式選項](/developers/js-client/constructor-options.md) – 所有選項及其預設值。
- [開啟結帳流程](/developers/js-client/opening-the-checkout.md) – `book()` 方法及每次呼叫時的覆寫設定。
- [事件](/developers/js-client/events.md) – 回應結帳流程的開啟、關閉及完成。