Netlify Functions+ReactJs对接Stripe支付时RedirectToCheckout失效

你的核心问题出在前端Promise链的数据流断裂，以及几个前端实现细节错误，导致Stripe无法正确获取会话ID完成重定向。以下是具体修复步骤：

1. 修复Promise链的返回值 #

你在fetch的then链中加入了console.log(response)但没有返回数据，导致后续then(session)中的session是undefined，自然无法拿到session.id。

修改callApi中的这部分代码：

.then((response) => {
  console.log(response);
  return response; // 必须返回，保证数据流传递
})

2. 阻止表单提交的默认行为 #

表单提交会触发页面刷新，直接中断Stripe的重定向逻辑。需要在callApi中接收事件参数并阻止默认行为：

const callApi = (e) => {
  e.preventDefault(); // 阻止表单默认提交刷新
  // ... 原有fetch逻辑
};

3. 替换前端Stripe SDK的导入方式 #

你当前导入的是后端用的stripe库，前端应该使用@stripe/stripe-js提供的loadStripe方法初始化：

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

// 异步初始化Stripe实例
const stripePromise = loadStripe('pk_test_51HqgwdGKpDMhyEuL11A63hDc42CNdjZbMH93xDPIumVyYlgGe5byVF9rXhgW0rs64r0uaDjQUqlwOUDXrbTZy9nx00cyCIwiBm');

然后在callApi中获取实例：

const callApi = async (e) => {
  e.preventDefault();
  const stripe = await stripePromise;
  // ... 原有fetch逻辑
};

4. 修正错误处理的属性名 #

Stripe的redirectToCheckout返回的错误属性是error，不是err：

.then((result) => {
  if (result.error) { // 改为error
    alert(result.error.message);
  }
})

完整修复后的Checkout组件代码 #

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

// 异步初始化Stripe实例
const stripePromise = loadStripe('pk_test_51HqgwdGKpDMhyEuL11A63hDc42CNdjZbMH93xDPIumVyYlgGe5byVF9rXhgW0rs64r0uaDjQUqlwOUDXrbTZy9nx00cyCIwiBm');

const callApi = async (e) => {
  e.preventDefault();
  const stripe = await stripePromise;

  fetch("/api/stripe", {
    method: "POST",
  })
    .then((response) => {
      if (!response.ok) throw new Error('API请求失败');
      return response.json();
    })
    .then((session) => {
      console.log(session);
      return stripe.redirectToCheckout({ sessionId: session.id });
    })
    .then((result) => {
      if (result.error) {
        alert(result.error.message);
      }
    })
    .catch((err) => {
      console.error("Error:", err);
    });
};

const Checkout = () => {
  return (
    <div>
      <form onSubmit={callApi}>
        <button type="submit">Checkout</button> {/* 确保按钮是submit类型，或自定义ChkButton组件正确渲染为submit按钮 */}
      </form>
    </div>
  );
};

export default Checkout;

额外验证点 #

• 确认Netlify Functions部署成功，/api/stripe接口可以正常返回包含id的JSON数据
• 检查Stripe后台的会话详情，确认success_url和cancel_url是完整的域名路径（生产环境建议用绝对路径，比如https://yourdomain.com/success）

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