Do not collect Zip code with Stripe

Question

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:

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

Answer 1

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