購入時に配送オプションをカスタマイズするベータ
顧客の配送先住所に基づいて配送オプションをカスタマイズする方法をご紹介します。
ベータ
この機能はプライベートベータです。アクセスについてはお問い合わせください。
Stripe を設定するサーバー側
まず、Stripe アカウントが必要です。今すぐご登録ください。
アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。
checkout_
ベータバージョンヘッダーを使用するように SDK を設定します。
Checkout セッションを作成するサーバー側
サーバーで Checkout セッションを作成します。
- ui_mode を
embedded
に設定します。 - permissions.update.shipping_details を
server_
に設定します。only - shipping_address_collection.allowed_countries に、配送先を提供する国のリストを設定します。
デフォルトでは、Stripe Checkout のクライアントは、Checkout Session オブジェクトの shipping_details を、顧客が入力した配送先情報に自動で更新します。配送先情報には、顧客の name (名前) と address (住所) が含まれます。
permissions.update.shipping_details を server_
に設定すると、自動更新が無効になり、お客様のサーバーのみが Stripe シークレットキーを使用して配送先情報を更新できます。
配送オプションをカスタマイズするサーバー側
サーバーで、顧客の配送先住所に基づいて配送オプションを計算する新しいエンドポイントを作成します。
- リクエスト本文から取得した
checkoutSessionId
を使用して、Checkout セッションを取得します。 - リクエスト本文にある顧客の配送先情報を検証します。
- 顧客の配送先住所と Checkout セッションのラインアイテムに基づいて配送オプションを計算します。
- Checkout セッションを、顧客の shipping_details と shipping_options に更新します。
Checkout をマウントするクライアント側
注意
onShippingDetailsChange
関数からは必ず Promise
が返され、ResultAction オブジェクトで解決されます。
Checkout クライアントは、onShippingDetailsChange
関数の結果に基づいて UI を更新します。
- 結果に
type: "accept"
が含まれる場合、Checkout UI はサーバーで設定した配送オプションを表示します。 - 結果に
type: "reject"
が含まれる場合、Checkout UI は結果で設定したエラーメッセージを表示します。
Checkout は、HTTPS 接続を介して支払い情報をStripeに安全に送信する iframe でレンダリングされます。
よくある間違い
一部の支払い方法では、別のページにリダイレクトして支払いを確定する必要があるため、Checkout は別の iframe 内に配置しないでください。
実装をテストする
以下の手順に従って実装をテストし、カスタムの配送オプションが正しく機能することを確認してください。
本番環境の設定を反映したテスト環境を設定します。この環境には、Stripe のテスト環境 API キーを使用します。
さまざまな配送先住所をシミュレーションして、
calculateShippingOptions
関数がシナリオを正しく処理していることを確認します。ログツールまたはデバッグツールを使用して、サーバー側のロジックを検証し、サーバーが以下を実行していることを確認します。
- Checkout セッションを取得している。
- 配送の詳細を検証している。
- 配送オプションを計算している。
- Checkout セッションを新しい配送の詳細とオプションで更新します。更新のレスポンスに新しい配送の詳細とオプションが含まれていることを確認してください。
ブラウザーで決済フロープロセスを複数回完了させ、クライアント側のロジックを検証します。配送の詳細を入力した後の UI の変更にご注意ください。以下はその確認点です。
onShippingDetailsChange
関数が指定したとおりに呼び出されている。- 配送オプションが指定された住所に基づいて正確に更新されている。
- 配送が利用できない場合に、エラーメッセージが正しく表示されている。
無効な配送先住所を入力するか、サーバー側のエラーをシミュレーションして、サーバー側とクライアント側の両方のエラー処理をテストします。