Convert Figma logo to code with AI

jessepollak logocard

:credit_card: make your credit card form better in one line of code

11,659
1,476
11,659
65
View on GitHubView on NPM

Top Related Projects

nosir's avatar

cleave.js

17,957

Format input text content when you are typing...

davidshimjs's avatar

qrcodejs

13,583

Cross-browser QRCode generator for javascript

mebjas's avatar

html5-qrcode

4,880

A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org

impress's avatar

impress.js

37,618

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Quick Overview

jessepollak/card is a lightweight JavaScript library that provides a simple way to create beautiful credit card input forms. It enhances the user experience by offering real-time card type detection, formatting, and validation, along with a customizable card UI that updates as the user types.

Pros

  • Easy to integrate with existing forms and frameworks
  • Responsive design that works well on both desktop and mobile devices
  • Customizable appearance to match different design requirements
  • Supports multiple card types and automatic detection

Cons

  • Limited to credit card input forms, not a general-purpose form library
  • Requires additional setup for server-side validation
  • May conflict with other form libraries or custom JavaScript implementations
  • Some users report occasional issues with specific card types or edge cases

Code Examples

  1. Basic implementation:
var card = new Card({
    form: 'form',
    container: '.card-wrapper'
});

This code initializes the Card library on a form, creating a card visualization in the specified container.

  1. Customizing accepted card types:
var card = new Card({
    form: 'form',
    container: '.card-wrapper',
    formSelectors: {
        numberInput: 'input#card-number'
    },
    width: 200,
    formatting: true,
    messages: {
        validDate: 'valid\ndate',
        monthYear: 'mm/yyyy',
    },
    placeholders: {
        number: '•••• •••• •••• ••••',
        name: 'Full Name',
        expiry: '••/••',
        cvc: '•••'
    },
    masks: {
        cardNumber: '•'
    },
    debug: true
});

This example shows how to customize various aspects of the Card library, including input selectors, dimensions, formatting options, and placeholder text.

  1. Handling form submission:
document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    console.log('Card number:', card.numberInput.value);
    console.log('Card name:', card.nameInput.value);
    console.log('Card expiry:', card.expiryInput.value);
    console.log('Card CVC:', card.cvcInput.value);
});

This code demonstrates how to handle form submission and access the card input values programmatically.

Getting Started

To use jessepollak/card in your project, follow these steps:

  1. Include the library in your HTML:
<script src="https://cdn.jsdelivr.net/npm/card@2.5.4/dist/card.js"></script>
  1. Add the necessary HTML structure:
<form>
    <input type="text" name="number">
    <input type="text" name="name">
    <input type="text" name="expiry">
    <input type="text" name="cvc">
</form>
<div class="card-wrapper"></div>
  1. Initialize the Card library:
var card = new Card({
    form: 'form',
    container: '.card-wrapper'
});

That's it! The credit card form should now be fully functional with the Card library's features.

Competitor Comparisons

nosir logo

cleave.js

17,957

Format input text content when you are typing...

Pros of Cleave.js

  • More versatile, supporting various input formats beyond credit cards (e.g., date, time, phone numbers)
  • Lightweight and focused on input formatting, making it easier to integrate into existing projects
  • Provides real-time formatting as the user types, enhancing user experience

Cons of Cleave.js

  • Lacks visual credit card representation, which Card provides
  • Does not offer automatic card type detection based on input
  • Limited to input formatting, without additional features like form validation

Code Comparison

Card:

var card = new Card({
    form: 'form',
    container: '.card-wrapper',
    formSelectors: {
        numberInput: 'input#number'
    }
});

Cleave.js:

var cleave = new Cleave('.input-element', {
    creditCard: true,
    onCreditCardTypeChanged: function(type) {
        // update UI ...
    }
});

Both libraries aim to improve credit card input, but they approach it differently. Card focuses on providing a visual representation of the credit card and offers a more comprehensive solution for credit card forms. Cleave.js, on the other hand, is a more general-purpose input formatting library that can handle credit cards along with other input types, making it more flexible for various use cases.

davidshimjs logo

qrcodejs

13,583

Cross-browser QRCode generator for javascript

Pros of qrcodejs

  • Focused on generating QR codes, providing a simple and lightweight solution
  • No external dependencies, making it easy to integrate into projects
  • Supports various output formats (canvas, table, SVG)

Cons of qrcodejs

  • Limited to QR code generation, lacking the versatility of card for credit card input
  • Less actively maintained, with fewer recent updates and contributions
  • Minimal styling options compared to card's rich visual customization

Code Comparison

qrcodejs:

