如何制作仅在Razorpay支付完成后才可提交的表单？

实现该需求仅需要使用原生JavaScript配合Razorpay官方提供的前端Checkout SDK即可，无需额外复杂的第三方框架，以下是分步实现流程：

1. 前期准备 #

• 先在Razorpay商户后台获取你的测试/生产环境Key ID，这是调用支付接口的必填参数
• 提前梳理好表单需要的业务字段，提交按钮默认设置为隐藏状态

2. 编写基础HTML结构 #

<!-- 业务表单 -->
<form id="businessForm" action="/你的表单提交地址" method="POST">
  <!-- 以下是你的自定义表单字段 -->
  <div>
    <label>姓名：</label>
    <input type="text" name="username" required>
  </div>
  <div>
    <label>联系电话：</label>
    <input type="tel" name="phone" required>
  </div>
  <!-- 支付触发按钮 -->
  <button type="button" id="rzpPayBtn">完成支付</button>
  <!-- 表单提交按钮，默认隐藏 -->
  <button type="submit" id="formSubmitBtn" style="display: none;">提交表单</button>
</form>

<!-- 引入Razorpay官方前端SDK -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

3. 编写支付控制逻辑JS脚本 #

将以下代码放在页面底部或者DOMContentLoaded事件回调中即可：

// 监听支付按钮点击事件
document.getElementById('rzpPayBtn').addEventListener('click', function (e) {
  // 支付参数配置，所有标记为替换的内容请修改为你自己的业务值
  const payOptions = {
    key: "替换为你的Razorpay Key ID",
    amount: "1000", // 支付金额单位为分，比如1000对应10印度卢比
    currency: "INR",
    name: "替换为你的业务名称",
    description: "表单服务费用",
    // 支付成功回调，只有用户完成支付后才会触发
    handler: function (payRes) {
      // 把支付凭证ID存入表单隐藏域，用于后续后端校验
      const payIdInput = document.createElement('input');
      payIdInput.type = 'hidden';
      payIdInput.name = 'rzp_payment_id';
      payIdInput.value = payRes.razorpay_payment_id;
      document.getElementById('businessForm').appendChild(payIdInput);

      // 核心逻辑：显示表单提交按钮，隐藏支付按钮
      document.getElementById('formSubmitBtn').style.display = 'block';
      document.getElementById('rzpPayBtn').style.display = 'none';
      alert('支付成功，现在可以提交表单了');
    },
    // 用户取消支付回调
    modal: {
      ondismiss: function() {
        alert('你已取消支付，完成支付后才能提交表单');
      }
    }
  };

  // 唤起支付弹窗
  const rzpInstance = new Razorpay(payOptions);
  rzpInstance.open();
  e.preventDefault();
});

4. 后端校验（必做，避免安全漏洞） #

前端的按钮显示仅用于优化用户体验，绝对不能作为支付成功的判断依据，必须增加后端校验逻辑：

• 前端提交表单时会把rzp_payment_id参数一起传给后端
• 后端拿到该ID后调用Razorpay官方服务端接口，校验该笔支付的状态是否真实为成功
• 只有校验支付成功后，再处理表单的业务逻辑，避免用户篡改前端代码绕过支付

注意事项 #

• 测试阶段可以使用Razorpay提供的官方测试卡完成流程验证，不会产生真实扣费
• 生产环境部署时，请将Key ID替换为生产环境的密钥，同时核对金额参数是否正确

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