嘿，我来帮你搞定这个问题！你当前用的是Stripe Checkout的简易按钮模式，这种模式的自定义空间有限，想要添加姓名和手机号字段，最好切换到自定义初始化模式，这样能灵活控制字段收集和数据传递。下面是具体的实现步骤和代码：

一、修改前端代码（替换你原来的表单） #

我们会自己添加姓名、手机号输入框，然后通过JS初始化Stripe Checkout弹窗，最后把这些自定义字段和Stripe的支付令牌一起传到后端：

<form action="paiement.php" method="POST" id="payment-form">
  <!-- 自定义客户信息字段 -->
  <div style="margin-bottom: 10px;">
    <label for="customer-name">*姓名</label>
    <input type="text" id="customer-name" name="customer-name" required style="margin-left: 8px; padding: 4px;">
  </div>
  <div style="margin-bottom: 10px;">
    <label for="customer-phone">*手机号</label>
    <input type="tel" id="customer-phone" name="customer-phone" required style="margin-left: 4px; padding: 4px;">
  </div>

  <!-- 自定义付款按钮 -->
  <button type="button" id="stripe-checkout-button">完成付款</button>

  <script src="https://checkout.stripe.com/checkout.js"></script>
  <script>
    // 初始化Stripe Checkout配置
    var handler = StripeCheckout.configure({
      key: 'pk_test_uYSRAdQpdYgrGLiyrkNA3EjA',
      locale: 'auto',
      currency: 'eur',
      image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
      name: 'Demo Site',
      description: 'Example charge',
      amount: 999, // 注意：单位是分，999分=9.99欧元
      zipCode: true,
      // 用户完成支付授权后的回调逻辑
      token: function(token) {
        // 获取自定义字段的值
        const customerName = document.getElementById('customer-name').value;
        const customerPhone = document.getElementById('customer-phone').value;

        // 创建隐藏输入框，把支付令牌和客户信息添加到表单
        const form = document.getElementById('payment-form');
        
        const tokenInput = document.createElement('input');
        tokenInput.type = 'hidden';
        tokenInput.name = 'stripeToken';
        tokenInput.value = token.id;

        const nameInput = document.createElement('input');
        nameInput.type = 'hidden';
        nameInput.name = 'customerName';
        nameInput.value = customerName;

        const phoneInput = document.createElement('input');
        phoneInput.type = 'hidden';
        phoneInput.name = 'customerPhone';
        phoneInput.value = customerPhone;

        form.appendChild(tokenInput);
        form.appendChild(nameInput);
        form.appendChild(phoneInput);

        // 提交表单到后端处理付款
        form.submit();
      }
    });

    // 绑定按钮点击事件，打开Stripe支付弹窗
    document.getElementById('stripe-checkout-button').addEventListener('click', function(e) {
      handler.open();
      e.preventDefault();
    });

    // 页面关闭时销毁Checkout实例，避免内存泄漏
    window.addEventListener('popstate', function() {
      handler.close();
    });
  </script>
</form>

二、后端paiement.php处理逻辑 #

在后端你需要用Stripe的服务器端SDK来完成扣款，同时保存客户信息。这里以PHP为例：

<?php
// 引入Stripe PHP SDK（需要先通过composer安装：composer require stripe/stripe-php）
require_once('vendor/autoload.php');

// 设置你的Stripe秘钥（替换成你的测试/生产秘钥）
\Stripe\Stripe::setApiKey('sk_test_your_secret_key_here');

// 获取前端传递的参数
$stripeToken = $_POST['stripeToken'];
$customerName = $_POST['customerName'];
$customerPhone = $_POST['customerPhone'];
$amount = 999; // 与前端一致，单位为分

try {
  // 1. 创建Stripe客户对象，保存姓名和手机号
  $customer = \Stripe\Customer::create([
    'name' => $customerName,
    'phone' => $customerPhone,
    'source' => $stripeToken,
  ]);

  // 2. 创建扣款记录，关联到刚才创建的客户
  $charge = \Stripe\Charge::create([
    'amount' => $amount,
    'currency' => 'eur',
    'customer' => $customer->id,
    'description' => 'Example charge',
  ]);

  // 付款成功，跳转至成功页面
  header('Location: success.php');
  exit;
} catch (\Stripe\Exception\ApiErrorException $e) {
  // 处理支付失败的情况，比如返回错误信息
  echo '支付失败：' . $e->getMessage();
}
?>

关键说明 #

• 我们选择在页面上提前收集姓名和手机号，而不是在Stripe弹窗里添加，因为旧版Checkout弹窗的自定义字段支持有限，这种方式能让你完全控制字段的样式、验证逻辑。
• 前端的token回调是核心：当用户在Stripe弹窗里完成支付授权后，Stripe会返回一个支付令牌（token.id），我们把它和客户信息一起通过表单提交到后端。
• 后端一定要用Stripe的服务器端SDK处理付款，绝对不能在前端处理核心付款逻辑，避免安全风险。

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