Checkout Session (セッション) に含まれる項目を動的に追加、削除、更新する方法をご紹介します。
ご利用事例
このガイドでは、項目を更新してサブスクリプションをアップセルする方法を示しますが、以下を行うこともできます。
- 在庫の確認:在庫チェックを実行し、顧客がアイテムの数量を変更しようとしたときに保留します。
- 新しい商品を追加する:注文合計額が一定の金額を超えている場合に、補完商品を追加します。
- 配送料金を更新する:注文合計額が変更された場合は、このガイドの購入時に配送オプションをカスタマイズするで説明されている方法を組み合わせて、配送料金を更新します。
- 税率を更新する:Stripe Tax を使用していない場合は、入力された配送先住所に基づいて項目の税率を動的に更新できます。
Stripe の公式ライブラリを使用して、アプリケーションから Stripe API にアクセスします。
gem install stripe -v 15.1.0-beta.2
このベータ版を使用するには、まず checkout_server_update_beta=v1 のベータ版ヘッダーを使用するように SDK を更新します。
Stripe.api_key = 'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
Checkout セッションの作成時に permissions.update_line_items=server_only を渡して、サーバーから項目を更新できるようにします。このオプションを渡すと、updateLineItemQuantity などの項目に対するクライアント側の更新も無効になり、すべての更新がサーバーを経由するようになります。
curl https://api.stripe.com/v1/checkout/sessions \
-u "sk_test_BQokikJOvBiI2HlWgH4olfQ2
サーバー上に新しいエンドポイントを作成して、Checkout セッションのラインアイテムを更新します。これは、後の手順でフロントエンドから呼び出します。
セキュリティのヒント
クライアント側のコードは、ユーザーが完全に制御可能な環境で実行できることを確認しておかなければなりません。悪意のあるユーザーは、クライアント側の検証をバイパスしたり、リクエストを傍受して内容を変更したり、サーバーにまったく新しいリクエストを送信したりする可能性があります。
エンドポイントを設計する際は、以下を考慮することをお勧めします。
- エンドポイントは過度に汎用的にするのではなく、特定の顧客とのやり取りに対応するように設計します (たとえば、一般的な「更新」アクションではなく「クロスセル商品の追加」アクションなど)。特定のエンドポイントは目的がわかりやすく、検証ロジックの記述と維持が簡単になります。
- セッションデータをクライアントからエンドポイントに直接渡さないようにしてください。悪意のあるクライアントがリクエストデータを変更する可能性があり、Checkout セッションの状態を判断するためのソースとしての信頼性が低くなってしまいます。代わりに、セッション ID をサーバーに渡し、それを使用して Stripe の API からデータを安全に取得することが可能です。
require 'sinatra'
require 'json'
require 'stripe'
set :port, 4242
Stripe.api_key = 'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
ラインアイテムを更新する場合は、ラインアイテムの配列全体を再送信する必要があります。
- 既存のラインアイテムを保持するには、そのラインアイテムの
id を指定します。 - 既存のラインアイテムを更新するには、そのラインアイテムの
id と、更新するフィールドの新しい値を指定します。 - 新しいラインアイテムを追加するには、
id を付けずに price と quantity を指定します。 - 既存のラインアイテムを削除するには、再送信された配列からそのラインアイテムの ID を除外します。
- ラインアイテムを並べ替えるには、再送信された配列内の目的の位置にラインアイテムの
id を指定します。
custom_checkout_server_updates_1 ベータヘッダーを使用して stripe.js を初期化します。
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
フロントエンドから更新をトリガーするには、サーバーにリクエストを送信し、それを runServerUpdate でラップします。リクエストが成功すると、Session オブジェクトが新しい項目で更新されます。
<button id="change-subscription-interval" role="switch" aria-checked="false">
Save with a yearly subscription
</button>
document.getElementById('change-subscription-interval')
.addEventListener("click", async (event) => {
const button = event.target;
const isCurrentSubscriptionMonthly =
button.getAttribute("aria-checked") === "false";
const updateCheckout = () => {
return fetch("/change-subscription-interval", {
method: "POST",
headers: {
"Content-type": "application/json",
},
body: JSON.stringify({
checkout_session_id: checkout.session().id,
interval: isCurrentSubscriptionMonthly ? "yearly" : "monthly",
})
});
};
const response = await checkout.runServerUpdate(updateCheckout);
if (!response.ok) {
return;
}
const isNewSubscriptionMonthly = !isCurrentSubscriptionMonthly;
button.setAttribute("aria-checked", !isNewSubscriptionMonthly);
button.textContent = isNewSubscriptionMonthly
? "Save with a yearly subscription"
: "Use monthly subscription";
});