Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The anatomy of a credit card form

medium.com

Post reply on HN
Print view View original

21–30 of 129 posts

Re: The anatomy of a credit card form

#21

Post by gingerlime »

tomp wrote: post #2

> “My card number has spaces. Do I enter my card number with spaces, or without?” To solve for this, we limit the input values to numbers only, so 0–9. So if a user types a space, it does not register and it does not affect the number format. They failed, at the most important part of the form. The correct, i.e. the most user friendly solution is, obviously, to allow spaces (and optionally other characters, like "-,.…

jquery.payment from stripe[0] helps with formatting and automatically adjusts it to the card type as you type in the numbers. It does seem to ignore spaces though, but it adds them for you as you type. If you type in a VISA number it will format it as XXXX XXXX XXXX XXXX, but if you type in AMEX, it will format it as XXXX XXXXXX XXXXX. Pretty neat if you ask me.

You can try it here http://codepen.io/anon/pen/WvygyO

VISA: 4242 4242 4242 4242 AMEX: 3782 822463 10005 Diners: 3056 930902 5904

[0]https://stripe.com/blog/jquery-payment / https://github.com/stripe/jquery.payment

Re: The anatomy of a credit card form

#22

Post by moeamaya »

yc1010 wrote: post #12

Has anyone actually stepped back and looked at the larger picture, what a buyer wants to do is pay X (credit card is only one of them payment methods available and not really popular in some countries) they do not want to be entering long strings of numbers (whether its a credit card number, bank IBAN number, prepaid card #, or a bitcoin address) into forms they just want to pay

I had the same initial impression based on the opening paragraph. I thought the post was going to use the Uber technique of ocr-ing a webcam (in their case mobile) image of your card and auto inputting all the info.

Either way the UX process was interesting, and I think helpful for those who haven't had the chance to think through the painful development of credit card inputs.

Re: The anatomy of a credit card form

#23

Post by jordigh »

Ever since we've had cryptography, money on the internet has always seemed unnecessarily clunky to me. Everyone should have a password, then it's just a matter of encrypting who has how much money. While people make fun of how "fake" bitcoins are (as if any other money were not just a slightly more consensual mass hallucination), I really do like how they have demonstrated that internet money can be a lot more convenient. I hope that bitcoins or something like them become the standard for money online.

As to the whole fraud problem that intermediaries like Paypal or credit card companies are supposed to solve; this is orthogonal to the problems of authentication, authorisation, and consensus, which bitcoins solve. We could have both, such as banks, escrow, and arbitration (in the sense of having a third party decide if a transaction should proceed or not) even with bitcoins. We really do need better systems than what traditional internet money has done so far.

Re: The anatomy of a credit card form

#24

Post by kuschku »

leni536 wrote: post #19

> Is this form safe and secure? We just add a lock icon, sure it's secure. Lock means secure, right? Joke aside sure, it's not the designer's fault. Every time I fill out a credit card form without even pulling out my card I cringe. Why do I need a physical credit card for this, I just authenticated myself with only something I know and not something I own and I know. And my authentication credentials are just writte…

Well, they actually do that – you could just pay per wire transfer (Überweisung) if you live in the SEPA, especially in DACH it’s more common.

Bank-Authenticated direct-debit (like giropay.de) is also useful for this.

Re: The anatomy of a credit card form

#25

Post by Symbiote »

mrweasel wrote: post #11
NolF wrote: post #5

> ZIP code: Length must be minimum 5 characters, maximum 10 characters There goes Australia and their 4 digit zip codes...

I don't get the name and zip code requirements, is that standard in some countries? I only ever encounter the "Name on card" when shopping on US and UK sites. Danish online stores don't care. Is the name and zip actually used as part of a validation process? If not it should just be left out.

The article says it helps with validation, and in my experience (living in the UK) many sites ask for it.

Postcodes are quite specific, they only cover around 1-30 addresses. My workplace has at least 4 postcodes to itself (different buildings). My home address shares the postcode with about 15 other houses on the same side of the road (odd numbers 1-31).

Minimal British address examples: "SW1A 1AA" (Buckingham Palace), "6, M1 4EX" (could be a house).

Re: The anatomy of a credit card form

#26

Post by jordigh »

yc1010 wrote: post #12

Has anyone actually stepped back and looked at the larger picture, what a buyer wants to do is pay X (credit card is only one of them payment methods available and not really popular in some countries) they do not want to be entering long strings of numbers (whether its a credit card number, bank IBAN number, prepaid card #, or a bitcoin address) into forms they just want to pay

With bitcoins, I click on a bitcoin address in my web browser. That opens up a bitcoin client with the information already filled in (amount and receiving address). I then have to type my bitcoin password for the transaction to complete.

Except for the authorisation step, which could be done in other ways, most of the convenience is already in bitcoins. Any other payment URI scheme could do the same thing.

Re: The anatomy of a credit card form

#27

Post by dchest »

mrweasel wrote: post #11
NolF wrote: post #5

> ZIP code: Length must be minimum 5 characters, maximum 10 characters There goes Australia and their 4 digit zip codes...

I don't get the name and zip code requirements, is that standard in some countries? I only ever encounter the "Name on card" when shopping on US and UK sites. Danish online stores don't care. Is the name and zip actually used as part of a validation process? If not it should just be left out.

From the article:

"As an extra security measure, we have to ask customers for the ZIP code associated with their card. There is a trade-off here: adding extra inputs to the form can increase bounce rates, but by adding it, our business is more secure and less prone to fraud."

Re: The anatomy of a credit card form

#28

Post by kijin »

tomp wrote: post #2

> “My card number has spaces. Do I enter my card number with spaces, or without?” To solve for this, we limit the input values to numbers only, so 0–9. So if a user types a space, it does not register and it does not affect the number format. They failed, at the most important part of the form. The correct, i.e. the most user friendly solution is, obviously, to allow spaces (and optionally other characters, like "-,.…

Ditto for the expiry date. Showing a slash in the placeholder text but silently eating it if the customer actually tries to enter one is a recipe for confusion.

As a matter of fact, you won't even have to worry about the expiry date format for the rest of your life. None of the valid YY or YYYY codes for the next 84 years (15-99, 2015-2099) collide with a valid MM code (01-12). There's no ambiguity. So just let the customer enter any 4 or 6 digit number, figure out which part is the month and which part is the year, and convert it into your preferred format with a few lines of JS.

This is especially important if you ever plan to expand into countries where nobody is used to the MM/YY format. If the customer enters 2207, it's obviously July 2022, not the 22nd month of 2007.

Re: The anatomy of a credit card form

#30

Post by pmontra »

Bug: enter a VISA number (example: the 4111 1111 1111 1111 test number), enter an expiration date, enter a 4 digit security code. An error appears: "enter a 3 or 4 digit security code". I entered 4 digits so the message is inappropriate. Probably it should be "enter a 3 digit security code", assuming that all VISA cards have 3 digit codes.
Post reply on HN