如何从Stripe Payment Element中获取卡片发卡国家？

首先明确：别尝试用JavaScript hack爬取Payment Element内部内容，这个方案完全走不通，还会惹大麻烦。Payment Element的卡号输入区是跨域托管的iframe，受浏览器同源策略限制，你根本读不到内部输入的内容；私自抓取用户银行卡信息属于严重违反PCI DSS合规要求的行为，轻则被支付服务商封禁账户，重则面临监管罚款。

你直接用Stripe JS官方提供的标准能力就能拿到发卡国，完全满足按发卡国差异化收费的需求：

• 监听Payment Element实例的change事件即可。用户输入卡号前6位（BIN/IIN段）时，Stripe会实时返回识别到的发卡国家信息，返回值是ISO 3166-1 alpha-2标准的两位国家代码，比如US代表美国、DE代表德国，识别时机足够早，完全支持你动态调整前端展示的应付金额。
  参考实现代码：

  // elements实例初始化逻辑沿用你项目里的原有写法即可
  const paymentElement = elements.create('payment');
  paymentElement.mount('#payment-element-wrap');
  
  paymentElement.on('change', (event) => {
    if (event.value?.country) {
      const cardIssuingCountry = event.value.country;
      // 在这里写你对应不同国家计算附加费、更新页面金额的逻辑
    }
  });
  

• 前端拿到的发卡国仅适合做页面展示用，最终实际扣款的时候，必须以后端接口返回、或者Webhook推送的支付方式对象里的卡片国家字段作为费用计算依据，避免前端参数被篡改导致费用错算。
• 要是不想自己写前端动态算费的逻辑，也可以直接在Stripe后台配置基于发卡国的附加费规则，支付流程中会自动计算对应费用，稳定性比自己写逻辑高很多。

所有绕过官方接口抓取卡信息的hack方案都不具备长期可用性，Stripe随时可能调整iframe内部结构，这类临时方案随时会失效，反而影响正常业务转化。

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