如何在HTML端设置数量选择器并传递至Stripe托管结账页

1. 前端实现自定义数量选择器 #

先在HTML页面添加数量选择控件，通过表单将选中的数量提交到后端PHP接口：

<form action="/create-checkout-session" method="POST">
  <label>购买数量:</label>
  <input type="number" name="quantity" min="1" value="1" step="1" required>
  <button type="submit">进入结账</button>
</form>

可根据需求改成带加减按钮的样式，核心是通过name="quantity"将用户选择的数量传递给后端。

2. 后端PHP处理数量并创建Stripe Checkout Session #

接收前端提交的数量，创建Stripe结账会话时指定该数量，并禁用结账页的数量修改控件：

require 'vendor/autoload.php';

// 初始化Stripe
\Stripe\Stripe::setApiKey('你的Stripe秘密密钥');

// 接收前端传递的数量
$selectedQuantity = intval($_POST['quantity']);

// 创建结账会话
$session = \Stripe\Checkout\Session::create([
  'payment_method_types' => ['card'],
  'line_items' => [
    [
      'price' => '你的Stripe价格ID', // 替换为你在Stripe后台创建的价格ID
      'quantity' => $selectedQuantity,
      'adjustable_quantity' => [
        'enabled' => false, // 此参数会隐藏结账页的数量选择器
      ],
    ]
  ],
  'mode' => 'payment',
  'success_url' => 'https://你的域名/success.html', // 替换为你的成功跳转页
  'cancel_url' => 'https://你的域名/cancel.html', // 替换为你的取消跳转页
]);

// 跳转到Stripe托管结账页
header('Location: ' . $session->url);
exit;

关键注意事项 #

• 必须在line_items中指定quantity，同时将adjustable_quantity.enabled设为false，这样Stripe结账页才会隐藏数量选择控件
• 替换代码中的Stripe密钥、价格ID以及跳转URL为你自己的配置
• 若使用AJAX提交数量，后端逻辑一致，只需返回$session->url让前端跳转即可

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