Do not collect Zip code with Stripe

43
votes

Im trying to use Stripe v3 for payment. The guide is here https://stripe.com/docs/elements

I do not want to collect the zip code. However I cannot figure out how. My HTML is:

<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>

And javascript is:

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');

But it always asks for the zip code:

enter image description here

There is a guide to the Element tag here https://stripe.com/docs/stripe.js#element-types. But I cannot see where I can collect the card number, CVC and card expiry, but NOT the zip code...

2
javascriptstripe-payments
Be aware that providing the postcode increases the chances of the payment going through. Also, based on the card number it receives, it will automatically change 'ZIP' to 'Postcode' for Australia, UK etc (and the form validation changes too). Very nifty! I tried to remove the postcode collection at first, then realised it's very helpful. – stevec
@stevec same here, it is smart enough to figure out the payment requirements for each card depending on the country. Thanks! – leosteffen

2 Answers

84
votes

Thankfully, this should be a pretty simple fix! hidePostalCode: true should be a top level property in your options, rather than nested under style here.

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');
41
votes

To remove Zip code collection do this in the javascript snippet like this:

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