Creditly.js : A Clean Intuitive Credit Card Form

   

Creditly.js gives you everything you need in order to create a sleek, intuitive credit card form. Just copy the html, css, and javascript to get an intuitive credit card form in seconds. You get credit card validation (using the Luhn algorithm) for free.

credit card form

Integration

To integrate, you just need to do the following things:

– Include the creditly.js javascript file (can be found under src/creditly.js)

<script type="text/javascript" src="creditly.js"></script>

– Include the creditly.css stylesheet file (can be found under src/creditly.css).

<link rel="stylesheet" href="creditly.css">

– Copy the HTML from the theme you’d like to use. You can find the stubs of HTML under the src/themes folder. For example, to use the blue theme, you should take copy and paste the HTML from src/themes/blue_theme.html

– Initialize from javascript.

var creditly = Creditly.initialize(
    '.creditly-wrapper .expiration-month-and-year',
    '.creditly-wrapper .credit-card-number',
    '.creditly-wrapper .security-code',
    '.creditly-wrapper .card-type');

DEMO    GitHub