如何通过默认嵌入式支付表单捕获Stripe响应详情？

我之前也遇到过类似的问题，用Stripe默认的Checkout弹窗时，没法直接拿到iframe里的错误信息，后来发现Stripe其实提供了两种靠谱的方式来捕获这些错误，刚好能满足你提取message并自定义弹窗展示的需求：

1. 监听Checkout初始化时的客户端错误 #

当你通过redirectToCheckout创建支付按钮时，可以直接在回调中捕获客户端层面的错误（比如用户在弹窗里输入过期卡后触发的验证错误）。

举个实际的代码例子：

// 初始化Stripe实例
const stripe = Stripe('你的公钥');
const checkoutBtn = document.getElementById('checkout-button');

checkoutBtn.addEventListener('click', async () => {
  const { error } = await stripe.redirectToCheckout({
    lineItems: [{ price: '你的价格ID', quantity: 1 }],
    mode: 'payment',
    successUrl: 'https://your-domain.com/success',
    cancelUrl: 'https://your-domain.com/cancel',
  });

  // 如果捕获到错误，直接提取message展示自定义弹窗
  if (error) {
    // 这里替换成你自己的弹窗逻辑
    showCustomErrorPopup(error.message);
  }
});

2. 处理支付失败后的重定向参数 #

对于一些需要Stripe服务器验证的错误（比如过期卡、余额不足），用户会被自动重定向到你指定的cancelUrl，同时Stripe会在URL中附加错误参数。你只需要在cancel页面读取这些参数即可。

比如用户用过期卡支付失败后，跳转的URL会附带类似这样的参数：
https://your-domain.com/cancel?error=expired_card&error_description=Your%20card%20has%20expired.

在cancel页面添加这段脚本就能提取并展示错误：

window.addEventListener('load', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const errorMsg = urlParams.get('error_description');
  
  if (errorMsg) {
    // 解码URL编码的字符串，然后展示自定义弹窗
    const decodedMsg = decodeURIComponent(errorMsg);
    showCustomErrorPopup(decodedMsg);
  }
});

为什么之前的错误标签没生效？ #

你提到的错误标签方案是针对Stripe Elements（自定义支付表单）的，而你用的是Stripe托管的默认Checkout弹窗（iframe形式），这是两种不同的集成方案，所以Elements的错误绑定逻辑对Checkout弹窗不起作用。

额外小提示 #

• 确保使用最新版的Stripe.js，旧版本可能对错误事件的支持不全；
• 测试时用Stripe官方的测试卡，比如4000 0000 0000 0069（过期卡）、4000 0000 0000 0002（支付拒绝）来验证错误捕获逻辑。

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