クライアントをインストールする · JavaScriptクライアント

クライアントは、単一ファイルとして Entase CDN から配信されます。npm パッケージも、ビルドするバンドルも、最新の状態に保つ依存関係もありません – 常に最新版を利用できます。

HTML

<script src="https://js.entase.com/client.js"></script>

スクリプトを読み込むと、グローバルな Entase クラスが定義されます。それだけでは他に何も行いません。ネットワークリクエスト、DOM の変更、レンダリングはいずれも発生しません。インスタンスを作成すると、すべてが始まります。

インスタンスを作成する

JavaScript

const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' });

ページごとに 1 つのインスタンスを作成し、すべてのイベントで再利用してください。コンストラクタは window に message リスナーを登録し、ドメインで使用が許可されているチェックアウトモードの検出を開始します。そのため、複数のインスタンスを作成すると、メリットがないにもかかわらずリスナーと検出呼び出しが重複します。

すべてのオプションにはデフォルト値があるため、引数なしの new Entase() も有効です – ただし、pk がなければクライアントはドメインでインラインチェックアウトを使用できるか確認できず、常にポップアップウィンドウにフォールバックします。チェックアウトモードを参照してください。

スクリプトを非同期で読み込む

async または defer を使用して client.js を読み込む場合、インラインスクリプトの実行時にはクラスがまだ存在しません。ライブラリは読み込み完了後に window で entase:ready イベントを発行するため、それを待機してください。

HTML

<script src="https://js.entase.com/client.js" async></script>
<script>
  let entase = null;

  const init = () => { entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' }); };

  if (typeof Entase !== 'undefined') init();
  else window.addEventListener('entase:ready', init);
</script>

最初に typeof チェックを行うことが重要です。スクリプトの読み込みがすでに完了している場合、entase:ready はすでに発行されており、それをリッスンすると永遠に待機することになります。

クリーンアップ

シングルページアプリケーションでは、インスタンスを所有するビューがアンマウントされるときに destroy() を呼び出します。

JavaScript

entase.destroy();

これにより、クライアントが登録した window リスナーが削除されます。破棄されたインスタンスは再利用できません – そのインスタンスで book() を呼び出すとエラーがログに記録され、何も実行されません。代わりに新しいインスタンスを作成してください。

Content Security Policy

サイトが Content-Security-Policy ヘッダーを送信する場合、チェックアウトには次の設定が必要です。

script-src https://js.entase.com – ライブラリを読み込むため。
frame-src https://www.entase.com – ペインモードでは、チェックアウトは iframe 内にレンダリングされます。
connect-src https://www.entase.com – クライアントは、許可されたチェックアウトモードを判定するために Entase API を呼び出します。

frame-src がない場合、ペインモードでは空のパネルが表示されます。connect-src がない場合、モード検出に失敗し、すべてのチェックアウトがポップアップとして開きます。