如何在Razorpay Checkout表单中添加自定义账单地址字段？

我在印度使用Razorpay进行在线支付，希望将账单地址这类自定义字段通过结账表单存储到Razorpay账户。我了解notes可用于向Razorpay账户存储自定义数据，但不知道如何在结账表单中设置这些字段。我的当前代码如下：

var options = { 
  "key": [key], 
  "amount": [amount], 
  "name": [name], 
  "description": [desc], 
  "image": "logo.png", 
  "handler": function (response) { // handler }, 
  "prefill": { "name": userName, "email": userEmail }, 
  "notes": { 
    "billing_name": "Stripe", 
    "billing_address_country": "United States", 
    "billing_address_zip": "94111", 
    "billing_address_state": "CA", 
    "billing_address_line1": "1234 Main Street", 
    "billing_address_city": "San Francisco", 
    "billing_address_country_code": "US" 
  }, 
  "theme": { "color": "#008DD2" }, 
  "modal": { "ondismiss": function () { // code } } 
}; 
var rzp = new Razorpay(options); 
rzp.open(); 

Razorpay的标准结账模态框默认不支持直接添加自定义输入字段，所以你需要先在页面上创建一个自定义表单来收集账单地址信息，然后在打开结账模态框前，把用户输入的这些值赋值给options里的notes对象。下面是具体的实现步骤：

1. 添加自定义账单地址表单到页面 #

在你的HTML中添加一个表单区域，用来让用户输入账单地址：

<div id="billing-form">
  <h3>账单地址</h3>
  <div>
    <label>姓名:</label>
    <input type="text" id="billing_name" placeholder="请输入姓名" required>
  </div>
  <div>
    <label>地址:</label>
    <input type="text" id="billing_address_line1" placeholder="请输入地址" required>
  </div>
  <div>
    <label>城市:</label>
    <input type="text" id="billing_address_city" placeholder="请输入城市" required>
  </div>
  <div>
    <label>州/省:</label>
    <input type="text" id="billing_address_state" placeholder="请输入州/省" required>
  </div>
  <div>
    <label>邮编:</label>
    <input type="text" id="billing_address_zip" placeholder="请输入邮编" required>
  </div>
  <div>
    <label>国家:</label>
    <input type="text" id="billing_address_country" placeholder="请输入国家" required>
  </div>
  <div>
    <label>国家代码:</label>
    <input type="text" id="billing_address_country_code" placeholder="请输入国家代码" required>
  </div>
  <button id="pay-btn">去支付</button>
</div>

2. 修改JavaScript代码，收集表单值并传入Notes #

把原来的支付触发逻辑绑定到自定义按钮上，点击时先收集表单输入的值，更新options里的notes，再打开Razorpay模态框：

// 绑定支付按钮点击事件
document.getElementById('pay-btn').addEventListener('click', function() {
  // 收集表单输入的值
  var billingData = {
    billing_name: document.getElementById('billing_name').value,
    billing_address_line1: document.getElementById('billing_address_line1').value,
    billing_address_city: document.getElementById('billing_address_city').value,
    billing_address_state: document.getElementById('billing_address_state').value,
    billing_address_zip: document.getElementById('billing_address_zip').value,
    billing_address_country: document.getElementById('billing_address_country').value,
    billing_address_country_code: document.getElementById('billing_address_country_code').value
  };

  // 可选：添加表单验证，确保必填字段不为空
  for (let key in billingData) {
    if (!billingData[key]) {
      alert('请填写完整的账单地址信息');
      return;
    }
  }

  // 配置Razorpay选项，将收集到的账单数据赋值给notes
  var options = { 
    "key": "[你的key]", 
    "amount": "[你的金额]", 
    "name": "[商户名称]", 
    "description": "[订单描述]", 
    "image": "logo.png", 
    "handler": function (response) { 
      // 支付成功后的处理逻辑
      console.log('支付成功:', response);
    }, 
    "prefill": { "name": userName, "email": userEmail }, 
    "notes": billingData, // 用收集到的用户输入替换硬编码值
    "theme": { "color": "#008DD2" }, 
    "modal": { "ondismiss": function () { 
      // 模态框关闭后的处理逻辑
      console.log('支付模态框已关闭');
    } } 
  }; 

  var rzp = new Razorpay(options); 
  rzp.open(); 
});

关键说明 #

• 支付完成后，你可以在Razorpay后台的交易详情页中看到这些自定义的账单地址数据。
• Razorpay的notes最多支持15个自定义字段，每个字段值不能超过256个字符，注意不要超出限制。
• 如果需要更灵活的嵌入式结账体验，你也可以使用Razorpay的自定义结账集成方案，但对于大多数场景来说，上述表单收集+传入notes的方式已经足够。

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