react-native-razorpay部分用户.then方法未触发问题排查求助

1. 优先添加错误捕获逻辑 #

你的代码仅处理了支付成功的回调，未捕获支付取消、失败或组件内部报错的场景，这是导致30%用户then不触发的核心原因之一。修改代码添加catch并打印完整错误信息：

let options = {
    description: 'Pay Fee',
    currency: 'INR',
    key: 'my key is here',
    amount: data?.amount * 100,
    name: 'Sample App',
    prefill: {
        email: profileData?.Email ?? '',
        contact: profileData?.ContactNo ?? '',
        name: profileData?.StudentName ?? '',
    },
    theme: {color: colors.green},
};

RazorpayCheckout.open(options)
.then(response => {
    console.log('支付成功:', response);
    // 你的业务逻辑
})
.catch(error => {
    // 打印错误码、描述及完整错误对象，排查具体异常原因
    console.error('支付异常:', error.code, error.description, error);
});

常见异常场景：用户取消支付（error.code为USER_CANCELLED）、金额参数非法、网络超时等，这些都会走catch而非then。

2. 校验支付参数合法性 #

参数异常可能导致组件内部处理失败但未抛出明确错误：

• 确保data?.amount是有效数字，避免amount变成NaN：

  const amount = data?.amount;
  if (!amount || typeof amount !== 'number' || amount <= 0) {
      console.error('无效金额:', amount);
      // 提示用户金额错误
      return;
  }
  let options = {
      // ...其他参数
      amount: amount * 100,
  };
  

• 检查prefill中的邮箱、手机号格式是否合规，部分设备对特殊字符的兼容性较差。

3. 排查版本兼容性问题 #

旧版本的react-native-razorpay可能与你的RN版本存在兼容性问题，导致回调逻辑异常：

• 查看当前组件版本：npm list react-native-razorpay
• 升级到组件最新稳定版，重新打包后测试，排除版本适配问题。

4. 避免组件卸载导致回调丢失 #

如果调用支付弹窗时，当前组件被卸载（比如用户快速返回页面），会导致回调无法触发：

• 函数组件中用useRef标记组件挂载状态：

  import { useRef, useEffect } from 'react';
  
  const PaymentScreen = () => {
      const isMounted = useRef(false);
  
      useEffect(() => {
          isMounted.current = true;
          return () => isMounted.current = false;
      }, []);
  
      const handlePayment = () => {
          RazorpayCheckout.open(options)
          .then(response => {
              if (isMounted.current) {
                  console.log('支付成功:', response);
              }
          })
          .catch(error => {
              if (isMounted.current) {
                  console.error('支付异常:', error);
              }
          });
      };
  };
  

• 类组件中用实例变量标记挂载状态，逻辑类似。

5. 收集用户端日志定位问题 #

对出现异常的用户，收集以下信息：

• 设备型号、系统版本（iOS/Android）
• 支付时的网络状态
• 应用版本号
• 控制台打印的错误日志（可通过埋点上报到你的日志系统）

6. 配置Webhook作为兜底方案 #

如果支付已成功但前端未收到回调，可在Razorpay后台配置Webhook监听payment.captured事件，通过后台接口同步支付状态，避免丢单。

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