チェックアウトモード

チェックアウトは、2 つのモードのいずれかで開きます。

ペインは、ページ内にレンダリングされるインラインパネルです。デスクトップでは右側からスライドインし、最大幅は pane.width です。モバイルでは下部からスライドアップします。訪問者はサイト内にとどまり、Escape キーを押すか、暗く表示された領域をクリックするとパネルが閉じます。

ポップアップは、訪問者の画面中央に表示される独立したブラウザウィンドウです。クライアントはウィンドウが閉じられたことを検知し、背景オーバーレイを解除します。

インラインチェックアウトには信頼済みオリジンが必要です

ペインモードでは、Entase のチェックアウトがあなたのドメイン上の iframe でレンダリングされるため、明示的に許可したドメインでのみ使用できます。チェックアウトを開くすべてのドメインを、設定 → 連携の 信頼済みオリジンに追加してください – 詳しくは連携とチェックアウトのカスタマイズを参照してください。

www. プレフィックスを含めるかどうかは重要です。サイトがどちらの形式で配信されているかわからない場合は、両方を追加してください。

ドメインがリストにない場合でも、チェックアウトは動作します – ポップアップウィンドウとして開くだけです。

'auto' の解決方法

デフォルトの checkoutMode: 'auto' では、クライアントは次の順序で判断します。

1. HTTPS ではない → ポップアップ。安全でないページでインラインチェックアウトが使用されることはありません。
2. localhost または 127.0.0.1 → ペイン。警告がコンソールに記録されます。これはインラインレイアウトで開発できるようにするための便宜的な措置であり、本番ドメインが許可されているかどうかとは関係ありません。
3. それ以外 → クライアントは、pk を送信してアカウントを識別し、このオリジンでインラインチェックアウトを使用できるかどうかを Entase に問い合わせます。応答にペインが含まれている場合、モードはペインになります。

その応答が届くまでは、モードは ポップアップです。これは最も意外に感じられる可能性が高い動作です。チェックは非同期で行われるため、ページ読み込み直後 – 訪問者が何かをクリックする前 – に実行した book() 呼び出しは、適切に設定されたドメインであってもポップアップを開くことがあります。実際には、ユーザーによるクリックは常にチェック完了後に発生します。チェックアウトを自動的に開く場合は、検出に依存せずモードを強制指定してください。

モードの強制指定

検出を完全にスキップするには、checkoutMode を明示的に設定します。

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

または、1 件の予約に対してのみ上書きできます。

entase.book('EVENT_ID', { checkoutMode: 'popup' });

信頼済みオリジンではないドメインで 'pane' を強制指定しても、許可が与えられるわけではありません – パネルは開きますが、その中のチェックアウトはページと通信できません。意図的に選択する場合は 'popup' を使用し、許可されている場所ではインラインチェックアウトを使用したい場合は 'auto' のままにしてください。

認識されない値は無視され、'auto' として扱われます。

実行時にモードを確認・変更する

entase.getCheckoutMode();        // 'pane' or 'popup' — never 'auto'
entase.setCheckoutMode('popup'); // applies to every later book() call

getCheckoutMode() は解決済みのモードを返すため、実際に何が起こるかを示します。モードを 'auto' に戻すと、検出が再実行されます。

ポップアップブロッカー

ブラウザは、ユーザージェスチャー中の window.open() のみを許可します。book() はクリックハンドラ内で直接呼び出してください – await、fetch、setTimeout の後ではありません。その時点ではジェスチャーが失効しており、ポップアップがブロックされます。

// Blocked: the gesture is gone by the time book() runs.
button.addEventListener('click', async () => {
  const event = await fetch('/api/current-event').then(r => r.json());
  entase.book(event.id);
});

// Fine: resolve the id first, open on the click.
button.addEventListener('click', () => entase.book(button.dataset.eventId));

これはポップアップモードにのみ影響します。ペインモードはページ内に要素を構築するため、この制約の対象にはなりません。