解决Next.js + Stripe集成时Checkout会话触发的运行时错误

这个报错是next-stripe客户端发起创建结算会话的请求失败导致的，核心原因有以下几类：

• 未配置next-stripe要求的服务端API路由：next-stripe的客户端方法本质是向你自己的Next.js服务端接口发起请求，没有对应路由的话请求直接404，触发该错误
• 环境变量配置错误：STRIPE_SECRET_KEY填写错误、缺失，或者NEXT_PUBLIC_STRIPE_PUBLIC_KEY客户端无法正常读取
• 请求参数不符合Stripe规则：传入的success_url/cancel_url没有加入Stripe后台的域名白名单，priceId不是Stripe后台已激活的有效价格ID，mode参数和价格类型不匹配
• 缺少异步错误捕获逻辑：createCheckoutSession是异步请求，你没有用try catch包裹，请求失败后直接抛出未处理运行时错误

1. 新增next-stripe服务端路由
   在项目pages/api目录下创建stripe/[...nextstripe].ts文件，写入以下代码：

import NextStripe from 'next-stripe'

export default NextStripe({
  secret_key: process.env.STRIPE_SECRET_KEY,
})

export const config = {
  api: {
    bodyParser: false,
  },
}

2. 核对环境变量配置
   确认项目根目录的.env.local文件中存在以下两个变量，取值和Stripe后台生成的一致：

NEXT_PUBLIC_STRIPE_PUBLIC_KEY=你的Stripe公钥
STRIPE_SECRET_KEY=你的Stripe私钥

修改后重启Next.js服务让配置生效。

3. 新增错误捕获逻辑
   修改onClick函数，包裹异步请求捕获具体错误：

const onClick = async (priceId: string) => {
  try {
    const session = await createCheckoutSession({
      success_url: window.location.href,
      cancel_url: window.location.href,
      line_items: [{ price: priceId, quantity: 1 }],
      payment_method_types: ["card"],
      mode: "payment",
    });
    const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY as string);
    if (stripe) {
      await stripe.redirectToCheckout({ sessionId: session.id });
    }
  } catch (err) {
    // 这里打印具体错误可以进一步定位问题
    console.error('创建结算会话失败：', err)
  }
};

4. 核对Stripe后台配置
   登录Stripe后台，在开发者设置的域名白名单中加入你当前使用的域名（开发环境需要加http://localhost:3000），确保你使用的priceId是已激活的一次性价格ID，和mode: "payment"匹配。

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