決済金額を動的に更新する

決済中に顧客が選択内容を変更した場合に合計金額を変更する方法をご紹介します。

顧客が購入する商品や決済金額を変更した場合に、Checkout Session または Payment Intent の金額を更新します。サーバーで合計を再計算してから、PaymentIntent の金額を更新します。

一般的なユースケース

アドオン (ギフトラップや保証など) を追加または削除します。
別の配送方法または配送速度を選択してください。
サービスまたは請求を追加します。
割引コードまたは税引前ストアクレジットを適用または削除します。

セキュリティのベストプラクティス

サーバーで金額を再計算します。クライアントから提供された価格や合計を信頼しないでください。
ビジネスルールに基づいて更新をオーソリします (最大数量の適用など)。
完了または期限切れになっていないアクティブな Session のみを更新します。

制約と動作

Payment Intent または Checkout Session が決済を待っている間に金額を更新できます (requires_payment_method や requires_confirmation など)。
確定後は、通常、金額を増やすことはできません。

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

Checkout Sessions API で Elements を使用する場合は、サーバーへのクライアントコールを runServerUpdate にラップして、決済の状態と合計を更新します。

checkout.js
import {loadStripe} from '@stripe/stripe-js';

// Optional: include beta flags if your integration requires them
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  betas: ['custom_checkout_server_updates_1'],
});

const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {/* ... */},
});

// Example: Add additional service using price_data
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const actions = loadActionsResult.actions;
  const session = actions.getSession();
  document
  .getElementById('add-service')
  .addEventListener('click', async () => {
    const updateOnServer = () =>
      fetch('/update-custom-amount', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          checkout_session_id: session.id,
          product_id: 'gift_wrap', // Server looks up actual price
        }),
      });

    const response = await actions.runServerUpdate(updateOnServer);
    if (!response.ok) {
      // show error state
    }
  });
}

サーバーエンドポイントの作成
サーバー側

サーバーで金額を計算し、入力を検証します。その後、line_items を price_data で更新して、単発の請求を追加できます。

メモ

line_items または price_data を更新すると、Session の合計と税金が再計算されます。