
Show HN: I'm open sourcing Creditly.js, an intuitive credit card form - johnjwang
http://wangjohn.github.io/creditly/
======
Sir_Cmpwn
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.

~~~
vezzy-fnord
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.

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

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

------
davekt
For a production ready alternative, take a look at
[http://creditcardjs.com](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.

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

~~~
yeukhon
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...

~~~
nostromo
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".

~~~
yeukhon
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](http://caniuse.com/#search=input%20type)

------
cpwright
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.

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

------
humbyvaldes
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;}

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

~~~
humbyvaldes
[http://stackoverflow.com/questions/13183421/how-to-change-
pl...](http://stackoverflow.com/questions/13183421/how-to-change-placeholder-
color-on-focus)

------
rwaldron
There isn't a single test in the repo.

~~~
johnjwang
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!

------
ragsagar
unable to type card number and cvc in firefox 26.0

------
notastartup
this is great but I like to use
[https://www.paymentiframe.com/](https://www.paymentiframe.com/)

the form resembles a credit card.

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

~~~
notastartup
The iframe lets you drop it into your app.

