Next.js統合

✨ AIでインストール

このプロンプトをAIコードエディタ（Cursor、Copilot、Claude Codeなど）にコピーして、統合を自動的にセットアップ：

Waffo Pancake決済を公式TypeScript SDKを使用して私のNext.jsアプリに統合してください。

npm install @waffo/pancake-ts

要件：
1. /app/api/checkout/route.ts を作成 — WaffoPancakeクライアントでclient.checkout.createSession()を使用
2. /app/api/webhooks/waffo/route.ts を作成 — SDKのverifyWebhook()でx-waffo-signatureを検証
3. 環境変数を追加：WAFFO_MERCHANT_ID, WAFFO_PRIVATE_KEY, NEXT_PUBLIC_APP_URL

完全なAPIリファレンスは https://waffo.mintlify.app/llms-full.txt を参照してください。

構築するもの

Next.jsでの完全なチェックアウト統合：

サーバーサイドでのチェックアウトセッション作成
クライアントサイドでホストされたチェックアウトへリダイレクト
支払い確認のWebhook処理
支払いステータスに基づく保護されたルート

前提条件

Next.js 13+（App Router）
Waffo PancakeアカウントとAPIキー
Dashboardで作成された製品

プロジェクトセットアップ

1. 依存関係のインストール

npm install @waffo/pancake-ts

2. 環境変数

# .env.local
WAFFO_MERCHANT_ID=your-merchant-id
WAFFO_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIE..."
NEXT_PUBLIC_APP_URL=http://localhost:3000

SDKはPEM、base64、生データなど複数の秘密鍵フォーマットに対応しており、初期化時に自動で正規化されます。.envファイル内のリテラル\nもそのまま使用できます。

チェックアウトAPIルートの作成

SDKを使用してチェックアウトセッションを生成するAPIルートを作成：

// app/api/checkout/route.ts
import { NextRequest, NextResponse } from "next/server";
import { WaffoPancake, CheckoutSessionProductType, WaffoPancakeError } from "@waffo/pancake-ts";

const client = new WaffoPancake({
  merchantId: process.env.WAFFO_MERCHANT_ID!,
  privateKey: process.env.WAFFO_PRIVATE_KEY!,
});

export async function POST(req: NextRequest) {
  try {
    const { productId, email, metadata } = await req.json();

    const session = await client.checkout.createSession({
      storeId: "store_xxx",
      productId,
      productType: CheckoutSessionProductType.Onetime,
      currency: "USD",
      buyerEmail: email || undefined,
      metadata,
      successUrl: `${process.env.NEXT_PUBLIC_APP_URL}/success`,
    });

    return NextResponse.json({ checkoutUrl: session.checkoutUrl });
  } catch (error) {
    if (error instanceof WaffoPancakeError) {
      return NextResponse.json({ error: error.errors[0]?.message }, { status: error.status });
    }
    return NextResponse.json({ error: "チェックアウトの作成に失敗" }, { status: 500 });
  }
}

SDKはリクエスト署名と決定論的冪等キーを自動で処理するため、手動でヘッダーを設定する必要はありません。

価格ページコンポーネント

チェックアウトボタン付きの価格ページを作成：

// app/pricing/page.tsx
'use client';

import { useState } from 'react';

const plans = [
  {
    name: 'スターター',
    price: '¥1,900',
    period: '月',
    productId: 'prod_starter',
    features: ['5プロジェクト', '10GBストレージ', 'メールサポート'],
  },
  {
    name: 'プロ',
    price: '¥4,900',
    period: '月',
    productId: 'prod_pro',
    features: ['無制限プロジェクト', '100GBストレージ', '優先サポート', 'APIアクセス'],
    popular: true,
  },
  {
    name: 'エンタープライズ',
    price: '¥14,900',
    period: '月',
    productId: 'prod_enterprise',
    features: ['プロの全機能', 'カスタム統合', '専任サポート', 'SLA'],
  },
];

