Laravel+Vue集成Stripe支付时confirmCardPayment缺少客户端密钥错误

核心是表单提交回调的this指向错误：
你为form绑定submit事件时使用了普通匿名函数function(ev) {}，普通函数内部的this指向触发事件的DOM元素（即form表单对象），而非Vue组件实例。此时this.clientSecret实际是从form对象上读取该属性，不存在所以值为undefined，才会触发Stripe的参数缺失错误。

方案1：改用箭头函数作为事件回调 #

箭头函数不会创建独立的this上下文，会继承外层作用域的this（也就是Vue组件实例），直接修改事件绑定代码即可：

// 把原来的普通函数改成箭头函数
form.addEventListener('submit', (ev) => {
    ev.preventDefault();
    stripe.confirmCardPayment(String(this.clientSecret), {
        payment_method: {
            card: this.card,
            billing_details: {
                name: "testan testo"
            }
        }
    })
    // 后面的then也建议改成箭头函数，避免同样的this问题
    .then((result) => {
        if (result.error) {
            console.log(result.error.message);
        } else {
            if (result.paymentIntent.status === 'succeeded') {
                console.log(result.paymentIntent);
                window.location.href = 'http://127.0.0.1:8000/payment-success/';
            }
        }
    });
});

方案2：外层提前存局部变量 #

如果不想改函数写法，可以在外层作用域提前把需要的变量存为局部常量，不依赖this读取：

// 在form.addEventListener之前新增两行
const clientSecret = this.clientSecret;
const card = this.card;

form.addEventListener('submit', function(ev) {
    ev.preventDefault();
    // 直接用提前存的局部变量，不用this
    stripe.confirmCardPayment(String(clientSecret), {
        payment_method: {
            card: card,
            billing_details: {
                name: "testan testo"
            }
        }
    })
    // 后续逻辑不变
})

• Stripe PaymentIntent的amount参数要求传入对应货币的最小单位值，比如美元对应美分，如果你后端传入的montant_payment是美元整数（比如10代表10美元），需要乘以100再传给amount，否则会出现金额计算错误。
• 避免在前端代码硬写Stripe公钥、接口地址这类配置项，建议通过环境变量注入更易维护。

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