こんにちは！前回のエピソードでは、Zustandを使ってカート機能を実装し、商品の追加や数量変更を可能にしました。今回は、Stripeを統合して安全でスムーズな決済機能を追加します。チェックアウトページを構築し、フォームバリデーションや決済処理の実装を通じて、ユーザーが簡単に購入を完了できるようにします。
このエピソードのゴール
- Stripe CheckoutをNext.jsに統合。
- チェックアウトページを構築し、フォームバリデーションを実装。
- カートデータを基に決済セッションを作成。
- Tailwind CSSでレスポンシブなチェックアウトUIをデザイン。
必要なもの
- 前回のプロジェクト（
next-ecommerce）がセットアップ済み。 - Stripeアカウントと公開鍵/秘密鍵（Stripeダッシュボードから取得）。
-
@stripe/stripe-jsとstripeパッケージ。 - 基本的なTypeScript、React、Next.jsの知識。
ステップ1: Stripeのセットアップ
Stripeをプロジェクトに統合するために、必要なパッケージをインストールします：
npm install @stripe/stripe-js stripe
Stripeの秘密鍵を安全に管理するため、.env.localに以下を追加：
STRIPE_SECRET_KEY=あなたのStripe秘密鍵
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=あなたのStripe公開鍵
注意: 秘密鍵はサーバーサイドでのみ使用し、公開鍵はクライアントサイドで使用します。
ステップ2: Stripe APIクライアントの作成
サーバーサイドでStripeと通信するためのクライアントを作成します。src/lib/stripe.tsファイルを作成し、以下のコードを追加：
import Stripe from 'stripe';
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: '2024-09-30.acacia',
});
このコードは、Stripeの秘密鍵を使ってAPIクライアントを初期化します。
ステップ3: チェックアウトページの構築
チェックアウトページを作成し、カートデータを表示して決済に進むフォームを構築します。src/app/checkout/page.tsxファイルを作成し、以下のコードを追加：
import { useCartStore } from '@/lib/cartStore';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
export default function CheckoutPage() {
const { items, clearCart } = useCartStore();
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const router = useRouter();
const totalPrice = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
const handleCheckout = async () => {
setLoading(true);
setError(null);
try {
const response = await fetch('/api/checkout', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items }),
});
const { url } = await response.json();
if (url) {
clearCart();
router.push(url);
} else {
setError('決済セッションの作成に失敗しました。');
}
} catch (err) {
setError('エラーが発生しました。もう一度お試しください。');
} finally {
setLoading(false);
}
};
return (
<main className="container mx-auto p-4">
<h1 className="text-3xl font-bold mb-6">チェックアウト</h1>
{items.length === 0 ? (
<p className="text-gray-600">カートに商品がありません。</p>
) : (
<div className="grid md:grid-cols-2 gap-8">
{/* カート内容 */}
<div>
<h2 className="text-xl font-semibold mb-4">注文内容</h2>
{items.map((item) => (
<div key={item.variantId} className="flex justify-between border-b py-2">
<span>
{item.title} x {item.quantity}
</span>
<span>
{(item.price * item.quantity).toFixed(2)} JPY
</span>
</div>
))}
<div className="text-right font-bold mt-4">
合計: {totalPrice.toFixed(2)} JPY
</div>
</div>
{/* 決済フォーム */}
<div>
<h2 className="text-xl font-semibold mb-4">決済情報</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium">メールアドレス</label>
<input
type="email"
className="w-full border p-2 rounded"
placeholder="example@email.com"
required
/>
</div>
<div>
<label className="block text-sm font-medium">配送先住所</label>
<input
type="text"
className="w-full border p-2 rounded"
placeholder="東京都渋谷区..."
required
/>
</div>
{error && <p className="text-red-500">{error}</p>}
<button
onClick={handleCheckout}
disabled={loading}
className="w-full bg-primary text-white px-6 py-3 rounded hover:bg-opacity-90 disabled:opacity-50"
>
{loading ? '処理中...' : '決済に進む'}
</button>
</div>
</div>
</div>
)}
</main>
);
}
このコードは：
- カート内容と合計金額を表示。
- メールアドレスと住所の簡易フォームを用意（本番ではバリデーションを強化）。
-
/api/checkoutエンドポイントにリクエストを送信してStripe Checkoutセッションを作成。
ステップ4: Stripe Checkout APIエンドポイントの作成
Stripe Checkoutセッションを作成するAPIルートを追加します。src/app/api/checkout/route.tsファイルを作成し、以下のコードを追加：
import { NextResponse } from 'next/server';
import { stripe } from '@/lib/stripe';
export async function POST(request: Request) {
try {
const { items } = await request.json();
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: items.map((item: any) => ({
price_data: {
currency: 'jpy',
product_data: {
name: item.title,
images: [item.image],
},
unit_amount: Math.round(item.price * 100), // 円をセントに変換
},
quantity: item.quantity,
})),
mode: 'payment',
success_url: `${request.headers.get('origin')}/success`,
cancel_url: `${request.headers.get('origin')}/cart`,
});
return NextResponse.json({ url: session.url });
} catch (error) {
console.error('Stripeエラー:', error);
return NextResponse.json({ error: '決済セッションの作成に失敗しました' }, { status: 500 });
}
}
このコードは：
- カートアイテムを基にStripe Checkoutセッションを作成。
- 成功時またはキャンセル時のリダイレクトURLを指定。
- セッションのURLをクライアントに返す。
ステップ5: 決済成功ページの作成
決済完了後に表示するページを作成します。src/app/success/page.tsxファイルを作成：
export default function SuccessPage() {
return (
<main className="container mx-auto p-4">
<h1 className="text-3xl font-bold mb-6">ご購入ありがとうございます！</h1>
<p className="text-gray-600">
ご注文が正常に処理されました。詳細はメールでご確認ください。
</p>
<a href="/" className="mt-4 inline-block bg-primary text-white px-6 py-3 rounded hover:bg-opacity-90">
ホームに戻る
</a>
</main>
);
}
このページは、決済成功後にユーザーに感謝のメッセージを表示します。
ステップ6: 動作確認
-
.env.localにStripeの公開鍵と秘密鍵を設定。 - 開発サーバーを起動（
npm run dev）。 - カートに商品を追加し、
/checkoutにアクセス。 - フォームにテスト情報を入力し、「決済に進む」をクリック。
- Stripeのテスト決済ページにリダイレクトされ、以下の点を確認：
- 商品名、数量、金額が正しく表示される。
- 決済完了後に
/successページにリダイレクトされる。 - カートが空になる（
clearCartが機能）。
- エラーがあれば、コンソールログやStripeダッシュボードを確認。
テストカード: Stripeのテスト環境では、4242 4242 4242 4242（有効期限: 未来の日付、CVC: 任意の3桁）を使用。
まとめと次のステップ
このエピソードでは、Stripe Checkoutを統合し、チェックアウトページと決済機能を構築しました。フォームバリデーションやエラーハンドリングも追加し、ユーザーが安全に購入を完了できるようにしました。
次回のエピソードでは、パフォーマンス最適化に焦点を当て、Core Web Vitals（LCP、CLSなど）を改善します。Lighthouseを使った分析やReact Server Componentsの活用も紹介しますので、引き続きお楽しみに！
この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！次回のエピソードもお楽しみに！