{"_id":"@bam.tech/react-native-credit-card-input","_rev":"49-8e3b7f7ed8f95c43ecedb97e51ef6f48","name":"@bam.tech/react-native-credit-card-input","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@bam.tech/react-native-credit-card-input","version":"0.0.1","keywords":["react-native","ios","android","credit-card","credit-card input","skeuomorphic credit-card","form","flip","card","input","component","react-component","react-native-component"],"author":{"name":"sbycrosz"},"license":"MIT","_id":"@bam.tech/react-native-credit-card-input@0.0.1","maintainers":[{"name":"almouro","email":"alexandrem@bamlab.fr"},{"name":"emilienchauvet","email":"emilien.chauvet.enpc@gmail.com"},{"name":"laurerc","email":"laurerc@bam.tech"},{"name":"lechinoix","email":"nicolasn@theodo.fr"},{"name":"maximes","email":"maxime.sraiki@gmail.com"},{"name":"minishlink","email":"lagrange.louis@gmail.com"},{"name":"selimbenammar","email":"selimba@bam.tech"},{"name":"tpucci","email":"thom0689@gmail.com"},{"name":"tychota","email":"tychot@bam.tech"},{"name":"yannl","email":"yleflour@gmail.com"}],"homepage":"https://github.com/sbycrosz/react-native-credit-card-input#readme","bugs":{"url":"https://github.com/sbycrosz/react-native-credit-card-input/issues"},"dist":{"shasum":"c592c3dd0e657a25276dfbdb7b0648d1d8c50b8b","tarball":"https://registry.npmjs.org/@bam.tech/react-native-credit-card-input/-/react-native-credit-card-input-0.0.1.tgz","fileCount":33,"integrity":"sha512-11Ydv9R2WZF/xsRx+fMaujrIZDwxJkj46kIBlszucvf6KNQbJ4Nrt+rJGFA1Y8+QgYoMDaBTcVR+GssAlTQT8A==","signatures":[{"sig":"MEYCIQC/PzJuuIiXZGv4whZ4/lB0ctw1NHwXMFc81PP+6m0JjwIhANJV3gW8TKlANWmyNPx6Ah6qdMyIrcxs7nIZtDC9HCPF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1024171},"main":"index.js","gitHead":"4992d5546e7f0487aa13b3f75d3f39c2776ec099","scripts":{"lint":"eslint --ext .js .","test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"tpucci","email":"thom0689@gmail.com"},"repository":{"url":"git+https://github.com/sbycrosz/react-native-credit-card-input.git","type":"git"},"_npmVersion":"5.4.2","description":"React native credit card input component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"prop-types":"^15.6.0","lodash.pick":"^4.4.0","lodash.every":"^4.6.0","lodash.values":"^4.3.0","card-validator":"^3.0.0","lodash.compact":"^3.0.1","react-native-flip-card":"^3.4.1"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"~2.2.0","babel-eslint":"^5.0.0","babel-polyfill":"^6.6.1","eslint-plugin-react":"^4.2.0","eslint-config-airbnb":"6.0.2","babel-preset-react-native":"^1.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-credit-card-input_0.0.1_1519834893661_0.806294905280726","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-02-28T16:21:33.597Z","modified":"2026-04-14T19:10:32.828Z","0.0.1":"2018-02-28T16:21:33.755Z"},"bugs":{"url":"https://github.com/sbycrosz/react-native-credit-card-input/issues"},"author":{"name":"sbycrosz"},"license":"MIT","homepage":"https://github.com/sbycrosz/react-native-credit-card-input#readme","keywords":["react-native","ios","android","credit-card","credit-card input","skeuomorphic credit-card","form","flip","card","input","component","react-component","react-native-component"],"repository":{"url":"git+https://github.com/sbycrosz/react-native-credit-card-input.git","type":"git"},"description":"React native credit card input component","maintainers":[{"email":"tychot@bam.tech","name":"tychota"},{"email":"antoine.thibierge@theodo.com","name":"antoinethib"},{"email":"marekk@bamlab.fr","name":"marekkalnik"},{"email":"yangl@bam.tech","name":"laurence923"},{"email":"remil@bam.tech","name":"remilry"},{"email":"paulb@bam.tech","name":"p0labrd"},{"email":"alexisd@bam.tech","name":"alexisd"},{"email":"thomasre@bam.tech","name":"thomasre"},{"email":"npm@victor.pm","name":"vicprz"},{"email":"pierr.poupin@laposte.net","name":"pierpo"},{"email":"pierrez@bam.tech","name":"pierrezimmermann"},{"email":"hugok@bam.tech","name":"hugok"},{"email":"zyad.alalgui@theodo.com","name":"al.zyad"},{"email":"nicolas.descamps@theodo.com","name":"nicodeck44"},{"email":"julien.izzillo@theodo.com","name":"julienizz"},{"email":"julienc@bam.tech","name":"julienc6"},{"email":"eliott.gandiolle@theodo.com","name":"eliottgdl"}],"readme":"\n# React Native Credit Card Input\nEasy (and good looking) credit-card input for your React Native Project 💳 💳\n\n

\n\n\n\n\n

\n\nCode:\n\n```js\n\n// or\n\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 & 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\n// or\n\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 => form => 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, & 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
`{ 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| additionalInputsProps | PropTypes.objectOf(TextInput.propTypes) | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in [RN TextInput](https://facebook.github.io/react-native/docs/textinput.html).\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
`{ number: \"CARD NUMBER\", expiry: \"EXPIRY\", cvc: \"CVC/CCV\" }` |\n|placeholders | PropTypes.object | Defaults to
`{ number: \"1234 5678 1234 5678\", expiry: \"MM/YY\", cvc: \"CVC\" }` |\n|cardScale | PropTypes.number | Scales the credit-card view.
Defaults 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|cardImageBack | 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 | ViewPropTypes.style | Style for textInput's container
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
Default to `false` |\n|requiresCVC | PropTypes.bool | Shows CVC field
Default to `true` |\n|requiresPostalCode | PropTypes.bool | Shows postalCode field
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
Defaults to `false` |\n|cardBrandIcons | PropTypes.object | brand icons for CardView. see `./src/Icons.js` for details |\n| additionalInputsProps | PropTypes.objectOf(TextInput.propTypes) | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in [RN TextInput](https://facebook.github.io/react-native/docs/textinput.html).\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#### Note on additionalInputsProps\n\nadditionalInputsProps gives you more control over the inputs in LiteCreditCardInput and CreditCardInput. An example object is as follows:\n```javascript\naddtionalInputsProps = {\n name: {\n defaultValue: 'my name',\n maxLength: 40,\n },\n postalCode: {\n returnKeyType: 'go',\n },\n};\n```\n\nThe above would set the default value of the name field to `my name` and limit the input to a maximum of 40 character. In addition, it would set the returnKeyType of the postalcode field to `go`.\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\n[Expo Snack](https://snack.expo.io/@sbycrosz/react-native-credit-card-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","readmeFilename":"readme.md"}