MERN栈网站Stripe支付移动端弹窗无法打开跳转报错求助

我基于MERN栈开发的网站集成了Stripe支付功能，桌面端使用完全正常，但在移动端浏览器发起支付时，会被重定向到Stripe官网并提示错误。

上述图片展示了移动端使用Stripe支付时的重定向链接。

前端请求代码 #

const [stripeToken, setStripeToken] = useState(null);
//  const navigate = useNavigate();
const onToken = (token) => {
  setStripeToken(token);
  // console.log(token);
};

useEffect(() => {
  const makeRequest = async () => {
    try {
      const res = await userRequest.post("/checkout/payment", {
        tokenId: stripeToken.id,
        // amount: order.totalPrice,
        amount: 172500,
      });

      history.push("/success", {
        stripeData: res.data,
        // products: cart,
      });
    } catch (err) {
      console.log(err);
    }
  };
  stripeToken && makeRequest();
}, [stripeToken, history]);

const orderId = match.params.id;

<StripeCheckout
 name="CCBS Shop"
 billingAddress
 shippingAddress
 description={`Your total is ${order.totalPrice}`}
 amount={172500}
 token={onToken}
 stripeKey={KEY}
>

问题排查与解决方案 #

核心原因：使用过时的Stripe支付库 #

你当前使用的react-stripe-checkout是旧版跳转式支付库，Stripe官方已停止对其的移动端兼容性维护，容易出现重定向报错问题。建议替换为官方推荐的嵌入式支付方案@stripe/react-stripe-js和@stripe/stripe-js。

具体解决步骤 #

1. 替换依赖库
   卸载旧库：

   npm uninstall react-stripe-checkout
   

   安装新版官方依赖：

   npm install @stripe/react-stripe-js @stripe/stripe-js
   

2. 重构前端支付逻辑
   首先在应用入口或组件外层加载Stripe实例：

   import { loadStripe } from '@stripe/stripe-js';
   import { Elements } from '@stripe/react-stripe-js';
   
   const stripePromise = loadStripe(KEY); // 你的Stripe公钥
   
   // 用Elements包裹支付组件
   function App() {
     return (
       <Elements stripe={stripePromise}>
         <PaymentComponent />
       </Elements>
     );
   }
   

   然后改写支付组件为嵌入式支付：

   import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
   import { useState, useEffect } from 'react';
   
   const PaymentComponent = () => {
     const stripe = useStripe();
     const elements = useElements();
     const [clientSecret, setClientSecret] = useState('');
     const [errorMessage, setErrorMessage] = useState(null);
   
     // 先从后端获取Payment Intent的clientSecret
     useEffect(() => {
       const fetchClientSecret = async () => {
         const res = await userRequest.post('/create-payment-intent', {
           amount: 172500
         });
         setClientSecret(res.data.clientSecret);
       };
       fetchClientSecret();
     }, []);
   
     const handleSubmit = async (event) => {
       event.preventDefault();
       if (!stripe || !elements) return;
   
       const { error } = await stripe.confirmPayment({
         elements,
         confirmParams: {
           return_url: `${window.location.origin}/success`,
         },
         redirect: 'if_required' // 仅在必要时跳转，优先嵌入式完成
       });
   
       if (error) {
         setErrorMessage(error.message);
       } else {
         // 支付成功后调用后端接口记录订单
         const res = await userRequest.post("/checkout/payment", {
           paymentIntentId: error?.paymentIntent?.id,
           amount: 172500,
         });
         history.push("/success", { stripeData: res.data });
       }
     };
   
     return (
       <form onSubmit={handleSubmit}>
         <PaymentElement options={{ clientSecret }} />
         <button type="submit" disabled={!stripe}>完成支付</button>
         {errorMessage && <div className="error">{errorMessage}</div>}
       </form>
     );
   };
   

3. 后端适配新版支付流程
   新版支付需要后端先创建Payment Intent，Node.js示例代码：

   const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
   
   app.post('/create-payment-intent', async (req, res) => {
     const { amount } = req.body;
   
     const paymentIntent = await stripe.paymentIntents.create({
       amount: amount,
       currency: 'usd', // 根据业务调整货币类型
     });
   
     res.send({
       clientSecret: paymentIntent.client_secret,
     });
   });
   

额外排查点 #

• 检查Stripe公钥/密钥是否匹配当前环境（测试/生产）
• 查看Stripe仪表盘的开发者日志（Dashboard > Developers > Logs），获取具体错误详情
• 确认移动端浏览器未拦截Stripe的弹窗或请求，检查隐私设置

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