如何为Stripe结账按钮添加来自输入框的元数据？

问题核心在于：页面加载时PHP就已生成Stripe Session，此时输入框内容是初始值；用户后续修改输入框内容后，已生成的Session不会自动更新metadata。要解决这个问题，需要把Session创建逻辑改为用户点击结账按钮时动态执行，实时传递输入框的最新内容。

具体实现步骤 #

1. 重构PHP为独立接口（create-checkout-session.php） #

将Session创建代码改成接收POST参数的接口，动态获取输入框内容：

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

\Stripe\Stripe::setApiKey('你的Stripe私钥');

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

// 接收前端传过来的输入框内容
$test_content = $_POST['test_content'] ?? '';

$session = \Stripe\Checkout\Session::create([
  'payment_method_types' => ['card'],
  'line_items' => [[
    'price_data' => [
      'currency' => 'usd',
      'product_data' => ['name' => '你的产品名称'],
      'unit_amount' => 2000, // 单位：分，对应20美元
    ],
    'quantity' => 1,
  ]],
  'mode' => 'payment',
  'success_url' => 'https://你的域名/success',
  'cancel_url' => 'https://你的域名/cancel',
  'metadata' => [
    'test' => $test_content // 使用实时传递的输入框内容
  ],
]);

echo json_encode(['session_id' => $session->id]);
?>

2. 修改前端JS逻辑 #

点击结账按钮时，先获取输入框最新值，再调用PHP接口创建Session，最后跳转至Stripe结账页：

<input type="text" id="test" placeholder="请输入内容">
<button id="checkout-btn">前往结账</button>

<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe('你的Stripe公钥');
const checkoutBtn = document.getElementById('checkout-btn');

checkoutBtn.addEventListener('click', async () => {
  // 获取输入框实时内容
  const testInput = document.getElementById('test').value;
  
  // 调用PHP接口创建Session
  const response = await fetch('/create-checkout-session.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `test_content=${encodeURIComponent(testInput)}`
  });

  const { session_id } = await response.json();
  
  // 跳转至Stripe结账页
  const result = await stripe.redirectToCheckout({ sessionId: session_id });
  
  // 处理跳转错误
  if (result.error) {
    alert(result.error.message);
  }
});
</script>

关键注意事项 #

• 必须对输入框内容做encodeURIComponent编码，避免特殊字符导致请求参数解析错误。
• 确保Stripe私钥仅在后端PHP中使用，公钥暴露在前端是安全的。
• 可根据需求添加输入框内容校验逻辑（比如非空判断），再发起请求。

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