Next.js App Router集成Stripe遇500错误及请求体获取问题

问题1：请求体无法解析，req.body为ReadableStream #

App Router的Route Handler使用Web标准Request对象，而非Pages Router的NextApiRequest，不能直接读取req.body，必须通过req.json()方法解析请求体，同时类型定义也需对应调整。

修改后的api/checkout_session/route.ts代码：

import { stripe } from "@/lib/stripe";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  try {
    // 解析JSON格式的请求体
    const { amount, success_url, cancel_url } = await req.json();

    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      shipping_address_collection: {
        allowed_countries: ["US"],
      },
      phone_number_collection: { enabled: true },
      line_items: [
        {
          price_data: {
            currency: "usd",
            product_data: {
              name: "Custom Amount",
            },
            unit_amount: amount, // 改用传入的金额，替换原写死的1499
          },
          quantity: 1,
        },
      ],
      mode: "payment",
      success_url,
      cancel_url,
    });

    return NextResponse.json({ id: session.id });
  } catch (error) {
    // 打印具体错误便于排查
    console.error("创建结账会话失败:", error);
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "未知错误" },
      { status: 500 }
    );
  }
}

关键修改点：

• 替换NextApiRequest/NextApiResponse为App Router专属的NextRequest/NextResponse
• 通过await req.json()解析请求体，而非直接解构req.body
• 修复金额写死问题，使用前端传入的amount
• 优化错误处理，输出具体错误信息

问题2：500错误与环境变量无效 #

1. 环境变量配置检查 #

• 后端敏感密钥STRIPE_SECRET_KEY需存放在项目根目录的.env.local文件中，不能加NEXT_PUBLIC_前缀
• 前端公钥NEXT_PUBLIC_STRIPE_PUBLIC_KEY保持原配置不变
• 修改环境变量后必须重启开发服务器，否则新配置不会生效

2. Stripe客户端初始化检查 #

确保@/lib/stripe.ts中正确加载密钥：

import Stripe from "stripe";

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2024-06-20", // 使用Stripe最新兼容API版本
  typescript: true,
});

3. 错误排查优化 #

原代码直接返回{ error: error }无法展示具体错误信息，修改后通过console.error打印错误详情，同时返回error.message，可快速定位密钥无效、API版本不兼容等问题。

前端组件说明 #

你的CheckoutButton组件代码无需修改，保持原样即可正常工作。

内容的提问来源于stack exchange，提问作者Frank Muller