如何在React中查询Razorpay的支付详情（如支付方式、实付金额等）

问题原因 #

你尝试的两种方案都存在核心错误，根本无法生效：

• Razorpay 私钥绝对不允许放在前端代码中，暴露私钥会导致所有支付数据泄露、恶意篡改支付状态等严重资损风险
• Razorpay 官方API禁止前端直接跨域调用，你直接在前端发请求会被浏览器CORS策略拦截，且Razorpay Node SDK只能在服务端环境初始化，前端环境无法调用相关接口
• 你当前的前端配置还存在基础参数错误：Razorpay要求amount字段传对应货币的最小单位值，印度卢比的最小单位是派士，1 INR=100派士，所以13.14 INR应该传1314而不是13.14

正确实现方案 #

1. 前端修改（移除所有私钥相关代码）

修改后的前端代码如下：

const REACT_APP_RAZORPAY_PUBLIC_KEY = "rzp_test_QadmhmrFi5r6szP"
// 私钥完全从前端删除，不要出现在任何前端代码里

export default function Payment() {
  const options = {
    key: REACT_APP_RAZORPAY_PUBLIC_KEY,
    amount: 1314, // 修正单位，对应13.14 INR
    description: 'Transaction Amount',
    handler: async function(response) {
      // 支付成功后拿到三个核心参数
      const { razorpay_payment_id, razorpay_order_id, razorpay_signature } = response
      // 把这三个参数传给你自己的后端接口，由后端去拉取完整支付详情
      const res = await fetch("/你自己的后端接口地址", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          payment_id: razorpay_payment_id,
          order_id: razorpay_order_id,
          signature: razorpay_signature
        })
      })
      const paymentDetail = await res.json()
      // 这里拿到后端返回的完整支付详情做后续逻辑
      console.log(paymentDetail)
    },
    prefill: {
        name: "Hello",
        contact: 8453423498,
        email: "hello@gmail.com"
    },
  };
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://checkout.razorpay.com/v1/checkout.js';
    script.async = true;
    document.body.appendChild(script);
  }, [])

  const openPay = () => {
    if(window.Razorpay) {
      const paywindow = new window.Razorpay(options);
      paywindow.open();
    }
  }
  return (
    <>
      <button style={{background:"green",color:"white"}} onClick={openPay}>Pay with Razorpay</button>
    </>
  );
}

2. 后端实现（以Node.js为例）

首先安装Razorpay官方SDK：
npm install razorpay

后端接口逻辑：

const Razorpay = require('razorpay');
// 私钥只存在于服务端环境变量中，不要硬编码
const RAZORPAY_PUBLIC_KEY = "rzp_test_QadmhmrFi5r6szP"
const RAZORPAY_PRIVATE_KEY = "4IqirUMK8hjKvhq3XhHxpHT7"

// 初始化Razorpay实例
const razorpayInstance = new Razorpay({
  key_id: RAZORPAY_PUBLIC_KEY,
  key_secret: RAZORPAY_PRIVATE_KEY,
});

// 接收前端传参的接口逻辑
app.post('/你自己的后端接口地址', async (req, res) => {
  const { payment_id, order_id, signature } = req.body
  try {
    // 第一步：先验证签名，确认支付是Razorpay官方发起的，防止伪造请求，可选但强烈建议加上
    // 第二步：拉取完整支付详情
    const paymentDetail = await razorpayInstance.payments.fetch(payment_id)
    // 返回给前端
    res.json(paymentDetail)
  } catch (error) {
    res.status(500).json({ error: '获取支付详情失败' })
  }
})

补充说明 #

你也可以直接在后端用HTTP请求调用Razorpay接口，不需要用SDK，注意要在请求头里加Basic Auth认证，用户名是公钥，密码是私钥即可，服务端请求不存在跨域问题可以正常拿到返回。建议额外配置Razorpay Webhook回调，避免前端请求丢失导致支付状态不同步。

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