Pretty severely broken on Firefox: can't type in a card number, and the "Fork me on GitHub" banner is missing. That second problem is particularly weird, I don't know what could be causing that. Also wondering if jQuery is really necessary for this.

Overall, it's a nice concept. I wish checkout forms were more intuitive.

Same problem here with Firefox, as well as an additional problem: the form captures all key input, such as an attempt to use ctrl-w to close the tab, or ctrl-t to open a new tab. Don't do that.

Please just let keys through normally, rely on inputmode="numeric" and possibly also pattern="\d+" to enforce numbers only, and at most only use manual key event processing as a fallback.

Firefox 26.0 on Slackware 14 here.

Can't type in a card number either, although the "Fork me on GitHub" banner is there just fine.

Same, Firefox 26.0 on Windows 8, I can't enter anything into the input fields aside from name on card.

I haven't used slack since the kde4 switch, how is Slackware doin these days? Worth fussing w/?

Thanks for the feedback. Sorry about that, I'm working to get a fix - hopefully later tonight.

Should be mostly fixed now for Firefox. Still working on a couple of bugs.

For a production ready alternative, take a look at http://creditcardjs.com, which was posted on HN a while back. The web site points out common mistakes when implementing credit card forms and delves into the motivation behind every design decision.

Why isn't <input type="card"> a thing?

I know right?!

I am going to it satire. Anyhow, because then we would have birthday, zip code, telephone and custom ID number all wanted to be implemented. But it would be nice if there is an API in jQuery or in HTML that allows developer to specify the format of the input...

I know you're joking, but we do have all of those in html5.

We have birthday in the form of date (<input type="date">) and telephone (<input type="tel">). For US zip codes and custom-ids you could use type="range" or type="number".

Yeah I know the first two, I wasn't aware of range actually. Looks like browsers still have a long way to catch up each other.

http://caniuse.com/#search=input%20type

Zipcodes are not numbers. As a counterexample, MA has codes beginning with 02, e.g. 02135.

You should be able to type "2/16" in the expiration, but instead when you try, you end up with "21 / 6".

I'm still amazed at how sites that can't handle spaces or dashes in the card number or want it formatted in 4 different text boxes. The actual card number worked very well on your form.

Ah good catch - thanks for pointing it out. I'll fix this later tonight.

How about making the placeholder text lighten up a bit on focus. Something like this for webkit should work

:focus::-webkit-input-placeholder { color: #eee;}

Thanks, that sounds like a good idea. I'll be adding this on pretty soon.

And for those of us not using Safari or Google Chrome?

Degrade gracefully

There isn't a single test in the repo.

Ya I know. I just made this very recently, so I haven't had a chance to make any tests yet. Rest assured, tests are coming!

unable to type card number and cvc in firefox 26.0

this is great but I like to use https://www.paymentiframe.com/

the form resembles a credit card.

I still can't understand the reasoning behind iframe, can you please kindly explain to me why?

The iframe lets you drop it into your app.

It lets me put more than 16 digits.

Some card schemes support PANs longer than 16 digits.

Yeah; if a credit card form doesn't let the user type more than 16 digits there is something seriously wrong with the form ;P.

I'm going to be adding support for credit cards that aren't 15 or 16 digits later on. I stuck with 15 and 16 digits for now because it covers 90% of the use cases.

Turn away 10% of customers just at the moment they want to pay you, in order to boost conversion rate of the remaining 90% by 1%. This makes no sense.

My opinion is, stick with:

  <input type="text">

I was on Hipmunk last week trying to book a hotel room, and I couldn't buy because the drop-down to select expiration date was overly engineered to the point it no longer triggered the spinner UI. Powered by Expedia! (iPhone 5 running iOS 6.1.2)