Blazor集成Stripe：如何用已挂载元素调用createPaymentMethod？

在Blazor应用集成Stripe替换“添加卡片”组件时，遇到两个核心问题：

• 原使用stripe.confirmSetup方法需要重定向，与现有应用行为冲突；改用createPaymentMethod时，传入已挂载的Payment Element报错：

  Invalid value for createPaymentMethod: card was payment Element, which cannot be used to create card PaymentMethods

• 尝试给confirmSetup添加redirect参数时返回400错误，提示Received unknown parameter: redirect。

一、解决createPaymentMethod与Payment Element不兼容问题 #

你当前创建的是Payment Element（elements.create('payment')），但createPaymentMethod仅支持搭配Card Element使用。要实现无重定向创建支付方式，需调整为Card Element：

修改步骤 #

1. 替换Element类型：将创建Payment Element的代码改为Card Element
2. 调整createPaymentMethod调用：Card Element可直接传入该方法，无需额外参数调整

修改后的JavaScript代码 #

export function initialiseStripeAndMount(publishableKey, clientIntentSecret, redirectUrl){
    const stripe = Stripe(publishableKey);  

    const options = {
        appearance: {
            theme: 'night',
            labels: 'floating',           
        }
    };

    const elements = stripe.elements(options);

    // 创建并挂载Card Element（替换原Payment Element）
    const cardElement = elements.create('card');
    cardElement.mount('#payment-element');

    const form = document.getElementById('payment-form');
    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const result = await stripe.createPaymentMethod({                
            type: 'card',
            card: cardElement,
            billing_details: {
                name: 'Jenny Rosen', // 建议从Blazor的Model动态获取，可通过参数传入
            },
        });

        if (result.error) {
            // 将错误信息显示到页面
            document.getElementById('payment-method-errors').textContent = result.error.message;
        } else {
            // 拿到paymentMethod后，调用Blazor的.NET方法完成后续逻辑（如关联到用户）
            window.invokeMethodAsync('SavePaymentMethod', result.paymentMethod.id);
            // 展示成功弹窗并更新DOM
            alert('卡片添加成功！');
        }
    });
}

Razor部分无需大幅修改，保留原#payment-element容器即可。

二、修复confirmSetup参数错误问题 #

redirect参数不属于confirmParams，而是stripe.confirmSetup的顶层参数。若想实现仅在必要时弹窗处理3DS验证（减少重定向），正确写法如下：

const result = await stripe.confirmSetup({
    elements,
    confirmParams: {
        return_url: 'http://www.google.co.uk', // 仍需填写，但modal模式下多数情况不会触发重定向
    },
    redirect: 'if_required' // 该参数为顶层参数，不在confirmParams内
});

若核心需求是完全无重定向，更推荐使用Card Element + createPaymentMethod的方案，之后通过后端API手动关联SetupIntent。

三、避免页面回发的关键 #

确保在form的submit事件中执行event.preventDefault()，你当前代码已实现该逻辑，保持即可避免页面回发。

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