4 ms·
Show HN: I'm open sourcing Creditly.js, an intuitive credit card form
- Sir_Cmpwn 13y agoPretty 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 13y agoFirefox 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 13y agoSame, Firefox 26.0 on Windows 8, I can't enter anything into the input fields aside from name on card.
- johnjwang 13y agoThanks for the feedback. Sorry about that, I'm working to get a fix - hopefully later tonight.
- johnjwang 13y agoShould be mostly fixed now for Firefox. Still working on a couple of bugs.
- wcummings 13y agoI haven't used slack since the kde4 switch, how is Slackware doin these days? Worth fussing w/?
- JoshTriplett 13y agoSame 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.
- notastartup 13y agothis is great but I like to use https://www.paymentiframe.com/ https://www.paymentiframe.com/ the form resembles a credit card.
- victorhn 13y agoIt lets me put more than 16 digits.
- sjtgraham 13y agoSome card schemes support PANs longer than 16 digits.
- saurik 13y agoYeah; if a credit card form doesn't let the user type more than 16 digits there is something seriously wrong with the form ;P.
- johnjwang 13y agoI'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.
- zaroth 13y agoTurn 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)
- apineda 13y agoI still can't understand the reasoning behind iframe, can you please kindly explain to me why?
- nostromo 13y agoWhy isn't <input type="card"> a thing?
- yeukhon 13y agoI 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 13y agoI 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 13y agoYeah 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
- jlatt 13y agoZipcodes are not numbers. As a counterexample, MA has codes beginning with 02, e.g. 02135.
- ragsagar 13y agounable to type card number and cvc in firefox 26.0
- cpwright 13y agoYou 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 13y agoAh good catch - thanks for pointing it out. I'll fix this later tonight.
- humbyvaldes 13y agoHow 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 13y agoAnd for those of us not using Safari or Google Chrome?
- wcummings 13y agoDegrade gracefully
- humbyvaldes 13y agohttp://stackoverflow.com/questions/13183421/how-to-change-placeholder-color-on-focus http://stackoverflow.com/questions/13183421/how-to-change-pl...
- johnjwang 13y agoThanks, that sounds like a good idea. I'll be adding this on pretty soon.
- rwaldron 13y agoThere isn't a single test in the repo.
- johnjwang 13y agoYa 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!
- deleted 13y ago[deleted]
- davekt 13y agoFor 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.