React中Stripe支付跳转异常：400错误与IntegrationError排查

错误关联分析 #

两个错误是连锁触发的：首先/api/stripe接口返回400请求失败，导致前端无法获取有效的Stripe Session ID；随后调用stripe.redirectToCheckout时缺少必填参数，最终导致支付弹窗加载失败。

前端代码排查（getStripe.js + 支付逻辑） #

1. 确认Stripe实例初始化正确性 #

检查getStripe.js是否使用了正确的Stripe公钥（测试/生产环境需对应）：

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

// 替换为你的Stripe公钥，确保和后端密钥环境一致
const stripePromise = loadStripe('pk_test_xxx'); 

export default stripePromise;

2. 检查支付触发时的接口请求 #

确保调用/api/stripe时传递的订单数据格式与后端要求匹配，且正确处理接口响应：

const handlePayment = async () => {
  const stripe = await stripePromise;
  
  // 确认请求参数格式（比如items结构、字段名）和后端一致
  const response = await fetch('/api/stripe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      items: [
        { id: 'prod_xxx', name: '商品名称', price: 999, quantity: 1 }
      ]
    }),
  });

  // 打印接口错误详情，不要只依赖状态码
  if (!response.ok) {
    const errorDetails = await response.text();
    console.error('接口请求失败:', errorDetails);
    return;
  }

  const session = await response.json();
  
  // 必须确保session.id有效，再调用redirectToCheckout
  const result = await stripe.redirectToCheckout({
    sessionId: session.id,
  });

  if (result.error) {
    console.error('支付弹窗错误:', result.error.message);
  }
};

后端接口排查（/api/stripe） #

以Next.js后端为例（匹配教程项目栈），重点检查以下几点：

1. 密钥与环境配置 #

确认.env文件中STRIPE_SECRET_KEY是正确的测试/生产密钥，无拼写错误：

STRIPE_SECRET_KEY=sk_test_xxx

2. 检查Stripe Session创建逻辑 #

确保创建Session时参数完整、格式符合Stripe要求：

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: '仅支持POST请求' });
  }

  try {
    const { items } = req.body;
    
    // 校验前端传入的商品数据
    if (!items || items.length === 0) {
      return res.status(400).json({ message: '商品列表不能为空' });
    }

    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: items.map(item => ({
        price_data: {
          currency: 'usd', // 替换为你使用的货币（如cny）
          product_data: { name: item.name },
          unit_amount: item.price, // 注意：必须以分为单位（如999代表$9.99）
        },
        quantity: item.quantity,
      })),
      mode: 'payment',
      success_url: `${req.headers.origin}/success`,
      cancel_url: `${req.headers.origin}/cancel`,
    });

    res.status(200).json({ id: session.id });
  } catch (error) {
    // 打印后端错误日志，便于定位问题
    console.error('Stripe Session创建失败:', error);
    res.status(400).json({ message: error.message });
  }
}

常见坑点：

• line_items格式错误：未正确设置price_data，或unit_amount未转成以分为单位的数值
• success_url/cancel_url无效：域名不匹配，或未使用req.headers.origin导致跨域
• 前后端字段不匹配：前端传products但后端用items接收

关键调试步骤 #

1. 浏览器Network面板：查看/api/stripe请求的Payload和Response，确认参数是否正确、后端返回的错误详情
2. 后端控制台：查看Stripe Session创建时的报错信息，定位具体参数或配置问题
3. 对比教程示例代码：重点核对前后端数据传递格式、Stripe Session参数设置

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