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

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, Dec 06 '20 at 04:12
@stevec same here, it is smart enough to figure out the payment requirements for each card depending on the country. Thanks! — leosteffen, May 19 '21 at 21:05

score 110 · Answer 1 · answered Oct 22 '17 at 17:51

110

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

answered Oct 22 '17 at 17:51

duck

5,240
1
15
15

1

Is it possible not to hide Postal code, but do not require it? – alloha Sep 29 '20 at 00:18
2

different countries have different requirements. I work with worldwide sales and if I enter a card from countries like USA/Canada it requires zip, but if I try something like Brazil it doesn't. The component takes care of that automatically, that is great. – leosteffen May 19 '21 at 21:04

Andre Leon Rangel · Answer 2 · 2019-01-08T05:08:33.633

51

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

edited Jan 08 '19 at 05:08

answered Oct 08 '18 at 21:04

Andre Leon Rangel

1,659
1
16
28

score 6 · Answer 3 · answered Oct 25 '21 at 07:48

6

If you directly use CardElement component from '@stripe/react-stripe-js', you can use the component with props.

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

answered Oct 25 '21 at 07:48

Ayesh Weerasinghe

580
2
7
19

Do not collect Zip code with Stripe

3 Answers3