{"id":15801615,"url":"https://github.com/garrettmac/react-native-credit-card-input","last_synced_at":"2025-03-31T21:55:43.609Z","repository":{"id":84888342,"uuid":"91368899","full_name":"garrettmac/react-native-credit-card-input","owner":"garrettmac","description":null,"archived":false,"fork":false,"pushed_at":"2017-05-22T02:37:15.000Z","size":5352,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-06T01:23:19.607Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/garrettmac.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":"2017-05-15T18:05:23.000Z","updated_at":"2017-05-15T18:05:34.000Z","dependencies_parsed_at":"2023-06-29T02:09:13.759Z","dependency_job_id":null,"html_url":"https://github.com/garrettmac/react-native-credit-card-input","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-credit-card-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-credit-card-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-credit-card-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garrettmac%2Freact-native-credit-card-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/garrettmac","download_url":"https://codeload.github.com/garrettmac/react-native-credit-card-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246547388,"owners_count":20794970,"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-10-05T01:23:18.748Z","updated_at":"2025-03-31T21:55:43.592Z","avatar_url":"https://github.com/garrettmac.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# React Native Credit Card Input\nEasy (and good looking) credit-card input for your React Native Project 💳 💳\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/sbycrosz/react-native-credit-card-input/blob/master/preview-ios.gif?raw=true\" width=200/\u003e\n\u003cimg src=\"https://github.com/sbycrosz/react-native-credit-card-input/blob/master/preview-ios-lite.gif?raw=true\" width=200/\u003e\n\u003cimg src=\"https://github.com/sbycrosz/react-native-credit-card-input/blob/master/preview-android.gif?raw=true\" width=200/\u003e\n\u003cimg src=\"https://github.com/sbycrosz/react-native-credit-card-input/blob/master/preview-android-lite.gif?raw=true\" width=200/\u003e\n\u003c/p\u003e\n\nCode:\n\n```js\n\u003cCreditCardInput onChange={this._onChange} /\u003e\n// or\n\u003cLiteCreditCardInput onChange={this._onChange} /\u003e\n```\n\n\n# Features\n* Skeuomorphic credit-card 💳 (inspired by: [card](https://jessepollak.github.io/card/), [react-native-credit-card](https://github.com/sonnylazuardi/react-native-credit-card))\n* **!!NEW!!** Now you could scale the Credit Card for smaller screens\n* **!!NEW!!** Now you could use CardView as a Component. example use case: showing saved payment details, etc.\n* Lite version for smaller screens (or if skeuomorphic is not really your thing)\n* Credit-card input validations \u0026 formatting while you're typing\n* Form is fully navigatable using keypad\n* Works on both Android and iOS\n\n# Usage\n\n```bash\nnpm i --save react-native-credit-card-input\n```\n\nthen add these lines in your react-native codebase\n\n```js\nimport { CreditCardInput, LiteCreditCardInput } from \"react-native-credit-card-input\";\n\n\u003cCreditCardInput onChange={this._onChange} /\u003e\n// or\n\u003cLiteCreditCardInput onChange={this._onChange} /\u003e\n\n// Note: You'll need to enable LayoutAnimation on android to see LiteCreditCardInput's animations\n// UIManager.setLayoutAnimationEnabledExperimental(true);\n\n```\n\nAnd then on your onChange handler:\n\n```js\n_onChange =\u003e form =\u003e console.log(form);\n\n// will print:\n{\n  valid: true, // will be true once all fields are \"valid\" (time to enable the submit button)\n  values: { // will be in the sanitized and formatted form\n  \tnumber: \"4242 4242\",\n  \texpiry: \"06/19\",\n  \tcvc: \"300\",\n  \ttype: \"visa\", // will be one of [null, \"visa\", \"master-card\", \"american-express\", \"diners-club\", \"discover\", \"jcb\", \"unionpay\", \"maestro\"]\n  \tname: \"Sam\",\n  \tpostalCode: \"34567\",\n  },\n  status: {  // will be one of [\"incomplete\", \"invalid\", and \"valid\"]\n\tnumber: \"incomplete\",\n\texpiry: \"incomplete\",\n\tcvc: \"incomplete\",\n\tname: \"incomplete\", \n\tpostalCode: \"incomplete\",\n  },\n};\n\n// Notes: \n// cvc, name, \u0026 postalCode will only be available when the respective props is enabled (e.g. requiresName, requiresCVC)\n```\n\n# Props\n\n## LiteCreditCardInput\n| Property | Type | Description |\n| --- | --- | --- | --- |\n|autoFocus | PropTypes.bool | Automatically focus Card Number field on render|\n|onChange | PropTypes.func | Receives a `formData` object every time the form changes |\n|onFocus | PropTypes.func | Receives the name of currently focused field |\n|placeholders | PropTypes.object | Defaults to \u003cbr/\u003e`{ number: \"1234 5678 1234 5678\", expiry: \"MM/YY\", cvc: \"CVC\" }` |\n|inputStyle | Text.propTypes.style | Style for credit-card form's textInput |\n|validColor | PropTypes.string | Color that will be applied for valid text input. Defaults to: \"{inputStyle.color}\" |\n|invalidColor | PropTypes.string | Color that will be applied for invalid text input. Defaults to: \"red\" |\n|placeholderColor | PropTypes.string | Color that will be applied for text input placeholder. Defaults to: \"gray\" |\n\n#### NOTES\nLiteCreditCardInput does not support `requiresName`, `requiresCVC`, and `requiresPostalCode` at the moment, PRs are welcome :party:\n\n\n## CreditCardInput\n| Property | Type | Description |\n| --- | --- | --- | --- |\n|autoFocus | PropTypes.bool | Automatically focus Card Number field on render|\n|onChange | PropTypes.func | Receives a `formData` object every time the form changes |\n|onFocus | PropTypes.func | Receives the name of currently focused field |\n|labels | PropTypes.object | Defaults to \u003cbr/\u003e`{ number: \"CARD NUMBER\", expiry: \"EXPIRY\", cvc: \"CVC/CCV\" }` |\n|placeholders | PropTypes.object | Defaults to \u003cbr/\u003e`{ number: \"1234 5678 1234 5678\", expiry: \"MM/YY\", cvc: \"CVC\" }` |\n|cardScale | PropTypes.number | Scales the credit-card view.\u003cbr/\u003eDefaults to `1`, which translates to `{ width: 300, height: 190 }` |\n|cardFontFamily | PropTypes.string | Font family for the CreditCardView, works best with monospace fonts. Defaults to Courier (iOS) or monospace (android) |\n|cardImageFront | PropTypes.number | Image for the credit-card view `e.g. require(\"./card.png\")` |\n|cardImageFront | PropTypes.number | Image for the credit-card view `e.g. require(\"./card.png\")` |\n|labelStyle | Text.propTypes.style | Style for credit-card form's labels |\n|inputStyle | Text.propTypes.style | Style for credit-card form's textInput |\n|inputContainerStyle | View.propTypes.style | Style for textInput's container\u003cbr/\u003e Defaults to: `{ borderBottomWidth: 1, borderBottomColor: \"black\" }` |\n|validColor | PropTypes.string | Color that will be applied for valid text input. Defaults to: \"{inputStyle.color}\" |\n|invalidColor | PropTypes.string | Color that will be applied for invalid text input. Defaults to: \"red\" |\n|placeholderColor | PropTypes.string | Color that will be applied for text input placeholder. Defaults to: \"gray\" |\n|requiresName | PropTypes.bool | Shows cardholder's name field\u003cbr/\u003e Default to `false` |\n|requiresCVC | PropTypes.bool | Shows CVC field\u003cbr/\u003e Default to `true` |\n|requiresPostalCode | PropTypes.bool | Shows postalCode field\u003cbr/\u003e Default to `false` |\n|validatePostalCode | PropTypes.func | Function to validate postalCode, expects `incomplete`, `valid`, or `invalid` as return values|\n|allowScroll | PropTypes.bool | enables horizontal scrolling on CreditCardInput \u003cbr/\u003e Defaults to `false` |\n|cardBrandIcons | PropTypes.object | brand icons for CardView. see `./src/Icons.js` for details |\n\n##CardView\n\n| Property | Type | Description |\n| --- | --- | --- | --- |\n|focused | PropTypes.string | Determines the front face of the card|\n|brand | PropTypes.string | Brand of the credit card|\n|name | PropTypes.string | Cardholder's name (Use empty string if you need to hide the placeholder) |\n|number | PropTypes.string | Credit card number (you'll need to the formatting yourself) |\n|expiry | PropTypes.string | Credit card expiry (should be in MM/YY format)|\n|cvc | PropTypes.string | Credit card CVC |\n|placeholder | PropTypes.object | Placeholder texts|\n|scale | PropTypes.number | Scales the card|\n|fontFamily | PropTypes.string | Defaults to `Courier` and `monospace` in iOS and Android respectively|\n|imageFront | PropTypes.number | Image for the credit-card |\n|imageBack | PropTypes.number | Image for the credit-card |\n|customIcons | PropTypes.object | brand icons for CardView. see `./src/Icons.js` for details |\n\n# Methods\n## setValues\nSet values into credit card form\n\n\n```js\n\t// sets 4242 on credit card number field\n\t// other fields will stay unchanged\n\tthis.refs.CCInput.setValues({ number: \"4242\" });\n```\n\n**Known issues:** clearing a field e.g. `setValues({ expiry: \"\" })` will trigger the logic to `move to previous field` and trigger other kind of weird side effects. **PR plz**\n\n\n## focus\nfocus on to specified field\n\n```js\n\t// focus to expiry field\n\tthis.refs.CCInput.focus(\"expiry\");\n```\n\n# Example\n\nIn the `example` directory, run:\n\n```bash\nnpm install\n\nreact-native run-ios\n# or\nreact-native run-android\n```\n\n# Missing Something? Something is not working?\n* Open a GitHub issue, or\n* Send a pull request :D\n* Make sure `npm run lint` passed\n\n# Future Improvement\n* Add unit tests\n* Create example with [react-native-awesome-card-io](https://github.com/Kerumen/react-native-awesome-card-io)\n\n# Breaking Changes from 0.2.*\n* `cardViewSize` prop are removed from `CreditCardInput`, use `cardScale` instead (because changing the size will break most of the texts)\n* `bgColor` prop are removed from `CreditCardInput`, ask your designer friend to make a credit card image instead (or use the prebundled image)\n* `imageFront` and `imageBack` props are renamed to `cardImageFront` and `cardImageBack` respectively,\n* Android `monospace` fonts doesn't looks as nice as iOS `Courier`, bundle custom fonts into your app and override the default using `cardFontFamily` instead\n\n# Production App using react-native-credit-card-input\n* Grain.com.sg ([iOS](https://grain.com.sg/mobile/ios/download), [Android](https://grain.com.sg/mobile/android/download)) – Gourmet food delivery in Singapore\n# react-native-credit-card-input# react-native-credit-card-input","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarrettmac%2Freact-native-credit-card-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgarrettmac%2Freact-native-credit-card-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarrettmac%2Freact-native-credit-card-input/lists"}