
Creditcard.js: a more usable credit card form - pnt
http://creditcardjs.com
======
leeoniya
"JavaScript libraries like jQuery aren't well equiped to handle form input, so
Creditcard.js uses the more robust and comprehensive Google Closure Tools, the
heavily tested JavaScript framework behind Gmail and Google Plus."

really? you're gonna do jQuery (+ all validation plugins) bashing for what? 5
fields + a luhn algo? please, take your snake oil elsewhere.

"the heavily tested JavaScript framework"? you must not follow jQuery's own
pedantic development and testing, i would argue it is _more_ heavily tested
than Google's we-only-support-latest-2-versions-of-any-browser libs.

if anyone needs to do client-side cc pre-checks, there's a pretty up-to-date
regex list [1] and a luhn implementation [2] which will get you 99.9% there.
if you feel that the 0.1% (but probably much less) is worth a monthly
licensing fee, you now have options :)

[1]
[https://github.com/Shopify/active_merchant/blob/master/lib/a...](https://github.com/Shopify/active_merchant/blob/master/lib/active_merchant/billing/credit_card_methods.rb)

[2]
[https://gist.github.com/ShirtlessKirk/2134376](https://gist.github.com/ShirtlessKirk/2134376)

------
maccman
Looks good, and I like the mistakes and solutions section.

However, it's pretty much all covered by Stripe's open source jQuery.payment,
which is also agnostic to your payment gateway.

[https://github.com/stripe/jquery.payment](https://github.com/stripe/jquery.payment)

(Disclaimer - I built it.)

~~~
niel
The presentation of Creditcard.js is great in terms of styling, and I'm sure
the practical example goes a long way in selling something like this to non-
developer decision makers. This is probably the market they are aiming for.

Personally, I would much rather use the MIT-licensed jQuery.payment by Stripe.
I think $300 or even $149 is prohibitively expensive, and would prefer a
script that is actively used and reviewed in public by many developers.

Thanks Alex!

~~~
pclark
"prohibitively expensive" ?

Surely if you're a business of any merit – making even $500/month – $300 for a
javascript library that'll remove bumps in the checkout process is worth it?

I fail to see why this cannot co-exist alongside the Stripe alternative
library. Heck, just taking the stripe library and offering commercial grade
support, and charging $300 seems like a pretty good business.

~~~
EGreg
Can you explain how commercial-grade support for a library that hasn't been
tested by many people is better than a community of people who have run and
tested a library? What exactly are they going to do for the support?

~~~
kamjam
I'd also argue that a library developed and used by Stripe is pretty
commercial grade too.

------
anonymoushn
A mix of bugs and suggestions:

\- It is possible for the security code and card number fields to be green,
indicating they have been filled out correctly, using a 3-digit security code
for an American Express card number or a 4-digit security code for any other
card number.

\- The security code help probably should not display the American Express
case when no card type has been identified.

\- The security code field should display 4 dots when American Express is
detected.

\- The card type detection is so faint as to be invisible to inattentive users
or people with awful displays.

\- Drop-down for expiration is a disaster and a huge regression from the
status quo.

I played with the checkout form some and discovered these additional issues:

\- Email validation is wrong, valid emails are flagged as incorrect.

\- At almost all reasonable browser widths, the right 2/5 or so of the
security code tip is cut off, rendering it useless.

\- After clicking "Purchase License" without completely filling out the form,
the button permanently changes to "Please Correct Errors Above." Correcting
the errors will not allow you to actually purchase a license. You will need to
refresh and enter all your data again.

\- You can actually successfully submit the form using a Visa with a 4-digit
security code or an American Express with a 3-digit security code. It was
declined :(

\- "The 'exp_month' parameter should be an integer (instead, is MM)." is not a
very usable way of phrasing this error.

I would not buy $149 closed-source beta software for making my purchase form
more usable from people with such an unusable purchase form.

~~~
yalooze
Great list. Can you elaborate on "Drop-down for expiration is a disaster and a
huge regression from the status quo."? Are you saying the norm is to have it
typed?

~~~
lancewiggs
For me: yes, absolutely, it's much much faster and less painful to type the
four numerics than to click on drop downs.

~~~
jarnix
you don't have to click for select boxes... just use tab and type the
numbers...

------
storborg
\- $149 per site

\- only minified source provided

\- not out of the box compatible with a module loader

\- no public bug tracker

\- doesn't handle all edge cases (for example, type some numbers, place the
cursor after the space, and hit backspace).

Good luck.

On the other hand, this is a nice list of edge cases for someone to check when
they implement the open source weekend project version of this.

------
srhngpr
For a simpler, open-source alternative, check out Skeuocard [1], I believe it
was posted on HN previously.

[1] [http://kenkeiter.com/skeuocard/](http://kenkeiter.com/skeuocard/)

Edit: here's the original post -
[https://news.ycombinator.com/item?id=6143604](https://news.ycombinator.com/item?id=6143604)

~~~
jasonlotito
Skeuocard still suffers from severe usability problems I outlined here:

[https://news.ycombinator.com/item?id=6143829](https://news.ycombinator.com/item?id=6143829)

I still stand by what I said:

"That fancy CC form will not sell a single thing. It will however stop people
from paying."

------
ryan-c
Typing 4321432143214321 results in 4321 3214 2143 1234 in Chrome. Works right
if I type spaces, but I shouldn't need to do that. Also, let me type the
expiration date in if I want to - I hate it when I can't complete a form by
tabbing through fields.

~~~
kalleboo
I don't know how your browser works, but for the date fields, I could tab to
them, press space, type the digits, press enter, tab to the next one, rinse,
repeat.

------
coenhyde
I was actually pretty keen on purchasing this. Today I'm building a payment
page. I don't mind paying for something good that will save me time.

But it doesn't look like you provide an uncompressed version for review. I
can't use a third party library that deals with credit cards without first
reviewing the code.

~~~
glennos
Thought the same as the above, but also have an issue with the design decision
to use dots as placeholder text. Conventionally, dots indicate that text had
already been entered into a (password) field. Even though they are slightly
greyed, I think it's confusing.

------
patio11
I don't have immediate need for it, but I'd take the other side of the bet
from all comments saying "That is too expensive. OSS will eat your lunch. I
bet I could do it in a weekend."

It's a brilliant idea for a project and we all should be absolutely kicking
ourselves for not having done it years ago. Do you know how many tens of
thousands of dollars of dev time I've seen thrown at this, across a dozen
companies operating in waste-causing parallel, to produce something less
usable and less likely to _increase sales across the company_? Do you know how
many hours of my life I've wasted on it myself? The mind boggles.

~~~
lucisferre
We built some custom inputs just for handling number formatting (currency,
percentages and separators) using AngularJS (directives) and I can say from
experience it is much harder than anyone would imagine. The basic concepts are
simple, it's always the implementation details, edge cases, browser quirks
that will eat up your time.

Bottom line, saving money vs. time isn't a good reason not to buy this.

I still wouldn't be surprised if someone goes and builds an FOSS version of
this anyways. FOSS people have far more than just "a weekend" for things like
this, and it actually looks like a fun thing to build. Also a buggy prototype
could probably be whipped up in a weekend if you leverage a good JS framework
like Angular or Ember. Perhaps not but I'm sure someone will try.

~~~
patio11
OSS and credit cards have existed for every single day of the last ten years.
Did the community just not notice that taking credit cards on websites is done
by substantially every business transacting on the Internet? Or were they just
hiding their well-tested well-designed decent-UX commercially-supported OSS
options on localhost until someone tried to commercialize the niche, to now be
unleashed on Github with great fanfare?

People have higher-expectations-than-are-warranted for "Some OSS developer
(who is not me)" deciding to bite off a project on their behalf. The threat of
this is routinely invoked to scare developers into not releasing software
commercially. It's almost invariably overblown. Crikey, people told me 8 years
ago that BCC was commercially non-viable because there existed OSS (with XML
output for linking to an upcoming multimedia engine [+]) that was going to eat
its lunch "as soon as it was marketed."

\+ Seriously not making that up. [http://sourceforge.net/projects/bingo-
cards/](http://sourceforge.net/projects/bingo-cards/)

~~~
rhubarbcustard
Patrick, do you think the target audience for this JS product versus BCC makes
a difference? BCC is presumably bought mostly by non-technical people whereas
it is fairly likely that a JS library such as this one would be chosen by a
developer and presented to management as a solution to their "smooth checkout"
requirement? As we've seen in the comments here, developers are way more
likely to go for the open-source/free alternative.

I guess the marketing of the JS library would make a real difference: aim for
management rather than developers?

------
thoughtpalette
$149 is a extremely high price-point for this with so many alternatives out
there. I also don't see the value vs. the price. I've implemented
[http://jquerycreditcardvalidator.com/](http://jquerycreditcardvalidator.com/)
with authorize.net with zero issues.

Good luck selling this.

~~~
csomar
It's $299 (that's the beta-price). But I don't think it's expensive. I think
it's quite correct. If a developer value his time, he should probably buy it.
That is if he finds that it has advantages over the free alternatives.

~~~
thoughtpalette
That's my point, there's not many advantages over an open source/free
alternative (subjective). And it's contextual, there's no way I'm going to
argue for my [insert superior here] at [insert agency, studio,etc here] to buy
this when their tech savvy enough to seek other alternatives.

------
Silhouette
In addition to all the other criticism here, the EULA for this product is
terrible. There are so many silly claims (not to mention typos that completely
undermine much of it anyway) that I would walk away no matter how good the
code on offer was.

Also, if your primary selling point is that you are "a more usable credit card
form", you look weak without a clear statement of what you're more usable than
and producing empirical data to show where you convert better. You're talking
about a critical part of my payments system, so I'm hardly going to take your
word for it just because you've got some red and green on your web site. This
goes double for any sort of web form tool, because these are notorious for
actually making things worse if they don't properly support all platforms, all
the edge cases in the inputs, all accessibility aids, and so on.

Sorry to be so negative, because I'm sure a lot of hard work went into this,
but taking card payments is not a game, and clearly this product is nothing
like ready for production use. I worry for whoever is charging for this,
because if someone did buy it and then wind up losing real money as a result
of problems like the ones mentioned throughout this HN discussion, liability
could be a real concern.

------
jmduke
Interesting price point; it seems to be in a no-mans land where developers who
can pay $300 would probably be in a position that they'd want to implement it
themselves, yet it might be prohibitively expensive for smaller clients who'd
better spend their efforts elsewhere and could use Skeuocard or Stripe.js for
free.

Surprised to see the 'one website' clause, as well -- as someone who spends a
lot of time working with Stripe integrations, I'd love to buy this once and
then plunk it down everywhere. Still, this is a cool effort and I hope to see
it succeed!

~~~
hemancuso
I think it is probably the right move.

He has a way better chance of selling 100 licenses for $300 each versus 3000
licenses for $10 each.

The smart move would be to actually do some amount of outbound sales to sell
licenses. There a ton of random vendors out there doing $100k+/year that have
broken credit card flows. Find their checkout page, save it do disk. Spend 10
minutes integrating this verification into their own form, and cold-email the
webmaster with the zip'd up demo and already done integration. Let's say it
takes 6 hours to 40 of those. If 10% to convert, you're making serious money.

~~~
vbsteven
If I was having a successful business that is doing $100k+/year I would think
twice about integrating a new form with minified javascript from a cold email
into my payment flow.

It's definitely not a bad idea to do outbound marketing for this. I just think
conversions would be a lot higher if the readable source is also present in
the offer.

~~~
hemancuso
Agreed. I would never pay without the readable source. That's ridiculous.

------
rickdale
My observation is that I wish the dots that are place holders in the box,
turned into numbers as I typed them. When I went to type in a cc, the text box
went blank, leaving me aesthetically with the same cc form as any one of them
on the web.

~~~
skeoh
One small consideration is that the American Express number format differs
from other cards so the pattern of dots might change as you type.

~~~
isleyaardvark
The format can be determined from the first one or two numbers entered in the
field:

[http://en.wikipedia.org/wiki/List_of_Issuer_Identification_N...](http://en.wikipedia.org/wiki/List_of_Issuer_Identification_Numbers)

edit: which doesn't change your point that initial format could move around
after you type the first digits. I'll leave this here for trivia.

------
some1else
There is a caret bug that messes up typing:
[http://cl.ly/image/0H3F1O030m2Q](http://cl.ly/image/0H3F1O030m2Q)

------
solutionyogi
Great component and I would not mind paying for it.

However, if you are going to claim that it has 'Accurate Card Type Detection',
you need to make sure that you cover common cases.

E.g. I live in NY and my Amex starts with 3723 and the input form doesn't
recognize it.

As a developer, I understand that there are bugs in software. But if you are
selling me a component which can not handle my own card, I would really wonder
how comprehensive your card type detection is. They link to this page
[http://en.wikipedia.org/wiki/List_of_Issuer_Identification_N...](http://en.wikipedia.org/wiki/List_of_Issuer_Identification_Numbers)
which lists 37 __as a valid Amex number. I think they need to go through their
code and make sure all those numbers are handled correctly.

------
rheotron
Very cool looking, would love to use it, but there's two main problems:

1\. No free trial, dropping $300 on a javascript plugin that I don't even know
works yet is a lot of money.

2\. I don't know if the value it offers is THAT much different from other
credit card validation tools. If I'm making $50/hr freelancing, that's 6 hours
of my time and I could easily customise some other alternative to fit my needs
in that time.

------
mrchess
To put the price in perspective, HighCharts, an extremely complex charting
library, only charges $90 for a single website license.

~~~
kalleboo
Or the Invision Power Board Forums/CMS/Kitchen Sink software for $175

------
pud
I love this form.

I can't stand credit card forms that split the credit card number into 4
inputs ("[XXXX] [XXXX] [XXXX] [XXXX]") because I can't paste my number in (the
first box has a maxlength of 4 usually)

Yet, for people who are typing in the number (vs pasting it), the 4 sections
makes it easier.

This form is the best of both worlds.

------
ohazi
Doesn't work under Chrome/Linux (older version 26.0.1410.63). The first group
of digits in the card number field show up correctly, but then something goes
wrong when the script tries to insert a space for formatting.

The first digit in the second block shows up correctly, but then the cursor is
positioned _before_ the first digit/second block, so that the remainder of the
block gets inserted in front of the first digit, completely messing up the
card number.

------
colinbartlett
I do not understand the value this provides.

Some helpful pointers and a nice example. Open source it and that's that. But
$149?

~~~
joeblau
So diligent. I didn't even notice that it cost ~$150 to use.

------
elmin
I'm sorry but nothing here is worth money. It was a little silly when I
thought it was an open-source project, as a paid product it is ridiculous.

------
nfoz
> Creditcard.js avoids these design mistakes, providing an HTML/CSS/JS
> solution compatible with any payment form.

If it requires JS, then it isn't compatible with any payment form.

~~~
pnt
When JS is not available, this becomes a regular HTML form with inputs and
selects.

~~~
guido4000
Does not support 1Password, though

------
christiangenco
Small complaint: I use Typinator[1] (a text expander for Mac) to type in my
credit card numbers. I'll enter a simple string I wouldn't normally type, like
"mvcd" (or "my visa card") and it expands to the full number.

But if you restrict the form to just numbers, I can't type in my text to
expand to the full number. I always get super annoyed at credit card forms
that do this.

/two cents

------
Osiris
Looks interesting. Is there an option to also display certain billing address
fields? I use minFraud and it requires a country, state, city, and postal code
for distance checks.

Personally, I also hate dropdowns for expiration. Isn't it far easier to just
type in what's on the card and validate that as a valid date?

------
pbreit
Doesn't handle Amex correctly for card that begins 3725

~~~
wcfields
or * Amex Corporate that start with 3787 * Australian Bank Cards

But surprisingly handles JCB and Diners Club.

------
umsm
Technically, this is broken. 4-digit security codes exist, yet this form
doesn't allow them.

~~~
criswell
I thought that was only for American Express? It allowed me to enter 4 numbers
with an American Express card number. There wasn't 4 little placeholder dots,
which was confusing.

------
alfl23
You minified half of the Closure Library for a modest product. 50kb of inline
JS for card processing, just to obfuscate. This is terrible, you need two
libraries doing the same thing.

Very high price point, developers who can afford to buy it can likely code it
themselves.

------
dabernathy89
It doesn't format my AMEX card correctly (uses the 4 separate 4 digit pieces).

------
kalleboo
Doesn't support credit card autofill via Safari or 1Password plugin...

------
oe
One trick to make the UI feel good and snappy is to make the animations fast.
For example in this form the security question help fades in way too slow,
making the whole form feel slow and brittle.

------
zrail
The mistakes and solutions section is great info, thanks. That said, there's a
bunch of problems with the actual implementation. I put together a payment
form that converts very well for selling my book Mastering Modern Payments[1]
and it's included with the middle package ($59 instead of $149). It uses
jquery.payment from Stripe which several people mentioned earlier in the
thread.

[1]: [https://www.petekeen.net/mastering-modern-
payments](https://www.petekeen.net/mastering-modern-payments)

------
eof
this literally doesn't work for me.

i start typing in a known prefix for master card

514101

and after i type the `0` the cursor (for who knows what reason) jumps to
_before_ the 0 and i end up with

5141 10

(note the 0 and 1 swapped)

works fine in firefox; breaks in chromium

------
mrjaeger
I'd say that the ? for explaining the CCV should be a hover effect rather than
a click. In every other CC form I've ever dealt with it's been a hover effect.

~~~
csomar
I have bad experience with the hover effect. Like showing up when I don't want
it to show, and also it doesn't work quite well on tablets, phones and touch
devices. I think the button is better approach.

------
knurdle
When you type in an amex card number, shouldn't the security code change to
show 4 dots? Seems like a simple oversight.

------
zapt02
Price is outrageous. Nobody is gonna buy this.

------
myang
Nice. Tested on mobile safari and it works fine. However it doesn't seem to
recognize American Express card number?

------
righon
I'd make the expiration dates text fields. Having to scroll through a list of
numbers in a drop-down is a pain.

~~~
kalleboo
What browser/OS doesn't let you type to select in dropdowns?

~~~
righon
Doesn't matter, that's a "power user" shortcut. You'd be surprised how many
people do not think or know that can be done. Why not make it easier and just
make the expiration date text fields? It's much easier to type in the month
'12' than having to scroll scroll through 11 options to get to 12.

~~~
Gigablah
You'd be surprised how many people don't know how to tab through multiple
fields. If the expiration date is broken into multiple text fields that
creates more work as "regular" users need to switch between keyboard and mouse
repeatedly.

~~~
righon
How does it create more work? What do you mean switching between keyboard and
mouse repeatedly? Aren't they already doing that when they are entering in the
credit card number, the security code AND their name? LOL.

~~~
Gigablah
Oh, they're already switching keyboard and mouse? Let's make them do it even
more! /sarcasm

Seriously though, what makes you think people have to "scroll" through 11
months to get to December? 12 options can be comfortably displayed all at once
on screen. Have you ever seen a dropdown?

~~~
righon
Poor soul you are stuck in the implementation model. Continue to use your
drop-down, yes...

~~~
Gigablah
Sure, and you can continue ruining interfaces in your academic vacuum.

------
myang
Found another issue: in Chrome (v26.0.1410.63), typed in 1234 1234 and the
numbers got rearranged to 1234 2341

------
Finbarr
I think the tabindexes should be different. When I hit tab in the security
code field, it currently focuses on the question mark. It would be better if
it focused on the name field at that point IMO. Otherwise, very nice!

------
codezero
For months I prefer numbers ordered in a way that respond to digits as input.
If I press 8, I don't jump to 8 in this list because it has 08. It's minor,
but a peeve of mine :)

------
schrodinger
Would love to hear an update in a month of how sales are going..

------
omeid2
Related: [http://kenkeiter.com/skeuocard/](http://kenkeiter.com/skeuocard/) I
think I saw this on hackernews a while ago.

------
rootuid
costs $ and is in beta. This looks like an ad.

Who pays to beta test software ?

------
alixaxel
For such a high price, they could pay some more attention to their own buy
license page: the security code help section is partially (mostly) hidden.

------
xerophtye
I liked that other one better.

[http://kenkeiter.com/skeuocard/](http://kenkeiter.com/skeuocard/)

------
petergreen
The "?" should be skipped on tabbing: from "Security code" jump straight to
"Name"

------
apathetic
what... it's not.. opensource? _peeks into javascript source code_

------
chromaton
It would be helpful if it also supported China Unionpay cards (19 digits).

------
Phylodome
Telling my my AmEx is invalid. Last time I checked it was a real CC...

------
acido303
You are trying to shell this for 149$ on HN? Seriously?

------
woah
$150- do you also offer payment processing?

~~~
dkroy
That would be a great thing to cross-sell!