export default function PricingPage() {
  const [loading, setLoading] = useState<string | null>(null);

  async function handleCheckout(productId: string) {
    setLoading(productId);

    try {
      const response = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ productId }),
      });

      const { checkoutUrl, error } = await response.json();

      if (error) {
        alert(error);
        return;
      }

      // Waffo Pancakeチェックアウトにリダイレクト
      window.location.href = checkoutUrl;

    } catch (error) {
      alert('エラーが発生しました');
    } finally {
      setLoading(null);
    }
  }

  return (
    <div className="py-12">
      <h1 className="text-4xl font-bold text-center mb-12">
        プランを選択
      </h1>

      <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
        {plans.map((plan) => (
          <div
            key={plan.name}
            className={`border rounded-lg p-6 ${
              plan.popular ? 'border-green-500 ring-2 ring-green-500' : ''
            }`}
          >
            {plan.popular && (
              <span className="bg-green-500 text-white text-sm px-3 py-1 rounded-full">
                人気
              </span>
            )}

            <h2 className="text-2xl font-bold mt-4">{plan.name}</h2>
            <p className="text-4xl font-bold mt-2">
              {plan.price}
              <span className="text-lg font-normal">/{plan.period}</span>
            </p>

            <ul className="mt-6 space-y-3">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-center">
                  <CheckIcon className="w-5 h-5 text-green-500 mr-2" />
                  {feature}
                </li>
              ))}
            </ul>

            <button
              onClick={() => handleCheckout(plan.productId)}
              disabled={loading !== null}
              className="w-full mt-8 py-3 px-4 bg-black text-white rounded-lg hover:bg-gray-800 disabled:opacity-50"
            >
              {loading === plan.productId ? '読み込み中...' : '始める'}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

function CheckIcon({ className }: { className: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
    </svg>
  );
}

Webhookハンドラー

SDKの組み込みverifyWebhook()を使用して支払い確認を処理します。テスト環境と本番環境の公開鍵が内蔵されているため、Webhookシークレットの管理は不要です：

// app/api/webhooks/waffo/route.ts
import { NextResponse } from "next/server";
import { verifyWebhook, WebhookEventType } from "@waffo/pancake-ts";

export async function POST(request: Request) {
  const body = await request.text();
  const signature = request.headers.get("x-waffo-signature");

  try {
    const event = verifyWebhook(body, signature);

    // すぐにレスポンスを返し、非同期で処理
    switch (event.eventType) {
      case WebhookEventType.OrderCompleted:
        console.log(`注文完了: ${event.data.orderId}`);
        // データベースの更新、アクセス権の付与など
        break;
      case WebhookEventType.SubscriptionActivated:
        console.log(`サブスクリプション開始: ${event.data.buyerEmail}`);
        break;
      case WebhookEventType.SubscriptionCanceling:
        console.log(`サブスクリプションキャンセル中: ${event.data.orderId}`);
        break;
      case WebhookEventType.SubscriptionCanceled:
        console.log(`サブスクリプションキャンセル済み: ${event.data.orderId}`);
        break;
      case WebhookEventType.RefundSucceeded:
        console.log(`返金成功: ${event.data.amount} ${event.data.currency}`);
        break;
    }

    return NextResponse.json({ received: true });
  } catch {
    return new Response("無効な署名", { status: 401 });
  }
}

SDKのverifyWebhook()は内蔵された公開鍵による署名検証を行うため、WAFFO_WEBHOOK_SECRET環境変数は不要です。リプレイ攻撃の防止もデフォルトで有効です。

成功ページ

支払い成功後に確認を表示：

// app/success/page.tsx
export default function SuccessPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <svg className="w-8 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>

        <h1 className="text-2xl font-bold mb-2">支払い完了！</h1>
        <p className="text-gray-600 mb-6">
          ご購入ありがとうございます。すべての機能にアクセスできます。
        </p>

        <a
          href="/dashboard"
          className="inline-block bg-black text-white px-6 py-3 rounded-lg hover:bg-gray-800"
        >
          ダッシュボードへ
        </a>
      </div>
    </div>
  );
}

ファイル構成

app/
├── api/
│   ├── checkout/
│   │   └── route.ts        # チェックアウトセッション作成
│   └── webhooks/
│       └── waffo/
│           └── route.ts    # Webhook処理
├── pricing/
│   └── page.tsx            # 価格ページ
├── success/
│   └── page.tsx            # 成功ページ
├── dashboard/
│   └── page.tsx            # 保護されたダッシュボード
└── layout.tsx

middleware.ts               # ルート保護
.env.local                  # 環境変数

テストチェックリスト

本番前：

テストカード4576 7500 0000 0110でチェックアウトフローをテスト
Webhooksが受信されることを確認（Dashboardログを確認）
4576 7500 0000 0220で拒否支払いをテスト
成功ページが正しく表示されることを確認
本番APIキーに切り替え
Webhook URLを本番エンドポイントに更新

AI インテグレーション

ビジネスモデル

運用

構築するもの

前提条件

プロジェクトセットアップ

1. 依存関係のインストール

2. 環境変数

チェックアウトAPIルートの作成

価格ページコンポーネント

Webhookハンドラー

成功ページ

ファイル構成

テストチェックリスト

次のステップ

Webhooksの処理

サブスクリプション管理

AI インテグレーション

ビジネスモデル

運用

​構築するもの

​前提条件

​プロジェクトセットアップ

​1. 依存関係のインストール

​2. 環境変数

​チェックアウトAPIルートの作成

​価格ページコンポーネント

​Webhookハンドラー

​成功ページ

​ファイル構成

​テストチェックリスト

​次のステップ

Webhooksの処理

サブスクリプション管理

構築するもの

前提条件

プロジェクトセットアップ

1. 依存関係のインストール

2. 環境変数

チェックアウトAPIルートの作成

価格ページコンポーネント

Webhookハンドラー

成功ページ

ファイル構成

テストチェックリスト

次のステップ