Stripe调用confirmPayment后跳转URL缺失payment_intent等参数问题

问题根因 #

你使用的是前端哈希路由模式，URL中的#属于哈希片段，Stripe拼接返回参数时默认会把查询参数追加到域名根路径之后、哈希片段之前，因此会出现参数直接接在http://localhost:4200/后面、冲掉原有哈希路径的情况。

解决方案 #

方案1：切换为历史路由模式（推荐） #

将前端路由从哈希模式改为历史模式，移除路径中的#，Stripe会自动把查询参数追加到指定的return_url路径末尾，完全符合预期格式。
以Angular为例，修改路由配置的useHash参数即可：

// app-routing.module.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule]
})

调整后将confirmPayment的return_url改为http://localhost:4200/marketplace/cart/status即可。

方案2：保留哈希模式，新增参数中转逻辑 #

如果无法修改路由模式，在应用入口的初始化逻辑中增加参数捕获和重定向逻辑即可：

1. 调用stripe.confirmPayment()时仍正常传入完整的哈希路径作为return_url
2. 应用初始化时检查当前URL的查询参数是否包含payment_intent和payment_intent_client_secret
3. 匹配到参数后手动跳转到目标哈希路由，同时携带对应参数，示例代码如下：

// 应用根组件初始化逻辑
import { Router } from '@angular/router';

constructor(private router: Router) {
  const urlParams = new URLSearchParams(window.location.search);
  const paymentIntent = urlParams.get('payment_intent');
  const clientSecret = urlParams.get('payment_intent_client_secret');
  
  if (paymentIntent && clientSecret) {
    this.router.navigate(['/marketplace/cart/status'], {
      queryParams: {
        payment_intent: paymentIntent,
        payment_intent_client_secret: clientSecret
      }
    });
  }
}

前置校验 #

确认stripe.confirmPayment()的传参格式正确，return_url必须传入完整的绝对路径，示例调用格式：

const { error } = await stripe.confirmPayment({
  elements,
  confirmParams: {
    return_url: 'http://localhost:4200/#/marketplace/cart/status',
  },
});

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