{"id":13397432,"url":"https://github.com/jessepollak/card","last_synced_at":"2026-10-18T22:08:45.081Z","repository":{"id":12791062,"uuid":"15464772","full_name":"jessepollak/card","owner":"jessepollak","description":":credit_card: make your credit card form better in one line of code","archived":false,"fork":false,"pushed_at":"2023-06-12T08:56:41.000Z","size":2274,"stargazers_count":11713,"open_issues_count":68,"forks_count":1475,"subscribers_count":234,"default_branch":"master","last_synced_at":"2026-10-18T18:17:02.868Z","etag":null,"topics":["coffeescript","credit-card","css","javascript","jquery","payments"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jessepollak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2013-12-27T02:31:51.000Z","updated_at":"2026-10-18T16:59:40.000Z","dependencies_parsed_at":"2023-02-13T21:17:09.918Z","dependency_job_id":"31881d85-b747-42b3-9c5f-ffac91d7f887","html_url":"https://github.com/jessepollak/card","commit_stats":{"total_commits":412,"total_committers":81,"mean_commits":5.08641975308642,"dds":0.6553398058252426,"last_synced_commit":"fb006e9773b5175152a29bb6f8d97294fabf609f"},"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"purl":"pkg:github/jessepollak/card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessepollak%2Fcard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessepollak%2Fcard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessepollak%2Fcard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessepollak%2Fcard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jessepollak","download_url":"https://codeload.github.com/jessepollak/card/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessepollak%2Fcard/sbom","scorecard":{"id":516540,"data":{"date":"2025-08-11","repo":{"name":"github.com/jessepollak/card","commit":"fb006e9773b5175152a29bb6f8d97294fabf609f"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/3 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"31 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T01:58:02.485Z","repository_id":12791062,"created_at":"2025-08-20T01:58:02.485Z","updated_at":"2025-08-20T01:58:02.485Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344872684,"owners_count":38342694,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-18T02:00:06.448Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["coffeescript","credit-card","css","javascript","jquery","payments"],"created_at":"2024-07-30T18:01:23.454Z","updated_at":"2026-10-18T22:08:44.764Z","avatar_url":"https://github.com/jessepollak.png","language":"SCSS","funding_links":[],"categories":["CSS","SCSS","Form Widgets","css","Form Widgets [🔝](#readme)","UI","jquery","表单组件","Payment UI Components"],"sub_categories":["Other","其它"],"readme":"![npm](https://img.shields.io/npm/v/card)\n\n# Card - check out the **[demo](https://jessepollak.github.io/card)**\n\n### A better credit card form in one line of code\n\nCard 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.\n\n![card](http://i.imgur.com/qG3TenO.gif)\n\n## Usage (without jQuery)\n\nTo 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.\n\n```html\n\u003c!-- at the end of BODY --\u003e\n\u003c!-- CSS is included via this JavaScript file --\u003e\n\u003cscript src=\"/path/to/card.js\"\u003e\u003c/script\u003e\n```\n\nOnce you've included those files, you can initialize Card.\n\n```javascript\nvar card = new Card({\n    // a selector or DOM element for the form where users will\n    // be entering their information\n    form: 'form', // *required*\n    // a selector or DOM element for the container\n    // where you want the card to appear\n    container: '.card-wrapper', // *required*\n\n    formSelectors: {\n        numberInput: 'input#number', // optional — default input[name=\"number\"]\n        expiryInput: 'input#expiry', // optional — default input[name=\"expiry\"]\n        cvcInput: 'input#cvc', // optional — default input[name=\"cvc\"]\n        nameInput: 'input#name' // optional - defaults input[name=\"name\"]\n    },\n\n    width: 200, // optional — default 350px\n    formatting: true, // optional - default true\n\n    // Strings for translation - optional\n    messages: {\n        validDate: 'valid\\ndate', // optional - default 'valid\\nthru'\n        monthYear: 'mm/yyyy', // optional - default 'month/year'\n    },\n\n    // Default placeholders for rendered fields - optional\n    placeholders: {\n        number: '•••• •••• •••• ••••',\n        name: 'Full Name',\n        expiry: '••/••',\n        cvc: '•••'\n    },\n\n    masks: {\n        cardNumber: '•' // optional - mask card number\n    },\n\n    // if true, will log helpful messages for setting up Card\n    debug: false // optional - default false\n});\n```\n### Installing card from bower\n\nIf you're using bower, you can install card.js with:\n\n    bower install card --save\n\n### Installing card from npm\n\nIf you're using npm, you can install card.js with:\n\n    npm install --save card\n\n\tvar $ = require(\"jquery\");\n    // The current card.js code does not explictly require jQuery, but instead uses the global, so this line is needed.\n    window.jQuery = $;\n    var card = require(\"card\");\n\n### Using multiple inputs for one field\n\nCard 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,\n\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cdiv class='card-wrapper'\u003e\u003c/div\u003e\n\u003c!-- CSS is included via this JavaScript file --\u003e\n\u003cscript src=\"/path/to/card.js\"\u003e\u003c/script\u003e\n\u003cform id=\"cc-form\"\u003e\n    \u003cinput type=\"text\" name=\"number\"\u003e\n    \u003cinput type=\"text\" name=\"first-name\"/\u003e\n    \u003cinput type=\"text\" name=\"last-name\"/\u003e\n    \u003cinput type=\"text\" name=\"expiry\"/\u003e\n    \u003cinput type=\"text\" name=\"cvc\"/\u003e\n\u003c/form\u003e\n\u003cscript\u003e\nvar card = new Card({\n    form: 'cc-form',\n    container: '.card-wrapper',\n\n    formSelectors: {\n        nameInput: 'input[name=\"first-name\"], input[name=\"last-name\"]'\n    }\n});\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Rendering with different initial card placeholders\n\nCard renders with default placeholders for card `name`, `number`, `expiry`, and `cvc`. To override these placeholders, you can pass in a `placeholders` object.\n\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cdiv class='card-wrapper'\u003e\u003c/div\u003e\n\u003c!-- CSS is included via this JavaScript file --\u003e\n\u003cscript src=\"/path/to/card.js\"\u003e\u003c/script\u003e\n\u003cform id=\"cc-form\"\u003e\n    \u003cinput type=\"text\" name=\"number\"\u003e\n    \u003cinput type=\"text\" name=\"name\"/\u003e\n    \u003cinput type=\"text\" name=\"expiry\"/\u003e\n    \u003cinput type=\"text\" name=\"cvc\"/\u003e\n\u003c/form\u003e\n\u003cscript\u003e\n\nvar card = new Card({\n    form: 'cc-form',\n    container: '.card-wrapper',\n\n    placeholders: {\n        number: '**** **** **** ****',\n        name: 'Arya Stark',\n        expiry: '**/****',\n        cvc: '***'\n    }\n});\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Translation\n\nTo render the card with the strings in a different language, you can pass in a `messages` object.\n\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cdiv class='card-wrapper'\u003e\u003c/div\u003e\n\u003c!-- CSS is included via this JavaScript file --\u003e\n\u003cscript src=\"/path/to/card.js\"\u003e\u003c/script\u003e\n\u003cform id=\"cc-form\"\u003e\n    \u003cinput type=\"text\" name=\"number\"\u003e\n    \u003cinput type=\"text\" name=\"name\"/\u003e\n    \u003cinput type=\"text\" name=\"expiry\"/\u003e\n    \u003cinput type=\"text\" name=\"cvc\"/\u003e\n\u003c/form\u003e\n\u003cscript\u003e\n\nvar card = new Card({\n    form: 'cc-form',\n    container: '.card-wrapper',\n\n    messages: {\n        validDate: 'expire\\ndate',\n        monthYear: 'mm/yy'\n    }\n});\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Using with jQuery\n\nTo 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.\n\n```html\n\u003c!-- at the end of BODY --\u003e\n\u003c!-- CSS is included via this JavaScript file --\u003e\n\u003cscript src=\"/path/to/jquery.card.js\"\u003e\u003c/script\u003e\n```\n\nOnce you've included those files, you can initialize Card with jQuery.\n\n```javascript\n$('form').card({\n    // a selector or DOM element for the container\n    // where you want the card to appear\n    container: '.card-wrapper', // *required*\n\n    // all of the other options from above\n});\n\n```\n## Using with other javascript libraries\n\nCard has wrappers that make it easy to use with other javascript libraries:\n\n### Angular 1.x\n\n* [angular-card](https://github.com/gavruk/angular-card)\n\n### Angular 2+\n\n* [ngx-card](https://github.com/ihym/ngx-card)\n\n### Ember\n\n* [ember-credit-card](https://github.com/esbanarango/ember-credit-card)\n\n### React\n\n* [react-credit-card](https://github.com/JohnyDays/react-credit-card)\n* [card-react](https://github.com/shatran/card-react)\n* [react-plastic](https://github.com/armsteadj1/react-plastic) - static CSS only version.\n\n### Vue\n\nFor use with VueJs, install card.js from npm:\n\n```bash\nnpm install card --save\n\n```\nAdd 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:\n```html\n\u003cdiv class='card-wrapper'\u003e\u003c/div\u003e\n\n\u003cform\u003e\n    \u003cinput type=\"text\" name=\"number\"\u003e\n    \u003cinput type=\"text\" name=\"first-name\"/\u003e\n    \u003cinput type=\"text\" name=\"last-name\"/\u003e\n    \u003cinput type=\"text\" name=\"expiry\"/\u003e\n    \u003cinput type=\"text\" name=\"cvc\"/\u003e\n\u003c/form\u003e\n\n\u003cscript\u003e\nimport * as Card from \"card\";\n\nexport default {\n    name: \"Form CreditCard\",\n    mounted() {\n    new Card({ \n      form: \"form#cc-form\",\n      container: \".card-wrapper\",\n      formSelectors: { \n        numberInput: \"input#cc-number\",\n        expiryInput: \"input#cc-expiration\",\n        cvcInput: \"input#cc-cvv\",\n        nameInput: \"input#cc-name\"\n      },\n      width: 270,\n      formatting: true,\n      placeholders: {\n        number: \"•••• •••• •••• ••••\",\n        name: \"Nome Completo\",\n        expiry: \"••/••\",\n        cvc: \"•••\"\n      }\n    });\n  },\n}\n\u003c/script\u003e\n```\n\n\n\n\n## Development\n\nTo contribute, follow this steps:\n\n```bash\n$ git clone --recursive https://github.com/jessepollak/card.git\n$ cd card\n$ git submodule init \u0026\u0026 git submodule update\n$ npm install\n$ npm run development\n```\n\nNow, if you go to localhost:8080/example in your browser, you should see the demo page.\n\n## Places using Card\n\nCard is used in the wild in these places:\n\n* [InspectAll](http://www.inspectall.com/)\n* [PennyWhale](https://www.pennywhale.com/)\n* [MakeSpace](https://www.makespace.com/)\n* [Blumpa](http://www.blumpa.com/)\n* [CourseLoads](http://www.courseloads.com/)\n* [PubNub](http://pubnub.com/)\n* [GigSalad](https://www.gigsalad.com)\n* [Boligninja](http://www.boligninja.dk)\n* [EasyCarros](http://www.easycarros.com/)\n* [Sintelle](http://www.sintelleparapharmacie.com/)\n* [Wevorce](http://wevorce.com/)\n* [PayumServer](https://github.com/Payum/PayumServer)\n* [Paribus](https://paribus.co)\n* [Bizzabo](https://www.bizzabo.com)\n* [Tortuba](https://www.tortuba.com)\n* [Netlify](https://www.netlify.com)\n* [The Spice House](https://www.thespicehouse.com/)\n* [Touts](https://www.touts.com.br/)\n* [Ryman Limited](http://www.ryman.co.uk)\n* [Robert Dyas](http://www.robertdyas.co.uk)\n* [ROKA](https://www.rokahub.com)\n* [LeSalon](https://lesalon.com)\n* [Kenyan Directorate Of Immigration And Citizen Service](https://dis.ecitizen.go.ke)\n\nAre 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!\n\n## Project scope\n\nThe 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.\n\nFor questions on how to use Card in your particular project, please ask on Stack Overflow or similar forum.\n\n## Donations\n\nIf you'd like to donate to help support development of Card, send Bitcoin directly to `17NUKd3v7GWben18kGhmFafa4ZpWrXpQSC` or through Coinbase [here](https://coinbase.com/jessepollak).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjessepollak%2Fcard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjessepollak%2Fcard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjessepollak%2Fcard/lists"}