多认证方式下创建Stripe订阅时，如何高效获取用户国家信息并优化UX

针对你的场景，有几个更优的方案可以避免重复收集国家信息，同时满足Stripe订阅创建的要求：

1. 监听Stripe Elements的change事件获取国家信息 #

虽然不能直接操作Elements的输入DOM，但Stripe提供了change事件来监听用户输入的变化。以Card或IBAN Element为例，当用户选择或输入国家时，事件回调会返回包含country字段的对象。你可以在前端监听这个事件，将国家信息暂存，在提交SetupIntent时一并传给后端，后端先把国家信息绑定到用户账户，后续创建订阅时直接使用。

示例代码（前端）：

const cardElement = elements.getElement('card');
cardElement.on('change', (event) => {
  if (event.billingDetails?.address?.country) {
    // 暂存国家信息，比如存在localStorage或组件状态中
    localStorage.setItem('user_country', event.billingDetails.address.country);
  }
});

// 提交SetupIntent时，把国家信息传给后端
fetch('/create-setup-intent', {
  method: 'POST',
  body: JSON.stringify({
    country: localStorage.getItem('user_country'),
    // 其他必要参数
  })
});

这种方法完全符合Stripe的安全规范，无需重复收集用户信息。

2. 注册流程中极简收集国家（优化Google Auth体验） #

对于Google Auth用户，无需展示完整注册表单，授权完成后仅弹出一个仅含国家选择的极简弹窗/页面——因为用户已经通过OAuth完成身份验证，仅增加一个国家选项的接受度远高于完整表单。收集到的国家信息直接存入用户账户，后续创建订阅时直接调用。

这个方案避免了两次输入，同时保证在创建订阅前已有国家信息可用。

3. 后端通过SetupIntent关联的Payment Method获取国家 #

当用户完成SetupIntent后，后端可以通过Stripe API查询该SetupIntent的详情，拿到关联的payment_method ID，再调用Stripe的Payment Method查询接口，获取billing_details.address.country字段。拿到国家信息后，先绑定到用户账户，再创建订阅。

为了避免事件触发顺序问题，可以调整前端流程：用户完成支付方式验证后，前端不直接跳转successUrl，而是先调用后端接口，让后端完成国家信息获取、存储和订阅创建操作，确认订阅创建成功后再跳转至success页面。

示例代码（后端伪代码）：

# 接收前端传递的SetupIntent ID
setup_intent = stripe.SetupIntent.retrieve('si_xxx')
if setup_intent.status == 'succeeded':
    payment_method = stripe.PaymentMethod.retrieve(setup_intent.payment_method)
    country = payment_method.billing_details.address.country
    # 把国家存入用户数据库
    user.update(country=country)
    # 创建订阅
    subscription = stripe.Subscription.create(
        customer=user.stripe_customer_id,
        items=[{'price': 'price_xxx'}],
        default_payment_method=setup_intent.payment_method,
        # 传递国家信息用于税费计算
        default_tax_rates=get_tax_rates(country)
    )

4. 提前创建Stripe Customer并关联支付方式 #

在用户注册（包括Google Auth）完成后，立即为用户创建Stripe Customer对象并关联到你的用户账户。创建SetupIntent时，指定该Customer ID，这样当SetupIntent完成后，支付方式会自动附加到Customer上。后端可以通过Customer的支付方式列表获取国家信息，同时创建订阅时直接使用该Customer，Stripe会自动用Customer的billing地址（或支付方式的地址）计算税费。

这个方案将用户信息与Stripe Customer深度绑定，后续所有支付相关操作都能复用已有信息，无需重复收集。

以上方案都能解决你面临的重复收集或异步事件顺序问题，根据你的技术栈和用户流程偏好选择即可。

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