# リダイレクトの動作をカスタマイズする顧客の注文情報が記載された確認ページを表示します。 # ホスト型ページ > This is a ホスト型ページ for when payment-ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/checkout/custom-success-page?payment-ui=stripe-hosted. Connect プラットフォームが [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) を使用している場合は、Stripe の [ガイド](https://docs.stripe.com/connect/use-accounts-as-customers.md)をご確認の上、コード内の `Customer` およびイベント参照を同等の Accounts v2 API リファレンスに置き換えてください。ホスト型ページを使用する Checkout の導入の場合、Stripe は、お客様のサイトで作成されてホストされている成功ページに顧客をリダイレクトします。[Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) の詳細を使用して、決済後に顧客に注文確認ページを表示できます (顧客の名前や決済金額など)。 ## 顧客を成功ページにリダイレクトする Checkout セッションから詳細を使用するには、以下のようにします。 1. [success_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-success_url) を変更して、クライアント側に Checkout セッション ID を渡します。 1. 成功ページで ID を使用して、Checkout Session を検索します。 1. その Checkout Session を使用して、成功ページに表示する内容をカスタマイズします。 > #### フルフィルメントには Webhook が必要です > > 顧客は決済のランディングページにアクセスできることを保証されていないため、ランディングページに限定してフルフィルメントをトリガーすることはできません。たとえば、決済が完了した後、ランディングページが読み込まれる前にインターネットの接続が失われることがあります。 > > [Webhook イベントハンドラを設定](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=stripe-hosted#create-payment-event-handler)して、Stripe がクライアントを完全に介さずに決済イベントをサーバーに直接送信できるようにします。Webhook は、決済を受けるタイミングを最も信頼性の高い方法で確認できます。Webhook イベントの配信が失敗した場合、Stripe は[複数回再試行](https://docs.stripe.com/webhooks.md#automatic-retries)します。 ## 成功時の URL を変更する (サーバー側) Checkout Session を作成する際に、`{CHECKOUT_SESSION_ID}` テンプレート変数を `success_url` に追加します。これはリテラル文字列であり、ここに記載されているとおり正確に追加する必要があります。Checkout Session ID に置き換えないでください。これは、顧客が決済を完了し、成功ページにリダイレクトされた後に自動的に行われます。 #### Ruby ```ruby session = Stripe::Checkout::Session.create(success_url: "http://yoursite.com/order/success?session_id={CHECKOUT_SESSION_ID}", # other options..., ) ``` ## 成功ページを作成する (サーバー側) ID を使用して Checkout セッションを検索し、注文情報を表示する成功ページを作成します。この例では、顧客の氏名を表示します。 #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key = '<>' require 'sinatra' get '/order/success' dosession = Stripe::Checkout::Session.retrieve(params[:session_id]) customer = Stripe::Customer.retrieve(session.customer) "

Thanks for your order, #{customer.name}!

