{"_id":"@adalo/react-native-credit-card-input","_rev":"28-da4ff30707f32639ef50e74a6415dc1e","name":"@adalo/react-native-credit-card-input","dist-tags":{"latest":"0.5.0"},"versions":{"0.5.0":{"name":"@adalo/react-native-credit-card-input","version":"0.5.0","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":"@adalo/react-native-credit-card-input@0.5.0","maintainers":[{"name":"protonapp","email":"jeremy@foundryplatform.io"}],"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":"3cab9b0b4eea4dad2c9542907ab3ab32183fe8a8","tarball":"https://registry.npmjs.org/@adalo/react-native-credit-card-input/-/react-native-credit-card-input-0.5.0.tgz","fileCount":33,"integrity":"sha512-/CUfFb90Hmr1PIExZ01UvowQIh6a+JmYKKBWBpeSuhF8J/6hFy/gBq3uWixa1TPvJ3Ww5DgiNUi6VhsF8SVukA==","signatures":[{"sig":"MEUCIAn9g3Z0OcM0jaXZkoQ9axvP2DI8R0LPoZN54pbjzfwoAiEAje125OqwY5oaJ6d9XYNhg7e9IPaRWgrV2t+elyaErcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1024282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1v1oCRA9TVsSAnZWagAALtMP/iXI0kagq+QqBv+rkBXU\n1DXvBh+isRTHkmh77Ke1hfv0TfxJSoVO+7WOxdY4yEQ7Ukq8rIJ2BVPn7bId\nr1ZJgh35u83zG542s0iZYLYUJ4DMZu1YtFlRVQ9R9Rg29FB4ZIFbSlh86a4o\noNUCXhjaZryakDLQVKnN2NLrMHb5R9LQBgfi9RyrxxtGZcE6yctBIU5eZsWZ\ne4O8Tuzc8DhbS6Tlgofbt+hT+uA8PF1FOPXUHGZG1ioymi9EDrNL5MTUJFVm\nyvQCBmLwnaqO0jLT8TFWUot8aW5Ojc1abjsZtWLaxlun5QjXljDAGsn/FIuX\nSdyuqXu6zmSNoI4+vlCaoXoXGFL3sDNLQxfu6KoTczDVOfqUL5qaRwfYVnML\nRr4SLMRANSKuWHDFP6mIrH34wguflJAfJhW1ZJSz4dBa+VOGKqpms+AklgPN\nrpz2b5ZVOy5FO8IzfYY0VUOFvo9RVwLClZj+faQgiW7aJ1GectXq6WocivCy\nCu9D9XlhTi2S0t4fgfrqfp83Bm8ZhCQngq/j+Cb5XnrRGwGp9VGlXW7gc3Pa\nAnj4QnpLxm3H9QP95JmRUWrR660lCxTHJ8uRPUaDmA+s1Zrnna8sJL87MOCg\n8mmKUfDqRAWHVSCDRU8lYTFL5JczyPz6tSiDpHtqyoDd9rbO8CQx2Lukh1YF\n+WAQ\r\n=YA+n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"74c9d2340bc5c16b699f2f7e8e3310d3a892194e","scripts":{"lint":"eslint --ext .js .","test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"protonapp","email":"jeremy@foundryplatform.io"},"repository":{"url":"git+https://github.com/sbycrosz/react-native-credit-card-input.git","type":"git"},"_npmVersion":"6.4.1","description":"React native credit card input component","directories":{},"_nodeVersion":"8.16.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.5.0_1583531192662_0.8573746780966387","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-03-06T21:46:32.660Z","modified":"2025-11-21T07:47:23.751Z","0.5.0":"2020-03-06T21:46:32.846Z"},"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":"guislain@adalo.com","name":"guislain-adalo"},{"email":"adalodev@adalo.com","name":"adalodev"},{"email":"jason.gilmore@adalo.com","name":"adalo-jasongilmore"},{"email":"daniel.costa@adalo.com","name":"danielcostadev"},{"email":"oleksandr.vakulinskyi@adalo.com","name":"oleksandrvakulinskyi"},{"email":"alicia.debroux@adalo.com","name":"adebroux"},{"email":"michael.aldridge@adalo.com","name":"michael-adalo"},{"email":"enzo.monjardin@adalo.com","name":"enzo-adalo"},{"email":"oleksandr.kalashnyk@adalo.com","name":"oleksandrkalashnyk"},{"email":"pawel.neubauer@adalo.com","name":"pneubaueradalo"}],"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"}