購入時に配送オプションをカスタマイズする非公開プレビュー
顧客の配送先住所に基づいて配送オプションをカスタマイズする方法をご紹介します。
ベータ
この機能はプライベートベータです。アクセスについてはお問い合わせください。
Stripe を設定するサーバー側
まず、Stripe アカウントが必要です。今すぐご登録ください。
アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。
checkout_
ベータバージョンヘッダーを使用するように SDK を設定します。
Checkout セッションを作成するサーバー側
サーバーで Checkout セッションを作成します。
- ui_mode を
embedded
に設定します。 - permissions.update.shipping_details を
server_
に設定します。only - shipping_address_collection.allowed_countries に、配送先を提供する国のリストを設定します。
By default, the Stripe Checkout client automatically updates the shipping_details of the Checkout Session object with the shipping information the customer enters, including the customer’s name and address.
警告
When permissions.update.shipping_details is server_
, it disables the automatic client-side update and only your server can update the shipping details using your Stripe secret key.
配送オプションをカスタマイズするサーバー側
サーバーで、顧客の配送先住所に基づいて配送オプションを計算する新しいエンドポイントを作成します。
- Retrieve the Checkout Session using the
checkoutSessionId
from the request body. - リクエスト本文にある顧客の配送先情報を検証します。
- Calculate the shipping options based on the customer’s shipping address and the Checkout Session’s line items.
- Update the Checkout Session with the customer’s shipping_details and the shipping_options.
Checkout をマウントするクライアント側
注意
Always return a Promise
from your onShippingDetailsChange
function and resolve it with a ResultAction object.
The Checkout client updates the UI based on the result of your onShippingDetailsChange
function.
- 結果に
type: "accept"
が含まれる場合、Checkout UI はサーバーで設定した配送オプションを表示します。 - 結果に
type: "reject"
が含まれる場合、Checkout UI は結果で設定したエラーメッセージを表示します。
Checkout は、HTTPS 接続を介して支払い情報をStripeに安全に送信する iframe でレンダリングされます。
よくある間違い
一部の支払い方法では、別のページにリダイレクトして支払いを確定する必要があるため、Checkout は別の iframe 内に配置しないでください。
実装をテストする
Follow these steps to test your integration, and ensure your custom shipping options work correctly.
本番環境の設定を反映したテスト環境を設定します。この環境には、Stripe のテスト環境 API キーを使用します。
さまざまな配送先住所をシミュレーションして、
calculateShippingOptions
関数がシナリオを正しく処理していることを確認します。ログツールまたはデバッグツールを使用して、サーバー側のロジックを検証し、サーバーが以下を実行していることを確認します。
- Retrieves the Checkout Session.
- 配送の詳細を検証している。
- 配送オプションを計算している。
- Updates the Checkout Session with new shipping details and options. Make sure the update response contains the new shipping details and options.
ブラウザーで決済フロープロセスを複数回完了させ、クライアント側のロジックを検証します。配送の詳細を入力した後の UI の変更にご注意ください。以下はその確認点です。
onShippingDetailsChange
関数が指定したとおりに呼び出されている。- 配送オプションが指定された住所に基づいて正確に更新されている。
- 配送が利用できない場合に、エラーメッセージが正しく表示されている。
無効な配送先住所を入力するか、サーバー側のエラーをシミュレーションして、サーバー側とクライアント側の両方のエラー処理をテストします。