如何通过Razorpay实现React Native按钮跳转至PhonePe或Google Pay

1. 集成Razorpay React Native SDK #

先安装官方SDK依赖：

npm install react-native-razorpay
# 或使用yarn
yarn add react-native-razorpay

React Native 0.60+版本会自动完成链接，低版本需手动执行react-native link react-native-razorpay。

2. 后端生成Razorpay订单 #

必须通过后端创建订单，避免前端暴露敏感密钥。以下是Node.js后端示例：

const Razorpay = require('razorpay');
const instance = new Razorpay({ 
  key_id: '你的Razorpay密钥ID', 
  key_secret: '你的Razorpay密钥Secret' 
});

async function createRazorpayOrder(amount, currency = 'INR') {
  const order = await instance.orders.create({
    amount: amount * 100, // 金额需转为最小货币单位（如10卢比=1000派萨）
    currency,
    payment_capture: 1 // 自动捕获支付
  });
  return order.id; // 返回订单ID给前端
}

3. 前端触发支付并指定目标UPI应用 #

在按钮点击事件中，调用Razorpay的open方法，通过upi_app参数指定要跳转的应用包名：

• PhonePe 包名：com.phonepe.app
• Google Pay 包名：com.google.android.apps.nbu.paisa.user

前端代码示例：

import RazorpayCheckout from 'react-native-razorpay';

// 从后端获取订单ID的辅助函数
const fetchOrderIdFromBackend = async () => {
  const res = await fetch('你的后端订单创建接口');
  const data = await res.json();
  return data.orderId;
};

const handlePhonePePayment = async () => {
  try {
    const orderId = await fetchOrderIdFromBackend();
    
    const paymentOptions = {
      key: '你的Razorpay公钥',
      order_id: orderId,
      amount: '1000', // 10卢比（单位：派萨）
      currency: 'INR',
      name: '你的商家名称',
      description: '订单支付',
      prefill: {
        email: 'user@example.com',
        contact: '9999999999'
      },
      method: {
        upi: {
          upi_app: 'com.phonepe.app' // 替换为Google Pay包名即可跳转至对应应用
        }
      },
      theme: { color: '#2563EB' }
    };

    RazorpayCheckout.open(paymentOptions)
      .then((paymentResult) => {
        // 支付成功：将结果发送到后端验证
        console.log('支付成功:', paymentResult);
      })
      .catch((error) => {
        // 支付失败/取消处理
        console.log('支付异常:', error);
      });
  } catch (err) {
    console.error('获取订单ID失败:', err);
  }
};

// 按钮组件
<Button title="通过PhonePe支付" onPress={handlePhonePePayment} />

4. 后端验证支付状态 #

前端返回的支付结果仅作为参考，必须通过后端验证支付真实性：

• 可通过Razorpay订单查询API，传入order_id获取官方支付状态
• 或配置Razorpay Webhook，接收支付成功的异步通知

关键注意事项 #

• 确保用户设备已安装目标UPI应用，否则Razorpay会展示所有可用UPI应用列表
• 沙箱环境请使用Razorpay提供的测试密钥，生产环境切换为正式密钥
• 金额必须严格按最小货币单位传入，否则会导致支付失败

内容的提问来源于stack exchange，提问作者sanjay solanki