What is this?
Card is a JavaScript/CSS library that turns a plain credit card form into an animated, realistic-looking credit card UI, without requiring any images.
Card is a JavaScript/CSS library that turns a plain credit card form into an animated, realistic-looking credit card UI, without requiring any images.Is this a library I drop into my form, or a full payment framework?It is a small front-end library focused purely on visual rendering of card input; it does not handle payment processing, validation logic, or transactions itself.
It is a small front-end library focused purely on visual rendering of card input; it does not handle payment processing, validation logic, or transactions itself.How do I add Card to my project?Install via npm (npm install --save card) or bower (bower install card --save), or just include the built dist/card.js (and dist/jquery.card.js for the jQuery version) in your HTML and initialize it against your form fields.
Install via npm (npm install --save card) or bower (bower install card --save), or just include the built dist/card.js (and dist/jquery.card.js for the jQuery version) in your HTML and initialize it against your form fields.Do I need jQuery to use it?No, jQuery is optional — there is a vanilla JS build and a separate jquery.card.js build for projects that already use jQuery.
No, jQuery is optional — there is a vanilla JS build and a separate jquery.card.js build for projects that already use jQuery.Does it do any payment processing or validation?No, Card only renders and animates the card form UI; it does not validate card numbers or process payments, and support questions about using it in a specific project are directed to Stack Overflow.
No, Card only renders and animates the card form UI; it does not validate card numbers or process payments, and support questions about using it in a specific project are directed to Stack Overflow.Does it work with frameworks other than jQuery?Yes, community wrappers exist for Angular 1.x and 2+, Ember, React (multiple options), and Vue.
Yes, community wrappers exist for Angular 1.x and 2+, Ember, React (multiple options), and Vue.Does it support custom placeholder text or localization?Yes, you can pass a placeholders object to override default card name/number/expiry/CVC placeholders, and a messages object to translate the rendered strings into another language.
Yes, you can pass a placeholders object to override default card name/number/expiry/CVC placeholders, and a messages object to translate the rendered strings into another language.Can it handle a split first/last name field setup?Yes, you can pass a selector that targets multiple inputs rendering to a single field, like separate first and last name inputs mapped to the card name.
Yes, you can pass a selector that targets multiple inputs rendering to a single field, like separate first and last name inputs mapped to the card name.Who is actually using this in production?The README lists real companies using Card in production, including Netlify, PubNub, Bizzabo, and GigSalad, among others.
The README lists real companies using Card in production, including Netlify, PubNub, Bizzabo, and GigSalad, among others.What are similar projects?simplefolio, mdb-ui-kit, Hover, selectize.js, Semantic-UI-React, velocity, Magnific-Popup, materialize
simplefolio, mdb-ui-kit, Hover, selectize.js, Semantic-UI-React, velocity, Magnific-Popup, materializeWhich topics is it in?coffeescript, e-commerce, css3, scss, payments, jquery, frontend-framework, ui-library, animation, css, ui, web-development
coffeescript, e-commerce, css3, scss, payments, jquery, frontend-framework, ui-library, animation, css, ui, web-development