不要使用Stripe收集邮政编码

Question

我正在尝试使用Stripe v3进行付款，使用指南在此https://stripe.com/docs/elements

我不想收集邮编码，但是我无法弄清楚如何实现。我的HTML代码如下：

<form>
  <label>
    <div id="card-element" class="field is-empty"></div>
    <span><span>Credit or debit card</span></span>
  </label>
  <button type="submit">Pay</button>
  <div class="outcome">
    <div class="error" role="alert"></div>
    <div class="success">
      Success! Your Stripe token is <span class="token"></span>
    </div>
  </div>
</form>

而 JavaScript 是:

var card = elements.create('card', {
  style: {
    hidePostalCode: true,
    base: {
      iconColor: '#666EE8',
      color: '#31325F',
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSize: '15px',

      '::placeholder': {
        color: '#CFD7E0',
      },
    },
  }
});

card.mount('#card-element');

但它总是要求填写邮政编码：

这里有一个元素标签的指南https://stripe.com/docs/stripe.js#element-types。但我没看到哪里可以收集信用卡号、CVC和信用卡过期日期，而不要求填写邮政编码...

- Mark

---

请注意，提供邮政编码会增加付款成功的可能性。此外，根据所接收到的卡号，它将自动将“ZIP”更改为澳大利亚、英国等地的“邮政编码”（表单验证也随之更改）。非常巧妙！我一开始尝试删除邮政编码收集，但后来意识到它非常有帮助。 - stevec

@stevec 我也是，它足够智能，可以根据国家确定每张卡的付款要求。谢谢！ - leosteffen

Answer 1

幸运的是，这应该是一个相当简单的修复！hidePostalCode：true 应该是您的 options 中的顶级属性，而不是在这里嵌套在 style 下面。

https://stripe.com/docs/stripe.js#element-options

var card = elements.create('card', {
hidePostalCode: true,
style: {
 base: {
  iconColor: '#666EE8',
  color: '#31325F',
  lineHeight: '40px',
  fontWeight: 300,
  fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
  fontSize: '15px',

  '::placeholder': {
    color: '#CFD7E0',
   },
  }, 
 } 
});

card.mount('#card-element');

- duck

---

是否有可能不隐藏邮政编码，但不要求填写？ - alloha

不同的国家有不同的要求。我与全球销售合作，如果我输入来自美国/加拿大等国家的卡片，它需要邮政编码，但如果我尝试巴西之类的东西，则不需要。该组件会自动处理，这很棒。 - leosteffen

Answer 2

要在JavaScript代码片段中删除邮政编码收集，请执行以下操作：

 var style = {//styling
              //lots of style stuff
             };
 var card = elements.create('card', {hidePostalCode: true, style: style});

- Andre Leon Rangel

Answer 3

如果您直接使用来自'@stripe/react-stripe-js'的CardElement组件，您可以使用该组件的属性。

<CardElement options={{ hidePostalCode: true }}/>

- Ayesh Weerasinghe