React+Node集成Stripe时confirmCardPayment缺client_secret及404报错

项目集成Stripe支付时触发两个报错：

Uncaught (in promise) IntegrationError: Missing value for stripe.confirmCardPayment intent secret: value should be a client_secret string.

POST 404 http://localhost:3000/create-payment-intent (Not Found)

两个报错不是独立问题：404接口请求失败是根因，Stripe参数缺失报错是连锁结果。/create-payment-intent接口请求失败后前端拿不到有效的clientSecret字符串，传入undefined给stripe.confirmCardPayment方法，直接触发Stripe的参数校验错误。

后端代码问题 #

• 路由未挂载：定义的stripeRouter没有在Express入口文件（app.js/server.js）中注册挂载，所有stripe相关接口都无法被外部访问，直接触发404。
• PaymentIntent创建参数错误：调用stripeClient.paymentIntents.create时payment_method_types传了空数组，Stripe要求该字段必须传入支持的支付方式类型，否则接口会返回业务错误，就算路由通了也拿不到有效clientSecret。
• 代码笔误：接口逻辑中写了console.log(paymentIntents)，实际定义的变量名是paymentIntent，多写了末尾的s，会触发运行时引用错误。

前端代码问题 #

• Redux异步调用逻辑错误：Redux thunk的dispatch调用不会直接返回接口响应结果，当前代码const {error: backendError, clientSecret} = dispatch(paymentInfo(...))写法错误，dispatch默认同步返回action对象，不会等待异步请求完成，这里解构出来的clientSecret永远是undefined。
• Reducer字段命名混乱：支付接口请求成功后，Reducer把返回的支付数据存在了userInfo字段下，字段名和实际存储的支付配置含义完全不匹配，后续取数极易出错。
• Stripe Hooks调用层级错误：useStripe()和useElements()必须在<Elements>组件包裹的子组件内调用，当前代码直接在包裹<Elements>的父组件PlaceOrderScreen顶层调用这两个hooks，无法获取Stripe上下文，stripe、elements变量值会为null。
• 请求地址配置错误：paymentActions中引入了BASE_URL常量但axios请求未拼接该前缀，React本地开发服务默认跑在3000端口，Node后端一般跑在其他端口，未配置代理或未拼接后端地址的情况下，请求会直接发到前端开发服务，触发404。

1. 修复后端配置
   • 在Express入口文件中挂载stripe路由：

     // 按实际文件路径引入stripe路由
     import stripeRouter from './stripe.js';
     // 挂载路由，统一加/api/stripe前缀和前端请求路径对应
     app.use('/api/stripe', stripeRouter);
     

   • 修正PaymentIntent创建逻辑和笔误：

     const paymentIntent = await stripeClient.paymentIntents.create({
         amount: 1999,
         currency: 'usd',
         payment_method_types: ['card'], // 传入正确的支付方式类型
     });
     console.log(paymentIntent); // 修正变量名笔误
     res.json({clientSecret: paymentIntent.client_secret})
     

2. 修复前端请求配置
   • 修正paymentActions中的axios请求地址，要么拼接BASE_URL指向后端服务地址，要么在React项目中配置proxy代理，把/api开头的请求转发到后端服务端口，请求路径改为/api/stripe/create-payment-intent。
3. 修复前端组件和Redux逻辑
   • 拆分支付表单为独立子组件，把useStripe、useElements调用、表单提交逻辑都移到子组件中，用<Elements>包裹该子组件，解决Hooks上下文获取失败的问题。
   • 修正Reducer逻辑：PAYMENT_SUCCESS分支把返回的clientSecret单独存储，不要用userInfo字段，示例：

     case PAYMENT_SUCCESS:
       return { ...state, loading: false, clientSecret: action.payload.clientSecret, error: null };
     

   • 修正取数逻辑：用useSelector从Redux store中获取支付模块的loading状态、error、clientSecret值，不要从dispatch返回值解构。等接口请求完成、clientSecret有效值存在后，再调用stripe.confirmCardPayment方法。

内容的提问来源于stack exchange，提问作者pelotador.1