{"id":13544787,"url":"https://github.com/jessepollak/payment","last_synced_at":"2025-05-14T02:06:55.719Z","repository":{"id":18602506,"uuid":"21807470","full_name":"jessepollak/payment","owner":"jessepollak","description":":moneybag: A jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers.","archived":false,"fork":false,"pushed_at":"2024-10-29T16:17:13.000Z","size":1449,"stargazers_count":571,"open_issues_count":17,"forks_count":157,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-06T07:05:57.957Z","etag":null,"topics":["coffeescript","credit-card","javascript","payment","payments"],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","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":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-07-14T04:36:15.000Z","updated_at":"2025-04-20T01:34:18.000Z","dependencies_parsed_at":"2025-01-15T21:08:33.511Z","dependency_job_id":"599e78a5-37c2-48be-82f5-113e744f0772","html_url":"https://github.com/jessepollak/payment","commit_stats":{"total_commits":171,"total_committers":40,"mean_commits":4.275,"dds":0.6783625730994152,"last_synced_commit":"2e0053eaf8a9df58dd23d06d35bd79041c61a3d3"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessepollak%2Fpayment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessepollak%2Fpayment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessepollak%2Fpayment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessepollak%2Fpayment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jessepollak","download_url":"https://codeload.github.com/jessepollak/payment/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253356274,"owners_count":21895673,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","javascript","payment","payments"],"created_at":"2024-08-01T11:00:53.398Z","updated_at":"2025-05-14T02:06:50.707Z","avatar_url":"https://github.com/jessepollak.png","language":"CoffeeScript","readme":"# Payment [![Build Status](https://travis-ci.org/jessepollak/payment.svg?branch=master)](https://travis-ci.org/jessepollak/payment) ![npm](https://img.shields.io/npm/v/payment)\n\n\nA jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers. Heavily, heavily based on [@stripe's jquery.payment library](http://github.com/stripe/jquery.payment), but without the jQuery.\n\nFor example, you can make a input act like a credit card field (with number formatting and length restriction):\n\n``` javascript\nPayment.formatCardNumber(document.querySelector('input.cc-num'));\n```\n\nThen, when the payment form is submitted, you can validate the card number on the client-side:\n\n``` javascript\nvar valid = Payment.fns.validateCardNumber(document.querySelector('input.cc-num').value);\n\nif (!valid) {\n  alert('Your card is not valid!');\n  return false;\n}\n```\n\nYou can find a full [demo here](http://jessepollak.github.io/payment/example).\n\nSupported card types are:\n\n* Visa\n* MasterCard\n* American Express\n* Discover\n* JCB\n* Diners Club\n* Maestro\n* Laser\n* UnionPay\n* Elo\n* Hipercard\n* Troy\n\n## API\n\n### Payment.formatCardNumber(element[, maxLength])\nFormats card numbers:\n\n* Includes a space between every 4 digits\n* Restricts input to numbers\n* Limits to 16 numbers\n* Supports American Express formatting\n* Adds a class of the card type (e.g. 'visa') to the input\n* If second parameter is specified then card length will be limited to its value (19 digits cards are not in use despite being included in specifications)\n\nExample:\n\n``` javascript\nPayment.formatCardNumber(document.querySelector('input.cc-num'));\n```\n\n### Payment.formatCardExpiry(element)\n\nFormats card expiry:\n\n* Includes a `/` between the month and year\n* Restricts input to numbers\n* Restricts length\n\nExample:\n\n``` javascript\nPayment.formatCardExpiry(document.querySelector('input.cc-exp'));\n```\n\n### Payment.formatCardCVC(element)\nFormats card CVC:\n\n* Restricts length to 4 numbers\n* Restricts input to numbers\n\nExample:\n\n``` javascript\nPayment.formatCardCVC(document.querySelector('input.cc-cvc'));\n```\n\n### Payment.restrictNumeric(element)\n\nGeneral numeric input restriction.\n\nExample:\n\n``` javascript\nPayment.restrictNumeric(document.querySelector('[data-numeric]'));\n```\n\n### Payment.fns.validateCardNumber(number)\n\nValidates a card number:\n\n* Validates numbers\n* Validates Luhn algorithm\n* Validates length\n\nExample:\n\n``` javascript\nPayment.fns.validateCardNumber('4242 4242 4242 4242'); //=\u003e true\n```\n\n### Payment.fns.validateCardExpiry(month, year), Payment.fns.validateCardExpiry('month / year')\n\nValidates a card expiry:\n\n* Validates numbers\n* Validates in the future\n* Supports year shorthand\n* Supports formatted as `formatCardExpiry` input value\n\nExample:\n\n``` javascript\nPayment.fns.validateCardExpiry('05', '20'); //=\u003e true\nPayment.fns.validateCardExpiry('05', '2015'); //=\u003e true\nPayment.fns.validateCardExpiry('05', '05'); //=\u003e false\nPayment.fns.validateCardExpiry('05 / 25'); //=\u003e true\nPayment.fns.validateCardExpiry('05 / 2015'); //=\u003e false\n```\n\n### Payment.fns.validateCardCVC(cvc, type)\n\nValidates a card CVC:\n\n* Validates number\n* Validates length to 4\n\nExample:\n\n``` javascript\nPayment.fns.validateCardCVC('123'); //=\u003e true\nPayment.fns.validateCardCVC('123', 'amex'); //=\u003e true\nPayment.fns.validateCardCVC('1234', 'amex'); //=\u003e true\nPayment.fns.validateCardCVC('12344'); //=\u003e false\n```\n\n### Payment.fns.cardType(number)\n\nReturns a card type. Either:\n\n* `visa`\n* `mastercard`\n* `discover`\n* `amex`\n* `jcb`\n* `dinersclub`\n* `maestro`\n* `laser`\n* `unionpay`\n* `elo`\n* `hipercard`\n\nThe function will return `null` if the card type can't be determined.\n\nExample:\n\n``` javascript\nPayment.fns.cardType('4242 4242 4242 4242'); //=\u003e 'visa'\n```\n\n### Payment.fns.cardExpiryVal(string) and Payment.cardExpiryVal(el)\n\nParses a credit card expiry in the form of MM/YYYY, returning an object containing the `month` and `year`. Shorthand years, such as `13` are also supported (and converted into the longhand, e.g. `2013`).\n\n``` javascript\nPayment.fns.cardExpiryVal('03 / 2025'); //=\u003e {month: 3: year: 2025}\nPayment.fns.cardExpiryVal('05 / 04'); //=\u003e {month: 5, year: 2004}\nPayment.fns.cardExpiryVal(document.querySelector('input.cc-exp')) //=\u003e {month: 4, year: 2020}\n```\n\nThis function doesn't perform any validation of the month or year; use `Payment.fns.validateCardExpiry(month, year)` for that.\n\n## Card Type functions\n\nWe've provided utility functions to change which card types can be identified by Payment.\n\n### Payment.getCardArray()\n\nReturns the array of card types.\n\n### Payment.setCardArray(cardTypes)\n\nOverrides the array of card types with a new array.\n\n### Payment.addToCardArray(cardType)\n\nAdd a new card type to the card array.\n\n### Payment.removeFromCardArray(cardName)\n\nRemove a card type from the card array.\n\n## Example\n\nLook in [`./example/index.html`](example/index.html)\n\n## Building\n\nRun `npm run build`\n\n## Running tests\n\nRun `npm run test`\n\n## Autocomplete recommendations\n\nWe recommend you turn autocomplete on for credit card forms, except for the CVC field. You can do this by setting the `autocomplete` attribute:\n\n``` html\n\u003cform autocomplete=\"on\"\u003e\n  \u003cinput class=\"cc-number\"\u003e\n  \u003cinput class=\"cc-cvc\" autocomplete=\"off\"\u003e\n\u003c/form\u003e\n```\n\nYou should also mark up your fields using the [Autofill spec](https://html.spec.whatwg.org/multipage/forms.html#autofill). These are respected by a number of browsers, including Chrome.\n\n``` html\n\u003cinput type=\"text\" class=\"cc-number\" pattern=\"\\d*\" autocompletetype=\"cc-number\" placeholder=\"Card number\" required\u003e\n```\n\nSet `autocompletetype` to `cc-number` for credit card numbers, `cc-exp` for credit card expiry and `cc-csc` for the CVC (security code).\n\n## Mobile recommendations\n\nWe recommend you set the `pattern` attribute which will cause the numeric keyboard to be displayed on mobiles:\n\n``` html\n\u003cinput class=\"cc-number\" pattern=\"\\d*\"\u003e\n```\n\nYou may have to turn off HTML5 validation (using the `novalidate` form attribute) when using this `pattern`, as it won't match space formatting.\n","funding_links":[],"categories":["CoffeeScript","Forms \u0026 UI Components"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjessepollak%2Fpayment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjessepollak%2Fpayment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjessepollak%2Fpayment/lists"}