30 comments

  • Daryl GinnDaryl Ginn, over 5 years ago

    1 line of code. Plus the plugin. Plus jQuery.

    Nice idea, nonetheless.

    8 points
    • Catalin CimpanuCatalin Cimpanu, over 5 years ago

      I knew from the beginning it was a catch-phrase. Nothing related to e-commerce and financial apps can be done in one line.

      0 points
  • Casey BrittCasey Britt, over 5 years ago

    I agree that this is fun, but I would argue its rather superfluous and unnecessary. Does the user really need this much visual feedback as they enter their credit card number? I don't really mind the original form at the top of the page personally.

    6 points
    • Sean O'GradySean O'Grady, over 5 years ago

      I agree. Totally superfluous..

      1 point
    • Sacha GreifSacha Greif, over 5 years ago

      Even if this only prevents 1% of users from making a mistake when they enter their credit card details, it might still make a difference to the bottom line of a big enough site.

      3 points
      • Jim SilvermanJim Silverman, over 5 years ago

        card logo and corresponding cc# spacing would be enough. CSS graphic is a cool gimmick, but nothing more.

        1 point
      • Casey BrittCasey Britt, over 5 years ago

        I feel that's a big if. I would like to see this up against some other well designed forms in a large user test (as I could be wrong). I don't think the giant card would be any more successful than a form that auto spaces every four digits in the credit card number and has similar layout to an actual card. If I had to take a guess I would argue the fancy card thing would be a distraction resulting in more mistakes.

        0 points
      • Avery LewisAvery Lewis, over 5 years ago

        What if it scares away 1% of users, because it doesn't look like any credit card entry form they've ever seen, and feels like the website is "copying their card", something we've been trained to worry about?

        0 points
    • Giulio MichelonGiulio Michelon, over 5 years ago

      I find it very clear to the user that can compare it with his real credit card. I don't think is superflous

      0 points
  • Matt McInerneyMatt McInerney, over 5 years ago

    URL when you click submit: http://jessepollak.github.io/card/?number=1234+5567+8890+0000&name=John+smith&expiry=01+%2F+1111&cvc=1234

    This must be for demo use only? That can't be secure

    3 points
    • Derek TimmermanDerek Timmerman, over 5 years ago

      I believe your form implementation and it's action are separate from the interactive card preview generated by the plugin. His form submission is defaulting to GET, which is why you're seeing your field values in the query string.

      This is basically like Chosen or iCheck, but for form values.

      0 points
  • Sacha GreifSacha Greif, over 5 years ago

    Wow, it's really awesome how even the card backgrounds are made with pure CSS. I can't even imagine how long it must've taken to recreate those patterns with gradients like this…

    2 points
    • Daniel FoscoDaniel Fosco, over 5 years ago

      That can backfire though — if my mom is filling her cc info and a blue Visa comes up (hers is grey) she might think there's something wrong.

      3 points
  • Brian A.Brian A., over 5 years ago (edited over 5 years ago )

    EDIT: Nevermind, I'm stupid.

    1 point
  • Johnny LamJohnny Lam, over 5 years ago

    Great UX for end-users! I love it.

    1 point
  • James RosenthalJames Rosenthal, over 5 years ago

    If IE8 was supported I would be using this in no time.

    0 points
  • Alastair TaylorAlastair Taylor, over 5 years ago

    Interesting experiment but for anyone looking to use it, it doesn't appear to work in Chrome.

    0 points
  • Account deleted over 5 years ago

    I'm lukewarm about this personally (mostly due to the "old" form being pretty bad UX and that's what should be improved), but I will say that this does raise some security/privacy concerns to me simply because it makes the CC number you're typing in huge and super obvious, which would make it really easy for people near you at a cafe, on a train, etc to see and "borrow".

    I'm also a little concerned how there are no error treatments here. It's an absolute requirement to have them. I'd be interested to see how this design would hold up with them added (ie: would you treat the card different).

    Lastly, this takes up a lot of valuable real estate on the most critical point of the purchase flow. It would be interesting to A/B test this to see if it becomes too distracting... because my gut tells me that the billing page would have to have a pretty unique layout in relation to what users have become accustomed to to fit this in.

    Overall, I think this is an intriguing idea and is nicely done, but security concerns aside, would like to see this tested against a well designed "traditional" CC form before stating that this will make it "better"... because "better" here is about users purchasing, not looks.

    0 points
  • Ricky SynnotRicky Synnot, over 5 years ago

    OMG this is brilliant!

    Its not unnecessary if it helps users SEE mistakes, SEE errors or incomplete data where an old-school 1990's input field falls down.

    Personally, I'd re-style the form field, to make IT user friendly, but I see where this card can add real benefit.

    You should not allow real credit card entry +1

    Can you provide a non jQuery version?

    0 points
  • Danny GuggerDanny Gugger, over 5 years ago

    Rounded corners are a little laggy but this is awesome nonetheless!!

    0 points
  • ChrisArchitec t, over 5 years ago

    Used in production today on an internal tool that we do some billing/card running on. After some small jquery options struggles, it worked as it says on the tin.

    Interesting reaction by test group when deploying....test group being a small group of coworkers. Without announcement, they immediately were untrusting of it and thought it was somehow consuming the credit card information maliciously. This is the security climate we find ourselves in. heh But after assuring them, they thought it was pretty neat/fun.

    Fun.

    0 points
  • ChrisArchitec t, over 5 years ago

    wow, this is just.... fun

    going to try it out

    0 points
  • Gianluca RispoGianluca Rispo, over 5 years ago

    You should delete this post. It's a SCAM.

    0 points
  • Dan CortesDan Cortes, over 5 years ago

    If you tab too quickly after inputting your data, it cuts off the last digit. Example.

    0 points