Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stripe Elements forcing a postal code

Stripe seems to be handling ZIP/postalcodes incorrectly when it comes to using their Stripe Elements API. This issue occurs only when the elements are split-up into parts, such as Card Number, ZIP, and CVC, as opposed to using the all-in-one solution that they offer.

If you go to the stripe elements example page located here: https://stripe.com/elements/examples

And take a look at example 2 (the one with the yellow Pay button), stripe forces the user to input a postal code even when the country tied to the credit-card does not use one (Hong-Kong, for instance).

You can easily test this using Stripe's own International Test Card Numbers.

If you try to click the Pay button without entering a zip, you get the error,

Your postal code is incomplete.

which is incorrect.

You can see that in this image here

Many countries simply don't require a postcode - so this renders the examples on the Stripe page useless for any country that does not require a postcode.

Their internal code seems to be able to determine the internationalization of the card, because the all-in-one examples HIDE the zip field for this case.

Doe anyone see a way around this error?

UPDATE 11/2/2017

They have since fixed this bug, and the postal code should no longer be required in countries that do not require it. Thanks for your help!

like image 927
Cory Avatar asked Oct 13 '17 20:10

Cory


2 Answers

CardElement accepts all the options as defined here

<div className='p-3' style={{ backgroundColor: '#F5F6FA' }}>
   <CardElement hidePostalCode={true} />
</div>

Creating your card element from JS:

creditCard = elements.create('card', {
    hidePostalCode : true
});
like image 62
Rakesh Singh Avatar answered Oct 03 '22 15:10

Rakesh Singh


To create your card element without the postal code from JS:

let stripe = Stripe(yourStripeKey);
let elements = stripe.elements({
    // your options here...
});

let creditCard = elements.create('card', {
   hidePostalCode : true
});

creditCard.mount("#creditCard");
like image 26
Félix Paradis Avatar answered Oct 03 '22 17:10

Félix Paradis