{"_id":"@anvilco/react-credit-card-input","_rev":"16-e0bceb5d667f804486ce45080c9a04b1","name":"@anvilco/react-credit-card-input","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.9":{"name":"@anvilco/react-credit-card-input","version":"1.0.9","keywords":["credit","debit","card","input","cvc"],"author":{"url":"https://medipass.com.au","name":"jxom","email":"jake@medipass.io"},"license":"MIT","_id":"@anvilco/react-credit-card-input@1.0.9","maintainers":[{"name":"benogle","email":"ogle.ben@gmail.com"}],"homepage":"https://github.com/medipass/react-credit-card-input#readme","bugs":{"url":"https://github.com/medipass/react-credit-card-input/issues"},"dist":{"shasum":"f3b398b794b4c28d4642d4986e4cf62aa4e8cd46","tarball":"https://registry.npmjs.org/@anvilco/react-credit-card-input/-/react-credit-card-input-1.0.9.tgz","fileCount":22,"integrity":"sha512-Y1OAyqhJysm9aI/ZM+rShDOidJWRIoTQeCTWb0qs3Hf6B46z9A0bAdnYsrcRfMWXzZpXaB0sxvBNVUDZV0GEkg==","signatures":[{"sig":"MEUCIQDFm3bZr6Kb+vJ/cMCD0S4mZGijGfNdp9MQtWdjXi0JzgIgXmzCrzsopkJVkiGXrmLD74jM9EyMKv3VbVUQ+NaQ7lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2198106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbRRcMCRA9TVsSAnZWagAAeOIP/i+5JRs4wS3x1hZ4vwr6\nooCtwaOAlgbaeCQ297+Idlcc1x/5fPbp1Fm8WaZz9uBoI/pCF81PJI6S7PNU\nUOGsCAX0r/FLO87RBDzO+aJELGZOlXofC8SW5IPtp5RI7h2dUZIgak6reF7+\n92LBoM+9+qoJcgk/1VV2vnw1i3XU3C7fv09EoHw55vZhRm3YK3n4IaR5I4XA\nN80fLiqAFhbhY6WTbHFYMZNz/ZVVktGOzSpwahPlCxdCf7LNuzV+5hTCXHEU\nQhYwxPt4fP2Pt2TtmxqwXAznKV0ruJhhUnY1khKxNRacC9knqHbfcw5L17nu\naNT9Eb8Y/Qqimvcfy+8cLV5QJ4PDknBs6facRt8OB6wbvDnLDY30duYSvqs5\nYcmvI5T67O6bfh0N+huUhkNsnFgtClqBsjUGbRrxzoxLtBErI8wZq9lgb7/6\nmcl9C/+3y/rPaxyV/D5vJTVieFo4kPX/LmhHBeSr4r1Zbi2d3zJd1wBHo2R+\n6Gx69Qc5mbF9/yrYERxIDSIao//pVs9sRJDdbpu8oiVqZXaZDWHE1xZkmZBz\nEArw6LAA3CpdVn8x5XorE1xMutPR5Q0HN4N1awZK/u8K2ou9tfrqVUt8uQoe\nQX8peS2OmJATjUUWXFDA9XTha8fbK4YiamyobhDUTR106dv/phnRU2ImYZk2\nj3gg\r\n=gjjn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"4d4a3a300de985e137979e35bfa52d2e58785116","scripts":{"fix":"npm run lint -- --fix && npm run prettier","flow":"flow","lint":"eslint src/","test":"npm run lint && npm run flow && npm run prettier:list-diff","build":"rimraf lib && rollup -c rollup.config.js","prettier":"prettier --config .prettierrc --write 'src/**/*.js'","storybook":"start-storybook -p 9001 -c .storybook","prepublish":"npm run build","storybook:build":"build-storybook -c .storybook -o docs/","prettier:list-diff":"prettier --config .prettierrc --list-different 'src/**/*.js'"},"_npmUser":{"name":"benogle","email":"ogle.ben@gmail.com"},"repository":{"url":"git+https://github.com/medipass/react-credit-card-input.git","type":"git"},"_npmVersion":"5.6.0","description":"A credit/debit card input field for React","directories":{},"_nodeVersion":"8.11.2","dependencies":{"payment":"^2.3.0","babel-loader":"^7.1.2","is-valid-zip":"0.0.3","credit-card-type":"^6.1.0","styled-components":"^3.3.3"},"eslintConfig":{"rules":{"prettier/prettier":"error","jsx-a11y/href-no-hash":0},"parser":"babel-eslint","extends":["react-app"],"plugins":["prettier","react"]},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.1.1","eslint":"^4.11.0","rimraf":"^2.6.2","rollup":"^0.54.1","flow-bin":"^0.64.0","prettier":"^1.8.2","babel-cli":"^6.26.0","react-dom":"^16.1.1","babel-core":"^6.26.0","babel-eslint":"^8.0.2","@storybook/react":"^3.2.15","babel-preset-env":"^1.6.1","babel-preset-flow":"^6.23.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.4.0","rollup-plugin-babel":"^3.0.3","eslint-plugin-import":"^2.9.0","eslint-plugin-flowtype":"^2.39.1","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-prettier":"^2.3.1","eslint-config-react-app":"^2.0.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"6.26.0"},"peerDependencies":{"react":"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0","react-dom":"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0"},"_npmOperationalInternal":{"tmp":"tmp/react-credit-card-input_1.0.9_1531254540027_0.3763205017189435","host":"s3://npm-registry-packages"}},"1.0.10":{"name":"@anvilco/react-credit-card-input","version":"1.0.10","keywords":["credit","debit","card","input","cvc"],"author":{"url":"https://medipass.com.au","name":"jxom","email":"jake@medipass.io"},"license":"MIT","_id":"@anvilco/react-credit-card-input@1.0.10","maintainers":[{"name":"benogle","email":"ogle.ben@gmail.com"}],"homepage":"https://github.com/medipass/react-credit-card-input#readme","bugs":{"url":"https://github.com/medipass/react-credit-card-input/issues"},"dist":{"shasum":"82a5bb4371d5f98c659509af1951a91b5795d1d9","tarball":"https://registry.npmjs.org/@anvilco/react-credit-card-input/-/react-credit-card-input-1.0.10.tgz","fileCount":22,"integrity":"sha512-359faAfZwHhb/NuM55Lt6LDyhSKFxk6UqkeX3gD8kwIXQe4K2UejOang1GgnAcBohWWkx7E34mAmIwAsz4M73w==","signatures":[{"sig":"MEUCIE5lykPBTgsoQiHAxEuDsIMptK1SQBge1rq75BJN/jdrAiEAtxbPeRn9YPWDwXfbonrIPYnRni4GY5Nkk8c2wxC/rDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2198111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbRSXUCRA9TVsSAnZWagAAf4oP/iqnpphq3iyAfPeIJA82\nfeQHrqtl/jCdt/7nEEYiqOsJkQ1ZMz4ptTIhbzFB3KG8DcsjUBuEmyNjPj2A\n8fsvyBSDdXS+E9e9cDVyHgK48Gl4HKCdb3hb2hHiDPiqYKNNegjv0PCYMz2i\nFifXE+joFkd/aB3ZZsIaHa60TPhlo9wEjXInN/MZb4vpos/CcWi5At8Ci58/\nzl8aruQSK0rbkgvCue/oLXTmomlnORFU0gzlZfKZTbDqlYn5VK9Xo8di7+By\nB2Fo5i0VT93/wO054kWVgJMC2kWH4ltVhcPvfFFUMQvOmeJygLr1htTcvNtN\ns30jWxCHJ7RrIZ5OYwHmRJSnVRRMCgNhzWOb3cfOjPYMp+j4Sfy0kpOJiTqX\nRL3E+78OeYnG+ms9I94gDHHKPSo66iCf/rMKCnKll9/+625SKgSFECVJmZrc\nTpGkLcmr8VkkRnX5ALVElqVUaYVMsD630fjdH7c6PXTcity5MVZBOgUWm9Ye\nvgYHzG1YNnGz9To1NBqGUI1D/IrgyeKK/IUl9E7oMzmBguF9oa9440J6lJf4\n4kaKOAuY0qiTUSIy7HPEJ2uDUoYKEXsb++VDsSmhKnrHbsVQiuO9Yf+DldQD\nxTQBi8cKxal757VzwZt27cSyi9c5d+SL6CD2+Q8ssmHUdG1LqYaKyV4V8FSk\nWV6d\r\n=Tnd0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"e0505e66155f68b82bcd3158eba552f0fcf0cb9a","scripts":{"fix":"npm run lint -- --fix && npm run prettier","flow":"flow","lint":"eslint src/","test":"npm run lint && npm run flow && npm run prettier:list-diff","build":"rimraf lib && rollup -c rollup.config.js","prettier":"prettier --config .prettierrc --write 'src/**/*.js'","storybook":"start-storybook -p 9001 -c .storybook","prepublish":"npm run build","storybook:build":"build-storybook -c .storybook -o docs/","prettier:list-diff":"prettier --config .prettierrc --list-different 'src/**/*.js'"},"_npmUser":{"name":"benogle","email":"ogle.ben@gmail.com"},"repository":{"url":"git+https://github.com/medipass/react-credit-card-input.git","type":"git"},"_npmVersion":"5.6.0","description":"A credit/debit card input field for React","directories":{},"_nodeVersion":"8.11.2","dependencies":{"payment":"^2.3.0","babel-loader":"^7.1.2","is-valid-zip":"0.0.3","credit-card-type":"^6.1.0","styled-components":"^3.3.3"},"eslintConfig":{"rules":{"prettier/prettier":"error","jsx-a11y/href-no-hash":0},"parser":"babel-eslint","extends":["react-app"],"plugins":["prettier","react"]},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.1.1","eslint":"^4.11.0","rimraf":"^2.6.2","rollup":"^0.54.1","flow-bin":"^0.64.0","prettier":"^1.8.2","babel-cli":"^6.26.0","react-dom":"^16.1.1","babel-core":"^6.26.0","babel-eslint":"^8.0.2","@storybook/react":"^3.2.15","babel-preset-env":"^1.6.1","babel-preset-flow":"^6.23.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.4.0","rollup-plugin-babel":"^3.0.3","eslint-plugin-import":"^2.9.0","eslint-plugin-flowtype":"^2.39.1","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-prettier":"^2.3.1","eslint-config-react-app":"^2.0.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"6.26.0"},"peerDependencies":{"react":"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0","react-dom":"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0"},"_npmOperationalInternal":{"tmp":"tmp/react-credit-card-input_1.0.10_1531258324609_0.18399991439263697","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@anvilco/react-credit-card-input","version":"1.1.0","keywords":["credit","debit","card","input","cvc"],"author":{"url":"https://medipass.com.au","name":"jxom","email":"jake@medipass.io"},"license":"MIT","_id":"@anvilco/react-credit-card-input@1.1.0","maintainers":[{"name":"benogle","email":"ogle.ben@gmail.com"},{"name":"anvilbot","email":"services@useanvil.com"},{"name":"ralbayaty","email":"richard@useanvil.com"},{"name":"newhouse","email":"c.newhouse@gmail.com"},{"name":"winggo","email":"winggo.tse@gmail.com"},{"name":"fostimus","email":"derekfoster94@gmail.com"}],"homepage":"https://github.com/medipass/react-credit-card-input#readme","bugs":{"url":"https://github.com/medipass/react-credit-card-input/issues"},"dist":{"shasum":"8230a7d1ed57b6ef4c764192ee920ffc673a27b5","tarball":"https://registry.npmjs.org/@anvilco/react-credit-card-input/-/react-credit-card-input-1.1.0.tgz","fileCount":24,"integrity":"sha512-c4jpvbmt9MPXlvDQ5yH+ivhheGnIUbV8iWBbv3dVRPv4FVxDa6BW5UlayNuSo5qFowXyrrFU0uOgfFJJ7c/new==","signatures":[{"sig":"MEYCIQDX4odISMqaDeNhLbVSPrN2u4fCUiLZA+PsFFkFPmSOKQIhAKgPTuQLTwt0Kzea3WRPeuHH1DKufWVLsVZ9VsMUxlE5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2271508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4ipTCRA9TVsSAnZWagAAQzoP/jUWWxLF02bDTcW7/BRv\nSkzoIbenpIk0K7D1/duAbTfVDV1tq+wrE4DwVvUP2+fij82ycGSNs76a7wtD\n0y/VV1sFCfPiwInU7Ym7WeDmjVcG01gSb9UW9qZ/BPb6AfEZRrx7YwhCrmNk\nqCFCGxIRoQNM3hp4ctJq/zGh/9wu+CpWvwo+jqv6ntzNEFfqFtvUdMj5u4vF\nnqfr+kIGf+NxSigtwoW2GdABPQvUHkYgKk70Xs3z8VT6QnlXtARN8wNTaOjJ\niEqAwrqmy4ztF3CMzteC79oEAsbe3wpmxWwcRC1Ap4oHUQ4EI4ZaGrGQEAYp\neWdlu71JQ3H42QpJeKPjQ+IW7Xu9aq4spfvyqC9k94KjsVhXVk2Oh8Ivy8mn\npta0hrox2eHXVvfLVFJTy8o+uAa55+ns8XG3S1rDErl2PSAdy+WfLrf7sXlC\nsVDjRcC6IMzqPUth6J/54YHMb3EP0O6PGny/SZpfhVwNvpQQArQUeuVIypws\n+2WnWxb04EdLdTFt1J4XC81ZIYJuoUY61d7mMNwrcvu1iGQz7wHDbyGAiMNf\nMES3DDq1q9t/YYWia5aK9hPyS/RSfRiQruTxY222pQpflO9fMWQTAwC8wBjD\nmp1agdTmlwXnrcnrKC1TA49rsJyP2IVySefwLl9QrLyEQxGcwgnk6cJQ4I1r\nvjxs\r\n=WcP/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"3bc2e46345739efc507773dbdbc2b5db5f842907","scripts":{"fix":"npm run lint -- --fix && npm run prettier","flow":"flow","lint":"eslint src/","test":"npm run lint && npm run flow && npm run prettier:list-diff","build":"rimraf lib && rollup -c rollup.config.js","prettier":"prettier --config .prettierrc --write \"src/**/*.js\"","storybook":"start-storybook -p 9001 -c .storybook","prepublish":"npm run build","storybook:build":"build-storybook -c .storybook -o docs/","prettier:list-diff":"prettier --config .prettierrc --list-different 'src/**/*.js'"},"_npmUser":{"name":"benogle","email":"ogle.ben@gmail.com"},"repository":{"url":"git+https://github.com/medipass/react-credit-card-input.git","type":"git"},"_npmVersion":"6.14.15","description":"A credit/debit card input field for React","directories":{},"_nodeVersion":"14.18.0","dependencies":{"payment":"2.3.0","credit-card-type":"6.3.0"},"eslintConfig":{"rules":{"prettier/prettier":"error","jsx-a11y/href-no-hash":0},"parser":"babel-eslint","extends":["react-app"],"plugins":["prettier","react"]},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.1.1","eslint":"^4.11.0","rimraf":"^2.6.2","rollup":"^0.54.1","flow-bin":"^0.64.0","prettier":"^1.8.2","babel-cli":"^6.26.0","react-dom":"^16.1.1","babel-core":"^6.26.0","babel-eslint":"^8.0.2","babel-loader":"^7.1.2","@storybook/react":"^3.2.15","babel-preset-env":"^1.6.1","babel-preset-flow":"^6.23.0","styled-components":"4.2.0","babel-preset-react":"^6.24.1","eslint-plugin-react":"^7.4.0","rollup-plugin-babel":"^3.0.3","eslint-plugin-import":"^2.9.0","eslint-plugin-flowtype":"^2.39.1","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-prettier":"^2.3.1","eslint-config-react-app":"^2.0.1","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"6.26.0"},"peerDependencies":{"react":"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0","react-dom":"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0","styled-components":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-credit-card-input_1.1.0_1642211923254_0.15291176071235069","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-07-10T20:28:59.982Z","modified":"2025-11-12T22:03:18.404Z","1.0.9":"2018-07-10T20:29:00.096Z","1.0.10":"2018-07-10T21:32:04.896Z","1.1.0":"2022-01-15T01:58:43.534Z"},"bugs":{"url":"https://github.com/medipass/react-credit-card-input/issues"},"author":{"url":"https://medipass.com.au","name":"jxom","email":"jake@medipass.io"},"license":"MIT","homepage":"https://github.com/medipass/react-credit-card-input#readme","keywords":["credit","debit","card","input","cvc"],"repository":{"url":"git+https://github.com/medipass/react-credit-card-input.git","type":"git"},"description":"A credit/debit card input field for React","maintainers":[{"email":"services@useanvil.com","name":"anvilbot"},{"email":"derekfoster94@gmail.com","name":"fostimus"},{"email":"manggit@gmail.com","name":"manggit"},{"email":"manggit@useanvil.com","name":"manggit_anvil"}],"readme":"# React Credit Card Input\n\n> A credit/debit card input field for React\n\n> **NOTE:** While React Credit Card Input is still supported, it's highly recommended to check out the [React Payment Inputs](https://github.com/medipass/react-payment-inputs) (the rewritten version of this library).\n\n## Example\n\n[Click here for an interactive demo](https://medipass.github.io/react-credit-card-input)\n\n![](./example.gif)\n\n\n## Install\n\n```\n$ npm install --save react-credit-card-input styled-components\n```\n\n\n## Usage\n\n```js\nimport CreditCardInput from 'react-credit-card-input';\n\n<CreditCardInput\n  cardNumberInputProps={{ value: cardNumber, onChange: this.handleCardNumberChange }}\n  cardExpiryInputProps={{ value: expiry, onChange: this.handleCardExpiryChange }}\n  cardCVCInputProps={{ value: cvc, onChange: this.handleCardCVCChange }}\n  fieldClassName=\"input\"\n/>\n```\n\n## Available props\n\n| Prop                    | Type                                       | Default value | Description                     |\n| ----------------------- | ------------------------------------------ | -- | ------------------------------------------ |\n| cardNumberInputProps    | object (optional)                          | {} | Card number input element props            |\n|                         |                                            |    | (e.g. `{ value: cardNumber, onChange: this.handleCardNumberChange, onBlur: this.handleCardNumberBlur, onError: this.handleCardNumberError }` ) |\n| cardExpiryInputProps    | object (optional)                          | {} | Card expiry date input element props       |\n|                         |                                            |    | (e.g. `{ value: expiry, onChange: this.handleCardExpiryChange, onBlur: this.handleCardExpiryBlur, onError: this.handleCardExpiryError }`) |\n| cardCVCInputProps       | object (optional)                          | {} | Card CVC input element props               |\n|                         |                                            |    | (e.g. `{ value: cvc, onChange: this.handleCardCVCChange, onBlur: this.handleCardCVCBlur, onError: this.handleCardCVCError }`) |\n| cardNumberInputRenderer | Function (view input renderer props below) |    | Card number input renderer                 |\n| cardExpiryInputRenderer | Function (view input renderer props below) |    | Card expiry date input renderer            |\n| cardCVCInputRenderer    | Function (view input renderer props below) |    | Card CVC input renderer                    |\n| onError                 | Function (optional)                        |    | Invokes on field errors. Recieves errorMessage argument. |\n|                         |                                            |    |                                            |\n| cardImageClassName      | string (optional)                          | '' | Class name for the card type image         |\n| cardImageStyle          | object (optional)                          | {} | Style for the card type image              |\n| containerClassName      | string (optional)                          | '' | Class name for the field container         |\n| containerStyle          | object (optional)                          | {} | Style for the field container              |\n| dangerTextClassName     | string (optional)                          | '' | Class name for the danger text             |\n| dangerTextStyle         | object (optional)                          | {} | Style for the danger text container        |\n| fieldClassName          | string (optional)                          | '' | Class name for the field                   |\n| fieldStyle              | object (optional)                          | {} | Style for the field                        |\n| inputClassName          | string (optional)                          | '' | Class name for the inputs                  |\n| inputStyle              | object (optional)                          | {} | Style for the inputs                       |\n| invalidClassName        | string (optional)                          | 'is-invalid' | Class name for the invalid field |\n| invalidStyle            | object (optional)                          | {} | Style for the invalid field                |\n|                         |                                            |    |                                            |\n| inputComponent          | string, function, class (optional)         | 'input' | Input component for the card number, expiry and CVC input |\n|                         |                                            |    |                                            |\n| customTextLabels        | object (optional)                          | {} | Object that defines custom label values.   |\n\n### Input renderer props\n\n| Prop                   | Type     | Description                |\n| ---------------------- | -------- | -------------------------- |\n| handleCardNumberChange | Function | Handle card number change. |\n| handleCardNumberBlur   | Function | Handle card number blur.   |\n| handleCardExpiryChange | Function | Handle card expiry change. |\n| handleCardExpiryBlur   | Function | Handle card expiry blur.   |\n| handleCardCVCChange    | Function | Handle card CVC change.    |\n| handleCardCVCBlur      | Function | Handle card CVC blur.      |\n| props                  | Object   | Input component props      |\n\n#### Error handling\n\n```jsx\n<CreditCardInput\n  onError={({ inputName, err }) => console.log(`credit card input error: ${err}`)}\n  cardCVCInputProps={{\n    onBlur: e => console.log('cvc blur', e),\n    onChange: e => console.log('cvc change', e),\n    onError: err => console.log(`cvc error: ${err}`)\n  }}\n  cardExpiryInputProps={{\n    onBlur: e => console.log('expiry blur', e),\n    onChange: e => console.log('expiry change', e),\n    onError: err => console.log(`expiry error: ${err}`)\n  }}\n  cardNumberInputProps={{\n    onBlur: e => console.log('number blur', e),\n    onChange: e => console.log('number change', e),\n    onError: err => console.log(`number error: ${err}`)\n  }}\n/>\n/>\n```\n\n#### Custom input renderer usage\n\n```jsx\n<CreditCardInput\n  cardCVCInputRenderer={({ handleCardCVCChange, props }) => (\n    <input\n      {...props}\n      onChange={handleCardCVCChange(e => console.log('cvc change', e))}\n    />\n  )}\n  cardExpiryInputRenderer={({ handleCardExpiryChange, props }) => (\n    <input\n      {...props}\n      onChange={handleCardExpiryChange(e =>\n        console.log('expiry change', e)\n      )}\n    />\n  )}\n  cardNumberInputRenderer={({ handleCardNumberChange, props }) => (\n    <input\n      {...props}\n      onChange={handleCardNumberChange(e =>\n        console.log('number change', e)\n      )}\n    />\n  )}\n/>\n```\n\n#### Custom text labels usage\n\n```jsx\n<CreditCardInput\n  customTextLabels={{\n    invalidCardNumber: 'El número de la tarjeta es inválido',\n    expiryError: {\n      invalidExpiryDate: 'La fecha de expiración es inválida',\n      monthOutOfRange: 'El mes de expiración debe estar entre 01 y 12',\n      yearOutOfRange: 'El año de expiración no puede estar en el pasado',\n      dateOutOfRange: 'La fecha de expiración no puede estar en el pasado'\n    },\n    invalidCvc: 'El código de seguridad es inválido',\n    invalidZipCode: 'El código postal es inválido',\n    cardNumberPlaceholder: 'Número de tarjeta',\n    expiryPlaceholder: 'MM/AA',\n    cvcPlaceholder: 'COD',\n    zipPlaceholder: 'C.P.'\n  }}\n/>\n```\n\n## Contributing\n\nContributing to `react-credit-card-input` is easy! With four simple steps:\n\n### Create a branch\n\n1. Fork the repository\n1. `git clone <your-repo-url>` to clone your GitHub repo to your local one\n1. `git pull origin master` to pull the latest code\n1. `npm install` to install the project's dependencies\n1. `git checkout -b the-name-of-my-branch` to create a branch (use something short and comprehensible, such as: `fix-card-number-issue`).\n1. `git remote add upstream https://github.com/medipass/react-credit-card-input.git` and `git pull upstream master` to update your fork from this source.\n\n### Make the change\n\nNote: You can run `npm run storybook`, and then navigate to http://localhost:9001/ to interactively develop your changes. If you are developing a new feature, make sure to add a story for it!\n\n### Test the change\n1. Run `npm run fix` from the project root (This will run Prettier and ESLint and automatically fix any issues).\n\n### Push the change!\n1. `git add -A && git commit -m \"My message (#issue-number/pr-number)\"` (replacing `My message (#issue-number/pr-number)` with a commit message, such as `Fixed card number issue (#43)`) to stage and commit your changes\n1. `git push my-fork-name the-name-of-my-branch`\n\n## License\n\nMIT © [Medipass Solutions](https://medipass.com.au)\n","readmeFilename":"readme.md"}