* Didn't realize I had the name and expiration field to enter as well. I thought it was just show casing the number entry. It wasn't until I came back here to HN to read comments that I realized that there was more to the demo.
* Tab order was wrong.
* 1Password couldn't fill in the data.
* No indicator telling me what credit cards you accept.
* CVV was hidden. There were several cases where I'd finished filling out the form, but couldn't change the CVV.
* Errors are not displayed. Try 10/10 expiration, and you are basically stuck. Without additional information, there is nothing to indicate anything is wrong.
* You can tab from the date to the hidden CVV and enter information there, but you don't see it. This is easily done because the automatic progression is inconsistent, so I've had to tab twice before getting to the year, and because it automatically moves me there, I end up on the CVV. This makes things really awkward.
* Overall, this was fairly confusing. I failed at entering the CC data the first time.
I spent 10 years handling CC processing, and basically living on the payment page. Keep the page clean, quick, and simple. You don't want to do anything confusing. Let them enter the CC data and move on. That fancy CC form will NOT sell a single thing. It will however stop people from paying. It does nothing to convert.
The more friction you place between a customer willing to pay and the actual transaction, the less chance you have of making a sale.
The goal of this design is to reduce the friction -- granted, it sounds like you had a difficult first experience, and this isn't (by far) a finished product. There are bugs: 13 of them open right now.
I know you probably won't use it -- and that's okay. I just wanted you to know I heard you :) All of the things you mentioned are things I'm actively working now to address.
Jason: Certainly the "standard" form still has some friction and loss. Could some other arrangement have less? And isn't it great that someone else is experimenting to try to find it, so you only have to switch once it's established to actually be better?
Adding to Jason's issue list:
* Fill out everything including CVV on back, erase everything on front, option to switch to the blank back persists.
* Not sure where it's supposed to be, but backside CVV for Mastercard seems positioned partially off the top left of the card on Chrome/Mac.
* Card numbers highlights existing digits when tabbing/shift-tabbing, but expiration date does not.
* If you Tab to a card number field with less than 4 digits, they are selected and typed over. If it autoadvances, they are not selected and your cursor is placed before them. This then does not autoadvance.
* D/DD in expiration followed by Tab appears to be accepted but does not work.
* Entering complete invalid Mastercard number, then clicking and entering expiration date (without name), then Tab leaves you apparently nowhere. But it's actually on the CVV, so if you type something to see where it goes, odd things happen.
* Invalid date format, or expired date is not highlighted until you type the first character of name. If out of order, you have to erase previously entered name completely before highlighting recurs.
* Tab from last field takes you off the form with no resolution.
* Enter four digits in card number field, position cursor in middle, then tab to next field. Pressing delete erases the number where you last had the cursor, not the last digit.
* Enter 4 numbers in card field, autoadvancing to next field. Shift-tab back. Tab forward. Delete erases all 4 number in previous field, rather than last as expected.
I think it's a nifty idea, visually pretty when it works, potentially useful as a standard, but right now I feel like I hit bugs faster than I can type them up. Hard to say how useful it will be when actually working, but seems worth finishing to see.
>That fancy CC form will NOT sell a single thing. It will however stop people from paying.
Citation needed.
>It does nothing to convert.
Beside the point. Any other credit card form I've seen does nothing to convert either -- and it's not it's job: by the time I'm entering my credit card details, I'm already "converted".
Most of the objections are dead simple to fix (tab order, 1password), and address nothing inherently wrong with the core idea.
I wanted to like it but I'm not sure it's really better and could be much worse merely from being so different from every other method.
That said, there are some problems:
* Amex CVV doesn't allow the proper 4 digits
* Tab-order is weird
* Confusing because sometimes you tab to next field, sometimes you don't
* Name usually not needed since already entered elsewhere (inexplicable why so many checkout forms do this)
* Difficult to change card number
Thank you for being willing to test it! This isn't something I'm making money off of, nor is it something I feel the need to ram down people's throats -- I just wanted to try something people hadn't seen before.
If it works, and people like it, great! I'm glad to have helped a little. Please let me know if you run into any trouble (my Twitter and email are on the site).
Your message for disabled Javascript is really, really weird.
> Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades...
> Never tell me the odds! Enable it anyway.
Write like this instead:
> You can still use this form if you have Javascript disabled or an unsupported browser. For a better experience, enable Javascript or upgrade your browser.
- You can have invalid inputs in the month field. "20" or "00" are not months.
- You can put invalid inputs in the year field.
- Tab order is wrong. Go from top left to bottom right.
Agreed, I stumbled for a second before realizing I could type a name in the card, but I would love to see stuff like this become popular.
Also, on Chrome 28/Mac, the validation flow seems to have some issues. I can put invalid months like "22" or "00" on the card without it highlighting the month. But it looks like the month needs to be accurate before it will show me my Luhn checkdigit is wrong. After playing with it, I'm not sure what exactly the flow needs to be, but I'm able to get green "Back to the other side..." messages with invalid data fairly consistently.
Please do. It's true that "it doesn't behave the way you'd expect if you've ever bought anything else online", but the (somewhat rational in a business sense) fear of it is why we're stuck with things that suck, the "first designs" that got popular and that now we're too afraid to change.
"Every question a user has to ask themselves during the checkout process is another reason for them not to complete it."
It depends what you are trying to sell. If you have used all known tricks to convince user to buy "lose 50 pounds in 2-weeks" product, then yes unusually good looking CC form nothing circa 97 can discourage user from converting. On the other hands, many times you offer product that user truly wants, and when your checkout is broken, they will send you a long explaining email, showing you how far they would go to get what they want.
>Beyond that it has to load images dynamically based on card type which on a slow or interrupted connection
I noticed that too, but thats mostly because this post > 420 upvotes. All you have to do is load them all in div style = "display: none" on body onload and viola! all are preloaded and hidden, waiting for your browser to use one from your cache.
I'm going to guess that this will actually convert better because it helps answer the most important question a user asks:
Did I enter my freaking CC number right?
For those hunt and peck typists, the larger size, the proper handling of spaces, and the ease of comparing to the actual card makes that so much easier, even for the average users.
I will note that the expiry and name input could be highlighter better - I missed the expiry until I accidentally clicked on it.
For those power shoppers who've memorized their card number, this will still work for them too.
>"Beyond that it has to load images dynamically based on card type which, on a slow or interrupted connection, will create even more confusion."
This actually happened when I refreshed the page while playing with it and it was replaced by a normal form. Pretty handy. I think I will also be testing it out.
It's a cute interaction, but for credit-card forms you want to be obvious rather than cute. Showing all the fields a user expects to fill out instills confidence and prevents questions like "where do I input my name and card expiry date?" "what about the security code?" "where is the billing address?" etc. People would typically not start filling out their credit-card details with those doubts in their minds.
One additional nitpick - it says "YourBank" at the beginning, so while I was aware this was supposed to a credit-card form because of the title of the submission, it can also be mistaken for a bank account number submission.
[Edit: original thread title was "why isn't every CC form like this?"]
Because it's completely unneeded.
Typical web designer wet dream. Fancy-schmancy visual design fluff, robbing screen real-estate and bandwidth for a freaking "credit card" background image, and will it still work even 2 or 5 years from now when all web dev standards have once again turned 180° and future browsers render stuff like this way-off or not at all? Oh it won't, but you web designer dude will happily fix this at a charge of only 1.5 man-days? Well, neat!
Don't get me wrong, it's fun to spend a week or three "optimizing" an approximate 0.000001% of your web app's UX with ideas like this. I get it. Been there, too.
I see another issue --- with the CC now looking more real, the user also gets closer to the "physical reality" of "I'm parting with cash". Once I see my card's logo I'm instantly more hesitant. It's been shown that the more "layers" away from real physical payment a transaction is, the "easier" a customer proceeds with it.
I see another issue --- with the CC now looking more real, the user also gets closer to the "physical reality" of "I'm parting with cash". Once I see my card's logo I'm instantly more hesitant. It's been shown that the more "layers" away from real physical payment a transaction is, the "easier" a customer proceeds with it.
Isn't it a good thing, if people are more responsible with their money?
I mean, yes, most web merchants would be much happier if all their customers spent the diaper bill and the mortgage payment on product, but I don't think you're supposed to say that out loud on a public forum. It's considered gauche.
Agreed. As a designer, I don't want to waste space with this for two form inputs, not including the CVV. On pages asking for your CC information, there's generally a lot more than just this going on, and the possibility it creates confusion for those who think it is merely a graphic representing a card, and not part of the process itself, during the most important aspect of the sale just doesn't fly with me.
To that point, I would consider putting borders on all the entry fields to make it clear where user data goes. It wouldn't be as pretty, but it might be more usable.
I think this is a great concept that will need a few rounds of feedback and some live testing before it's ready for prime time. Many commenters here are saying the current format will lower conversion rates, and I agree with that, but I think the problems are correctable. I would love to see conversion rates on this thing, although that's sort of a chicken-and-egg problem.
My general attitude: it's trying too hard to look exactly like a credit card, and that makes it not enough like a normal form. Dial it back a notch or two. Have the fillable areas look like normal form fields, don't be afraid to explanatory or error labels on the form, and show front & back at the same time rather than a "flip" interaction.
We implemented a form very similar to this about 7 years ago. (our form had light red borders around all the required fields that turned green when they had been filled, as well as some other differences). I was personally very enthusiastic about the beautiful design and thought that users would appreciate the skeuomorphism. Well, they didn't really care. If anyone was delighted by the design, it was offset by having to figure out how to use a new format of form. The form was also more difficult for us to maintain and test against different browsers. So, in the end we went back to a standard form type.
I dislike this UI because it adds more questions[1] than it takes away. "Why did it tab? Why is it loading, did I accidentally submit? Why did the tab ordering jump down, then up?"
Just show me a web form and put a picture of a VISA card somewhere static.
The part for me where it breaks down is when you have to flip the card to the back to fill in the CVC. I also hate when fields auto-tab for me. Also, why does it hide the expiration date and name fields initially?
Wait, the card actually flips? I completely didn't realize that the first time around. As for the second time around, I still don't know how to flip the card. What am I missing?
I'll be sending you a pull request in a day or two. I work with dead, blind, hard of hearing, and visually impaired folks. I see a few places where accessibility could be improved with respect to screen readers.
I swear I'm not a grammar nazi, but I did just spend the past 10 minutes thinking about ideal user interfaces for zombies and vampires. Thanks for that...
I like the general concept, but I think it relies on specific behavior to the point of being confusing.
* As others have mentioned, there's no advertising of accepted cards
* None of the empty inputs look like inputs until you tab into them. They also cease looking like inputs when you tab out. Correcting data that is not objectively invalid (e.g. expiration in the future, but wrong month) is kind of unintuitive. Someone who clicks into form fields will likely be entirely stumped by this form.
* It doesn't seem to work on mobile. On my iPhone the series of inputs were positively irritating to interact with, somehow each one only took three characters instead of four, and the lack of a tab meant I had little direction on where to go when the first four digit input disappeared.
* The CVV is clumsily poorly handled. You can actually tell in that you're breaking away from skeuomorphism to get the user to that input. It might be a better idea to show the "back" next to the card when you do the initial breakout.
I have always wanted card entry systems to know what kind of card it is - given that it's trivial to tell from the first few digits I never understood why not.
This is a great step up from that. The one thing I felt was not perfect was the multiple entry boxes for the different card types. Erasing/backspacing is not so easy. I would suggest a single entry field, and do something about adding padding spaces automagically. This also plays in to the auto-complete/form fillers these days. A credit card number is a single number, not 4 groups of numbers you copy and paste independently.
I don't think the UX is good as you think for the average user. For example, my mom (who is pretty good with a computer) would be so confused by this. I don't think she would understand that the credit card is interactive, especially after she maybe got past the first part of the credit card numbers.
I agree with others - I love the concept. However, I think for customers who are less enthusiastic and trusting in general, having a physical representation of their card built before their eyes will make them more acutely aware of the information that they're sharing, and be nervous that they're sharing it (even if they have limited reason to be nervous). In short, it will spook average customers. Maybe for a site that sold to a technology-focused crowd it would have more success though. Just my hunch.
You should use data urls or sprites for the CSS, then you don't have the the loading image coming in with delay.
Changing stuff once you have filled out the number is hard.
You have to navigate your way back through the 4 blocks, and the auto-tab and the way it reacts to arrow keys means that the cursor doesn't end up where I anticipate it.
One bug I noticed: if you enter one of the sample numbers such that the number splits into multiple fields, then backspace starting from the end, you'll end up moved to the beginning of the first field with the first few digits still filled in, rather than backspacing over them.
More generally, any time you construct your own custom input rather than using browser input fields as designed, you end up with this kind of brokenness because you have to reimplement browser logic.
I'd love to see an <input type="creditcard">, with an input-creditcard.js polyfill, and native support added to browsers. On platforms that already know your credit card number, this would allow for simple auto-fill of all relevant information. This would also make life easier for things like Google Wallet that construct virtual credit cards for you, and it would allow for browser extensions that integrate with credit-card vendors to produce one-time tokens.
This reminds me of an habit I developed: I usually input the credit card number last. I usually start selecting the card issuer, then fill out my name, billing address, expiry date and CVV.
[+] [-] jasonlotito|12 years ago|reply
* Didn't realize I had the name and expiration field to enter as well. I thought it was just show casing the number entry. It wasn't until I came back here to HN to read comments that I realized that there was more to the demo.
* Tab order was wrong.
* 1Password couldn't fill in the data.
* No indicator telling me what credit cards you accept.
* CVV was hidden. There were several cases where I'd finished filling out the form, but couldn't change the CVV.
* Errors are not displayed. Try 10/10 expiration, and you are basically stuck. Without additional information, there is nothing to indicate anything is wrong.
* You can tab from the date to the hidden CVV and enter information there, but you don't see it. This is easily done because the automatic progression is inconsistent, so I've had to tab twice before getting to the year, and because it automatically moves me there, I end up on the CVV. This makes things really awkward.
* Overall, this was fairly confusing. I failed at entering the CC data the first time.
I spent 10 years handling CC processing, and basically living on the payment page. Keep the page clean, quick, and simple. You don't want to do anything confusing. Let them enter the CC data and move on. That fancy CC form will NOT sell a single thing. It will however stop people from paying. It does nothing to convert.
The more friction you place between a customer willing to pay and the actual transaction, the less chance you have of making a sale.
[+] [-] timdorr|12 years ago|reply
Exactly. This isn't a usability improvement, it's fluff.
If you want to see an actual usability improvement, look at what Stripe has done with jQuery.payment: https://github.com/stripe/jquery.payment A good example is in their Checkout javascript component: https://stripe.com/docs/checkout
[+] [-] kenkeiter|12 years ago|reply
I know you probably won't use it -- and that's okay. I just wanted you to know I heard you :) All of the things you mentioned are things I'm actively working now to address.
[+] [-] nkurz|12 years ago|reply
Adding to Jason's issue list:
* Fill out everything including CVV on back, erase everything on front, option to switch to the blank back persists.
* Not sure where it's supposed to be, but backside CVV for Mastercard seems positioned partially off the top left of the card on Chrome/Mac.
* Card numbers highlights existing digits when tabbing/shift-tabbing, but expiration date does not.
* If you Tab to a card number field with less than 4 digits, they are selected and typed over. If it autoadvances, they are not selected and your cursor is placed before them. This then does not autoadvance.
* D/DD in expiration followed by Tab appears to be accepted but does not work.
* Entering complete invalid Mastercard number, then clicking and entering expiration date (without name), then Tab leaves you apparently nowhere. But it's actually on the CVV, so if you type something to see where it goes, odd things happen.
* Invalid date format, or expired date is not highlighted until you type the first character of name. If out of order, you have to erase previously entered name completely before highlighting recurs.
* Tab from last field takes you off the form with no resolution.
* Enter four digits in card number field, position cursor in middle, then tab to next field. Pressing delete erases the number where you last had the cursor, not the last digit.
* Enter 4 numbers in card field, autoadvancing to next field. Shift-tab back. Tab forward. Delete erases all 4 number in previous field, rather than last as expected.
I think it's a nifty idea, visually pretty when it works, potentially useful as a standard, but right now I feel like I hit bugs faster than I can type them up. Hard to say how useful it will be when actually working, but seems worth finishing to see.
[+] [-] coldtea|12 years ago|reply
Citation needed.
>It does nothing to convert.
Beside the point. Any other credit card form I've seen does nothing to convert either -- and it's not it's job: by the time I'm entering my credit card details, I'm already "converted".
Most of the objections are dead simple to fix (tab order, 1password), and address nothing inherently wrong with the core idea.
[+] [-] pbreit|12 years ago|reply
That said, there are some problems: * Amex CVV doesn't allow the proper 4 digits * Tab-order is weird * Confusing because sometimes you tab to next field, sometimes you don't * Name usually not needed since already entered elsewhere (inexplicable why so many checkout forms do this) * Difficult to change card number
[+] [-] anigbrowl|12 years ago|reply
[+] [-] aresant|12 years ago|reply
That said, my experience indicates that this is not going to convert well.
To mirror the author's own quote:
"Every question a user has to ask themselves during the checkout process is another reason for them not to complete it."
What's presented here is a drastically different experience from the norm.
It doesn't behave the way you'd expect if you've ever bought anything else online.
Beyond that it has to load images dynamically based on card type which, on a slow or interrupted connection, will create even more confusion.
I love the concept, I love the execution, I just don't think this is going to be a conversion driver.
But I'll test it anyways.
[+] [-] kenkeiter|12 years ago|reply
If it works, and people like it, great! I'm glad to have helped a little. Please let me know if you run into any trouble (my Twitter and email are on the site).
[+] [-] echohack|12 years ago|reply
Your message for disabled Javascript is really, really weird.
> Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades... > Never tell me the odds! Enable it anyway.
Write like this instead:
> You can still use this form if you have Javascript disabled or an unsupported browser. For a better experience, enable Javascript or upgrade your browser.
- You can have invalid inputs in the month field. "20" or "00" are not months.
- You can put invalid inputs in the year field.
- Tab order is wrong. Go from top left to bottom right.
[+] [-] Hannan|12 years ago|reply
Also, on Chrome 28/Mac, the validation flow seems to have some issues. I can put invalid months like "22" or "00" on the card without it highlighting the month. But it looks like the month needs to be accurate before it will show me my Luhn checkdigit is wrong. After playing with it, I'm not sure what exactly the flow needs to be, but I'm able to get green "Back to the other side..." messages with invalid data fairly consistently.
Other than that though, very neat!
[+] [-] TeMPOraL|12 years ago|reply
Please do. It's true that "it doesn't behave the way you'd expect if you've ever bought anything else online", but the (somewhat rational in a business sense) fear of it is why we're stuck with things that suck, the "first designs" that got popular and that now we're too afraid to change.
[+] [-] chrisgoodrich|12 years ago|reply
[+] [-] joering2|12 years ago|reply
It depends what you are trying to sell. If you have used all known tricks to convince user to buy "lose 50 pounds in 2-weeks" product, then yes unusually good looking CC form nothing circa 97 can discourage user from converting. On the other hands, many times you offer product that user truly wants, and when your checkout is broken, they will send you a long explaining email, showing you how far they would go to get what they want.
>Beyond that it has to load images dynamically based on card type which on a slow or interrupted connection
I noticed that too, but thats mostly because this post > 420 upvotes. All you have to do is load them all in div style = "display: none" on body onload and viola! all are preloaded and hidden, waiting for your browser to use one from your cache.
[+] [-] fragmede|12 years ago|reply
Did I enter my freaking CC number right?
For those hunt and peck typists, the larger size, the proper handling of spaces, and the ease of comparing to the actual card makes that so much easier, even for the average users.
I will note that the expiry and name input could be highlighter better - I missed the expiry until I accidentally clicked on it.
For those power shoppers who've memorized their card number, this will still work for them too.
[+] [-] krmmalik|12 years ago|reply
[+] [-] wf|12 years ago|reply
This actually happened when I refreshed the page while playing with it and it was replaced by a normal form. Pretty handy. I think I will also be testing it out.
[+] [-] ibelimb|12 years ago|reply
[+] [-] Jormundir|12 years ago|reply
[+] [-] unknown|12 years ago|reply
[deleted]
[+] [-] pytrin|12 years ago|reply
One additional nitpick - it says "YourBank" at the beginning, so while I was aware this was supposed to a credit-card form because of the title of the submission, it can also be mistaken for a bank account number submission.
[+] [-] dualogy|12 years ago|reply
Because it's completely unneeded.
Typical web designer wet dream. Fancy-schmancy visual design fluff, robbing screen real-estate and bandwidth for a freaking "credit card" background image, and will it still work even 2 or 5 years from now when all web dev standards have once again turned 180° and future browsers render stuff like this way-off or not at all? Oh it won't, but you web designer dude will happily fix this at a charge of only 1.5 man-days? Well, neat!
Don't get me wrong, it's fun to spend a week or three "optimizing" an approximate 0.000001% of your web app's UX with ideas like this. I get it. Been there, too.
I see another issue --- with the CC now looking more real, the user also gets closer to the "physical reality" of "I'm parting with cash". Once I see my card's logo I'm instantly more hesitant. It's been shown that the more "layers" away from real physical payment a transaction is, the "easier" a customer proceeds with it.
[+] [-] PhasmaFelis|12 years ago|reply
Isn't it a good thing, if people are more responsible with their money?
I mean, yes, most web merchants would be much happier if all their customers spent the diaper bill and the mortgage payment on product, but I don't think you're supposed to say that out loud on a public forum. It's considered gauche.
[+] [-] mnicole|12 years ago|reply
[+] [-] dictum|12 years ago|reply
"Wait, where do I put the CVC, name and expiration date?"
[+] [-] ChrisLTD|12 years ago|reply
[+] [-] FireBeyond|12 years ago|reply
[+] [-] lmkg|12 years ago|reply
My general attitude: it's trying too hard to look exactly like a credit card, and that makes it not enough like a normal form. Dial it back a notch or two. Have the fillable areas look like normal form fields, don't be afraid to explanatory or error labels on the form, and show front & back at the same time rather than a "flip" interaction.
[+] [-] taspeotis|12 years ago|reply
I gave up after the fourth extraneous tap.
So I guess "why aren't all credit card forms like this" is because people use iPads.
(In all seriousness, great idea but disappointing first impression.)
[+] [-] iloveyouocean|12 years ago|reply
[+] [-] FreshCode|12 years ago|reply
[1] Don't Make Me Think, Steve Krug: http://www.sensible.com/dmmt.html
[+] [-] marknutter|12 years ago|reply
[+] [-] jchin|12 years ago|reply
[+] [-] Fuzzwah|12 years ago|reply
[+] [-] unknown|12 years ago|reply
[deleted]
[+] [-] Camillo|12 years ago|reply
[+] [-] kenkeiter|12 years ago|reply
[+] [-] unknown|12 years ago|reply
[deleted]
[+] [-] robflynn|12 years ago|reply
Would you be open to a patch like that?
[+] [-] YcombRegBroken|12 years ago|reply
[+] [-] awj|12 years ago|reply
* As others have mentioned, there's no advertising of accepted cards
* None of the empty inputs look like inputs until you tab into them. They also cease looking like inputs when you tab out. Correcting data that is not objectively invalid (e.g. expiration in the future, but wrong month) is kind of unintuitive. Someone who clicks into form fields will likely be entirely stumped by this form.
* It doesn't seem to work on mobile. On my iPhone the series of inputs were positively irritating to interact with, somehow each one only took three characters instead of four, and the lack of a tab meant I had little direction on where to go when the first four digit input disappeared.
* The CVV is clumsily poorly handled. You can actually tell in that you're breaking away from skeuomorphism to get the user to that input. It might be a better idea to show the "back" next to the card when you do the initial breakout.
[+] [-] ryanobjc|12 years ago|reply
This is a great step up from that. The one thing I felt was not perfect was the multiple entry boxes for the different card types. Erasing/backspacing is not so easy. I would suggest a single entry field, and do something about adding padding spaces automagically. This also plays in to the auto-complete/form fillers these days. A credit card number is a single number, not 4 groups of numbers you copy and paste independently.
[+] [-] bluetidepro|12 years ago|reply
[+] [-] georgebonnr|12 years ago|reply
[+] [-] dpcan|12 years ago|reply
Plus, I don't know anyone anywhere anymore that's confused by a few credit card fields.
Plus, tabbing from the number goes to the name field and not the expiration.
Then you'll still have the problem of probably having to enter a valid billing address on separate fields.
I don't know if this really improves anything other than the aesthetic is very pretty.
[+] [-] pascalo|12 years ago|reply
You should use data urls or sprites for the CSS, then you don't have the the loading image coming in with delay.
Changing stuff once you have filled out the number is hard. You have to navigate your way back through the 4 blocks, and the auto-tab and the way it reacts to arrow keys means that the cursor doesn't end up where I anticipate it.
[+] [-] JoshTriplett|12 years ago|reply
One bug I noticed: if you enter one of the sample numbers such that the number splits into multiple fields, then backspace starting from the end, you'll end up moved to the beginning of the first field with the first few digits still filled in, rather than backspacing over them.
More generally, any time you construct your own custom input rather than using browser input fields as designed, you end up with this kind of brokenness because you have to reimplement browser logic.
I'd love to see an <input type="creditcard">, with an input-creditcard.js polyfill, and native support added to browsers. On platforms that already know your credit card number, this would allow for simple auto-fill of all relevant information. This would also make life easier for things like Google Wallet that construct virtual credit cards for you, and it would allow for browser extensions that integrate with credit-card vendors to produce one-time tokens.
[+] [-] dictum|12 years ago|reply