" end ``` ## 組み込みをテストするリクエストが想定どおりに機能することを確認するには、次の手順を実行します。 1. 決済ボタンをクリックします。 1. 顧客名とその他の支払い情報を入力します。 1. **支払う** をクリックします。これが機能する場合、カスタムメッセージを使用する成功ページにリダイレクトされます。たとえば、コードサンプルのメッセージを使用した場合、成功ページには **Thanks for your order, Jenny Rosen! (Jenny Rosen さん、ご注文ありがとうございます)** というメッセージが表示されます。 # 埋め込み型ページ > This is a 埋め込み型ページ for when payment-ui is embedded-form. View the full page at https://docs.stripe.com/payments/checkout/custom-success-page?payment-ui=embedded-form. Connect プラットフォームが [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) を使用している場合は、Stripe の [ガイド](https://docs.stripe.com/connect/use-accounts-as-customers.md)をご確認の上、コード内の `Customer` およびイベント参照を同等の Accounts v2 API リファレンスに置き換えてください。オンラインフォームを使用する Checkout の実装がある場合、顧客が支払いを完了した後に Stripe がリダイレクトするかどうかと、その方法をカスタマイズできます。Stripe が常に顧客をリダイレクトするか、一部の支払い方法でのみリダイレクトするか、リダイレクトを完全に無効にするかを指定できます。リダイレクトを設定するには、`return_url` [パラメーター](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url)で戻り先ページを指定します。または、以下を実行してください。 - [決済手段で必要な場合にのみ顧客をリダイレクトします](https://docs.stripe.com/payments/checkout/custom-success-page.md#redirect-if-required) (たとえば、引き落としベースの手段に対する銀行のオーソリページ)。 - 戻り先ページを使用せず、[リダイレクトベースの支払い方法を無効にします](https://docs.stripe.com/payments/checkout/custom-success-page.md#disable-redirects)。 > #### フルフィルメントには Webhook が必要です > > 顧客は決済のランディングページにアクセスできることを保証されていないため、ランディングページに限定してフルフィルメントをトリガーすることはできません。たとえば、決済が完了した後、ランディングページが読み込まれる前にインターネットの接続が失われることがあります。 > > [Webhook イベントハンドラを設定](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-form#create-payment-event-handler)して、Stripe がクライアントを完全に介さずに決済イベントをサーバーに直接送信できるようにします。Webhook は、決済を受けるタイミングを最も信頼性の高い方法で確認できます。Webhook イベントの配信が失敗した場合、Stripe は[複数回再試行](https://docs.stripe.com/webhooks.md#automatic-retries)します。 ## 顧客を戻り先ページにリダイレクトする [Checkout セッション](https://docs.stripe.com/api/checkout/sessions.md)の作成時に、戻り先ページの URL を `return_url` [パラメーター](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url)で指定します。URL には `{CHECKOUT_SESSION_ID}` テンプレート変数を含めます。Checkout は顧客をリダイレクトする際に、この変数を Checkout セッション ID に置き換えます。戻り先ページを表示する際、URL の Checkout セッション ID を使用して Checkout セッションのステータスを取得します。 ```javascript 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 を再度マウントします。 ```javascript 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](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) を `if_required` に設定します。これで、リダイレクトベースの支払い方法で購入する顧客のみがリダイレクトされます。カード決済の場合、Checkout はリダイレクトではなく、デフォルトの成功ステータスを表示します。自社の成功ステータスを使用するには、Checkout インスタンスを破棄してカスタムの成功ステータスを表示する [onComplete](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-onComplete) コールバックを渡します。 `onComplete` は、Checkout セッションが正常に完了したとき、または [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) Webhook イベントが送信されたときに呼び出されます。 #### HTML + JS ```javascript const stripe = Stripe('<>'); 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.createEmbeddedCheckoutPage({ fetchClientSecret, onComplete: handleComplete }); checkout.mount('#checkout'); } ``` #### React ```jsx const stripePromise = loadStripe('pk_test_123'); const App = ({fetchClientSecret}) => { const options = {fetchClientSecret}; const [isComplete, setIsComplete] = useState(false); const handleComplete = () => setIsComplete(true); return isComplete ? ( ) : ( ) } ``` ### リダイレクトベースの支払い方法を無効にする戻り先ページを作成しない場合は、[redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) を `never` に設定して Checkout セッションを作成します。これにより、リダイレクトベースの支払い方法が無効になります。 - [動的な支払い方法](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用する場合、ダッシュボードでは引き続き支払い方法を管理できますが、リダイレクトを必要とする支払い方法は対象外になります。 - [payment_method_types](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-payment_method_types) を使用して支払い方法を手動で指定する場合、リダイレクトベースの支払い方法を含めることはできません。 `redirect_on_completion: never` を設定すると、`return_url` の要件が解除されます。これらのセッションでは、Checkout はリダイレクトを行うことなく、デフォルトの成功ステータスを表示します。Checkout インスタンスを破棄してカスタムの成功ステータスを表示する [onComplete](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-onComplete) コールバックを渡して、自社の成功ステータスを使用できます。 `onComplete` は、Checkout セッションが正常に完了したとき、または [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) Webhook イベントが送信されたときに呼び出されます。 #### HTML + JS ```javascript const stripe = Stripe('<>'); 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.createEmbeddedCheckoutPage({ fetchClientSecret, onComplete: handleComplete }); checkout.mount('#checkout'); } ``` #### React ```jsx const stripePromise = loadStripe('pk_test_123'); const App = ({fetchClientSecret}) => { const options = {fetchClientSecret}; const [isComplete, setIsComplete] = useState(false); const handleComplete = () => setIsComplete(true); return isComplete ? ( ) : ( ) } ```