Razorpay测试环境支付成功后无法跳转首页的技术求助

核心问题分析 #

你用的payment.captured事件在测试环境下不会自动触发——因为测试支付的金额捕获需要手动在Razorpay商家后台操作，这才是跳转失效的主要原因，和测试密钥本身无关。

修复步骤 #

1. 替换事件监听
   把payment.captured换成payment.success事件，这个事件会在用户完成支付（不管测试还是生产）后立即触发，适合前端做跳转处理。

2. 修改后的完整代码片段

data = await createOrder(); //Calls the backend route for creating order.
console.log("DATA");
console.log(data);
const res = loadScript("https://checkout.razorpay.com/v1/checkout.js");
if (!data) {
  toast.error("Please check if you are online");
  return;
}
if (!res) {
  toast.error("Razorpay failed to load");
  return;
} else {
  const options = {
    key: <RAZORPAY_KEY>,
    amount: price,
    currency: "INR",
    name: "Merchant",
    description: "Complete Transaction",
    order_id: data.order_id,
    prefill: {
      name: checkout.name,
      email: checkout.email,
      contact: checkout.phone,
    },
  };

  const rzp = new Razorpay(options);
  // 替换为payment.success事件
  rzp.on("payment.success", (_) => {
    toast.success("Order Placed Successfully");
    cart[1]([]);
    router.push("/");
  });
  // 可选：监听支付失败事件做容错
  rzp.on("payment.failed", (err) => {
    toast.error(`Payment failed: ${err.error.description}`);
  });
  rzp.open();
}

3. 额外排查点

• 打开浏览器控制台，确认payment.success事件是否触发（可添加console.log("Payment success triggered")验证）
• 检查cart[1]([])是否为正确的状态更新方法，有没有阻塞后续代码执行
• 确保router.push("/")使用的是正确的路由实例（比如React Router的useRouter返回实例）

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