Guide · Open source

How to use Card: add a credit card preview to your form

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Card is a small open-source JavaScript library that takes an existing credit card form and shows a visual card that updates as the user types. It works without changing your form's fields and uses only CSS, HTML and JavaScript with no images. This guide shows you how to install it, initialise it on your own form, and customise the placeholders, labels and field mapping.

Cardjessepollak/card · ★ 11.7k · MIT Install options & downloads

Quick start

1Install the package. Run npm install --save card, or bower install card --save if you use bower.
2Include the script. Add the card.js script tag at the end of your page body. No separate CSS file is needed.
3Add a container. Place an empty element, such as a div with class card-wrapper, where the card preview should appear.
4Initialise Card. Create new Card with your form selector and container selector.
5Set field selectors if needed. If your inputs do not use the default names, pass formSelectors to point Card at them.
6Customise and test. Adjust width, placeholders or messages, then type into the form to check the card updates.

Install Card with npm or bower

The README gives two package-manager options. If you use npm, you install Card with the command below. Node.js is needed only for the npm route; the README does not state a Node.js version.

If you use bower, install it with the second command instead.

npm: install with the npm command below
bower: install with the bower command below

npm install --save card
bower install card --save

Add Card's JavaScript file to your page

Without jQuery, include the Card JavaScript file at the end of the body. The README says no separate CSS link is needed because the JavaScript file adds the styles itself.

The file is located at /dist/card.js in the project. Replace the path with wherever you host it.

<!-- at the end of BODY -->
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>

Initialise Card on your form

Create a new Card object and point it at your form and at an empty container element where the card preview should appear. The form and container options are required. Every other option is optional.

The formSelectors option tells Card which inputs to read. If you leave them out, Card looks for inputs named number, expiry, cvc and name. The width option defaults to 350px and formatting defaults to true.

form: a selector or DOM element for your form (required)
container: a selector or DOM element where the card appears (required)
formSelectors: selectors for numberInput, expiryInput, cvcInput and nameInput
width: default 350px
formatting: default true
messages: validDate and monthYear strings for translation
placeholders: number, name, expiry and cvc
masks: cardNumber mask character
debug: default false

var card = new Card({
    form: 'form', // *required*
    container: '.card-wrapper', // *required*
    formSelectors: {
        numberInput: 'input#number', // optional
        expiryInput: 'input#expiry', // optional
        cvcInput: 'input#cvc', // optional
        nameInput: 'input#name' // optional
    },
    width: 200, // optional
    formatting: true // optional
});

Map several inputs to one name field

Some forms split the cardholder name into a first and last name input. The README says you can pass a selector that matches both fields in the correct order, and Card will render them into one name field.

formSelectors: {
    nameInput: 'input[name="first-name"], input[name="last-name"]'
}

Use Card with jQuery

If your project already uses jQuery, include the jquery.card.js file instead. It is located at /dist/jquery.card.js. Then call .card() on your form. The README notes that the library uses the global jQuery object rather than requiring it explicitly.

<script src="/path/to/jquery.card.js"></script>

$('form').card({
    container: '.card-wrapper'
});

Customise placeholders and translations

To change the placeholder text shown on the card, pass a placeholders object. To translate the strings on the card, pass a messages object. The README's translation example changes validDate to 'expire\ndate' and monthYear to 'mm/yy'.

placeholders: number, name, expiry, cvc
messages: validDate (default 'valid\nthru'), monthYear (default 'month/year')

What people use it for

Adding a visual card preview to an existing checkout or payment form
Adding a card preview to a form where the name is split into first and last name fields
Translating the card's date labels into another language
Dropping a card preview into a jQuery-based site with the jquery.card.js file

Frequently asked questions

Is Card free to use?

Card is released under the MIT licence, as shown in the project details. Check the LICENSE file in the repository for the full terms before using it in your project.

Does Card process credit card payments?

No. The README describes only the form display. It shows a visual card that updates as the user types, and it does not describe any payment processing. You still need a separate payment provider to take payments.

Do I need jQuery to use Card?

No. The README shows a version without jQuery that uses new Card(), and a separate jquery.card.js file for projects that already use jQuery.

How do I install Card with npm?

Run npm install --save card in your project. The README does not state a required Node.js version, so check your project's own requirements.

Does Card work with React, Vue or Angular?

The README lists wrappers for Angular 1.x, Angular 2+, Ember and React, and a Vue example that imports card from npm. These wrappers are third-party projects linked from the README.

Is Card still actively maintained?

The project details show the last push as June 2023. Consider this before choosing it for a new project that needs ongoing updates.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Card suits web developers who want a drop-in visual card preview for an existing form, especially if the project already uses jQuery. Choose another option if you need payment processing, a framework-native component, or a library with recent maintenance activity.

Install options & downloads