React集成Stripe支付遇404错误，支付成功后无法跳转至/success页面

问题现象 #

• 点击支付按钮弹出Stripe支付窗口后，支付成功无法跳转至/success页面
• 控制台出现404错误：

  Failed to load resource: the server responded with a status of 404 ()
  GET https://checkout.stripe.com/v3/data/zipCodes/TW.json?crossDomain=true 404

相关代码（Cart.jsx） #

import React, { useEffect, useState } from 'react'
import { useSelector } from "react-redux"
import StripeCheckout from "react-stripe-checkout"
import { useNavigate, useLocation } from 'react-router-dom'
import axios from "axios";
import CategoriesItems from '../components/categories/CategoriesItems';
const KEY = "pk_test_51LmJsQKJQzZib5.....rM6";

const Cart = () => {
    const { state } = useLocation();
    const cart = useSelector(state => state.cart);
    const [stripeToken, setStripeToken] = useState(null);
    const navigate = useNavigate();
    const onToken = (token) => {
        setStripeToken(token);
    }
    useEffect(() => {
        const makeRequest = async () => {
            try {
                const res = await axios.post("http://localhost:8000/api/checkout/pay", 
                {
                    tokenId: stripeToken.id,
                    amount: cart.total * 100,
                })
                navigate("/success", {
                    state: {
                        stripeData: res.data,
                        products: cart
                    }
                });
            } catch { console.log(5)}
        }
        stripeToken && cart.total > 1 && makeRequest();
    }, [stripeToken, cart.total, navigate]);

    return (
        <Summary>
            <SummaryTitle>order summary</SummaryTitle>
            <SummaryItem>
                <SummaryItemText>Subtotal</SummaryItemText>
                <SummaryItemPrice>${cart.total}</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem>
                <SummaryItemText>Estimated Shopping</SummaryItemText>
                <SummaryItemPrice>$5</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem>
                <SummaryItemText>Shipping Discount</SummaryItemText>
                <SummaryItemPrice>$ -5.90</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem type="total">
                <SummaryItemText >Total</SummaryItemText>
                <SummaryItemPrice>${cart.total}</SummaryItemPrice>
            </SummaryItem>
            <StripeCheckout
                name="Fashino on me"
                billingAddress
                shippingAddress
                description={`Your total is $${cart.total}`}
                amount={cart.total * 100}
                token={onToken}
                stripeKey={KEY}>
                <Button>Checkout now</Button>
            </StripeCheckout>
        </Summary>
    )
}

export default Cart

解决方法 #

1. 修复Stripe台湾邮编API 404问题 #

这个错误源于你使用的react-stripe-checkout是已停止维护的旧版组件，对台湾地区的邮编数据API路径存在兼容问题，有两种解决方式：

方式一：升级到Stripe官方新版组件

官方推荐使用@stripe/react-stripe-js和@stripe/stripe-js替代旧组件，彻底解决地区适配问题：

• 安装依赖：

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

• 在根组件（如App.js）中配置StripeProvider：

  import { Elements } from '@stripe/react-stripe-js';
  import { loadStripe } from '@stripe/stripe-js';
  
  const stripePromise = loadStripe('pk_test_51LmJsQKJQzZib5.....rM6');
  
  function App() {
    return (
      <Elements stripe={stripePromise}>
        {/* 你的路由和其他组件 */}
      </Elements>
    );
  }
  

• 修改Cart.jsx中的支付逻辑：

  import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
  
  const Cart = () => {
      const cart = useSelector(state => state.cart);
      const navigate = useNavigate();
      const stripe = useStripe();
      const elements = useElements();
  
      const handlePayment = async (e) => {
          e.preventDefault();
          if (!stripe || !elements) return;
  
          // 创建支付方式
          const { error, paymentMethod } = await stripe.createPaymentMethod({
              type: 'card',
              card: elements.getElement(CardElement),
          });
  
          if (!error) {
              try {
                  const res = await axios.post("http://localhost:8000/api/checkout/pay", {
                      paymentMethodId: paymentMethod.id,
                      amount: cart.total * 100,
                  });
                  // 支付成功跳转
                  navigate("/success", {
                      state: {
                          stripeData: res.data,
                          products: cart
                      }
                  });
              } catch (err) {
                  console.error('支付请求失败:', err);
                  // 可添加用户提示
              }
          } else {
              console.error('卡片验证失败:', error);
          }
      };
  
      return (
          {/* ...订单摘要部分保持不变 */}
          <form onSubmit={handlePayment}>
              <CardElement />
              <button type="submit" disabled={!stripe}>Checkout now</button>
          </form>
      )
  }
  

方式二：临时规避旧组件问题

如果暂时不想升级，可通过设置locale为支持的地区（如'en'），或禁用邮编验证（不推荐，影响用户体验）：

<StripeCheckout
    // ...其他属性
    locale="en"
    // 或设置zipCode={false} 禁用邮编收集
/>

2. 完善支付跳转逻辑 #

原代码的错误处理和触发条件存在问题，导致跳转失败无法排查：

• 原catch块仅打印console.log(5)，无法捕获具体错误，修改为打印详细错误信息
• 触发条件cart.total > 1不合理，改为cart.total > 0避免总价为0时无法发起请求

修改后的useEffect代码：

useEffect(() => {
    const makeRequest = async () => {
        try {
            if (!stripeToken?.id) return;
            const res = await axios.post("http://localhost:8000/api/checkout/pay", {
                tokenId: stripeToken.id,
                amount: cart.total * 100,
            });
            navigate("/success", {
                state: {
                    stripeData: res.data,
                    products: cart
                }
            });
        } catch (error) {
            console.error('支付请求失败:', error.response?.data || error.message);
            // 可添加前端错误提示，告知用户支付失败
        }
    };
    if (stripeToken && cart.total > 0) {
        makeRequest();
    }
}, [stripeToken, cart.total, navigate]);

3. 检查后端API可用性 #

确保http://localhost:8000/api/checkout/pay接口能正常接收POST请求，返回正确响应。可通过Postman等工具测试接口是否正常工作，避免后端错误导致跳转失败。

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