Skip to content
Get packs

Card

A JavaScript library that adds a live credit card preview to your existing payment form.

GitHub Download 2.5.4
Stars
11.7k
Forks
1.5k
Licence
MIT
Language
SCSS
Last update
3.4 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

Card is a small JavaScript library that takes an existing credit card form and shows a visual card that updates as the user types. According to the README, it works without changing your form's fields and uses only CSS, HTML, and JavaScript with no images. It can be used on its own, with jQuery, or through wrappers for frameworks like Angular, React, and Vue.

  • Show a live card preview next to a checkout form
  • Customize placeholders and translated labels for a non-English audience
  • Map first and last name inputs to a single name field on the card
  • Mask the card number with a character of your choice

Great for

  • Web developers adding a checkout or payment form to an existing site
  • Teams who want a visual card preview without writing it from scratch
  • Projects that already use jQuery and want a drop-in option
  • Developers building forms that need multiple inputs mapped to one name field

Not ideal for

  • People who need payment processing itself, since the README describes only the form display, not payments
  • Projects needing a card-entry UI that is actively maintained, since the last push shown is June 2023
  • Developers who want a modern framework-native component without wrappers, since the library is built around global script inclusion
Step-by-step guide: how to use CardInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js (only if installing via npm; version not stated in README)

    Install from npm

    npm install --save card

    Install with bower

    bower install card --save
  2. 2

    Run it

    • Install the library with npm or bower, or include /dist/card.js in your HTML.
    • Add a container element with class card-wrapper where the card should appear.
    • Initialize with new Card({ form: 'form', container: '.card-wrapper' }) pointing at your form.
    • Open the page and type into the form fields to see the card update.
  3. 3

    Get the most out of it

    • Use formSelectors to point Card at non-default input names or IDs
    • Set placeholders and messages to match your language or brand
    • Use the jQuery version via $('form').card({...}) if your site already uses jQuery
    • Use masks.cardNumber to hide digits as they are typed
    • Use debug: true to log setup messages while integrating

Downloads

Source code (.zip)master branch · straight from GitHubRelease 2.5.4Release notes and source

Strengths

  • Simple setup: one script tag or one constructor call, per the README
  • Requires no images, relying on pure CSS, HTML, and JavaScript
  • Has a long track record with 11,713 stars and an MIT license

Trade-offs

  • The last push shown is 2023-06-12, so maintenance activity is unclear from the metadata
  • The README says it relies on a global jQuery when used via npm without explicit require, which can cause setup friction

How it compares

ProjectStarsTypeLevelUpdatedBest for
card (this)11.7kLibrarybeginner3.4 years agoWeb developers adding a checkout or payment form to an existing site
bootstrap175kLibrarybeginner4 days agoDevelopers building responsive websites or web app interfaces quickly
tailwindcss98.3kLibraryintermediate4 days agoWeb developers who build their own interfaces and want to avoid writing large custom stylesheets
anime74.2kLibrarybeginner3 months agoFront-end developers adding motion to websites or web apps
normalize.css53.5kLibrarybeginner2.4 years agoFront-end developers who want a consistent starting point across browsers
bulma50kLibrarybeginner2 months agoDevelopers who want a quick, consistent styling baseline for a web page

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.