React集成Razorpay报错：razorpayInstance.open()不是函数

问题描述 #

在React应用中集成Razorpay支付功能时，调用razorpayInstance.open()报错，提示该方法不是函数。已接入Razorpay CDN，流程为用户提交收货地址后调用后端API生成订单ID，传入initPayment函数初始化支付，但仍出现报错。

问题原因分析 #

1. CDN脚本加载时机问题：Razorpay的CDN脚本未完全加载就执行初始化代码，导致window.Razorpay不是合法的构造函数，无法生成正确的实例。
2. 后端异步逻辑冲突：后端订单创建接口同时混用回调函数与await，导致返回的订单数据可能异常。
3. 前端代码笔误：支付成功回调中存在语法错误，可能阻断后续流程。
4. 订单数据有效性问题：后端返回的订单字段缺失或格式错误，导致Razorpay实例初始化失败。

解决方案 #

1. 确保Razorpay脚本加载完成后再初始化 #

通过动态加载脚本的方式，保证Razorpay构造函数可用后再执行初始化逻辑：

// 新增动态加载Razorpay脚本的函数
const loadRazorpayScript = () => {
  return new Promise((resolve) => {
    if (window.Razorpay) {
      resolve();
      return;
    }
    const script = document.createElement('script');
    script.src = 'https://checkout.razorpay.com/v1/checkout.js';
    script.onload = () => resolve();
    document.body.appendChild(script);
  });
};

// 修改initPayment为异步函数，先等待脚本加载
const initPayment = async (order) => {
  console.log('i am in intipayment function');
  try {
    await loadRazorpayScript(); // 确保脚本加载完成

    const options = {
      key: process.env.REACT_APP_RAZOR_PAY_KEY_ID,
      amount: order.amount,
      currency: order.currency,
      name: 'Gulzar Ahamed',
      description: 'note: this is just a Test Payment do not panic',
      order_id: order.id,
      handler: async(response) => {
        try {
          console.log(response);
          console.log('this is the response after the order is created');
          const verifyUrl="http://localhost:4000/verify";
          const {data}=await axios.post(verifyUrl,response);
          console.log(data); // 修正原代码中的console.data(data)笔误
          console.log('i am in handler funtction after verify payment');
        } catch (error) {
          console.log(error);
          console.log('i am in initPayment handler of error...');
        }
      },
      prefill: {
        name: 'John Doe',
        email: 'john.doe@example.com',
        contact: '9876543210',
      },
      theme: {
        color: '#F37254',
      },
    };

    const razorpayInstance = new window.Razorpay(options);
    console.log(razorpayInstance);
    razorpayInstance.open();
  } catch (error) {
    console.log(error);
    console.log('failed to create order this is an error');
  }
};

2. 修正后端订单创建的异步逻辑 #

后端接口中同时使用await和回调函数会导致逻辑冲突，统一改为Promise风格：

Router.post('/create-order', async (req, res) => {
  const { orderAmount } = req.body;
  console.log(orderAmount);
  console.log('this is order amount taken rom frontend data');

  const options = {
    amount: orderAmount * 100,
    currency: 'INR',
    receipt: crypto.randomBytes(10).toString("hex"),
    payment_capture: 1,
  };

  try {
    const razorPay = new Razorpay({
      key_id: process.env.REACT_APP_RAZOR_PAY_KEY_ID,
      key_secret: process.env.REACT_APP_RAZOR_PAY_SECRET_KEY 
    });

    // 使用Promise风格替代回调函数
    const order = await razorPay.orders.create(options);
    return res.status(200).json({ message: "receive order from backend", order: order });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Failed to create order' });
  }
});

3. 验证后端返回的订单数据 #

在前端handlePayment函数中打印response.data.order，确认返回的订单包含以下必填字段：

• id：有效的Razorpay订单ID
• amount：以派萨为单位的数值（如1000对应₹10）
• currency：合法的货币代码（如"INR"）

4. 修正前端笔误 #

将支付回调中的console.data(data)改为console.log(data)，避免语法错误阻断流程。

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