Stripe支付报错：PaymentIntent需支付方式及未知localhost地址问题

一、解决“The PaymentIntent requires a payment method”错误 #

问题原因 #

你最初的代码返回了Session.Id和Session.PaymentIntentId，但没有引导用户进入Stripe托管的Checkout页面。Stripe的PaymentIntent需要用户在Checkout页面完成支付方式的绑定，直接使用PaymentIntentId无法完成支付流程，因此触发该错误。

解决方案 #

必须引导用户跳转到Stripe生成的Checkout页面（即Session.Url），而不是自行处理PaymentIntent。推荐后端返回Session.Url，由前端负责跳转（Blazor WASM作为单页应用，后端直接重定向易引发路由问题）。

二、解决未知localhost:53752地址错误 #

问题原因 #

1. 配置错误：appsettings.json中的Client_URL可能被错误设置为localhost:53752，与实际运行的Blazor WASM端口不符；
2. SPA重定向处理问题：Blazor WASM的路由机制会拦截后端返回的303重定向，导致地址解析异常；
3. Stripe域名白名单问题：若localhost:53752不在Stripe后台的允许域名列表中，也可能触发异常跳转。

解决方案 #

1. 修正后端代码，返回Checkout页面URL

[HttpPost]
[Authorize]
[ActionName("Create")]
public async Task<IActionResult> Create([FromBody] StripePaymentDTO paymentDTO)
{
    try
    {
        var domain = _configuration.GetValue<string>("Client_URL");
        // 确保域名结尾带斜杠，避免URL拼接出错
        if (!domain.EndsWith("/")) domain += "/";

        var options = new SessionCreateOptions
        {
            SuccessUrl = domain + paymentDTO.SuccessUrl,
            CancelUrl = domain + paymentDTO.CancelUrl,
            LineItems = new List<SessionLineItemOptions>(),
            Mode = "payment",
            PaymentMethodTypes = new List<string> { "card" }
        };

        foreach (var item in paymentDTO.Order.OrderDetails)
        {
            var sessionLineItem = new SessionLineItemOptions
            {
                PriceData = new SessionLineItemPriceDataOptions
                {
                    UnitAmount = (long)(item.Price * 100), // 转换为分单位
                    Currency = "USD",
                    ProductData = new SessionLineItemPriceDataProductDataOptions
                    {
                        Name = item.Product.Name
                    }
                },
                Quantity = item.Count
            };
            options.LineItems.Add(sessionLineItem);
        }

        var service = new SessionService();
        Session session = await service.CreateAsync(options);

        // 返回Stripe Checkout页面URL给前端
        return Ok(new SuccessModelDTO()
        {
            Data = session.Url
        });
    }
    catch (Exception ex)
    {
        return BadRequest(new ErrorModelDTO()
        {
            ErrorMessage = ex.Message
        });
    }
}

2. 前端Blazor组件处理跳转

通过IJSRuntime调用原生JS跳转至Stripe Checkout页面，避免Blazor路由拦截问题：

@inject IJSRuntime JSRuntime
@inject HttpClient Http

<button @onclick="InitiatePayment">发起支付</button>

@code {
    private async Task InitiatePayment()
    {
        var paymentDTO = new StripePaymentDTO
        {
            SuccessUrl = "payment/success",
            CancelUrl = "payment/cancel",
            Order = new OrderDTO { /* 填充订单数据 */ }
        };

        var response = await Http.PostAsJsonAsync("/api/payment/create", paymentDTO);
        if (response.IsSuccessStatusCode)
        {
            var result = await response.ReadFromJsonAsync<SuccessModelDTO>();
            await JSRuntime.InvokeVoidAsync("window.location.href", result.Data);
        }
        else
        {
            var error = await response.ReadFromJsonAsync<ErrorModelDTO>();
            // 处理错误逻辑
            Console.WriteLine(error.ErrorMessage);
        }
    }
}

3. 额外检查项

• 确认appsettings.json中的Client_URL与Blazor WASM实际运行端口一致（如https://localhost:5001/）；
• 登录Stripe后台，进入设置→支付设置→允许的域名，添加你的客户端域名（如localhost:5001）；
• 验证SuccessUrl和CancelUrl拼接后为有效完整URL，且对应路由在Blazor WASM中已配置。

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