React Native集成RazorPay支付网关失败：点击Pay按钮无响应

问题核心分析 #

你遇到的TypeError: Cannot read property 'open' of null错误，本质是RazorPay实例未正确初始化，且你沿用了React Web的重定向集成方式——这在React Native环境下不适用，因为RN是原生APP容器，无法通过浏览器重定向跳转至支付网关页面。

解决方案步骤 #

1. 切换为React Native专属RazorPay SDK #

React Web的表单重定向逻辑不适用于RN，必须使用官方提供的react-native-razorpay SDK：

• 安装SDK：

  npm install react-native-razorpay --save
  # RN 0.60+ 自动完成链接，低版本需手动链接
  

• 原生配置（必做）：
  • Android：在AndroidManifest.xml中添加权限

    <uses-permission android:name="android.permission.INTERNET" />
    

  • iOS：在Info.plist中确保已开启网络访问权限，Xcode项目需正确链接SDK框架

2. 正确初始化并调用支付 #

替换原有的表单重定向逻辑，直接在RN中初始化RazorPay实例并调用支付：

import Razorpay from 'react-native-razorpay';

const handlePayPress = async () => {
  // 从Node后端获取订单ID（RN用API请求，不是表单提交）
  const orderResponse = await fetch('你的Node订单生成接口', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ amount: 100, currency: 'INR' }) // 按需传参
  });
  const orderData = await orderResponse.json();

  // 配置支付参数
  const options = {
    key: '你的RazorPay密钥',
    amount: orderData.amount, // 单位：最小货币单位（如印度卢比为派萨）
    currency: orderData.currency,
    order_id: orderData.id, // 从Node后端获取的订单ID
    name: '你的商家名称',
    description: '充值订单',
    prefill: {
      email: '用户邮箱',
      contact: '用户手机号'
    }
  };

  try {
    // 打开支付页面
    const paymentResult = await Razorpay.open(options);
    // 支付成功：将结果发送给Node后端验证
    await fetch('你的Node支付验证接口', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(paymentResult)
    });
    alert('支付成功');
  } catch (error) {
    // 处理支付失败/取消
    console.log('支付失败:', error);
    alert('支付失败，请重试');
  }
};

// 在组件中绑定按钮点击事件
<Button title="Pay" onPress={handlePayPress} />

3. 调整Node后端逻辑 #

原Web端的重定向逻辑不再适用，Node端需要做两处修改：

• 订单生成接口：不再重定向，直接返回订单ID、金额等参数给RN前端
• 支付验证接口：接收RN发送的支付结果（如razorpay_payment_id、razorpay_order_id、razorpay_signature），调用RazorPay官方API验证支付合法性，返回验证状态给RN

Node端核心逻辑示例：

// 订单生成接口
app.post('/create-order', async (req, res) => {
  const { amount, currency } = req.body;
  const order = await razorpay.orders.create({
    amount: amount * 100, // 转换为最小货币单位
    currency,
    receipt: 'receipt_' + Date.now()
  });
  res.json(order);
});

// 支付验证接口
app.post('/verify-payment', async (req, res) => {
  const { razorpay_order_id, razorpay_payment_id, razorpay_signature } = req.body;
  const hmac = crypto.createHmac('sha256', '你的RazorPay密钥');
  hmac.update(razorpay_order_id + '|' + razorpay_payment_id);
  const generatedSignature = hmac.digest('hex');
  
  if (generatedSignature === razorpay_signature) {
    res.json({ status: 'success', message: '支付验证通过' });
  } else {
    res.json({ status: 'failure', message: '支付验证失败' });
  }
});

关键注意点 #

• 不要在RN中尝试用WebView加载支付页面或做浏览器重定向，官方SDK是最稳定的集成方式
• 确保Node后端生成订单时使用的是RazorPay的密钥对，且订单参数与RN端传递的一致
• 支付完成后必须通过Node后端验证签名，避免前端篡改支付结果

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