[{"data":1,"prerenderedAt":630},["ShallowReactive",2],{"project-7847440":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":51,"post_text":53,"what":54,"said":92,"maker_in_thread":271,"shape":282,"grid":286,"attempts":593,"same_week":594,"maker_shows":18,"maker_hidden":623,"reader_version":624,"card":625},"7847440","Card","Card – An interactive CSS3 credit card form","title","Show HN: Card – An interactive CSS3 credit card form","http:\u002F\u002Fjessepollak.github.io\u002Fcard\u002F","jessepollak.github.io","jessepollak",1401908437,2014,376,112,27,2272,2,"legend","web_saas","payment form ui","library",[24,25,26,27,28],"credit card form","css3","jquery plugin","payment form","card animation","mixed",-0.22,{"positive":32,"neutral":33,"mixed":34,"critical":35},15,29,10,32,86,{"idea":38,"privacy":40,"design":42,"execution":45,"performance":48,"docs":50},{"positive":39,"critical":39},3,{"positive":41,"critical":39},0,{"positive":43,"critical":44},7,11,{"positive":46,"critical":47},4,14,{"positive":41,"critical":49},1,{"positive":41,"critical":41},[49,49,49,41,41,39,52,18,18,41,41,39,49,39,49,49,49,18,52,18,49,18,39,49,39,39,39,18,52,46,49,49,49,39,39,49,49,49,52,52],5,null,{"problem":55,"audience":53,"pricing":67,"motivation":53,"time_to_build":53,"stack":74,"openness":89,"stage":90,"team_size":91},{"value":56,"source":57,"evidence":58},"Credit card entry forms are tedious and unappealing for users","commenter",[59,63],{"id":60,"by":61,"text":62},"7850963","christudor","For me the whole thing took too long to load. I didn't even see the card until I had filled in most of the data in the fields (and I was thinking, 'What's so different about…",{"id":64,"by":65,"text":66},"7849113","lugg","Tab from expiry to cvc doesn't work in the interactive. Other than that, honestly, I was just impressed by the \"boring\" version. Very tidy form, nice to see a new take on it.…",{"value":68,"source":57,"evidence":69},"free",[70],{"id":71,"by":72,"text":73},"7852228","logicallee","That's a far cry from ``` Make your credit card form better in one line of code ``` and ``` With one line of code.. $('form').card({ container: $('.card-wrapper') }); You get..…",[75,81,85],{"value":76,"source":77,"evidence":78},"CSS3","maker",[79],{"id":80},"post",{"value":82,"source":57,"evidence":83},"jQuery",[84],{"id":71,"by":72,"text":73},{"value":86,"source":57,"evidence":87},"JavaScript",[88],{"id":71,"by":72,"text":73},"open_source","launched","unknown",{"praise":93,"objections":121,"requests":199,"questions":232,"alternatives":241},[94,113],{"value":95,"source":57,"evidence":96},"Visually beautiful and well executed design",[97,101,105,109],{"id":98,"by":99,"text":100},"7847907","dshankar","Looks gorgeous. I can't help but wonder if people unfamiliar with technology and ecommerce would be deterred by such a form? It might give some users the impression that the…",{"id":102,"by":103,"text":104},"7851913","protomyth","This is amazing, I love how it handles the CVC even on AmEx. The only way this could be better is to type directly on the card or move the fields above (mobile) or to the side of…",{"id":106,"by":107,"text":108},"7850285","brainless","Looks absolutely beautiful. But I stopped for a second and did not, at first, give my real card number. Are we so used to crappy CC forms, that a nice, flashy one (which I know…",{"id":110,"by":111,"text":112},"7848702","HarrietJones","Gorgeous. Two minor points... It would be nice if it checksummed the card to ensure the entered number was a valid credit card number on form exit. You can get 17 digit credit…",{"value":114,"source":57,"evidence":115},"Open source and self-hosted, so code can be audited",[116,120],{"id":117,"by":118,"text":119},"7848150","benaiah","Well, of course untrusted code dealing with CC info is insecure. That's why this is open source, and you host it yourself. It's just a library. Whose source you can see. Whose…",{"id":106,"by":107,"text":108},[122,141,153,168,184],{"value":123,"source":57,"evidence":124},"Card visual may confuse users, who try to type on the card itself",[125,129,133,137],{"id":126,"by":127,"text":128},"7847578","goeric","It's confusing because my first instinct was to type my credit card info on the card itself. It took me a few seconds to realize there was a form below it.",{"id":130,"by":131,"text":132},"7847599","wingerlang","On the \"Before\" it says \"painful\". What is painful about it? And as someone else said, I also tried entering ON the card rather than below it.",{"id":134,"by":135,"text":136},"7847810","JoshTriplett","It's a nice display, but as others have said it invites attempts to type on the card itself (which doesn't work). It also doesn't scale with increased font sizes; the card…",{"id":138,"by":139,"text":140},"7848147","jakejake","I really want to like this because the design and functionality of is very cool. Like others I tried to start typing on the card so there is definitely an element of confusion…",{"value":142,"source":57,"evidence":143},"Flashy form may make users distrust payment entry",[144,148,149],{"id":145,"by":146,"text":147},"7848863","shogun21","Because it's open source, we can figure out exactly what's going on. OP brings up the point from the users' perspective and they might not trust an interface that looks this…",{"id":106,"by":107,"text":108},{"id":150,"by":151,"text":152},"7848118","atmosx","Same here, I mean if I saw this on my paypal account I would kind of worried, looks too \"flashy\". But it looks gorgeous for sure and it's probably part of the future.",{"value":154,"source":57,"evidence":155},"Unnecessary for a payment form and takes up space",[156,160,164],{"id":157,"by":158,"text":159},"7848340","leepowers","This is neat, and I love the look and feel. The only problem is that it's completely unnecessary and possibly confusing for potential customers. But that's just my opinion. It…",{"id":161,"by":162,"text":163},"7847751","wmeredith","This is really pretty. Kudos to the dev\u002Fdesigners. However, if there's one thing on my website I don't want to be exciting, it's entering payment data.",{"id":165,"by":166,"text":167},"7848038","timme","There's nothing painful about a regular form with the minimum amount of fields.",{"value":169,"source":57,"evidence":170},"Tab navigation and autocomplete bugs reported",[171,175,179,180],{"id":172,"by":173,"text":174},"7848039","simcop2387","It doesn't seem to be working to tab between fields in Chrome. Once I've entered the expiration date it just fails to go to CVC or let me tab into it. had to use the mouse to…",{"id":176,"by":177,"text":178},"7848315","smrz","Can't tab out of the expiration date field FYI",{"id":64,"by":65,"text":66},{"id":181,"by":182,"text":183},"7847603","muaddirac","Looks nice, but doesn't play well with autocomplete in chrome (tab completing my name didn't show up on the card)",{"value":185,"source":57,"evidence":186},"Broken or inconsistent in some browsers such as Safari and IE 11",[187,191,195],{"id":188,"by":189,"text":190},"7847545","xdissent","Doesn't seem to show the card at all in Safari. Works in Chrome, however.",{"id":192,"by":193,"text":194},"7847583","frik","Mouse scrolling is broken on that page in IE 11.",{"id":196,"by":197,"text":198},"7849541","cesarbs","Looks really nice, but right now it's quite buggy on IE 11. I see a lot of flickering and it keeps scrolling to the top of the page.",[200,208,215,221],{"value":201,"source":57,"evidence":202},"Add Luhn checksum validation for card numbers",[203,207],{"id":204,"by":205,"text":206},"7847964","r00fus","Looks nice, perhaps you can implement the Luhn algorithm to ensure the CC is not known-invalid (to prevent data entry error)? http:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FLuhn_algorithm",{"id":110,"by":111,"text":112},{"value":209,"source":57,"evidence":210},"Support more card types such as Diners Club and JCB",[211],{"id":212,"by":213,"text":214},"7848336","harlanlewis","It isn't providing a visual for all credit card issuers, though (eg Diner's Club, JCB). Those cards may still be processed correctly (I don't have any way of verifying), but…",{"value":216,"source":57,"evidence":217},"Support password manager and autofill",[218],{"id":219,"by":205,"text":220},"7848301","Another point, I tend to rely on iCloud Keychain and 1Password to store card information. Perhaps you should ensure it works with those data entry methods?",{"value":222,"source":57,"evidence":223},"Run conversion or user testing",[224,228],{"id":225,"by":226,"text":227},"7847525","jpeg_hero","looks cool. Any A\u002FB test results on conversion rates?",{"id":229,"by":230,"text":231},"7851591","reledi","If anyone ends up doing some user testing with this form, please let us know the results!",[233],{"value":234,"source":57,"evidence":235},"Does it convert better than a standard form?",[236,237],{"id":225,"by":226,"text":227},{"id":238,"by":239,"text":240},"7847634","brandon272","Interesting experiment! I'd like to see some data on how effective it is versus typical card entry fields. At first glance I think users would be extremely confused by what is…",[242,257,264],{"value":243,"source":57,"evidence":244},"Skeuocard",[245,249,253],{"id":246,"by":247,"text":248},"7856415","xerophtye","You mean like this: http:\u002F\u002Fkenkeiter.com\u002Fskeuocard\u002F",{"id":250,"by":251,"text":252},"7847972","stock584","Pretty nice, pretty similar to JS Skeuocard (http:\u002F\u002Fkenkeiter.com\u002Fskeuocard\u002F)",{"id":254,"by":255,"text":256},"7848617","iLoch","This is great! There's also Skeuocard (http:\u002F\u002Fkenkeiter.com\u002Fskeuocard\u002F) which offers a bit more of a skeuomorphic design. I think I favour the form as part of the card, however…",{"value":258,"source":57,"evidence":259},"Stripe Checkout",[260],{"id":261,"by":262,"text":263},"7847783","encoderer","If you need something easy, nothing is better IMO than Stripe Checkout. It's insanely easy to integrate, and has an awesome (modal) payment form.",{"value":265,"source":57,"evidence":266},"creditcardJS",[267],{"id":268,"by":269,"text":270},"7849355","primitivesuave","I once saw a detailed analysis of skeuomorphic credit card input, and it turns out the general population is less likely to fail on a non-moving credit card input box, largely…",{"comments":39,"answered":49,"key":272},[273,276,279],{"id":274,"text":275},"7847552","Which version of Safari are you in? I've tested it in all of the latest versions, but it could easily be broken in an older one.",{"id":277,"text":278},"7847647","Fixed :)",{"id":280,"text":281},"7847531","Haven't gotten to that point yet — I originally just set about implementing all the cards in CSS then decided to actually make it into something people could drop in really easily.",{"commenters":283,"max_depth":284,"maker_replies":39,"first_comment_mins":32,"lifespan_hours":285},95,9,43,[287,291,295,299,302,304,306,308,309,311,313,315,317,320,323,326,330,331,333,335,336,337,340,343,346,350,354,356,358,360,362,363,366,368,371,375,378,380,383,385,388,390,391,394,395,397,402,405,408,409,412,416,419,422,424,427,430,434,437,439,442,446,451,453,455,458,462,465,468,471,474,477,479,482,485,486,488,490,494,497,500,504,508,511,514,515,517,519,520,523,527,530,534,538,542,545,548,551,554,556,558,560,562,564,566,568,570,574,576,581,585,589],[288,41,39,289,290,41],"7848386","project\u002Fmixed\u002Fidea","dclowd9901",[292,41,49,293,294,41],"7851182","project\u002Fcritical\u002Fprivacy","spicerguy",[296,41,49,297,298,41],"7851473","project\u002Fcritical\u002Fdesign","kethinov",[300,41,49,293,301,41],"7854418","lakep",[98,49,39,303,99,41],"project\u002Fmixed\u002Fdesign",[305,49,49,293,72,41],"7847954",[117,49,41,307,118,41],"commenter\u002Fneutral\u002Fprivacy",[145,49,41,307,146,41],[71,49,41,310,72,41],"commenter\u002Fcritical\u002Fdocs",[312,49,41,307,118,41],"7852727",[314,49,41,307,72,41],"7852903",[316,49,41,307,118,41],"7855223",[318,49,41,319,72,41],"7856514","commenter\u002Fneutral\u002Fnone",[321,49,41,307,322,41],"7848658","tokenizerrr",[324,49,41,319,325,41],"7852602","nichochar",[327,49,39,328,329,41],"7848060","project\u002Fneutral\u002Fdesign","chandrew",[150,49,39,303,151,41],[102,49,52,332,103,41],"project\u002Fpositive\u002Fdesign",[246,49,41,334,247,41],"other\u002Fneutral\u002Fnone",[157,18,39,303,158,41],[126,39,49,297,127,41],[338,39,39,328,339,41],"7847724","squeaky-clean",[341,39,39,328,342,41],"7847735","rurabe",[344,39,39,328,345,41],"7849151","jgrowl",[347,46,49,348,349,41],"7848668","project\u002Fcritical\u002Fidea","jacquesm",[351,46,41,352,353,41],"7850303","commenter\u002Fneutral\u002Fidea","the_ancient",[355,46,41,352,349,41],"7850645",[357,46,41,352,353,41],"7851144",[359,46,41,352,349,41],"7851199",[361,46,41,352,353,41],"7857760",[130,52,39,328,131,41],[364,52,39,328,365,41],"7847925","dlhavema",[367,52,41,334,131,41],"7847979",[369,52,41,319,370,41],"7852083","chucknelson",[372,373,49,297,374,41],"7847708",6,"aresant",[376,373,41,334,377,41],"7847721","mahmoudimus",[379,373,41,334,374,41],"7847773",[381,373,41,334,382,41],"7849235","tnorthcutt",[204,43,39,384,205,41],"project\u002Fneutral\u002Fexecution",[386,43,39,384,387,41],"7848303","BillinghamJ",[161,389,49,297,162,41],8,[165,284,49,297,166,41],[392,34,49,297,393,41],"7847920","joeframbach",[134,44,49,297,135,41],[238,396,49,297,239,41],12,[398,399,49,400,401,41],"7847587",13,"project\u002Fcritical\u002Fexecution","tomhschmidt",[403,399,49,400,404,41],"7847612","sullivanmatt",[406,399,49,400,407,41],"7848136","DatBear",[268,47,52,332,269,41],[410,32,49,348,411,41],"7848271","ultimoo",[413,32,52,414,415,41],"7849234","project\u002Fpositive\u002Fidea","robalfonso",[250,417,39,418,251,41],16,"project\u002Fneutral\u002Fidea",[420,417,52,332,421,41],"7849627","xj9",[254,423,39,328,255,41],17,[425,423,39,328,426,41],"7850913","gameguy43",[428,423,49,297,429,41],"7851774","Kequc",[431,432,39,384,433,41],"7848884",18,"kdd",[60,435,49,436,61,41],19,"project\u002Fcritical\u002Fperformance",[172,438,49,400,173,41],20,[440,438,39,384,441,41],"7848115","MartynX",[443,444,39,289,445,41],"7849221",21,"pointpointclick",[447,448,52,449,450,41],"7853987",22,"project\u002Fpositive\u002Fexecution","ChrisArchitect",[138,452,39,303,139,41],23,[181,454,49,400,182,41],24,[456,454,49,400,457,41],"7848027","mcintyre1994",[459,460,49,348,461,41],"7847532",25,"wwarren",[463,460,39,418,464,41],"7847540","bluetidepro",[466,460,41,319,467,41],"7847675","recursive",[469,460,39,470,464,41],"7847863","maker\u002Fneutral\u002Fdocs",[472,460,39,328,473,41],"7847549","pit",[475,460,39,418,476,41],"7847733","saryant",[478,460,39,418,339,41],"7847740",[480,460,39,418,481,41],"7847921","AhtiK",[483,460,52,414,484,41],"7848183","Igglyboo",[212,460,49,297,213,41],[106,487,39,303,107,41],26,[64,16,39,489,65,41],"project\u002Fmixed\u002Fexecution",[491,492,49,400,493,41],"7847626",28,"pbreit",[495,492,52,414,496,41],"7847936","mef",[498,33,52,332,499,41],"7852687","Sebguer",[501,502,39,418,503,41],"7850521",30,"xrt",[505,506,49,400,507,41],"7847879",31,"mikeryan",[509,506,52,449,510,41],"7847922","sbarre",[512,506,52,449,513,41],"7847924","cdellin",[188,35,49,400,189,41],[274,35,41,516,11,49],"maker\u002Fneutral\u002Fexecution",[518,35,39,384,189,41],"7847601",[277,35,41,516,11,49],[521,35,49,400,522,41],"7847827","mratzloff",[524,525,39,384,526,41],"7847641",33,"tomardern",[528,525,41,319,529,41],"7848116","ceejayoz",[531,532,49,297,533,41],"7852646",34,"tangoalpha",[535,536,52,332,537,41],"7850897",35,"javierga",[539,540,49,400,541,41],"7847918",36,"pestaa",[543,540,39,384,544,41],"7847953","kevinday",[546,540,39,384,547,41],"7848007","Zikes",[549,540,39,384,550,41],"7848635","pix64",[552,540,39,384,553,41],"7848918","joshvm",[110,555,39,303,111,41],37,[176,557,49,400,177,41],38,[196,559,49,400,197,41],39,[219,561,39,384,205,41],40,[261,563,41,334,262,41],41,[192,565,49,400,193,41],42,[225,285,39,567,226,41],"project\u002Fneutral\u002Fnone",[280,285,41,569,11,49],"maker\u002Fneutral\u002Fnone",[571,572,52,332,573,41],"7848394",44,"jmcejuela",[229,575,39,567,230,41],45,[577,578,52,579,580,41],"7852141",46,"project\u002Fpositive\u002Fnone","graemian",[582,583,39,303,584,41],"7850951",47,"izietto",[586,587,52,332,588,41],"7848712",48,"czbond",[590,591,52,449,592,41],"7848213",49,"kzanul",[],[595,599,604,609,614,618],{"id":596,"name":597,"points":598,"category":20},"7823167","Mighty Spring",159,{"id":600,"name":601,"points":602,"category":603},"7844264","zzzz.io",156,"infrastructure",{"id":605,"name":606,"points":607,"category":608},"7822894","Biomorphs",117,"learning_science",{"id":610,"name":611,"points":612,"category":613},"7845441","swift-2048",92,"games",{"id":615,"name":616,"points":617,"category":20},"7825961","FiveStar.io",75,{"id":619,"name":620,"points":621,"category":622},"7844672","ThriftPy",64,"languages",false,"v2",{"id":626,"name":5,"line":6,"ai":623,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":30,"top":18,"kw":627,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":628,"url":9,"mix":629,"praise":95,"objection":123,"sub":21},7847440,[24,25,26,27,28],"1110035220031311125212313332541113311155",[32,33,34,35],1794036518726]