React集成RazorPay遇TypeError及Webpack5兼容问题求助

错误1：TypeError: window.Razorpay is not a constructor #

这个问题是因为前端未加载RazorPay的客户端脚本，直接访问window.Razorpay自然找不到构造函数，以下是两种解决方法：

方案1：通过CDN加载脚本（推荐） #

在项目的public/index.html中添加RazorPay的官方CDN脚本：

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

添加后无需导入npm包，保持代码里的// import Razorpay from 'razorpay';注释状态即可正常使用window.Razorpay。

方案2：动态加载脚本（适合按需加载场景） #

如果不想页面初始化时就加载脚本，可以在paymentHandler函数内动态加载：

const paymentHandler = async (e) => {
  // 检查脚本是否已加载，未加载则动态注入
  if (!window.Razorpay) {
    const script = document.createElement('script');
    script.src = 'https://checkout.razorpay.com/v1/checkout.js';
    script.async = true;
    await new Promise((resolve) => {
      script.onload = resolve;
      document.body.appendChild(script);
    });
  }

  // 后续订单请求、创建Razorpay实例的代码保持不变
}

错误2：webpack 5的polyfill缺失报错 #

你取消注释import Razorpay from 'razorpay';后出现这个错误，核心原因是：这个npm包是给Node.js后端生成订单用的，并非前端集成支付组件的依赖。直接删掉或注释该导入语句，就能解决这个webpack报错。

额外注意点 #

代码中的amount参数要注意单位：Razorpay要求金额为货币 subunits，比如使用INR时，500元需写成50000（1元=100 paise），你当前代码里的amount = 500实际对应5元，需根据实际需求调整。

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