{"_id":"card-js","_rev":"2-f2798ab959a73626b1d83b6b75c3820a","name":"card-js","description":"Credit Card input form with validation","dist-tags":{"latest":"1.0.13"},"versions":{"1.0.13":{"name":"card-js","authors":["Colin Stannard <contact@cardjs.co.uk>"],"description":"Credit Card input form with validation","version":"1.0.13","main":"card-js.min.js","moduleType":["globals"],"keywords":["Card JS","Credit Card Input","Credit Card Form","Credit Card Validation"],"repository":{"type":"git","url":"git+https://github.com/CardJs/CardJs.git"},"license":"MIT","homepage":"https://cardjs.co.uk","ignore":["**/.*","node_modules","bower_components","test","tests"],"dependences":{},"devDependencies":{"grunt":"~0.4.5","grunt-contrib-concat":"^0.5.1","grunt-contrib-jshint":"~0.10.0","grunt-contrib-less":"^1.0.0","grunt-contrib-nodeunit":"~0.4.1","grunt-contrib-uglify":"~0.5.0","grunt-contrib-watch":"^0.6.1","grunt-contrib-cssmin":"0.11.0"},"gitHead":"7ffbf9cb86e41df5769245bde641405b684d40fa","bugs":{"url":"https://github.com/CardJs/CardJs/issues"},"_id":"card-js@1.0.13","scripts":{},"_shasum":"22e459783086e044a5406684e6cf29e3dfce97e1","_from":".","_npmVersion":"3.5.2","_nodeVersion":"4.2.6","_npmUser":{"name":"card-js","email":"contact@cardjs.co.uk"},"dist":{"shasum":"22e459783086e044a5406684e6cf29e3dfce97e1","tarball":"https://registry.npmjs.org/card-js/-/card-js-1.0.13.tgz","integrity":"sha512-NLq1UatF8npzZC6fjwXCwBcnZLFONv7hBT5zDTs1wAne9CMoILx/7ceTPGJektfbAh+SHNTsbeEzHkjV9flVEg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIZcLyaYASILfLivu7f2dA/xzhynzMkq542WUlyBjGcAiB6HaLXZ2ZUlxnc3v7Z3JatxZ1yLCF6zbyMnnJssDZTIA=="}]},"maintainers":[{"name":"card-js","email":"contact@cardjs.co.uk"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/card-js-1.0.13.tgz_1484456983934_0.17702926136553288"}}},"readme":"# CardJs\n\nA simple, clean, credit card form for your website. Includes number formatting, validation and automatic card type detection.\n\n![Example](img/example.png)\n\n[View working example >](https://cardjs.co.uk/)\n\n\n# Installation\n\n- Bower: `bower install card-js --save`\n- Zip: [Download](https://github.com/CardJs/CardJs/archive/master.zip)\n\nYou will need to include both `card-js.min.js` and `card-js.min.css` into your web page.\n\n\n\n\n# Usage\n\nFor working examples of using CardJs, see the [examples](examples) folder of this project.\n\n## Automatic Insertion\nAny elements with the class `card-js` will be automatically converted into a basic credit card input with the expiry date and CVC check.\n\nThe easiest way to get started with CardJs is to insert the snippet of code:\n```html\n<div class=\"card-js\"></div>\n```\n\n## Manual Insertion\n\nIf you wish to manually alter the fields used by CardJs to add additional classes or set the input field name or id etc,\nyou can pre-populate the form fields as show below.\n\n```html\n<div class=\"card-js\">\n  <input class=\"card-number my-custom-class\" name=\"card-number\">\n  <input class=\"name\" id=\"the-card-name-id\" name=\"card-holders-name\" placeholder=\"Name on card\">\n  <input class=\"expiry-month\" name=\"expiry-month\">\n  <input class=\"expiry-year\" name=\"expiry-year\">\n  <input class=\"cvc\" name=\"cvc\">\n</div>\n```\n\n\n\n\n\n\n# Reading Values\n\nCardJs provides functionality allowing you to read the form field values directly with JavaScript. This can be useful if\nyou wish to submit the values via Ajax.\n\nCreate a CardJs element and give it a unique id (in this example `my-card`)\n\n```html\n<div class=\"card-js\" id=\"my-card\" data-capture-name=\"true\"></div>\n```\n\nThe javascript below demonstrates how to read each value of the form into local variables.\n\n```javascript\nvar myCard = $('#my-card');\n\nvar cardNumber = myCard.CardJs('cardNumber');\nvar cardType = myCard.CardJs('cardType');\nvar name = myCard.CardJs('name');\nvar expiryMonth = myCard.CardJs('expiryMonth');\nvar expiryYear = myCard.CardJs('expiryYear');\nvar cvc = myCard.CardJs('cvc');\n```\n\n\n\n\n\n\n# Functions\n\nTo call a function on a CardJs element, follow the pattern below.\nReplace the text 'function' with the name of the function you wish to call.\n\n```javascript\n$('#my-card').CardJs('function')\n```\n\nThe functions available are listed below:\n\n| Function    | Description                                    |\n| :---------- | :--------------------------------------------- |\n| cardNumber  | Get the card number entered                    |\n| cardType    | Get the type of the card number entered        |\n| name        | Get the name entered                           |\n| expiryMonth | Get the expiry month entered                   |\n| expiryYear  | Get the expiry year entered                    |\n| cvc         | Get the CVC entered                            |\n\n\n\n## CardType Function\n\nThe `cardType` function will return one of the following strings based on the card number entered.\nIf the card type cannot be determined an empty string will be given instead.\n\n| Card Type              |\n| :--------------------- |\n| AMEX                   |\n| Diners                 |\n| Diners - Carte Blanche |\n| Discover               |\n| JCB                    |\n| Mastercard             |\n| Visa                   |\n| Visa Electron          |\n\n\n\n\n\n# Static functions\n\nIf you just want to perform simple operations without the CardJs form, there are a number of static functions provided\nby the CardJs library that are made available.\n\n\n## Card Type from Card Number\n```javascript\nvar cardNumber = '4242 4242 4242 4242'; // Spacing is not important\nvar cardType = CardJs.cardTypeFromNumber(cardNumber);\n```\n\n## Cleaning and Masking\n```javascript\n// var formatMask = 'XXXX XXXX XXXX XXXX'; // You can manually define an input mask\n// var formatMask = 'XX+X X XXXX XXXX XXXX'; // You can add characters other than spaces to the mask\nvar formatMask = CardJs.CREDIT_CARD_NUMBER_VISA_MASK; // Or use a standard mask.\nvar cardNumber = '424 2424242 42   42 42';\nvar cardNumberWithoutSpaces = CardJs.numbersOnlyString(cardNumber);\nvar formattedCardNumber = CardJs.applyFormatMask(cardNumberWithoutSpaces, formatMask);\n```\n\n### Masks\n\n| Variable Name                             | Mask\n| :---------------------------------------- | :------------------ |\n| CardJs.CREDIT_CARD_NUMBER_DEFAULT_MASK    | XXXX XXXX XXXX XXXX |\n| CardJs.CREDIT_CARD_NUMBER_VISA_MASK       | XXXX XXXX XXXX XXXX |\n| CardJs.CREDIT_CARD_NUMBER_MASTERCARD_MASK | XXXX XXXX XXXX XXXX |\n| CardJs.CREDIT_CARD_NUMBER_DISCOVER_MASK   | XXXX XXXX XXXX XXXX |\n| CardJs.CREDIT_CARD_NUMBER_JCB_MASK        | XXXX XXXX XXXX XXXX |\n| CardJs.CREDIT_CARD_NUMBER_AMEX_MASK       | XXXX XXXXXX XXXXX   |\n| CardJs.CREDIT_CARD_NUMBER_DINERS_MASK     | XXXX XXXX XXXX XX   |\n\n\n\n# Card Expiry Validation\nThe expiry month can be in the range: 1 = January to 12 = December\n\n```javascript\nvar month = 3;\nvar year = 2019;\nvar valid = CardJs.isExpiryValid(month, year);\n```\n\nThe expiry month and year can be either and integer or a string.\n```javascript\nvar month = \"3\";\nvar year = \"2019\";\nvar valid = CardJs.isExpiryValid(month, year);\n```\n\nThe expiry year can be either 4 digits or 2 digits long.\n```javascript\nvar month = \"3\";\nvar year = \"19\";\nvar valid = CardJs.isExpiryValid(month, year);\n```\n\n\n\n# License\n\nCardJs is released under the MIT license. [View license](https://github.com/CardJs/CardJs/blob/master/LICENSE.md)","maintainers":[{"name":"card-js","email":"contact@cardjs.co.uk"}],"time":{"modified":"2022-06-13T05:36:37.275Z","created":"2017-01-15T05:09:44.737Z","1.0.13":"2017-01-15T05:09:44.737Z"},"homepage":"https://cardjs.co.uk","keywords":["Card JS","Credit Card Input","Credit Card Form","Credit Card Validation"],"repository":{"type":"git","url":"git+https://github.com/CardJs/CardJs.git"},"bugs":{"url":"https://github.com/CardJs/CardJs/issues"},"license":"MIT","readmeFilename":"README.md"}