Next.js集成Stripe支付时出现Axios 500错误求助

500错误属于服务器端异常，先从API接口和配置入手，逐一排查：

1. 检查API文件路径 #

你的API文件写的是ap/create-checkout-session.js，但Next.js的API路由必须放在pages/api目录下，正确路径应为pages/api/create-checkout-session.js。路径错误会导致前端请求找不到对应处理逻辑，直接返回500。

2. 给API接口添加错误捕获 #

原API代码没有错误处理，一旦Stripe创建会话失败会直接抛出错误，无法获取具体原因。修改create-checkout-session.js，加上try-catch：

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
export default async(req, res) =>{
  try {
    const { items, email } = req.body;
    const transformedItems = items.map((item) => ({
        price_data: {
          currency: 'usd',
          unit_amount: item.price * 100,
          product_data: {
            name: item.title,
            images: [item.image],
            description: item.description // 将描述移至product_data内，符合Stripe规范
          },
        },
        quantity: 1,
    }));

    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      shipping_address_collection: {
        allowed_countries: ['US', 'CA', 'GB'],
      },
      line_items: transformedItems,
      mode: 'payment',
      success_url: `${process.env.HOST}/success`,
      cancel_url: `${process.env.HOST}/checkout`,
      metadata: {
        email,
        images: JSON.stringify(items.map((item) => item.image))
      },
    })

    res.status(200).json({ id: session.id })
  } catch (error) {
    console.error('Stripe创建会话出错:', error);
    res.status(500).json({ error: error.message });
  }
};

修改后前端请求能拿到具体错误信息，方便定位问题。

3. 修正Stripe参数格式 #

原代码将description放在price_data外部，不符合Stripe的line_item结构规范，需移至product_data中。另外确认unit_amount是整数（单位为分），确保item.price是正确的美元数值（如19.99需转为1999）。

4. 检查环境变量配置 #

• 确认.env文件中STRIPE_SECRET_KEY为Stripe后台的正确秘钥（非公钥），无拼写错误；
• HOST变量需设置为网站域名，开发环境为http://localhost:3000，生产环境为正式域名；
• 前端Stripe公钥需添加NEXT_PUBLIC_前缀（即.env中为NEXT_PUBLIC_STRIPE_PUBLIC_KEY=xxx），前端代码改为const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY);，否则前端无法获取该变量。

5. 验证商品图片URL #

Stripe要求product_data.images中的URL必须是可公开访问的网络地址，不能是本地路径（如/images/product.jpg）或未公开链接，否则会导致创建会话失败。

6. 前端添加请求错误捕获 #

原前端代码未捕获Axios错误，添加try-catch可查看具体错误：

const createCheckoutSession = async() => {
  try {
    const stripe = await stripePromise;
    const checkoutSession = await axios.post('/api/create-checkout-session', {
      items: items,
      email: session.user.email,
    });
    const result = await stripe.redirectToCheckout({
      sessionId: checkoutSession.data.id,
    })
    if(result.error){
      alert(result.error.message)
    };
  } catch (error) {
    console.error('创建结账会话失败:', error.response.data);
    alert('支付初始化失败，请稍后重试');
  }
}

按照以上步骤排查，即可定位500错误的具体原因。

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