Razorpay支付网关无法连接 附HTML集成代码求故障排查

你的代码有3个直接导致支付页无法正常拉起的错误，逐一修正即可：

• 存在JS语法错误：options配置项中"description": "Test Transaction"行末尾多了一个无意义的字符n，会直接导致整个脚本解析失败，后续逻辑完全不执行。
• 点击事件绑定逻辑冲突：按钮上先绑定了onclick="payment()"触发初始化，而payment函数内部又给按钮二次绑定了点击事件触发rzp1.open()，第一次点击只会完成实例初始化，不会打开支付页，必须点击第二次才会触发拉起，逻辑完全错误。
• 配置项使用占位符：key字段当前填的是"my id"占位内容，必须替换为Razorpay后台获取的真实Key ID，本地测试用测试环境Key，上线替换为生产环境Key，否则Razorpay会直接拦截请求不加载收银台。

额外注意：正式对接时必须在options中传入后端调用Razorpay接口生成的order_id字段，否则支付会被拦截，仅本地测试拉起页面时可以暂时省略。

修复后可直接运行的完整代码 #

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</head>
<body>
<form>
    <button id="rzp-button1">Pay</button>
</form>
<script>
const options = {
    "key": "替换为你的真实Razorpay Key ID",
    "amount": "50000", // 单位为派沙，50000对应500印度卢比
    "currency": "INR",
    "name": "Acme Corp",
    "description": "Test Transaction",
    // 正式环境请传入后端生成的订单ID："order_id": "服务端返回的order_id",
    "handler": function (response) {
        alert(`支付成功，支付ID：${response.razorpay_payment_id}`);
        // 此处需要将支付返回的参数传给后端做签名校验，确认支付有效性
        console.log('支付成功返回参数', response);
    }
};

const rzp1 = new Razorpay(options);
// 绑定支付失败回调
rzp1.on('payment.failed', function (response) {
    alert(`支付失败：${response.error.description}`);
    console.log('支付失败错误详情', response.error);
});
// 统一绑定一次按钮点击事件，避免重复绑定
document.getElementById('rzp-button1').addEventListener('click', function(e) {
    rzp1.open();
    e.preventDefault();
});
</script>
</body>
</html>

验证注意事项 #

• 替换完代码先打开浏览器开发者工具的Console面板，确认没有JS语法报错再点击支付按钮
• 本地测试时不要直接用生产环境Key，生产Key要求域名必须在Razorpay后台配置的白名单内，localhost访问会被拦截
• 如果还是无法加载，检查是否有广告拦截插件、防火墙拦截了Razorpay的checkout.js资源，确认网络可以正常访问Razorpay服务。

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