コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments を使用する
Elements を使用したカスタム統合の構築
対面決済
決済手段
決済シナリオ
決済以外の機能

配送オプションを動的にカスタマイズ

顧客向けにさまざまな配送料金を作成する方法をご紹介します。

決済の埋め込みバージョンを使用する際に顧客が入力した住所に基づいて、配送オプションを動的に更新する方法をご紹介します。Stripe がオンラインで提供する決済バージョンでは、動的な更新は使用できません。

ご利用事例

  • 住所を検証する: 貴社に合わせたカスタム検証ルールを使用して、顧客の住所に商品を配送できるかどうかを確認します。また、顧客が希望する住所を確認するためのカスタム UI を作成することもできます。
  • 関連する配送オプションを表示する: 顧客の住所に基づいて、利用可能な配送方法のみを表示します。たとえば、お住まいの国での配送の場合にのみ翌日配送を表示するなどです。
  • 配送料を動的に計算する: 顧客の配送先住所に基づいて配送料を計算して表示します。
  • 注文合計額に基づいて配送料を更新する: 配送先住所または注文合計額に基づいて配送料を提示します (100 USD を超える注文の場合は送料無料など)。数量変更やクロスセルが可能な決済フローについては、項目を動的に更新するをご覧ください。

制限事項

Payment Intents API

Payment Intents API を使用する場合は、選択した配送オプションに基づいて手動で配送オプションを更新し、決済金額を変更するか、金額を調整した新しい PaymentIntent を作成する必要があります。

Checkout Session の更新権限を設定する
サーバー側

shipping_address_collection.allowed_countries を配送先の国のリストに設定します。

Checkout Session を作成するときに、permissions.update_shipping_details=server_only オプションを渡して、クライアント側の updateShippingAddress メソッドを無効にし、サーバーから配送先住所と配送オプションを更新できるようにします。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d ui_mode=custom \
  -d "permissions[update_shipping_details]"=server_only \
  -d "shipping_address_collection[allowed_countries][0]"=US \
  -d "line_items[0][price]"=
"{{PRICE_ID}}"
 \
  -d "line_items[0][quantity]"=1 \
  -d mode=payment \
  --data-urlencode return_url="https://example.com/return"

配送オプションをカスタマイズ
サーバー側

サーバーでエンドポイントを作成し、顧客の配送先住所に基づいて配送オプションを計算します。

  1. リクエスト本文から取得した checkoutSessionId を使用して、Checkout Session を 取得 します。
  2. リクエスト本文にある顧客の配送先情報を検証します。
  3. 顧客の配送先住所と Checkout Session の項目に基づいて、配送オプションを計算します。
  4. 顧客の shipping_details と shipping_options で Checkout Session を 更新 します。
Ruby
Python
PHP
Node.js
.NET
Go
Java
No results
require 'sinatra'
require 'json'
require 'stripe'

set :port, 4242

# 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 = 
"sk_test_BQokikJOvBiI2HlWgH4olfQ2"


# Return a boolean indicating whether the shipping details are valid
def validate_shipping_details(shipping_details)
  # TODO: Remove error and implement...
  raise NotImplementedError.new(<<~MSG)
    Validate the shipping details the customer has entered.
  MSG
end

# Return an array of the updated shipping options or the original options if no update is needed
def calculate_shipping_options(shipping_details, session)
  # TODO: Remove error and implement...
  raise NotImplementedError.new(<<~MSG)
    Calculate shipping options based on the customer's shipping details and the
    Checkout Session's line items.
  MSG
end

post '/calculate-shipping-options' do
  content_type :json
  request.body.rewind

クライアント SDK を更新する
クライアント側

custom_checkout_server_updates_1 ベータヘッダーを使用して Stripe.js を初期化します。

checkout.js
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  betas: ['custom_checkout_server_updates_1'],
});

サーバー更新リクエスト
クライアント側

サーバーに配送オプションの更新をリクエストする非同期関数を作成し、それを runServerUpdate でラップします。リクエストが成功すると、Session オブジェクトが新しい配送オプションで更新されます。

次のコード例は、AddressElement を使用して配送オプションを更新する方法を示しています。

index.html
<div id="shipping-form">
    <!-- Shipping Address Element will be mounted here -->
    <div id="shipping-address-element"></div>
    <button id="save-button">Save</button>
    <div id="error-message"></div>
  </div>

  <div id="shipping-display" style="display: none">
    <div id="address-display"></div>
    <button id="edit-button">Edit</button>
  </div>
checkout.js
// mount the Shipping Address Element
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address-element');

const toggleViews = (isEditing) => {
  document.getElementById('shipping-form').style.display = isEditing ? 'block' : 'none';
  document.getElementById('shipping-display').style.display = isEditing ? 'none' : 'block';
}

const displayAddress = (address) => {
  const displayDiv = document.getElementById('address-display');
  displayDiv.innerHTML = `
    <div>${address.name}</div>
    <div>${address.address.line1}</div>
    <div>${address.address.city}, ${address.address.state} ${address.address.postal_code}</div>
  `;
}

const updateShippingOptions = async (shippingDetails) => {
  const response = await fetch("/calculate-shipping-options", {
    method: "POST",
    headers: { 'Content-type': 'application/json' },
    body: JSON.stringify({
      checkout_session_id: 'session_id',
      shipping_details: shippingDetails
    })
  });

  const result = await response.json();

導入をテストする

実装内容をテストして、カスタムの配送オプションが正しく機能することを確認するには、以下のステップに従います。

  1. 本番環境を反映したサンドボックス環境を設定します。この環境では、Stripe サンドボックスの API キーを使用してください。

  2. さまざまな配送先住所をシミュレーションして、calculateShippingOptions 関数がシナリオを正しく処理していることを確認します。

  3. ログツールやデバッグツールを使用してサーバーが以下を行っていることを確認し、サーバー側のロジックを検証します。

    • Checkout Session (セッション) を取得します。
    • 配送の詳細を検証します。
    • 配送オプションを計算します。
    • 新しい配送の詳細とオプションで Checkout Session (セッション) を更新します。更新のレスポンスに新しい配送の詳細とオプションが含まれていることを確認します。

  4. ブラウザーで決済プロセスを複数回実行することで、クライアント側のロジックを検証します。配送の詳細の入力後に UI がどのように更新されるかに注意してください。次のことを確認してください。

    • runServerUpdate 関数が指定したとおりに呼び出されている。
    • 配送オプションが指定された住所に基づいて正しく更新される。
    • 配送先が利用できない場合にエラーメッセージが適切に表示される。

  5. 無効な配送先住所を入力するか、サーバーエラーをシミュレーションして、サーバー側とクライアント側の両方のエラー処理をテストします。

このページはお役に立ちましたか。
はいいいえ