{"id":13513712,"url":"https://github.com/jondavidjohn/payform","last_synced_at":"2025-10-22T21:19:38.943Z","repository":{"id":26580199,"uuid":"30034617","full_name":"jondavidjohn/payform","owner":"jondavidjohn","description":":credit_card: A library for building credit card forms, validating inputs, and formatting numbers.","archived":false,"fork":false,"pushed_at":"2022-06-22T02:27:21.000Z","size":442,"stargazers_count":427,"open_issues_count":20,"forks_count":81,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-20T03:23:50.846Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jondavidjohn.github.io/payform/","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jondavidjohn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-29T18:27:04.000Z","updated_at":"2024-07-03T06:42:26.000Z","dependencies_parsed_at":"2022-08-07T12:00:44.047Z","dependency_job_id":null,"html_url":"https://github.com/jondavidjohn/payform","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondavidjohn%2Fpayform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondavidjohn%2Fpayform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondavidjohn%2Fpayform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondavidjohn%2Fpayform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jondavidjohn","download_url":"https://codeload.github.com/jondavidjohn/payform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221792890,"owners_count":16881289,"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":[],"created_at":"2024-08-01T05:00:36.228Z","updated_at":"2025-10-22T21:19:33.910Z","avatar_url":"https://github.com/jondavidjohn.png","language":"CoffeeScript","funding_links":[],"categories":["CoffeeScript","Javascript","Animation"],"sub_categories":["Forms"],"readme":"---\n\u003cp align=\"center\"\u003e\n  \u003ch3 align=\"center\"\u003eDo you use webpack?\u003c/h3\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  Wish your team made reducing the size of your webpack builds a priority? Want to know how the changes you're making impact your asset profile \u003cstrong\u003efor every pull request\u003c/strong\u003e?\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  Check it out at \u003ca href=\"https://packtracker.io/?utm_source=github\u0026utm_medium=payform\u0026utm_campaign=links\"\u003epacktracker.io\u003c/a\u003e.\n\u003c/p\u003e\n\n\n---\n# payform\n\n[![Build Status](https://travis-ci.org/jondavidjohn/payform.svg?branch=master)](https://travis-ci.org/jondavidjohn/payform)\n![Dependencies](https://david-dm.org/jondavidjohn/payform.svg)\n\nA general purpose library for building credit card forms, validating inputs, and formatting numbers.\n\nSupported card types:\n\n* Visa\n* MasterCard\n* American Express\n* Diners Club\n* Discover\n* UnionPay\n* JCB\n* Visa Electron\n* Maestro\n* Forbrugsforeningen\n* Dankort\n\n(Custom card types are also [supported](#custom-cards))\n\nWorks in IE8+ and all other modern browsers.\n\n[**Demo**](https://jondavidjohn.github.io/payform)\n\n## Installation / Usage\n\n### npm (Node and Browserify)\n\n```sh\nnpm install payform --save\n```\n\n```javascript\nvar payform = require('payform');\n\n// Format input for card number entry\nvar input = document.getElementById('ccnum');\npayform.cardNumberInput(input)\n\n// Validate a credit card number\npayform.validateCardNumber('4242 4242 4242 4242'); //=\u003e true\n\n// Get card type from number\npayform.parseCardType('4242 4242 4242 4242'); //=\u003e 'visa'\n```\n\n### AMD / Require.js\n\n```javascript\nrequire.config({\n    paths: { \"payform\": \"path/to/payform\" }\n});\n\nrequire([\"payform\"], function (payform) {\n  // Format input for card number entry\n  var input = document.getElementById('ccnum');\n  payform.cardNumberInput(input)\n\n  // Validate a credit card number\n  payform.validateCardNumber('4242 4242 4242 4242'); //=\u003e true\n\n  // Get card type from number\n  payform.parseCardType('4242 4242 4242 4242'); //=\u003e 'visa'\n});\n```\n\n### Direct script include / Bower\n\nOptionally via bower (or simply via download)\n```sh\nbower install payform --save\n```\n\n```html\n\u003cscript src=\"path/to/payform/dist/payform.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // Format input for card number entry\n  var input = document.getElementById('ccnum');\n  payform.cardNumberInput(input)\n\n  // Validate a credit card number\n  payform.validateCardNumber('4242 4242 4242 4242'); //=\u003e true\n\n  // Get card type from number\n  payform.parseCardType('4242 4242 4242 4242'); //=\u003e 'visa'\n\u003c/script\u003e\n```\n\n### jQuery Plugin (also supports Zepto)\n\nThis library also includes a jquery plugin.  The primary `payform` object\ncan be found at `$.payform`, and there are jquery centric ways to utilize the [browser\ninput formatters.](#browser-input-formatting-helpers)\n\n```html\n\u003cscript src=\"path/to/payform/dist/jquery.payform.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // Format input for card number entry\n  $('input.ccnum').payform('formatCardNumber');\n\n  // Validate a credit card number\n  $.payform.validateCardNumber('4242 4242 4242 4242'); //=\u003e true\n\n  // Get card type from number\n  $.payform.parseCardType('4242 4242 4242 4242'); //=\u003e 'visa'\n\u003c/script\u003e\n```\n\n## API\n\n### General Formatting and Validation\n\n#### payform.validateCardNumber(number)\n\nValidates a card number:\n\n* Validates numbers\n* Validates Luhn algorithm\n* Validates length\n\nExample:\n\n``` javascript\npayform.validateCardNumber('4242 4242 4242 4242'); //=\u003e true\n```\n\n#### payform.validateCardExpiry(month, year)\n\nValidates a card expiry:\n\n* Validates numbers\n* Validates in the future\n* Supports year shorthand\n\nExample:\n\n``` javascript\npayform.validateCardExpiry('05', '20'); //=\u003e true\npayform.validateCardExpiry('05', '2015'); //=\u003e true\npayform.validateCardExpiry('05', '05'); //=\u003e false\n```\n\n#### payform.validateCardCVC(cvc, type)\n\nValidates a card CVC:\n\n* Validates number\n* Validates length to 4\n\nExample:\n\n``` javascript\npayform.validateCardCVC('123'); //=\u003e true\npayform.validateCardCVC('123', 'amex'); //=\u003e true\npayform.validateCardCVC('1234', 'amex'); //=\u003e true\npayform.validateCardCVC('12344'); //=\u003e false\n```\n\n#### payform.parseCardType(number)\n\nReturns a card type. Either:\n\n* `visa`\n* `mastercard`\n* `amex`\n* `dinersclub`\n* `discover`\n* `unionpay`\n* `jcb`\n* `visaelectron`\n* `maestro`\n* `forbrugsforeningen`\n* `dankort`\n\nThe function will return `null` if the card type can't be determined.\n\nExample:\n\n``` javascript\npayform.parseCardType('4242 4242 4242 4242'); //=\u003e 'visa'\npayform.parseCardType('hello world?'); //=\u003e null\n```\n\n#### payform.parseCardExpiry(string)\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\npayform.parseCardExpiry('03 / 2025'); //=\u003e {month: 3: year: 2025}\npayform.parseCardExpiry('05 / 04'); //=\u003e {month: 5, year: 2004}\n```\n\nThis function doesn't perform any validation of the month or year; use `payform.validateCardExpiry(month, year)` for that.\n\n### Browser `\u003cinput\u003e` formatting helpers\n\nThese methods are specifically for use in the browser to attach `\u003cinput\u003e` formatters.\n\n(alternate [jQuery Plugin](#jquery-plugin) syntax is also provided)\n\n#### payform.cardNumberInput(input)\n\n_jQuery plugin:_ `$(...).payform('formatCardNumber')`\n\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\nExample:\n\n``` javascript\nvar input = document.getElementById('ccnum');\npayform.cardNumberInput(input);\n```\n\n#### payform.expiryInput(input)\n\n_jQuery plugin:_ `$(...).payform('formatCardExpiry')`\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\nvar input = document.getElementById('expiry');\npayform.expiryInput(input);\n```\n\n#### payform.cvcInput(input)\n\n_jQuery plugin:_ `$(...).payform('formatCardCVC')`\n\nFormats card CVC:\n\n* Restricts length to 4 numbers\n* Restricts input to numbers\n\nExample:\n\n``` javascript\nvar input = document.getElementById('cvc');\npayform.cvcInput(input);\n```\n\n#### payform.numericInput(input)\n\n_jQuery plugin:_ `$(...).payform('formatNumeric')`\n\nGeneral numeric input restriction.\n\nExample:\n\n``` javascript\nvar input = document.getElementById('numeric');\npayform.numericInput(input);\n```\n\n### Detaching formatting helpers from `\u003cinput\u003e`\n\nOnce you have used the formatting helpers available, you might also want to remove them from your input elements. Being able to remove them is especially useful in a Single Page Application (SPA) environment where you want to make sure you're properly unsubscribing events from elements before removing them from the DOM. Detaching events will assure you will not encounter any memory leaks while using this library.\n\nThese methods are specifically for use in the browser to detach `\u003cinput\u003e` formatters.\n\n#### payform.detachCardNumberInput(input)\n\n_jQuery plugin:_ `$(...).payform('detachFormatCardNumber')`\n\nExample:\n\n``` javascript\nvar input = document.getElementById('ccnum');\n// now you're able to detach:\npayform.detachCardNumberInput(input);\n```\n\n#### payform.detachExpiryInput(input)\n\n_jQuery plugin:_ `$(...).payform('detachFormatCardExpiry')`\n\nExample:\n\n``` javascript\nvar input = document.getElementById('expiry');\npayform.expiryInput(input);\n// now you're able to detach:\npayform.detachExpiryInput(input);\n```\n\n#### payform.detachCvcInput(input)\n\n_jQuery plugin:_ `$(...).payform('detachFormatCardCVC')`\n\nExample:\n\n``` javascript\nvar input = document.getElementById('cvc');\npayform.cvcInput(input);\n// now you're able to detach:\npayform.detachCvcInput(input);\n```\n\n#### payform.detachNumericInput(input)\n\n_jQuery plugin:_ `$(...).payform('detachFormatNumeric')`\n\nExample:\n\n``` javascript\nvar input = document.getElementById('numeric');\npayform.numericInput(input);\n// now you're able to detach:\npayform.detachNumericInput(input);\n```\n\n### Custom Cards\n\n#### payform.cards\n\nArray of objects that describe valid card types. Each object should contain the following fields:\n\n``` javascript\n{\n  // Card type, as returned by payform.parseCardType.\n  type: 'mastercard',\n  // Regex used to identify the card type. For the best experience, this should be\n  // the shortest pattern that can guarantee the card is of a particular type.\n  pattern: /^5[0-5]/,\n  // Array of valid card number lengths.\n  length: [16],\n  // Array of valid card CVC lengths.\n  cvcLength: [3],\n  // Boolean indicating whether a valid card number should satisfy the Luhn check.\n  luhn: true,\n  // Regex used to format the card number. Each match is joined with a space.\n  format: /(\\d{1,4})/g\n}\n```\n\nWhen identifying a card type, the array is traversed in order until the card number matches a `pattern`. For this reason, patterns with higher specificity should appear towards the beginning of the array.\n\n## Development\n\nPlease see [CONTRIBUTING.md](https://github.com/jondavidjohn/payform/blob/develop/CONTRIBUTING.md).\n\n## Autocomplete recommendations\n\nWe recommend you turn autocomplete on for credit card forms, except for the CVC field (which should never be stored). 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=\"tel\" class=\"cc-number\" autocomplete=\"cc-number\"\u003e\n```\n\nSet `autocomplete` to `cc-number` for credit card numbers and `cc-exp` for credit card expiry.\n\n## Mobile recommendations\n\nWe recommend you to use `\u003cinput type=\"tel\"\u003e` which will cause the numeric keyboard to be displayed on mobile devices:\n\n``` html\n\u003cinput type=\"tel\" class=\"cc-number\"\u003e\n```\n\n## A derived work\n\nThis library is derived from a lot of great work done on [`jquery.payment`](https://github.com/stripe/jquery.payment) by the folks at [Stripe](https://stripe.com/).  This aims to\nbuild upon that work, in a module that can be consumed in more diverse situations.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjondavidjohn%2Fpayform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjondavidjohn%2Fpayform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjondavidjohn%2Fpayform/lists"}