PHPackages intelogie/card - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. intelogie/card ActiveLibrary[Utility & Helpers](/categories/utility) intelogie/card ============== 097CSS Since May 2Pushed 9y ago1 watchersCompare [ Source](https://github.com/INTELOGIE/card)[ Packagist](https://packagist.org/packages/intelogie/card)[ RSS](/packages/intelogie-card/feed)WikiDiscussions master Synced 6d ago READMEChangelogDependenciesVersions (1)Used By (0) Card - check out the **[demo](https://jessepollak.github.io/card)** =================================================================== [](#card---check-out-the-demo) ### A better credit card form in one line of code [](#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](https://camo.githubusercontent.com/7c29d31d71eacbdd16edf273c9d52833e55ecea9305685da44d244f91fa18d10/687474703a2f2f692e696d6775722e636f6d2f71473354656e4f2e676966)](https://camo.githubusercontent.com/7c29d31d71eacbdd16edf273c9d52833e55ecea9305685da44d244f91fa18d10/687474703a2f2f692e696d6775722e636f6d2f71473354656e4f2e676966) Usage (without jQuery) ---------------------- [](#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. ``` ``` 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 [](#installing-card-from-bower) If you're using bower, you can install card.js with: ``` bower install card --save ``` ### Installing card from npm [](#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 [](#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, ``` var card = new Card({ form: 'form', container: '.card-wrapper', formSelectors: { nameInput: 'input[name="first-name"], input[name="last-name"]' } }); ``` ### Rendering with different initial card placeholders [](#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. ``` var card = new Card({ form: 'form', container: '.card-wrapper', placeholders: { number: '**** **** **** ****', name: 'Arya Stark', expiry: '**/****', cvc: '***' } }); ``` ### Translation [](#translation) To render the card with the strings in a different language, you can pass in a `messages` object. ``` var card = new Card({ form: 'form', container: '.card-wrapper', messages: { validDate: 'expire\ndate', monthYear: 'mm/yy' } }); ``` Using with jQuery ----------------- [](#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. ``` ``` 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 ------------------------------------- [](#using-with-other-javascript-libraries) Card has wrappers that make it easy to use with other javascript libraries: ### Angular (1.x Currently) [](#angular-1x-currently) - [angular-card](https://github.com/gavruk/angular-card) ### Ember [](#ember) - [ember-credit-card](https://github.com/esbanarango/ember-credit-card) ### React [](#react) - [react-credit-card](https://github.com/JohnyDays/react-credit-card) - [card-react](https://github.com/shatran/card-react) Development ----------- [](#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 development ``` Now, if you go to localhost:8080/example in your browser, you should see the demo page. Places using Card ----------------- [](#places-using-card) Card is used in the wild in these places: - [InspectAll](http://www.inspectall.com/) - [PennyWhale](https://www.pennywhale.com/) - [MakeSpace](https://www.makespace.com/) - [Blumpa](http://www.blumpa.com/) - [CourseLoads](http://www.courseloads.com/) - [PubNub](http://pubnub.com/) - [GigSalad](https://www.gigsalad.com) - [Boligninja](http://www.boligninja.dk) - [EasyCarros](http://www.easycarros.com/) - \[Sintelle\] () - [Wevorce](http://wevorce.com/) - [PayumServer](https://github.com/Payum/PayumServer) - [Paribus](https://paribus.co) - [Bizzabo](https://www.bizzabo.com) - [Tortuba](https://www.tortuba.com) - [Netlify](https://www.netlify.com) - [The Spice House](https://www.thespicehouse.com/) - [Touts](https://www.touts.com.br/) - [Ryman Limited](http://www.ryman.co.uk) - [Robert Dyas](http://www.robertdyas.co.uk) Are you using Card in production? If so, we'd love to link to you from this page. Open a PR or drop [@jessepollak](http://twitter.com/jessepollak) a line on [Twitter](http://twitter.com/jessepollak) and we'll add you right away! Donations --------- [](#donations) If you'd like to donate to help support development of Card, send Bitcoin directly to `17NUKd3v7GWben18kGhmFafa4ZpWrXpQSC` or through Coinbase [here](https://coinbase.com/jessepollak). ### Health Score 23 — LowBetter than 26% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity9 Limited adoption so far Community20 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/8cd960536c07e255b2e6f7e55c03c6d09274b215ccceaccc38926ffe03e098a7?d=identicon)[bgauthier](/maintainers/bgauthier) --- Top Contributors [![jessepollak](https://avatars.githubusercontent.com/u/1097953?v=4)](https://github.com/jessepollak "jessepollak (58 commits)")[![BallisticPain](https://avatars.githubusercontent.com/u/796026?v=4)](https://github.com/BallisticPain "BallisticPain (8 commits)")[![JacquesLoubser](https://avatars.githubusercontent.com/u/5149016?v=4)](https://github.com/JacquesLoubser "JacquesLoubser (7 commits)")[![appleboy](https://avatars.githubusercontent.com/u/21979?v=4)](https://github.com/appleboy "appleboy (5 commits)")[![iwootten](https://avatars.githubusercontent.com/u/3598161?v=4)](https://github.com/iwootten "iwootten (4 commits)")[![danieljuhl](https://avatars.githubusercontent.com/u/2785418?v=4)](https://github.com/danieljuhl "danieljuhl (4 commits)")[![mikemaccana](https://avatars.githubusercontent.com/u/172594?v=4)](https://github.com/mikemaccana "mikemaccana (3 commits)")[![DominoTree](https://avatars.githubusercontent.com/u/5438118?v=4)](https://github.com/DominoTree "DominoTree (3 commits)")[![Sorgrum](https://avatars.githubusercontent.com/u/3497076?v=4)](https://github.com/Sorgrum "Sorgrum (3 commits)")[![apaleslimghost](https://avatars.githubusercontent.com/u/631757?v=4)](https://github.com/apaleslimghost "apaleslimghost (2 commits)")[![DavidReinberger](https://avatars.githubusercontent.com/u/3901054?v=4)](https://github.com/DavidReinberger "DavidReinberger (2 commits)")[![dblandin](https://avatars.githubusercontent.com/u/123595?v=4)](https://github.com/dblandin "dblandin (2 commits)")[![euclio](https://avatars.githubusercontent.com/u/1372438?v=4)](https://github.com/euclio "euclio (2 commits)")[![hernan](https://avatars.githubusercontent.com/u/15841?v=4)](https://github.com/hernan "hernan (2 commits)")[![jonathongrigg](https://avatars.githubusercontent.com/u/691488?v=4)](https://github.com/jonathongrigg "jonathongrigg (2 commits)")[![kambanwait](https://avatars.githubusercontent.com/u/951731?v=4)](https://github.com/kambanwait "kambanwait (2 commits)")[![LoveSpirals](https://avatars.githubusercontent.com/u/23242628?v=4)](https://github.com/LoveSpirals "LoveSpirals (2 commits)")[![luanmuniz](https://avatars.githubusercontent.com/u/3428149?v=4)](https://github.com/luanmuniz "luanmuniz (2 commits)")[![sheck](https://avatars.githubusercontent.com/u/3035506?v=4)](https://github.com/sheck "sheck (2 commits)")[![theotherzach](https://avatars.githubusercontent.com/u/1697198?v=4)](https://github.com/theotherzach "theotherzach (1 commits)") ### Embed Badge ![Health badge](/badges/intelogie-card/health.svg) ``` [![Health](https://phpackages.com/badges/intelogie-card/health.svg)](https://phpackages.com/packages/intelogie-card) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)