如何在Stripe中正确向创建的客户传递并更新邮箱与姓名？

问题根源 #

原代码在DOMContentLoaded事件触发时就立即获取表单输入、调用后端接口创建客户和支付意图——这时候用户还没来得及填写邮箱和姓名，自然无法传递有效信息。正确的逻辑应该是把收集用户输入、创建支付意图的操作移到表单提交事件内，确保只有用户点击提交时才执行这些步骤。

修改后的前端代码 #

<body>
    <form id="payment-form">
        <input type="email" id="email" placeholder="Enter email address" required/>
        <input type="text" id="name" placeholder="Full Name" required/>
        <div id="payment-element"></div>
        <button class="str" id="submit">
            <div class="spinner hidden" id="spinner"></div>
            <span id="button-text">Submit</span>
        </button>
        <div id="payment-message" class="hidden"></div>
    </form>

<script>
document.addEventListener('DOMContentLoaded', async () => {
    const {publicKey, endPoint} = await fetch('/config').then((r) => r.json())
    const stripe = Stripe(publicKey)
    const endpoint = endPoint;
    let elements;

    const form = document.getElementById("payment-form")
    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        setLoading(true);

        // 1. 表单提交时才收集用户输入
        const email = document.getElementById('email').value;
        const name = document.getElementById('name').value;

        try {
            // 2. 调用后端创建客户与支付意图
            const response = await fetch("/create-payment-intent", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({email, name})
            })
            
            if (!response.ok) throw new Error('请求失败，请检查输入');
            const { clientSecret } = await response.json();

            // 3. 初始化Stripe Elements并挂载支付组件
            const appearance = { theme: 'flat' };
            elements = stripe.elements({ clientSecret, appearance });
            const paymentElement = elements.create('payment')
            paymentElement.mount('#payment-element')

            // 4. 触发Stripe支付确认流程
            const {error} = await stripe.confirmPayment({
                elements,
                confirmParams: {
                    return_url: endpoint
                }
            })

            if(error) {
                const message = document.getElementById("payment-message")
                message.innerText = error.message;
                message.classList.remove('hidden');
            }
        } catch (err) {
            const message = document.getElementById("payment-message")
            message.innerText = err.message || '处理请求时发生错误';
            message.classList.remove('hidden');
        }

        setLoading(false);
    })

    // 控制按钮加载状态的辅助函数
    function setLoading(isLoading) {
        const submitBtn = document.getElementById('submit');
        const spinner = document.getElementById('spinner');
        const btnText = document.getElementById('button-text');
        
        submitBtn.disabled = isLoading;
        spinner.classList.toggle('hidden', !isLoading);
        btnText.classList.toggle('hidden', isLoading);
    }
})
</script>
</body>

修改后的服务端代码（增强健壮性） #

app.post("/create-payment-intent", async (req, res) => {
    try {
        const { email, name } = req.body;
        
        // 校验必填字段
        if (!email || !name) {
            return res.status(400).json({ error: "邮箱和姓名为必填项" });
        }

        // 创建Stripe客户
        const customer = await stripe.customers.create({ email, name });
        // 创建支付意图
        const paymentIntent = await stripe.paymentIntents.create({
            customer: customer.id,
            setup_future_usage: "off_session",
            amount: 2499,
            currency: "usd",
            automatic_payment_methods: { enabled: true }
        });

        res.send({ clientSecret: paymentIntent.client_secret });
    } catch (err) {
        res.status(500).json({ error: err.message });
    }
});

关键改动说明 #

1. 逻辑迁移：把收集用户输入、调用后端接口、初始化Stripe Elements的操作全部移到表单submit事件内，确保只有用户提交时才执行，避免提前获取空值。
2. 错误处理增强：添加try/catch捕获网络请求和支付流程中的异常，给用户明确的错误提示；服务端增加参数校验和API异常捕获，返回标准化错误信息。
3. 加载状态完善：补全setLoading函数的逻辑，防止用户重复提交表单。
4. 可选优化：如果担心提交时挂载支付元素有延迟，可以提前初始化Elements（不传递clientSecret），在获取到clientSecret后调用elements.update({ clientSecret })更新，提升用户体验。

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