Im trying to use Stripe v3 for payment. The guide is here

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

<form> <label> <div></div> <span><span>Credit or debit card</span></span> </label> <button type="submit">Pay</button> <div> <div></div> <div> Success! Your Stripe token is <span></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 . But I cannot see where I can collect the card number, CVC and card expiry, but NOT the zip code...

2

3 Answers

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.

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

2

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

0

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

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy