Nuxt集成Razorpay生产环境报错No key passed问题排查

你遇到的问题核心在于混淆了Razorpay前端SDK和后端SDK的使用场景，还犯了一个关键安全错误——把key_secret暴露在了前端代码里。下面一步步帮你排查和解决：

为什么会报"No key passed"？ #

Razorpay的前端JS SDK（浏览器环境中使用的new Razorpay()）只需要传入key_id，它根本不支持key_secret参数，也没有orders.create这个方法！这个创建订单的方法是后端Node.js SDK专属功能，你在前端调用它自然会因为环境不匹配而报错。

另外必须强调：key_secret是服务器端专属密钥，绝对不能出现在前端代码里，一旦泄露，任何人都可以用它创建订单、篡改金额，严重威胁你的资金安全。

正确的实现流程（Nuxt环境） #

Razorpay要求订单创建必须放在后端，前端只负责获取订单ID并发起支付，正确步骤如下：

1. 在Nuxt后端创建订单API #

首先安装Razorpay后端SDK：

npm install razorpay

然后在Nuxt项目的server/api/razorpay/create-order.js路径下创建API路由：

import Razorpay from 'razorpay'

export default defineEventHandler(async (event) => {
  // 从环境变量读取密钥（绝对不要硬编码！）
  const razorpay = new Razorpay({
    key_id: process.env.RAZORPAY_KEY_ID,
    key_secret: process.env.RAZORPAY_KEY_SECRET
  })

  const { amount, currency, receipt } = await readBody(event)
  const options = {
    amount: amount * 100, // Razorpay要求金额以最小货币单位传入（比如INR的话是派沙，100派沙=1卢比）
    currency,
    receipt,
    notes: {
      // 可选：自定义订单备注内容
    }
  }

  try {
    const order = await razorpay.orders.create(options)
    return { success: true, orderId: order.id }
  } catch (err) {
    return { success: false, error: err.message }
  }
})

2. 前端修改pay方法，调用后端API获取订单ID #

把你原来的前端pay方法改成下面这样：

async pay() {
  try {
    // 先调用后端API创建订单
    const response = await fetch('/api/razorpay/create-order', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        amount: 10, // 这里是实际金额（比如10卢比），后端会转成1000派沙
        currency: 'INR',
        receipt: 'order_rcptid_11'
      })
    })

    const data = await response.json()
    if (!data.success) {
      console.error('创建订单失败:', data.error)
      return
    }

    // 用获取到的order_id初始化Razorpay支付弹窗
    const razorpayInstance = new Razorpay({ key_id: '你的生产环境key_id' })
    const paymentOptions = {
      amount: 1000, // 这里还是最小单位金额（10*100）
      currency: 'INR',
      order_id: data.orderId,
      name: '你的商家名称',
      description: '订单描述内容',
      handler: function (response) {
        // 支付成功后的回调，建议这里再调用后端API验证支付状态
        console.log('支付成功:', response)
      },
      prefill: {
        name: '用户姓名',
        email: '用户邮箱',
        contact: '用户手机号'
      }
    }

    razorpayInstance.open(paymentOptions)
  } catch (err) {
    console.error('支付流程出错:', err)
  }
}

3. 环境变量配置 #

在Nuxt项目根目录创建.env文件，把密钥安全存储在这里：

RAZORPAY_KEY_ID=你的生产环境key_id
RAZORPAY_KEY_SECRET=你的生产环境key_secret

额外注意点 #

• 测试模式下不需要order_id是因为Razorpay允许前端直接发起测试支付，但生产环境必须通过后端创建订单，这是强制的安全机制。
• 支付成功后，一定要在后端调用Razorpay的验证API确认支付状态，不能只依赖前端回调，防止恶意篡改支付结果。

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