{"_id":"@ecotradegroup/react-native-credit-card-input","_rev":"1-fef554f7f7dbb63e20ca0ac954cfa4fd","name":"@ecotradegroup/react-native-credit-card-input","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ecotradegroup/react-native-credit-card-input","version":"1.0.0","description":"\"A package that offers more CC options\"","main":"index.js","repository":{"type":"git","url":"git+ssh://git@bitbucket.org/ecotradegroup/react-native-credit-card-input.git"},"author":{"name":"ecotradegroup"},"license":"ecotradegroup","homepage":"https://bitbucket.org/ecotradegroup/react-native-credit-card-input#readme","dependencies":{"card-validator":"^8.0.0","prop-types":"^15.6.0","react-native-flip-card":"^3.4.1","lodash.compact":"^3.0.1","lodash.every":"^4.6.0","lodash.pick":"^4.4.0","lodash.values":"^4.3.0"},"devDependencies":{"babel-eslint":"^5.0.0","babel-polyfill":"^6.6.1","babel-preset-react-native":"^1.8.0","eslint":"~2.2.0","eslint-config-airbnb":"6.0.2","eslint-plugin-react":"^4.2.0"},"gitHead":"c7bb8026caca305c291a13cb0297e111b66b7cac","_id":"@ecotradegroup/react-native-credit-card-input@1.0.0","_nodeVersion":"14.13.1","_npmVersion":"6.14.9","dist":{"integrity":"sha512-HUg0GUIIYYY/S3cXqPQyPY7tfgs3dRMiIhwTIRzn2om9Y+TJWFiRdJ0gVld8Q0KfSuFlx0pDyQel5MyEZjyQVg==","shasum":"c1745829e961d688a34180d826586ca9de86f44d","tarball":"https://registry.npmjs.org/@ecotradegroup/react-native-credit-card-input/-/react-native-credit-card-input-1.0.0.tgz","fileCount":33,"unpackedSize":990475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2CzeCRA9TVsSAnZWagAA14sP/0/eRgPMmo4AwSK+zAvY\nOeUPFhD6yCfOESTuPEG+vu/JFHUfssjFqbSbzMWR4eOMppe5TDSEf/F7hhsO\nuM+rlmnBaMN1psy2qFsLngy6utjv4jogkqoz6eUX5mVoNVIuZ5md7Pt1yoFT\n964bd6idwsjIj7oAIsnxoeOPqjhYf7q6MO/nCgUJa7kp/f8pq2ScYLKbA2U8\nayWYc4eqY5i+EQBRPgz9qSF18FVrTsHBS53mIbRAFayRviQMYinTq2OY0tIm\nfoQE77GzgQAD5/H0qtErGw4+kY/69Lil0NAIk2XzJVu8qKh4c5WplQoJk01P\nsVuRKq9JfnQHPt5XwFknwcIPoyiMKOZw9sQ2kGnYJr9bfSC3yuBwX1fMLNPt\nFut7D8HsTnDuX4lC5b/QDpIpp4wHJ4KaAgdTOL172V6jO/3Q6Fa8RvSy3TNz\newIocVsxjG693axDhnhiW/nloG+BhZJXAVr3Osp3K+Mt8KoTe/8rIQiXSvOw\nf8PSsnYXloTdwrE2cI11pYJRn9oTuiySg9qZ5toEwDRc5w8+I49DypTz6qiv\nHZVnYw3GFGNg/v9k6GuNjrtclGabTCwPWZh3PgZvL/1iCGttPH34K2SAabeX\nploFt6BeFJSeThq/L7DV+dA33mytknD2LIVxJg9RX8b8iKAuMjf7MAG/JTyu\n0EvY\r\n=vMhN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG386m7232SDF11b2EkQuo6/mntrZFcTeMH61DWvygdaAiEAvfqL/RzUMG8yL78UtrM/mUYPows4bKJ9354Q99kuN5A="}]},"_npmUser":{"name":"alfredo.ecotradegroup","email":"alfredo.scarano@ecotradegroup.com"},"directories":{},"maintainers":[{"name":"alfredo.ecotradegroup","email":"alfredo.scarano@ecotradegroup.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-credit-card-input_1.0.0_1608002781939_0.19135543915895492"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-15T03:26:21.700Z","1.0.0":"2020-12-15T03:26:22.188Z","modified":"2022-04-05T06:39:38.631Z"},"maintainers":[{"name":"alfredo.ecotradegroup","email":"alfredo.scarano@ecotradegroup.com"}],"description":"\"A package that offers more CC options\"","homepage":"https://bitbucket.org/ecotradegroup/react-native-credit-card-input#readme","repository":{"type":"git","url":"git+ssh://git@bitbucket.org/ecotradegroup/react-native-credit-card-input.git"},"author":{"name":"ecotradegroup"},"license":"ecotradegroup","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"}