Stripe決済入門 - オンライン決済の実装

このチュートリアルで学ぶこと

✓ Stripeアカウント設定
✓ Checkout Session
✓ Webhook処理
✓ サブスクリプション
✓ テスト方法

Step 1: セットアップ

npm install stripe @stripe/stripe-js

// lib/stripe.ts
import Stripe from 'stripe';

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-12-18.acacia',
});

Step 2: Checkout Session作成

// app/api/checkout/route.ts
import { stripe } from '@/lib/stripe';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const { priceId } = await request.json();

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    payment_method_types: ['card'],
    line_items: [
      {
        price: priceId,
        quantity: 1,
      },
    ],
    success_url: `${process.env.NEXT_PUBLIC_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
  });

  return NextResponse.json({ url: session.url });
}

Step 3: クライアント側

'use client';
import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);

export function CheckoutButton({ priceId }: { priceId: string }) {
  const handleClick = async () => {
    const res = await fetch('/api/checkout', {
      method: 'POST',
      body: JSON.stringify({ priceId }),
    });
    const { url } = await res.json();
    window.location.href = url;
  };

  return <button onClick={handleClick}>購入する</button>;
}

Step 4: Webhook処理

// app/api/webhook/route.ts
import { stripe } from '@/lib/stripe';
import { headers } from 'next/headers';

export async function POST(request: Request) {
  const body = await request.text();
  const sig = headers().get('stripe-signature')!;

  let event;
  try {
    event = stripe.webhooks.constructEvent(
      body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    return new Response('Webhook Error', { status: 400 });
  }

  switch (event.type) {
    case 'checkout.session.completed':
      const session = event.data.object;
      // 注文処理
      await handleSuccessfulPayment(session);
      break;
    case 'payment_intent.payment_failed':
      // 失敗処理
      break;
  }

  return new Response('OK');
}

Step 5: サブスクリプション

// サブスクリプション用Checkout
const session = await stripe.checkout.sessions.create({
  mode: 'subscription',
  line_items: [
    {
      price: 'price_xxxxx', // 定期価格ID
      quantity: 1,
    },
  ],
  success_url: `${process.env.NEXT_PUBLIC_URL}/success`,
  cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
});

// サブスクリプション解約
await stripe.subscriptions.cancel(subscriptionId);

Step 6: Customer Portal

// 顧客ポータルセッション作成
const session = await stripe.billingPortal.sessions.create({
  customer: customerId,
  return_url: `${process.env.NEXT_PUBLIC_URL}/account`,
});

// session.url にリダイレクト

Step 7: テスト

# Stripe CLI インストール
brew install stripe/stripe-cli/stripe

# ログイン
stripe login

# Webhook転送
stripe listen --forward-to localhost:3000/api/webhook

テストカード:

• 成功: 4242 4242 4242 4242
• 失敗: 4000 0000 0000 0002
• 認証必要: 4000 0025 0000 3155

まとめ

Stripeで安全な決済機能を実装できます。Checkout Sessionで簡単に始め、Webhookで注文処理を自動化しましょう。