使用Stripe Payment Element支付时遇payment_intent_unexpected_state错误求助

问题现象 #

使用Stripe Payment Element收集银行卡信息时，按以下流程操作出现支付失败：

1. 表单提交时调用后端接口创建Payment Intent
2. 获取clientSecret后调用stripe.confirmPayment()
3. 触发错误代码payment_intent_unexpected_state，Stripe仪表盘提示：

You cannot confirm this PaymentIntent because it's missing a payment method. You can either update the PaymentIntent with a payment method and then confirm it again, or confirm it again directly with a payment method.

核心原因 #

问题出在Payment Intent的创建时机与Elements初始化逻辑不匹配：
Stripe Payment Element需要与提前创建的Payment Intent绑定，初始化Elements时必须传入该Intent的clientSecret，这样Element才能自动将用户输入的支付方式关联到对应Intent。当前流程是表单提交时才创建Intent，此时Element已完成初始化，无法将已输入的支付方式关联到新Intent，导致确认支付时提示缺少支付方式。

修复步骤 #

1. 后端：提前创建Payment Intent并传递ClientSecret #

在页面渲染阶段（而非表单提交时）创建Payment Intent，将clientSecret通过Model传递到前端：

// Controller页面渲染逻辑
StripeConfiguration.ApiKey = stripeOptions.Value.Secret;
var paymentIntentService = new PaymentIntentService();
var intentOptions = new PaymentIntentCreateOptions
{
    Amount = Model.Amount * 100, // 单位为最小货币单位（如GBP便士）
    Currency = "gbp",
    PaymentMethodTypes = new List<string> { "card" }
};

try
{
    var intent = await paymentIntentService.CreateAsync(intentOptions);
    Model.StripeClientSecret = intent.ClientSecret; // 将ClientSecret传入前端Model
}
catch (Exception ex)
{
    // 异常处理逻辑
}

2. 前端：用ClientSecret初始化Elements #

修改initializeStripe函数，移除单独的mode/currency/amount配置，改用提前获取的clientSecret初始化Elements：

function initializeStripe() {
    stripe = Stripe('@stripeOptions.Value.PublishableKey');

    // 关键：通过ClientSecret绑定Payment Intent与Elements
    const elements = stripe.elements({
        clientSecret: '@Model.StripeClientSecret'
    });

    paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element');

    // 原有事件监听逻辑保留
    paymentElement.on('ready', function (event) {
        hideSpinner();
        document.getElementById('card-images').classList.remove("d-none");
        document.getElementById('submit-container').classList.remove("d-none");
    });

    paymentElement.on('change', function (event) {
        const button = document.getElementById('submit-btn');
        button.classList.toggle("disabled", !event.complete);
    });
}

3. 前端：简化支付确认逻辑 #

表单提交时直接调用stripe.confirmPayment，无需再创建Payment Intent：

async function confirmPayment() {
    showSpinner('Processing');
    const { error } = await stripe.confirmPayment({
        paymentElement,
        redirect: "if_required"
    });

    if (error) {
        document.getElementById('error-message').textContent = error.message;
        console.error(error);
    } else {
        // 支付成功后的跳转或状态更新逻辑
    }
}

// 表单提交监听修改
$(document).ready(function () {
    showSpinner();
    initializeStripe();
    const form = document.getElementById('payment-form');
    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        confirmPayment();
    });
});

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