リダイレクトの動作をカスタマイズする

顧客の注文情報が記載された確認ページを表示します。

オンラインフォームを使用する Checkout の実装がある場合、顧客が支払いを完了した後に Stripe がリダイレクトするかどうかと、その方法をカスタマイズできます。Stripe が常に顧客をリダイレクトするか、一部の支払い方法でのみリダイレクトするか、リダイレクトを完全に無効にするかを指定できます。

リダイレクトを設定するには、return_url パラメーターで戻り先ページを指定します。

または、以下を実行してください。

決済手段で必要な場合にのみ顧客をリダイレクトします (たとえば、引き落としベースの手段に対する銀行のオーソリページ)。
戻り先ページを使用せず、リダイレクトベースの支払い方法を無効にします。

顧客を戻り先ページにリダイレクトする

Checkout セッションの作成時に、戻り先ページの URL を return_url パラメーターで指定します。URL には {CHECKOUT_SESSION_ID} テンプレート変数を含めます。Checkout は顧客をリダイレクトする際に、この変数を Checkout セッション ID に置き換えます。戻り先ページを表示する際、URL の Checkout セッション ID を使用して Checkout セッションのステータスを取得します。

server.js
app.get('/session_status', async (req, res) => {
  const session = await stripe.checkout.sessions.retrieve(req.query.session_id);
  const customer = await stripe.customers.retrieve(session.customer);

  res.send({
    status: session.status,
    payment_status: session.payment_status,
    customer_email: customer.email
  });
});

セッションステータスに応じて、結果を次のように処理します。

complete: 支払いが成功しました。Checkout セッションの情報を使用して成功ページを表示します。
open: 支払いが失敗またはキャンセルされました。顧客がやり直せるように Checkout を再度マウントします。

client.js
const session = await fetch(`/session_status?session_id=${session_id}`)
if (session.status == 'open') {
  // Remount embedded Checkout
else if (session.status == 'complete') {
  // Show success page
  // Optionally use session.payment_status or session.customer_email
  // to customize the success page
}

リダイレクトベースの支払い方法

決済の進行中、決済手段によっては、発行会社/銀行のオーソリページなどの中間ページに顧客がリダイレクトされる場合があります。そのページでの操作を完了した顧客は、Stripe によって戻り先ページにリダイレクトされます。

リダイレクトベースの支払い方法の場合にのみリダイレクトする

リダイレクトを必要としない支払いの後には顧客のリダイレクトを行わない場合は、redirect_on_completion を if_required に設定します。これで、リダイレクトベースの支払い方法で購入する顧客のみがリダイレクトされます。

カード決済の場合、Checkout はリダイレクトではなく、デフォルトの成功ステータスを表示します。自社の成功ステータスを使用するには、onComplete コールバックを渡して Checkout インスタンスを破棄し、カスタムの成功ステータスを表示します。

onComplete は、Checkout セッションが正常に完了したとき、または checkout.session.completed Webhook イベントが送信されたときに呼び出されます。

return.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Example `onComplete` callback
  const handleComplete = async function() {
    // Destroy Checkout instance
    checkout.destroy()

    // Retrieve details from server (which loads Checkout Session)
    const details = await retrievePurchaseDetails();

    // Show custom purchase summary
    showPurchaseSummary(details);
  }

  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
    onComplete: handleComplete
  });

  checkout.mount('#checkout');
}

リダイレクトベースの支払い方法を無効にする

戻り先ページを作成しない場合は、redirect_on_completion を never に設定して Checkout セッションを作成します。

これにより、リダイレクトベースの支払い方法が無効になります。

動的な支払い方法を使用する場合、ダッシュボードでは引き続き支払い方法を管理できますが、リダイレクトを必要とする支払い方法は対象外になります。
payment_method_types を使用して支払い方法を手動で指定する場合、リダイレクトベースの支払い方法を含めることはできません。

redirect_on_completion: never を設定すると、return_url の要件が解除されます。これらのセッションでは、Checkout は、リダイレクトを行うことなく、デフォルトの成功ステータスを表示します。onComplete コールバックを渡して Checkout インスタンスを破棄し、カスタムの成功ステータスを表示すると、自社の成功ステータスを使用することができます。

onComplete は、Checkout セッションが正常に完了したとき、または checkout.session.completed Webhook イベントが送信されたときに呼び出されます。

return.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Example `onComplete` callback
  const handleComplete = async function() {
    // Destroy Checkout instance
    checkout.destroy()

    // Retrieve details from server (which loads Checkout Session)
    const details = await retrievePurchaseDetails();

    // Show custom purchase summary
    showPurchaseSummary(details);
  }

  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
    onComplete: handleComplete
  });

  checkout.mount('#checkout');
}