React Native集成Razorpay报错：TypeError: Cannot read property 'open' of null

我通过$ npm i react-native-razorpay --save安装了react-native-razorpay包，代码顶部导入：

import RazorpayCheckout from "react-native-razorpay";

随后创建了paymentRazor函数并绑定到按钮的onPress事件，函数代码如下：

const paymentRazor = () => {

var options = {
  key: "rzp_test_Rh5hj15XBv8XmI",
  currency: "INR",
  amount: "5000",
  order_id: "order_DslnoIgkIDL8Zt",
  name: "Akul varshney",
  description: "Payment for purchase order",
  image: "http://103.107.67.49/static/media/Orane-Consulting-logo.c3a9713e.jpg",
  prefill: {
    email: "akul.varshney@orane.in",
    contact: "8800252885",
    name: "Akul Varshney",
  },
  theme: { color: "#53a20e" },
};

console.log(options);

RazorpayCheckout(options)
  .then((data) => {

    let bodyData = {
      razorpay_payment_id: data.razorpay_payment_id,
      razorpay_order_id: "order_DslnoIgkIDL8Zt",
      razorpay_signature: data.razorpay_signature,
    };
    dispatch(razorPayment(bodyData));
    alert(`Success: ${data.razorpay_payment_id}`);
  })

  .catch((error) => {
    // handle failure
    alert(`Error: ${error.code} | ${error.description}`);
    console.log(error);
  });
};

点击按钮触发函数时，出现错误：LOG [TypeError: Cannot read property 'open' of null]，尝试常规方法后open属性仍未定义。

解决方案 #

1. 修正API调用方式 #

你当前的调用逻辑有误，react-native-razorpay需要通过open方法唤起支付弹窗，直接调用模块本身会导致找不到方法的问题。修改代码如下：

// 替换原调用代码
RazorpayCheckout.open(options)
  .then((data) => {
    let bodyData = {
      razorpay_payment_id: data.razorpay_payment_id,
      razorpay_order_id: "order_DslnoIgkIDL8Zt",
      razorpay_signature: data.razorpay_signature,
    };
    dispatch(razorPayment(bodyData));
    alert(`Success: ${data.razorpay_payment_id}`);
  })
  .catch((error) => {
    alert(`Error: ${error.code} | ${error.description}`);
    console.log(error);
  });

2. 检查原生模块链接状态 #

React Native 0.60+虽支持自动链接，但偶尔会出现链接失败：

• iOS：进入ios目录执行pod install，重新运行项目。若仍无效，打开Xcode项目，在Build Phases的Link Binary With Libraries中手动添加Razorpay.framework。
• Android：检查android/app/build.gradle是否包含implementation project(':react-native-razorpay')；settings.gradle是否包含：

  include ':react-native-razorpay'
  project(':react-native-razorpay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-razorpay/android')
  

  缺少则手动添加后重新构建项目。

3. 清理缓存并重启项目 #

执行以下命令清除缓存，重启服务：

npx react-native start --reset-cache

之后重新运行iOS/Android项目。

4. 确认版本兼容性 #

安装最新稳定版的react-native-razorpay，确保与你的React Native版本兼容：

npm install react-native-razorpay@latest --save

安装完成后重新执行原生项目构建步骤（iOS执行pod install，Android同步gradle）。

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