Interactive Credit Card Form In jQuery - Free Download Create An Interactive Credit Card Form In jQuery - Card.js

Free Download Create An Interactive Credit Card Form In jQuery – Card.js

By Posted on

This time I will share jQuery Plugin and tutorial about Create An Interactive Credit Card Form In jQuery – Card.js, hope it will help you in programming stack.

Interactive Credit Card Form In jQuery - Free Download Create An Interactive Credit Card Form In jQuery - Card.js
File Size: 144 KB
Views Total: 12094
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

The jQuery Card.js plugin makes it easier to create an interactive credit card form for the payout page of your e-commerce or shopping websites.

Features:

  • Card type detection.
  • Field validation.
  • Input masking.
  • Custom placeholders for number, name, expiry, and CVC.
  • Also can be implemented in vanilla JavaScript.

See Also:

Installation:

view source
1 # NPM
2 $ npm install card
3  
4 # Bower
5 $ bower install card

How to use it:

1. Load the core stylesheet card.css in the head section of the webpage.

view source
1 <link href="card.css" rel="stylesheet">

2. Load the JavaScript file jquery.card.js(For jQuery) or card.js(For Vanilla JavaScript) at the bottom of the webpage

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <script src="dist/jquery.card.js"></script>
3 <!-- OR -->
4 <script src="dist/card.js"></script>

3. Create the card wrapper and number/name/expiry/CVC input fields on the webpage.

view source
01 <div class="card-wrapper"></div>
02  
03 <div class="form-container active">
04   <form action="">
05     <input type="text" name="number">
06     <input type="text" name="first-name"/>
07     <input type="text" name="last-name"/>
08     <input type="text" name="expiry"/>
09     <input type="text" name="cvc"/>
10   </form>
11 </div>

4. Initialize the Card.js and we’re done.

view source
01 // jQuery
02 $('form').card({
03   ontainer: '.card-wrapper'
04 });
05  
06 // Vanilla JavaScript
07 new Card({
08   form: document.querySelector('form'),
09   container: '.card-wrapper'
10 });

5. All possible options to customize the Credit Card Form.

view source
01 $('form').card({
02  
03   // number formatting
04   formatting: true,
05  
06   // selectors
07   formSelectors: {
08     numberInput: 'input[name="number"]',
09     expiryInput: 'input[name="expiry"]',
10     cvcInput: 'input[name="cvc"]',
11     nameInput: 'input[name="name"]'
12   },
13   cardSelectors: {
14     cardContainer: '.jp-card-container',
15     card: '.jp-card',
16     numberDisplay: '.jp-card-number',
17     expiryDisplay: '.jp-card-expiry',
18     cvcDisplay: '.jp-card-cvc',
19     nameDisplay: '.jp-card-name'
20   },
21  
22   // custom messages
23   messages: {
24     validDate: 'validnthru',
25     monthYear: 'month/year'
26   },
27  
28   // custom placeholders
29   placeholders: {
30     number: '&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull;',
31     cvc: '&bull;&bull;&bull;',
32     expiry: '&bull;&bull;/&bull;&bull;',
33     name: 'Full Name'
34   },
35  
36   // enable input masking
37   masks: {
38     cardNumber: false
39   },
40  
41   // valid/invalid CSS classes
42   classes: {
43     valid: 'jp-card-valid',
44     invalid: 'jp-card-invalid'
45   },
46  
47   // debug mode
48   debug: false
49    
50 });

Changelog:

v2.5.2 (2021-04-03)

v2.5.1 (2021-04-01)

  • Fix: Update with latest Payment.JS

v2.5.1 (2020-12-05)

  • Reflect pre-filled form values in the card preview

v2.5.0 (2020-07-27)

  • [Feature]: Adds detection for Maestro, Elo, Troy, Mir, and JCB
  • [Fix]: update various dependencies with security issues

2017-08-21

  • v2.4.0

Related posts: