チェックアウトを開く · JavaScriptクライアント

book() はチェックアウトを開くメソッドです。クライアント上のその他すべては、これを設定するか、その動作を監視します。

JavaScript

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

eventID は販売する開催予定イベントの識別子です。イベントの共有コードおよび埋め込みコードで使用する id と同じものです。

呼び出しは直ちに戻ります – パネルまたはウィンドウを開き、訪問者が完了するのを待ちません。次に何が起こるかに対応するには、イベントを使用してください。

オプション

名前	型	デフォルト	説明
`checkoutMode`	string	インスタンス値	この予約にのみ適用する `'pane'` または `'popup'`。
`clientContext`	object	`null`	チェックアウトの準備が整った時点で渡される任意のデータ。以下を参照してください。
`collectConsent`	boolean	インスタンス値	利用規約に関する通知への同意を訪問者に求めるかどうか。
`backdrop`	boolean	インスタンス値	チェックアウトの背後にあるページを暗くするかどうか。
`backdropColor`	string	インスタンス値	暗くする領域の色。
`pane`	object	インスタンス値	インラインパネルの `{ width, height }`。
`popup`	object	インスタンス値	ポップアップウィンドウの `{ width, height }`。

指定しなかった項目には、インスタンスの作成時に設定した値が使用されます。そのため、呼び出しごとのオプションは置き換えではなく追加です。

JavaScript

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

クライアントコンテキスト

clientContext は独自に設計するオブジェクトです。クライアントはチェックアウトから準備完了の通知を受けるまでこれを保持し、その後渡します。どのボタンがクリックされたか、訪問者がどのキャンペーンから到達したか、社内の顧客参照情報など、ページだけが把握している情報をチェックアウトセッションに引き継ぐために使用します。

コンテキストはイベント id ごとに保存されるため、同じページから2つの異なるイベントを予約しても、それぞれのコンテキストは分けて保持されます。

機密情報を入れないでください。これはブラウザを通じてチェックアウトに送信され、ページを調べる人なら誰でも確認できます。

1つのページから複数のイベントを開く

1つのインスタンスで任意の数のイベントを処理できます。一度だけ作成し、毎回異なる 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 イベントを監視してください。