本文详解 stripe 前后端集成的关键步骤，重点解决“支付元素不显示”问题：需将服务端创建的 paymentintent 客户端密钥（client_secret）动态注入前端，而非硬编码占位符。
本文详解 stripe 前后端集成的关键步骤，重点解决“支付元素不显示”问题：需将服务端创建的 paymentintent 客户端密钥（client_secret）动态注入前端，而非硬编码占位符。
Stripe 的支付流程严格遵循「服务端创建 PaymentIntent → 前端使用 client_secret 初始化 Elements」这一安全模式。你当前代码中 <script> 部分仍保留文档占位符 {{CLIENT_SECRET}} 和 '#code#'，且未将 PHP 生成的 client_secret 传递给前端，导致 Stripe.js 无法初始化 Payment Element，因此仅显示 Submit 按钮，而信用卡输入框完全缺失。
✅ 正确实现需三步协同：
-
服务端生成 PaymentIntent 并输出 client_secret
修改 PHP 部分，捕获 create() 返回的 client_secret，并通过安全方式（如内联 JS 变量或 API 接口）暴露给前端：
<?php
require_once 'vendor/stripe/stripe-php/init.php';
$stripe = new \Stripe\StripeClient('sk_test_51LEBBcHx4CKs7yGMfzjeYncAWx28zJ95YF0IXbGETygR5SkFz7K7P6Sc8at4fBektPcCYypyIAqgskLO1ffmJq22008WGAXhH6');
// 创建 PaymentIntent 并获取 client_secret
$paymentIntent = $stripe->paymentIntents->create([
'amount' => 1099,
'currency' => 'eur',
'automatic_payment_methods' => ['enabled' => true],
]);
$clientSecret = $paymentIntent->client_secret;
?>-
前端动态注入 client_secret 和 publishable key
将 clientSecret 传入 JS，并替换 Stripe() 构造函数中的测试密钥（注意：此处必须使用 publishable key，如 pk_test_...，而非 secret key！）：
<script src="https://js.stripe.com/v3/"></script>
<script>
// ✅ 使用你的 Publishable Key（以 pk_test_ 开头），绝不可用 sk_test_！
const stripe = Stripe('pk_test_51LEBBcHx4CKs7yGMfzjeYncAWx28zJ95YF0IXbGETygR5SkFz7K7P6Sc8at4fBektPcCYypyIAqgskLO1ffmJq22008WGAXhH6');
// ✅ 动态注入真实 client_secret（来自 PHP）
const clientSecret = '<?php echo $clientSecret; ?>';
const options = {
clientSecret,
appearance: {
theme: 'stripe', // 可选：modern / flat / stripe
},
};
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: 'https://yourdomain.com/success', // 支付完成后跳转地址
},
});
if (error) {
document.getElementById('error-message').textContent = error.message;
}
});
</script>⚠️ 关键注意事项：
- 密钥安全：sk_test_... 仅用于服务端，绝对不可出现在前端代码中；前端只能使用 pk_test_...（Publishable Key）。
- client_secret 必须动态传递：它是一次性、短时效凭证（默认 24 小时），不能硬编码或复用。
- HTML 结构完整性：确保 <form> 闭合标签 </form> 和 </body>、</html> 存在（你原始代码中缺失，已补全）。
- HTTPS 要求：Stripe Elements 在非 HTTPS 环境下将拒绝加载——本地开发可使用 localhost，但上线务必启用 HTTPS。
完成上述修改后，刷新页面，#payment-element 区域将自动渲染出符合 Stripe 设计规范的信用卡输入组件（含卡号、有效期、CVC 字段），用户即可完成支付流程。这是 Stripe Standard Integration 的标准实践，兼顾安全性与用户体验。
立即学习“PHP免费学习笔记（深入）”；
