18

I'm creating a payment form with separate Stripe Elements:

var stripe = Stripe(...);
var elements = stripe.elements();
...
var postalCode = elements.create('postalCode');
postalCode.mount('#postalCode');

This creates a field that accepts only digits. However, the UK's post codes contain letter as well. How do I allow these too? I want the user to be able to input pretty much any possible post code in the world.

Vedran Šego
  • 3,553
  • 3
  • 27
  • 40
  • 8
    According to Stripe's documentation at https://stripe.com/docs/elements/reference#postal-code-formatting "...the postal code field validation reflects whether that country uses numeric or alphanumeric-formatted postal codes, or if the country uses postal codes at all. For instance, if a U.S. card is entered, the postal code field only accepts a five-digit numeric value. If it’s a UK card, an alphanumeric value can be provided instead." – alfredo Apr 21 '17 at 20:27
  • @alfredo No idea how I managed to miss that. Thank you. – Vedran Šego Apr 22 '17 at 14:08
  • 1
    You are welcome. Sometimes another pair of eyes helps. I'm glad my pair of eyes helped you. – alfredo Apr 22 '17 at 21:34
  • 1
    The link in @alfredo's comment is broken. Here is the new link https://stripe.com/docs/js/element/postal_code_formatting – jessica Nov 02 '21 at 01:42

1 Answers1

39

As mentioned in comments, the form dynamically adjusts based on the card you enter, since the card indicates its country. However, it doesn't seem to validate effectively. I was able to create a valid test order with invalid UK postcode.

Stripe has test card numbers for many countries. Try entering them into your Elements forms.

Form when user types Stripe's generic (US) test Visa card shows "ZIP" (it shows ZIP when empty too):

Form with Stripe's generic (US) Visa card

The same form when user types in Stripe's test UK Visa card changes to showing "Postcode" during typing:

Form with Stripe's UK test card

mahemoff
  • 44,526
  • 36
  • 160
  • 222
  • Tried a few if I recall correctly. Please share data if it works now, maybe Stripe fixed it since. – mahemoff Aug 26 '20 at 06:50
  • We're getting reports of postcodes failing validation but when we try with the same postcodes it works. Might be something else at play. – Adrian Lynch Aug 26 '20 at 06:55
  • @AdrianLynch did you solve the issue? Getting the same reports here, even tested with our user's postcode with test cards and it seems fine. Investigating further.... – Rob B Sep 09 '20 at 20:42
  • 1
    @RobB - We've added logging to gather more details from the customer interaction. Since adding the logging, it hasn't been happened! – Adrian Lynch Sep 11 '20 at 17:11