adrift on a cosmic ocean

Writings on various topics (mostly technical) from Oliver Hookins and Angela Collins. We have lived in Berlin since 2009, have two kids, and have far too little time to really justify having a blog.

It's 2015, and online shopping sites still suck at taking credit card details

Posted by Oliver on the 15th of June, 2015 in category Tech
Tagged with: credit card numbersjavascriptrantvalidation

This is a small rant, and the title should already be very familiar to you, if you have paid for anything online in the last 15 or so years. Nothing (or very little) seems to have changed in that time, remarkably. We still seem to be affected by the same range of ridiculously trivial problems - all easily solvable with a tiny amount of Javascript, mind you - and not making any further progress in the state of the art.

Since I live in Germany, practically my only use for my credit card is in online shopping (almost no physical shops or even taxis accept credit cards). Like many others I suspect, I have my credit card details saved in a secure password store, not saved in my browser for convenient automatic purchases by accident or small child, so I tend to copy and paste the numbers into the text field(s) provided on the site in question. The interfaces usually seem to possess these attributes:

  • Four separate text fields which have to be entered individually, preventing you from pasting a single number in.
  • Single text field with a hard-limit of 16 characters, preventing you from pasting in a credit card number with spaces between each group of four digits.
  • Single text field with no character limit, but it will warn you and prevent further form submission until you remove any spaces or hyphens between groupings of digits.

I think I might have seen one website, ever, that actually managed to take the input you provided and massaged it into the correct format. For the benefit of anyone reading that might have to implement a website like this, here are some hints:

  • Provide a single text field, and don't limit the width of the field.
  • If there are any white-space or hyphens in the input, just throw them away silently.
  • If you are left with 16 digits as you expect, continue. If not, you can legitimately warn the user about a problem.

These are genuinely problems I would give to a programming intern on their first day and expect a solution within an hour. It's really not acceptable for widely-used websites to do such a terrible job of input handling and validation as the majority do today.

© 2010-2018 Oliver Hookins and Angela Collins