React集成Stripe问题：后端返回的Client Secret无法被识别

我正在将Stripe集成到React单页应用（SPA）中，前端实现了Checkout组件，后端Express对应实现了create-checkout-session接口。后端日志已确认Client Secret生成正常，但调用Checkout组件时，Stripe抛出如下错误：

Uncaught (in promise) IntegrationError: fetchClientSecret failed with error "The fetchClientSecret function should always resolve with a client secret as a string. The function that was provided resolved with a value type of undefined."

前端Checkout组件代码 #

export default function Checkout() {

  const fetchClientSecret = useCallback(() => {
    // Create a Checkout Session
    fetch("/create-checkout-session", {
      method: "POST",
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);


  // Define options being passed to Stripe
  const options = {fetchClientSecret};
    
  return (
    <div>
      <EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  );
}

Express后端接口代码 #

app.post('/create-checkout-session', async (req, res) => {

  const session = await stripe.checkout.sessions.create({
    ui_mode: 'embedded',
    line_items: [
      {
        price: 'price_1Oxtf42MrIfdvsrao10PzNxF',
        quantity: 1,
      },
    ],
    mode: 'payment',
    return_url: `${YOUR_DOMAIN}/thankyou?session_id={CHECKOUT_SESSION_ID}`,
  });

  console.log(session.client_secret);
  
  res.send({clientSecret: session.client_secret});
});

问题原因 #

核心问题是fetchClientSecret函数没有返回Promise结果。当前代码中，fetch请求的Promise链虽然最终能拿到data.clientSecret，但整个fetchClientSecret函数没有return这个Promise，导致函数默认返回undefined。Stripe调用该函数时，无法获取到预期的client secret字符串，因此抛出错误。

修复方案 #

只需要在fetch调用前添加return，让函数返回整个Promise链：

const fetchClientSecret = useCallback(() => {
  // Create a Checkout Session
  return fetch("/create-checkout-session", { // 添加return
    method: "POST",
  })
    .then((res) => res.json())
    .then((data) => data.clientSecret);
}, []);

或者改用async/await写法，逻辑更清晰：

const fetchClientSecret = useCallback(async () => {
  const res = await fetch("/create-checkout-session", { method: "POST" });
  const data = await res.json();
  return data.clientSecret;
}, []);

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