Show HN: I'm open sourcing Creditly.js, an intuitive credit card form

http://wangjohn.github.io/creditly/

by johnjwang • 12 years ago

34 31 12 years ago

wangjohn.github.io

Sir_Cmpwn• 12 years ago

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• 12 years ago

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.

User8712• 12 years ago

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

johnjwang6• 12 years ago

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

wcummings2• 12 years ago

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

JoshTriplett• 12 years ago

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.

notastartup2• 12 years ago

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

the form resembles a credit card.

victorhn• 12 years ago

It lets me put more than 16 digits.

sjtgraham• 12 years ago

Some card schemes support PANs longer than 16 digits.

apineda• 12 years ago

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

notastartup2• 12 years ago

The iframe lets you drop it into your app.

nostromo2• 12 years ago

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

yeukhon2• 12 years ago

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

nostromo2• 12 years ago

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

ragsagar• 12 years ago

unable to type card number and cvc in firefox 26.0

cpwright• 12 years ago

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.

johnjwang6• 12 years ago

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

humbyvaldes2• 12 years ago

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• 12 years ago

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

wcummings2• 12 years ago

Degrade gracefully

humbyvaldes2• 12 years ago

http://stackoverflow.com/questions/13183421/how-to-change-pl...

johnjwang6• 12 years ago

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

rwaldron• 12 years ago

There isn't a single test in the repo.

johnjwang6• 12 years ago

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!

davekt• 12 years ago

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.

Show HN: I'm open sourcing Creditly.js, an intuitive credit card form

Related Stories