如何通过JavaScript配合PHP实现点击按钮后创建Stripe产品

你当前的写法混淆了服务端（PHP）和客户端（JS）的执行逻辑：PHP代码在页面从服务器返回给浏览器之前就已经在服务端执行完成，不会等到前端点击按钮才运行，所以每次刷新页面请求时PHP代码就已经触发了Stripe产品创建，写在JS点击回调里不会生效。

1. 新增独立的服务端处理接口 #

新建create_stripe_product.php文件，专门处理Stripe产品创建逻辑，所有敏感的Stripe密钥都放在服务端，避免暴露：

<?php
// 这里记得替换成你自己的Stripe SDK引入路径，用composer安装的话一般是引入vendor/autoload.php
require_once 'vendor/autoload.php';
\Stripe\Stripe::setApiKey('sk_test_51JxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxJhn');
header('Content-Type: application/json');

try {
    $product = \Stripe\Product::create([
        'name' => 'test',
        // 可根据需求补充其他产品配置参数
    ]);
    echo json_encode([
        'code' => 0,
        'msg' => '创建成功',
        'product_id' => $product->id
    ]);
} catch (\Exception $e) {
    echo json_encode([
        'code' => 1,
        'msg' => '创建失败: ' . $e->getMessage()
    ]);
}
?>

2. 前端代码调整为点击发请求调用接口 #

原页面不要直接嵌入创建产品的PHP代码，改成点击按钮时通过AJAX请求调用上面的接口：

<button id="submit-button" type="button" class="btn btn-primary">Submit</button>
<script>
const btn = document.getElementById("submit-button");
btn.addEventListener("click", async e => {
    e.preventDefault();
    btn.disabled = true; // 防止重复点击触发多次创建
    try {
        const res = await fetch('./create_stripe_product.php', {
            method: 'POST'
        });
        const data = await res.json();
        if (data.code === 0) {
            alert('产品创建成功，ID：' + data.product_id);
        } else {
            alert('创建失败：' + data.msg);
        }
    } catch (err) {
        alert('请求出错：' + err.message);
    } finally {
        btn.disabled = false;
    }
})
</script>

• 不要把Stripe的密钥放在任何前端可读取的位置，所有和Stripe交互的逻辑必须全部放在服务端处理，避免密钥泄露被恶意调用
• 建议给create_stripe_product.php加上权限校验逻辑，防止被陌生人恶意请求刷接口
• 确保Stripe SDK已经正确安装，接口文件里的SDK引入路径配置正确

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