Stripe API集成：如何添加持卡人姓名与账单邮编字段

官方字段映射规则 #

• 经典checkout.js模式下，token回传的账单邮编对应字段为 token.address_zip
• 持卡人姓名对应字段为 token.card.name
• 需显式开启账单地址收集开关，Checkout弹窗才会展示姓名、邮编输入框

代码逐模块修正 #

HTML 层 #

修复原有代码中JS取值ID和HTML元素ID不匹配的问题：

<form id="myForm" action="charge.php" method="POST">
  <input type="hidden" id="stripeToken" name="stripeToken" />
  <input type="hidden" id="stripeEmail" name="stripeEmail" />
  <input type="hidden" id="stripeZipcode" name="stripeZipcode" />
  <!-- 修正：将原ID为cardHolder的元素ID改为stripeHolder，和JS取值逻辑对齐 -->
  <input type="hidden" id="stripeHolder" name="cardHolder" />
  <input type="hidden" id="amountInCents" name="amountInCents" />
  <input type="hidden" id="record_id" name="record_id" />
</form>

JavaScript 层 #

1. 开启Checkout弹窗的账单地址收集能力
2. 修正token对象的字段取值路径
3. 清理冗余未使用的变量逻辑

var recordNum = "<?php echo $record_id; ?>";

var handler = StripeCheckout.configure({
  key: 'pk_test_6fFZO2AWrKR8NqFslGt2POfsahKN5jZg0e',
  token: function(token) {
    $("#stripeToken").val(token.id);
    $("#stripeEmail").val(token.email);
    // 修正：使用官方规定的邮编取值路径
    $("#stripeZipcode").val(token.address_zip);
    // 修正：使用官方规定的持卡人姓名取值路径
    $("#stripeHolder").val(token.card.name);
    $("#amountInCents").val(window.charge);
    $("#record_id").val(recordNum);
    $("#myForm").submit();
  }
});

$('#customButton').on('click', function(e) {
  var displayAmount = parseFloat(window.charge / 100);
  handler.open({
    name: 'Travelers Free Classifieds',
    description: 'Custom amount ($' + displayAmount + ')',
    amount: window.charge,
    // 新增：开启账单地址收集，弹窗自动展示姓名、邮编输入项
    billingAddress: true
  });
  e.preventDefault();
});

// 页面导航时关闭Checkout弹窗逻辑保留
$(window).on('popstate', function() {
  handler.close();
});

PHP 后端层 #

持卡人姓名、邮编信息已在token生成阶段随银行卡数据同步传递给Stripe完成校验，Charge创建逻辑无需额外改动。如需留存字段值用于业务统计，直接从POST请求中读取即可：

// 读取前端回传的账单字段，可存入业务数据库
$billZipcode = $_POST['stripeZipcode'] ?? '';
$cardHolderName = $_POST['cardHolder'] ?? '';

// 原有Charge创建逻辑不变
$charge = \Stripe\Charge::create([
  'description' => $_SESSION['record_id'],
  'amount' => $amount,
  'currency' => 'usd',
  'source' => $token,
]);

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