# 概要

> Entase JavaScriptクライアントを使用すると、訪問者を別のページへ移動させることなく、ご自身のウェブサイト上でチェックアウトをインラインパネルまたはポップアップウィンドウとして開くことができます。

Entase JavaScriptクライアントは、当社のCDNから読み込む小さなライブラリです。これにより、ウェブサイト単体ではできないことを1つ実現できます。つまり、**その場でEntaseチェックアウトを開く**ことで、訪問者は現在表示しているページを離れずにチケットを購入できます。

このクライアントは、パネルまたはポップアップウィンドウ、背景オーバーレイ、ページスクロールのロック、同意のステップ、ロケール、トラッキングパラメータを処理します。チェックアウトを開く*タイミング*と、*どのイベントに対して*開くかは、ご自身のコードで決めます。

## これは何ではないか

クライアントはイベント一覧、日程、価格、空き状況を表示しません。プログラムを表示する既製のウィジェットが必要な場合は、代わりに埋め込みコードを使用してください。埋め込みコードはコピー＆ペーストで使え、開発作業は不要です。[ウェブサイトにイベントを埋め込む](/organizers/sharing-and-embedding/embedding-events-on-your-website.md)を参照してください。

ただし、この2つは代替手段ではありません。埋め込みウィジェットは、そのチェックアウトを開くために内部でこの同じクライアントを読み込みます。そのため、埋め込み設定を通じてクライアントオプションを渡すことができます。[高度な埋め込みオプション](/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>
```

これで統合は完了です。このセクションの残りはすべて、どのオプションがあるか、チェックアウトがパネルとポップアップのどちらを選ぶか、どのイベントをリッスンできるかといった詳細の調整です。

## 2つのチェックアウトモード

チェックアウトは次の2通りの方法で開きます。

- **ペイン** – ページ内に表示されるインラインパネルです。デスクトップでは右から、モバイルでは下からスライドインします。訪問者がサイトを離れることはありません。
- **ポップアップ** – 独立したブラウザウィンドウです。

ペインモードの方が優れた体験を提供しますが、Entase設定で信頼できるオリジンとして追加したドメインでのみ利用できます。クライアントは使用を許可されている方法を検出し、インラインチェックアウトが許可されていない場合はポップアップにフォールバックします。これは統合前に理解しておくべき最も重要な動作です。詳しくは[チェックアウトモード](/developers/js-client/checkout-modes.md)を参照してください。

## 要件

- **HTTPS** で配信されるページ。通常のHTTPでは、クライアントは常にポップアップを使用します。
- インラインチェックアウトを利用する場合は、Settings → Integrationsでドメインを**信頼できるオリジン**に追加します。[統合とチェックアウトのカスタマイズ](/organizers/settings/integrations-and-checkout-customization.md)を参照してください。
- ビルドステップ、バンドラー、パッケージマネージャーは不要です。ライブラリは単一のスクリプトタグです。

## 次のステップ

- [クライアントをインストールする](/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) – チェックアウトの開始、終了、完了に反応する方法。