如何使用PHP获取自定义Stripe支付表单数据并实现表单定制？

1. 修改HTML表单，添加自定义字段 #

直接在现有表单中插入你需要的普通输入框即可，Stripe的卡片元素只会占用#card-element节点，不会影响其他表单字段：

<form id="payment-form">
  <!-- 新增自定义字段 start -->
  <div class="form-group">
    <label>姓名</label>
    <input type="text" id="name" required>
  </div>
  <div class="form-group">
    <label>邮箱</label>
    <input type="email" id="email" required>
  </div>
  <div class="form-group">
    <label>地址</label>
    <input type="text" id="address" required>
  </div>
  <!-- 新增自定义字段 end -->
  <div id="card-element"><!--Stripe.js injects the Card Element--></div>
  <button id="submit">
    <div class="spinner hidden" id="spinner"></div>
    <span id="button-text">Pay now</span>
  </button>
  <p id="card-error" role="alert"></p>
  <p class="result-message hidden">
    Payment succeeded, see the result in your
    <a href="" target="_blank">Stripe dashboard.</a> Refresh the page to pay again.
  </p>
</form>

2. 调整JS代码，收集并传递自定义字段 #

有两种常见的传递时机，可根据需求选择：

方案A：创建PaymentIntent时传递（适合提前收集用户信息的场景） #

先收集用户填写的字段，放到purchase对象中，随初始化请求一起传给PHP后端：

// 示例：收集表单字段到purchase对象
const purchase = {
  items: [{id: 'xxx', amount: 1400}],
  // 新增自定义字段
  name: document.querySelector('#name').value,
  email: document.querySelector('#email').value,
  address: document.querySelector('#address').value
}

fetch("../create.php", {
 method: "POST",
 headers: {
"Content-Type": "application/json"
},
 body: JSON.stringify(purchase)
 })
.then(function(result) {
  return result.json();
 })
.then(function(data) {
  var elements = stripe.elements();

var card = elements.create("card", { style: style });
card.mount("#card-element");

card.on("change", function (event) {
  document.querySelector("button").disabled = event.empty;
  document.querySelector("#card-error").textContent = event.error ? event.error.message : "";
});

var form = document.getElementById("payment-form");

form.addEventListener("submit", function(event) {
  event.preventDefault();
  payWithCard(stripe, card, data.clientSecret);
 });
});

方案B：支付确认时传递（适合用户填完所有信息再提交的场景） #

在表单提交事件中收集字段，可同时传递给Stripe（用于账单信息）和你的后端：

form.addEventListener("submit", function(event) {
  event.preventDefault();
  // 收集自定义字段
  const formData = {
    name: form.querySelector('#name').value,
    email: form.querySelector('#email').value,
    address: form.querySelector('#address').value
  }
  // 1. 可单独发请求把这些数据传给你的后端存储
  fetch('../save_user_info.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(formData)
  })
  // 2. 也可以在调用Stripe确认支付时传入账单信息
  payWithCard(stripe, card, data.clientSecret, formData);
 });

// payWithCard方法示例
const payWithCard = (stripe, card, clientSecret, formData) => {
  stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: card,
      billing_details: {
        name: formData.name,
        email: formData.email,
        address: {line1: formData.address}
      }
    }
  }).then(function(result) {
    if (result.error) {
      // 处理支付错误
    } else {
      if (result.paymentIntent.status === 'succeeded') {
        // 支付成功逻辑
      }
    }
  });
}

3. 调整PHP代码接收处理自定义字段 #

直接从请求的JSON参数中读取对应字段即可，你可以选择存入自有数据库，也可以附加到PaymentIntent的元数据中同步到Stripe后台：

<?php
require 'vendor/autoload.php';

\Stripe\Stripe::setApiKey('sk_test:my_api_key');

function calculateOrderAmount(array $items): int {
   return 1400;
}

header('Content-Type: application/json');

try {
  $json_str = file_get_contents('php://input');
  $json_obj = json_decode($json_str);

  // 读取自定义字段
  $customerName = $json_obj->name ?? '';
  $customerEmail = $json_obj->email ?? '';
  $customerAddress = $json_obj->address ?? '';

  // 此处可添加代码将上述字段存入你自己的数据库

  $paymentIntent = \Stripe\PaymentIntent::create([
  'amount' => calculateOrderAmount($json_obj->items),
  'currency' => 'usd',
  // 可选：将自定义字段存入PaymentIntent的元数据，Stripe后台可见
  'metadata' => [
    'customer_name' => $customerName,
    'customer_email' => $customerEmail,
    'customer_address' => $customerAddress
  ]
  ]);

  $output = [
  'clientSecret' => $paymentIntent->client_secret,
  ];

  echo json_encode($output);
} catch (Error $e) {
  http_response_code(500);
  echo json_encode(['error' => $e->getMessage()]);
}

注：现在Stripe使用Elements方案只是托管了卡片输入字段避免PCI合规风险，你自己添加的普通表单字段的收集提交逻辑和传统表单完全一致，没有额外限制。

内容的提问来源于stack exchange，提问作者József Kiss