Stripe支付配置故障：页面仅显示提交按钮无银行卡输入框

你的代码存在4个直接导致控件无法渲染的硬伤，逐个修复即可正常加载：

• PHP端创建PaymentIntent后没有提取返回值中的client_secret传递给前端，前端配置里写的{{CLIENT_SECRET}}是模板占位符，没有替换为真实值，Stripe Elements无法完成鉴权渲染控件。
• 前端初始化Stripe实例时，公钥参数填的是无效占位符#code#，没有替换为pk_test开头的前端公钥，Stripe SDK初始化直接失败。
• 前端JS存在语法断裂：表单submit事件监听函数只写了阻止默认提交的代码就中断，缺少函数、代码块的闭合括号，且script标签未正常闭合就拼接了html结束标签，整个JS脚本执行到断点处直接终止，根本不会执行支付控件挂载逻辑。
• HTML结构不规范：</body>结束标签写在了script标签前面，可能导致DOM节点识别异常，控件找不到挂载点。

修复参考代码 #

<?php
require_once 'vendor/stripe/stripe-php/init.php';
// 替换为你自己的私钥，注意：sk开头的私钥绝对不能泄露到前端
$stripe = new \Stripe\StripeClient('你的sk_test私钥，记得把已经泄露的旧私钥去后台重置');
// 保存创建PaymentIntent的返回结果
$paymentIntent = $stripe->paymentIntents->create(
  [
    'amount' => 1099,
    'currency' => 'eur',
    'automatic_payment_methods' => ['enabled' => true],
  ]
);
$clientSecret = $paymentIntent->client_secret;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order</title>
</head>
<body>
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements会在这里自动创建支付输入控件 -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- 支付错误信息展示位置 -->
  </div>
</form>

<script src="https://js.stripe.com/v3/"></script>
<script>
// 这里替换为你自己的pk_test开头的前端公钥，绝对不能放sk开头的私钥
const stripe = Stripe('你的pk_test公钥');
const options = {
  // 直接输出PHP获取到的真实client_secret
  clientSecret: '<?php echo $clientSecret; ?>',
  appearance: {},
};

const elements = stripe.elements(options);
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // 支付提交逻辑
  const {error} = await stripe.confirmPayment({
    elements,
    confirmParams: {
      // 替换为支付成功后的跳转地址
      return_url: '你的支付成功页地址',
    },
  });
  // 错误信息展示
  if (error) {
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  }
});
</script>
</body>
</html>

额外提醒 #

• 你贴在问题里的sk开头私钥已经公开泄露，立刻去Stripe后台重置对应密钥，避免被恶意调用造成资金损失。
• 不要在前端代码中写入任何sk开头的私钥，前端只能使用pk开头的公钥。
• 上线前记得把测试密钥替换为生产环境的live密钥。

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