Stripe Checkout を試し、決済画面をStripeに任せる設計の扱いやすさを実感
Stripe のアソシエイト開発者認定を取得を目指し、Stripe Checkout のクイックスタート を試しました。Checkout は認定資格の範囲に含まれそうなため、Node.js と HTML で基本的な決済フローを手元で動かしてみることにしました。
これまでいくつかの決済代行サービスを使って決済処理を実装してきましたが、Stripe Checkout は圧倒的に実装が楽で分かりやすく感じました。なぜこれほど違うのだろうと思うほどだったので、実装して気付いたことを残します。
Stripe Checkout で決済完了までをローカルで動かす
今回は Stripe Node SDK 22.4.0 を使用しました。公式サンプルをもとに、商品の確認画面から Stripe の決済画面へ進み、テスト決済後にローカルの成功画面へ戻るところまでサクッと確認できました。
サーバ側の中心となる処理は、Checkout Session を作成し、レスポンスに含まれる URL へリダイレクトするというものでした。
const session = await stripe.checkout.sessions.create({
line_items: [
{
price: 'price_xxx',
quantity: 1,
},
],
mode: 'payment',
success_url: `${DOMAIN}/success.html`,
});
res.redirect(303, session.url);決済画面を Stripe に任せる設計の扱いやすさ
特に重要だと感じたのは、アプリケーション側で決済画面を作り込むのではなく、Stripe がホストする画面へ遷移させる設計です。Checkout の仕組みに関するドキュメント にも、アプリケーションが Checkout Session を作成し、その URL から Stripe-hosted の決済画面へ移動する流れが示されています。
今回は API リファレンスを読み込む前に、公式サンプルに沿って実装しただけで基本的な決済フローが完成しています。一方で、Checkout Session のパラメータを変更すれば収集する情報を調整でき、管理画面から画面のスタイルも変更できます。決済画面を任せられることと、必要に応じてカスタマイズできることが両立している点に、設計の美しさを感じるとともに、実装しやすさの理由があると感じました。
Customer の作成を試した
カスタマイズの中では、決済時に Customer を作成する設定を試しました。
const session = await stripe.checkout.sessions.create({
customer_creation: 'always',
// 省略
});私が経験してきた決済代行サービスだと、顧客を作らないとカード登録や決済がそもそもできないものが多かったですが、Stripe ではこの挙動を調整できました。
customer_creation に always を指定すると、Checkout Session の確定時に Customer が作成されます。指定しない場合、Customer が必要ない決済はゲスト顧客として扱われます。この挙動は Checkout Session 作成 API に記載されています。実際にテスト決済を行い、Stripe の管理画面に Customer が追加されることも確認できました。
次は Webhook を試そう
今回確認したのは、決済後に成功画面が表示されるところまでです。購入後の処理を確実に実行する仕組みはまだ試していません。
Stripe は、ユーザが成功画面へ到達するとは限らないため、成功画面への遷移だけに購入後処理を依存させず、Webhook で checkout.session.completed などのイベントを受け取るよう案内しています。次は Checkout のフルフィルメントに関するドキュメント を読み、ローカルで Webhook を受信するところまで試してみたいと思います。