var qrcode = new QRCode("qrcode", {
    text: "https://example.com",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

card:

var card = new Card({
    form: 'form',
    container: '.card-wrapper',
    width: 350,
    formSelectors: {
        numberInput: 'input#number',
        expiryInput: 'input#expiry',
        cvcInput: 'input#cvc',
        nameInput: 'input#name'
    }
});

Summary

qrcodejs is a lightweight library focused on QR code generation, while card provides a comprehensive solution for credit card input forms with visual feedback. qrcodejs is simpler to use for its specific purpose, but card offers more features and customization options for credit card-related functionality.

mebjas logo

html5-qrcode

4,880

A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org

Pros of html5-qrcode

  • Focuses on QR code scanning functionality, providing a specialized solution
  • Supports multiple camera types and has extensive browser compatibility
  • Offers both library and UI components for easy integration

Cons of html5-qrcode

  • Limited to QR code scanning, lacking versatility for other use cases
  • May require additional setup for camera access and permissions
  • Less visually appealing out-of-the-box compared to card's credit card UI

Code Comparison

html5-qrcode:

const html5QrCode = new Html5Qrcode("reader");
html5QrCode.start(
  { facingMode: "environment" },
  { fps: 10, qrbox: 250 },
  qrCodeSuccessCallback,
  qrCodeErrorCallback
);

card:

var card = new Card({
  form: 'form',
  container: '.card-wrapper',
  width: 350,
  formatting: true
});

Summary

html5-qrcode is a specialized library for QR code scanning, offering robust functionality and broad compatibility. It's ideal for projects requiring QR code integration but may be overkill for simpler applications. card, on the other hand, provides a polished credit card input solution with a focus on visual presentation and user experience. The choice between the two depends on the specific requirements of your project.

impress logo

impress.js

37,618

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Pros of impress.js

  • Designed for creating stunning presentations with 3D transitions and animations
  • Offers a wide range of creative possibilities for slide layouts and transitions
  • Supports responsive design, making presentations adaptable to different screen sizes

Cons of impress.js

  • Steeper learning curve compared to card's simpler, focused functionality
  • May be overkill for projects that don't require complex presentations
  • Requires more setup and configuration to achieve desired results

Code Comparison

impress.js:

<div id="impress">
    <div class="step" data-x="0" data-y="0">Slide 1</div>
    <div class="step" data-x="1000" data-y="500" data-scale="2">Slide 2</div>
</div>

card:

<div class="card-wrapper"></div>
<script>
    var card = new Card({
        form: 'form',
        container: '.card-wrapper'
    });
</script>

Summary

impress.js is a powerful presentation framework offering advanced 3D transitions and animations, while card focuses on creating interactive payment card forms. impress.js provides more creative freedom but requires more setup, whereas card offers a simpler, more focused solution for a specific use case. The choice between the two depends on the project requirements and the level of complexity needed.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

npm

Card - check out the demo

A better credit card form in one line of code

Card will take any credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript — no images required.

card

Usage (without jQuery)

To use, you'll need to include the Card JavaScript files into your HTML, no CSS link is necessary as the JavaScript file does this for you. You can find the necessary file at /dist/card.js and include it in your HTML like so.

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

Once you've included those files, you can initialize Card.

var card = new Card({
    // a selector or DOM element for the form where users will
    // be entering their information
    form: 'form', // *required*
    // a selector or DOM element for the container
    // where you want the card to appear
    container: '.card-wrapper', // *required*

    formSelectors: {
        numberInput: 'input#number', // optional — default input[name="number"]
        expiryInput: 'input#expiry', // optional — default input[name="expiry"]
        cvcInput: 'input#cvc', // optional — default input[name="cvc"]
        nameInput: 'input#name' // optional - defaults input[name="name"]
    },

    width: 200, // optional — default 350px
    formatting: true, // optional - default true

    // Strings for translation - optional
    messages: {
        validDate: 'valid\ndate', // optional - default 'valid\nthru'
        monthYear: 'mm/yyyy', // optional - default 'month/year'
    },

    // Default placeholders for rendered fields - optional
    placeholders: {
        number: '•••• •••• •••• ••••',
        name: 'Full Name',
        expiry: '••/••',
        cvc: '•••'
    },

    masks: {
        cardNumber: '•' // optional - mask card number
    },

    // if true, will log helpful messages for setting up Card
    debug: false // optional - default false
});

Installing card from bower

If you're using bower, you can install card.js with:

bower install card --save

Installing card from npm

If you're using npm, you can install card.js with:

npm install --save card

var $ = require("jquery");
// The current card.js code does not explictly require jQuery, but instead uses the global, so this line is needed.
window.jQuery = $;
var card = require("card");

Using multiple inputs for one field

Card can be used in forms where you have multiple inputs that render to a single field (i.e. you have a first and last name input). To use Card with this functionality, just pass in a selector that selects the fields in the correct order. For example,

<html>
<body>
<div class='card-wrapper'></div>
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
<form id="cc-form">
    <input type="text" name="number">
    <input type="text" name="first-name"/>
    <input type="text" name="last-name"/>
    <input type="text" name="expiry"/>
    <input type="text" name="cvc"/>
</form>
<script>
var card = new Card({
    form: 'cc-form',
    container: '.card-wrapper',

    formSelectors: {
        nameInput: 'input[name="first-name"], input[name="last-name"]'
    }
});
</script>
</body>
</html>

Rendering with different initial card placeholders

Card renders with default placeholders for card name, number, expiry, and cvc. To override these placeholders, you can pass in a placeholders object.

<html>
<body>
<div class='card-wrapper'></div>
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
<form id="cc-form">
    <input type="text" name="number">
    <input type="text" name="name"/>
    <input type="text" name="expiry"/>
    <input type="text" name="cvc"/>
</form>
<script>

var card = new Card({
    form: 'cc-form',
    container: '.card-wrapper',

    placeholders: {
        number: '**** **** **** ****',
        name: 'Arya Stark',
        expiry: '**/****',
        cvc: '***'
    }
});
</script>
</body>
</html>

Translation

To render the card with the strings in a different language, you can pass in a messages object.

<html>
<body>
<div class='card-wrapper'></div>
<!-- CSS is included via this JavaScript file -->
<script src="/path/to/card.js"></script>
<form id="cc-form">
    <input type="text" name="number">
    <input type="text" name="name"/>
    <input type="text" name="expiry"/>
    <input type="text" name="cvc"/>
</form>
<script>

var card = new Card({
    form: 'cc-form',
    container: '.card-wrapper',

    messages: {
        validDate: 'expire\ndate',
        monthYear: 'mm/yy'
    }
});
</script>
</body>
</html>

Using with jQuery

To use with jQuery, you'll need to include the jquery.card.js file into your HTML. You can find the necessary file at /dist/jquery.card.js and include it in your HTML like so.

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

Once you've included those files, you can initialize Card with jQuery.

$('form').card({
    // a selector or DOM element for the container
    // where you want the card to appear
    container: '.card-wrapper', // *required*

    // all of the other options from above
});

Using with other javascript libraries

Card has wrappers that make it easy to use with other javascript libraries:

Angular 1.x

Angular 2+

Ember

React

Vue

For use with VueJs, install card.js from npm:

npm install card --save

Add in your component an Div with class 'card-wrapper', just pass in a selector that selects the fields in the correct order. Import the component card.js and add the object in instance mounted like this example:

<div class='card-wrapper'></div>

<form>
    <input type="text" name="number">
    <input type="text" name="first-name"/>
    <input type="text" name="last-name"/>
    <input type="text" name="expiry"/>
    <input type="text" name="cvc"/>
</form>

<script>
import * as Card from "card";

export default {
    name: "Form CreditCard",
    mounted() {
    new Card({ 
      form: "form#cc-form",
      container: ".card-wrapper",
      formSelectors: { 
        numberInput: "input#cc-number",
        expiryInput: "input#cc-expiration",
        cvcInput: "input#cc-cvv",
        nameInput: "input#cc-name"
      },
      width: 270,
      formatting: true,
      placeholders: {
        number: "•••• •••• •••• ••••",
        name: "Nome Completo",
        expiry: "••/••",
        cvc: "•••"
      }
    });
  },
}
</script>

Development

To contribute, follow this steps:

$ git clone --recursive https://github.com/jessepollak/card.git
$ cd card
$ git submodule init && git submodule update
$ npm install
$ npm run development

Now, if you go to localhost:8080/example in your browser, you should see the demo page.

Places using Card

Card is used in the wild in these places:

Are you using Card in production? If so, we'd love to link to you from this page. Open a PR or drop @jessepollak a line on Twitter and we'll add you right away!

Project scope

The project scope is to improve the capture of payment cards on websites. Issues and fixes related to the user interface and validating of payment cards are in scope.

For questions on how to use Card in your particular project, please ask on Stack Overflow or similar forum.

Donations

If you'd like to donate to help support development of Card, send Bitcoin directly to 17NUKd3v7GWben18kGhmFafa4ZpWrXpQSC or through Coinbase here.

NPM DownloadsLast 30 Days