はじめに
先日、Next.js の勉強会で、Srripe による決済の実装を取り上げました 🛒
ウェブアプリに、セキュアな決済システムを一から構築するのは、
非常に大変で時間がかかります。
今回は、Strpe 初心者の方向けに、
「Stripe を Next.js で使う方法」についてまとめました！
ざっと雰囲気を掴む参考になれば、嬉しいです 🙌
Stripe とは？
Stripe は、オンライン決済処理で、最も有名なサービスの 1 つです。
開発者向けのサービスであり、
クレジットカード決済をはじめ、様々な決済方法を簡単に実装できます！
主な特徴は、：
- 簡単に実装できる決済フォーム
- セキュアな決済処理
- 多通貨対応
- サブスクリプション課金も対応
- 豊富な API・ライブラリ・ドキュメント
Stripe で決済を受け付ける、3 つの方法
ちなみに、
決済を実装する選択肢として、主に 3 つあります：
- Payment Links: コーディング不要で支払いリンクを生成。技術的な知識がなくても利用可能。
- Stripe Checkout: 簡単に導入できる決済ページ。Stripe がフォームを提供する。
- Stripe Elements: カスタマイズ可能な決済フォームコンポーネント。自社のブランドに合わせた UI 設計が可能。
本記事では、Checkout を紹介していきます！
Stripe（Checkout）の特徴は？
Stripe Checkout の、主な特徴を紹介すると：
- 開発時間の短縮: 複雑な決済フォームを自前で構築する必要がない
- セキュリティ: カード情報は Stripe のサーバーで処理されるため、自社サーバーでの取り扱いリスクが低減
- UX の最適化: Stripe が継続的に改善するユーザー体験の恩恵を受けられる
- 簡単なテスト: テストモードで実際の決済フローを確認可能
- 定期的な更新: 最新の決済方法や規制に自動的に対応
要は、
実際のコア決済処理・UI 自体は、Stripe に任せつつ、
自分の製品側でも、柔軟に制御できるのが Stripe Checkout です！
Stripe での決済フローの確認
Stripe での決済処理フローを紹介します:
- ユーザーが、Web 上でお支払い・課金処理を開始する！
-
チェックアウトセッションの作成:
- サーバーサイドで、Stripe チェックアウトセッションを作成
- クライアントサイドにセッション ID・URL を返却
-
決済ページへのリダイレクト:
- ユーザーを Stripe ホストの決済ページにリダイレクト
- ユーザーがカード情報などを入力
-
決済処理:
- Stripe が決済処理を実行
- 成功/失敗に応じて設定した URL にリダイレクト
-
Webhook による通知:
- 決済完了時は、Stripe から Webhook で通知を受け取れます
- サーバーサイドでイベントを処理（データベースに購入を記録）
意外と簡単ですね 😎
Next.js における実装フローで確認する
Next.js で、
Stripe Checkout を実装する際の実装の流れを、確認しましょう：
ポイントは、2 つでしょうか。。！
① 決済セッションを作成する実装例
API Routes や、Server Actions で、
チェックアウトセッションを作成しましょう！
// 商品のラインアイテムを作成
const lineItems = products.map((product: any) => ({
price_data: {
currency: "jpy",
product_data: {
name: product.name,
description: product.description,
images: [product.image],
},
unit_amount: product.price,
},
quantity: product.quantity,
}));
// Stripeセッションを作成
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items: lineItems,
mode: "payment",
success_url: successUrl,
cancel_url: cancelUrl,
});
上記の通りで、お支払いする商品に関するデータを元に、checkout（お会計）ページを作成できます！
（stripe.checkout.sessions.create）
あとは、ユーザーを checkout（お会計）ページに遷移させて、お支払いできますね！
② Webhook による決済イベントの処理の例
import { NextResponse } from 'next/server';
import stripe from '@/lib/stripe';
export async function POST(request: Request) {
const body = await request.text();
const signature = request.headers.get("stripe-signature");
let event;
try {
event = stripe.webhooks.constructEvent(
body,
signature,
process.env.STRIPE_WEBHOOK_SECRET as string
);
} catch (error: any) {
console.error(`Webhook Error: ${error.message}`);
return NextResponse.json(
{ error: `Webhook Error: ${error.message}` },
{ status: 400 }
);
}
// イベントタイプに応じて処理を分岐
switch (event.type) {
case 'checkout.session.completed':
const session = event.data.object;
// ここで注文の処理を行う（データベースへの保存など）
console.log('Payment successful:', session.id);
// 例：注文確認メールの送信
// await sendOrderConfirmationEmail(session);
break;
case 'payment_intent.succeeded':
const paymentIntent = event.data.object;
console.log('PaymentIntent was successful:', paymentIntent.id);
break;
case 'payment_intent.payment_failed':
const failedPaymentIntent = event.data.object;
console.log('Payment failed:', failedPaymentIntent.id);
// 失敗した支払いの処理
// await handleFailedPayment(failedPaymentIntent);
break;
default:
console.log(`Unhandled event type: ${event.type}`);
}
return NextResponse.json({ received: true });
}
Webhook を使うことで、
Stripe 上で発生した様々なイベントを、受け取ることができます！
- 購入データの保存
- 購入失敗・途中離脱のデータも保存可能
ビジネス要件に応じて、
特定のタイミングで、柔軟に処理を行えますね！！
Stripe Checkout の利点とは？
筆者の考える利点は、
なんといっても、開発者体験と安全性を両立させているところです！
- シンプルさ: 複雑な決済フローを、簡単に実装可能
- 拡張性: Links よりも、柔軟な制御・カスタマイズが可能
- セキュリティ: Stripe のシステム上でカード情報が処理され、自社サーバーでの取り扱いリスクを最小化
- UI/UX: CV 率の高いデザイン・多言語・モバイル対応などが最適化済み
- メンテナンス: 法規制や業界標準の変更に、Stripe が自動的に対応
顧客データも、
Stripe ダッシュボードで管理できます。
決算処理も、Stripe に任せることで、セキュリティ・法律・複雑な実装などから、解放されますね！
おわりに
最後まで読んでいただき、ありがとうございます 🥳
下記の、React/Next.js ハンズオン勉強会での、振り返りのような記事ですが、
Stripe 決済への入門として、当記事が参考になれば幸いです！
そして、もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！
Happy Hacking :)
参考
Discussion