{"_id":"react-19-credit-card","_rev":"6-92839cf663439abef621f0492e8f9a50","name":"react-19-credit-card","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"react-19-credit-card","version":"1.0.0","keywords":["react","react-19","credit-card","payment","react-component","card","credit","react-credit-cards"],"author":{"name":"Rijo Sebastian"},"license":"MIT","_id":"react-19-credit-card@1.0.0","maintainers":[{"name":"rijo-ksd","email":"rijobdk@gmail.com"}],"homepage":"https://rijoksd.netlify.app","bugs":{"url":"https://github.com/RijoKsd/react-19-credit-card/issues"},"dist":{"shasum":"d6c17644691bd6a2d31a517fb2cdfd3e6c28bc2f","tarball":"https://registry.npmjs.org/react-19-credit-card/-/react-19-credit-card-1.0.0.tgz","fileCount":20,"integrity":"sha512-kH+XcovElIx36vfsHP8oTBnyS5NHVSgqj6eIRnEVJm7UnlpqCwlwSWiUnCtpaLqj7/DldHMjuwdWNh25xVj6mg==","signatures":[{"sig":"MEYCIQDmLvxkmewVSPGN6HwqKL6mPsoDrly3mWOuLHdn05MHAgIhAKRRpDyXRISbemZEaZPKKC8aj/D2JkIIkwFqan7+lKNr","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":576331},"main":"dist/lib/index.js","type":"module","types":"dist/index.d.ts","module":"dist/es/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/es/index.js","require":"./dist/lib/index.js"},"./dist/es/index.css":"./dist/es/index.css"},"gitHead":"2f4e0b8653c7689f61a7b8246318caa462b08325","scripts":{"build":"npm run clean && npm run build:js && npm run build:types","clean":"rm -rf dist","build:js":"rollup -c","build:types":"rollup -c rollup.dts.config.js"},"_npmUser":{"name":"rijo-ksd","email":"rijobdk@gmail.com"},"repository":{"url":"git+https://github.com/RijoKsd/react-19-credit-card.git","type":"git"},"_npmVersion":"10.8.2","description":"Beautiful and modern credit card component built for React 19","directories":{},"_nodeVersion":"22.5.1","dependencies":{"luhn":"^2.4.1","credit-card-type":"^10.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.93.2","react":"^19.2.0","tslib":"^2.6.3","rollup":"^3.29.4","react-dom":"^19.2.0","typescript":"^5.6.3","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","rollup-plugin-dts":"^5.3.1","rollup-plugin-scss":"^4.0.1","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^24.1.0","@types/credit-card-type":"^7.0.0","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-19-credit-card_1.0.0_1761920086563_0.6888809778360563","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"react-19-credit-card","version":"1.0.1","keywords":["react","react-19","credit-card","payment","react-component","card","credit","react-credit-cards"],"author":{"name":"Rijo Sebastian"},"license":"MIT","_id":"react-19-credit-card@1.0.1","maintainers":[{"name":"rijo-ksd","email":"rijobdk@gmail.com"}],"homepage":"https://rijoksd.netlify.app","bugs":{"url":"https://github.com/RijoKsd/react-19-credit-card/issues"},"dist":{"shasum":"b5394763c6c9942e9ce12e2fe9db1b73cb20cdc3","tarball":"https://registry.npmjs.org/react-19-credit-card/-/react-19-credit-card-1.0.1.tgz","fileCount":20,"integrity":"sha512-OhMljt7HQhdhBsn4mNNtsp33/2fuqckkH8mV9O75ltbtRrwl+mq2/QWf6DTSQF93tFv67HVMvYii/kMxxLMd+w==","signatures":[{"sig":"MEQCICYUkFbHd4Qm1cB5Umo3MB4o7D913V6U/04MBYHN9C1QAiBgWuJtOSJ4BGFRiYhfrLSJWbZbyRPLK45Z5lCacl8oWA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":576276},"main":"dist/lib/index.js","type":"module","types":"dist/index.d.ts","module":"dist/es/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/es/index.js","require":"./dist/lib/index.js"},"./dist/es/index.css":"./dist/es/index.css"},"gitHead":"d941c417c4c28e56156ffea005fca2e652dc3293","scripts":{"build":"npm run clean && npm run build:js && npm run build:types","clean":"rm -rf dist","build:js":"rollup -c","build:types":"rollup -c rollup.dts.config.js"},"_npmUser":{"name":"rijo-ksd","email":"rijobdk@gmail.com"},"repository":{"url":"git+https://github.com/RijoKsd/react-19-credit-card.git","type":"git"},"_npmVersion":"10.8.2","description":"Beautiful and modern credit card component built for React 19","directories":{},"_nodeVersion":"22.5.1","dependencies":{"luhn":"^2.4.1","credit-card-type":"^10.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.93.2","react":"^19.2.0","tslib":"^2.6.3","rollup":"^3.29.4","react-dom":"^19.2.0","typescript":"^5.6.3","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","rollup-plugin-dts":"^5.3.1","rollup-plugin-scss":"^4.0.1","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^24.1.0","@types/credit-card-type":"^7.0.0","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-19-credit-card_1.0.1_1761920614166_0.47359241055538304","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"react-19-credit-card","version":"1.0.2","keywords":["react","react-19","credit-card","payment","react-component","card","credit","react-credit-cards"],"author":{"name":"Rijo Sebastian"},"license":"MIT","_id":"react-19-credit-card@1.0.2","maintainers":[{"name":"rijo-ksd","email":"rijobdk@gmail.com"}],"homepage":"https://rijoksd.netlify.app","bugs":{"url":"https://github.com/RijoKsd/react-19-credit-card/issues"},"dist":{"shasum":"6c8e23e6b4af96b0fb68467b8b7cbb0c90074273","tarball":"https://registry.npmjs.org/react-19-credit-card/-/react-19-credit-card-1.0.2.tgz","fileCount":19,"integrity":"sha512-kN11V9Dsh41T6wKirvcEaTdrt4wopHojak6GkWHR53vskUxS+kmOr5cGjiDzUk2zFYzkjuAUqacxU7p1jYuISA==","signatures":[{"sig":"MEUCIEKa2/cFMczXMIQMhCpwE9/wdoS9wfDR4tYp42knr8YWAiEA9R7Q5rc7S2D9d6KTAMLPuX6Y6PP4JiGyi2ei3jNeOSk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":575231},"main":"dist/lib/index.js","type":"module","types":"dist/index.d.ts","module":"dist/es/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/es/index.js","require":"./dist/lib/index.js"},"./dist/es/index.css":"./dist/es/index.css"},"gitHead":"8f1d832f395c2cbb363def550ec5e4293b04da98","scripts":{"build":"npm run clean && npm run build:js && npm run build:types","clean":"rm -rf dist","build:js":"rollup -c","build:types":"rollup -c rollup.dts.config.js"},"_npmUser":{"name":"rijo-ksd","email":"rijobdk@gmail.com"},"repository":{"url":"git+https://github.com/RijoKsd/react-19-credit-card.git","type":"git"},"_npmVersion":"10.8.2","description":"Beautiful and modern credit card component built for React 19","directories":{},"_nodeVersion":"22.5.1","dependencies":{"luhn":"^2.4.1","credit-card-type":"^10.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.93.2","react":"^19.2.0","tslib":"^2.6.3","rollup":"^3.29.4","react-dom":"^19.2.0","typescript":"^5.6.3","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","rollup-plugin-dts":"^5.3.1","rollup-plugin-scss":"^4.0.1","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^24.1.0","@types/credit-card-type":"^7.0.0","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-19-credit-card_1.0.2_1761921981140_0.46133475380355216","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"react-19-credit-card","version":"1.0.3","keywords":["react","react-19","credit-card","payment","react-component","card","credit","react-credit-cards"],"author":{"name":"Rijo Sebastian"},"license":"MIT","_id":"react-19-credit-card@1.0.3","maintainers":[{"name":"rijo-ksd","email":"rijobdk@gmail.com"}],"homepage":"https://rijoksd.netlify.app","bugs":{"url":"https://github.com/RijoKsd/react-19-credit-card/issues"},"dist":{"shasum":"e57eedb63e38f9d96e2f4eb1c1af9559f671d9e9","tarball":"https://registry.npmjs.org/react-19-credit-card/-/react-19-credit-card-1.0.3.tgz","fileCount":19,"integrity":"sha512-Y23LJFGdvrCvpk9Z/7kK8U6kJsl5kfJH31yfRf3xkIjSs+r/KcficA6uDKEs+MoVjiVWV0KzmW/xCbvv3NyCXg==","signatures":[{"sig":"MEYCIQCT+daRfADabphqQ+JpgqewE9Jh2/1DVRh3L8I4UpXb5wIhAOSWGl/bVFLbyfs+4JekXEk1SdORWGAA4XKtnlaK1usy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":575239},"main":"dist/lib/index.js","type":"module","types":"dist/index.d.ts","module":"dist/es/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/es/index.js","require":"./dist/lib/index.js"},"./dist/es/index.css":"./dist/es/index.css"},"gitHead":"64ee8cb67b124e69218d44eba7755d461a248a54","scripts":{"build":"npm run clean && npm run build:js && npm run build:types","clean":"rm -rf dist","build:js":"rollup -c","build:types":"rollup -c rollup.dts.config.js"},"_npmUser":{"name":"rijo-ksd","email":"rijobdk@gmail.com"},"repository":{"url":"git+https://github.com/RijoKsd/react-19-credit-card.git","type":"git"},"_npmVersion":"10.8.2","description":"Beautiful and modern credit card component built for React 19","directories":{},"_nodeVersion":"22.5.1","dependencies":{"luhn":"^2.4.1","credit-card-type":"^10.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.93.2","react":"^19.2.0","tslib":"^2.6.3","rollup":"^3.29.4","react-dom":"^19.2.0","typescript":"^5.6.3","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","rollup-plugin-dts":"^5.3.1","rollup-plugin-scss":"^4.0.1","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^24.1.0","@types/credit-card-type":"^7.0.0","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-19-credit-card_1.0.3_1761929385578_0.9680737415605896","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"react-19-credit-card","version":"1.0.4","keywords":["react","react-19","credit-card","payment","react-component","card","credit","react-credit-cards"],"author":{"name":"Rijo Sebastian"},"license":"MIT","_id":"react-19-credit-card@1.0.4","maintainers":[{"name":"rijo-ksd","email":"rijobdk@gmail.com"}],"homepage":"https://github.com/RijoKsd/react-19-credit-card#readme","bugs":{"url":"https://github.com/RijoKsd/react-19-credit-card/issues"},"dist":{"shasum":"b91578f7c640ab7f2a4cb6c40adbefd751854e7d","tarball":"https://registry.npmjs.org/react-19-credit-card/-/react-19-credit-card-1.0.4.tgz","fileCount":19,"integrity":"sha512-nZlB/R6nYG/Z4zhpnnWuWRvBcbzaYadGGj2VcXHb8MnR3Uhl6a7Y4KEryiZLNd0WwbZowg+TWBlF7poukDaLUQ==","signatures":[{"sig":"MEUCIQD9f4mxE2p05jwArhVI//fqdP5SRZyB0k+svoQJJ4iJ+AIgMP+ntqnVsQFOWKoKth5ePkQae0a5smkAHMrGm52/FiM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":575265},"main":"dist/lib/index.js","type":"module","types":"dist/index.d.ts","module":"dist/es/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/es/index.js","require":"./dist/lib/index.js"},"./dist/es/index.css":"./dist/es/index.css"},"gitHead":"2af3ad5810b285ed1660ac82ddc00b9fbf8fcbdf","scripts":{"build":"npm run clean && npm run build:js && npm run build:types","clean":"rm -rf dist","build:js":"rollup -c","build:types":"rollup -c rollup.dts.config.js"},"_npmUser":{"name":"rijo-ksd","email":"rijobdk@gmail.com"},"repository":{"url":"git+https://github.com/RijoKsd/react-19-credit-card.git","type":"git"},"_npmVersion":"10.8.2","description":"Beautiful and modern credit card component built for React 19","directories":{},"_nodeVersion":"22.5.1","dependencies":{"luhn":"^2.4.1","credit-card-type":"^10.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.93.2","react":"^19.2.0","tslib":"^2.6.3","rollup":"^3.29.4","react-dom":"^19.2.0","typescript":"^5.6.3","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","rollup-plugin-dts":"^5.3.1","rollup-plugin-scss":"^4.0.1","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^24.1.0","@types/credit-card-type":"^7.0.0","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-19-credit-card_1.0.4_1762005045798_0.4944630317673957","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"react-19-credit-card","version":"1.0.5","description":"Beautiful and modern credit card component built for React 19","type":"module","author":{"name":"Rijo Sebastian"},"license":"MIT","main":"dist/lib/index.js","module":"dist/es/index.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/es/index.js","require":"./dist/lib/index.js","types":"./dist/index.d.ts"},"./dist/es/index.css":"./dist/es/index.css"},"keywords":["react","react-19","credit-card","payment","react-component","card","credit","react-credit-cards"],"repository":{"type":"git","url":"git+https://github.com/RijoKsd/react-19-credit-card.git"},"homepage":"https://react-19-credit-card.vercel.app/","bugs":{"url":"https://github.com/RijoKsd/react-19-credit-card/issues"},"dependencies":{"credit-card-type":"^10.1.0","luhn":"^2.4.1"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^24.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@types/credit-card-type":"^7.0.0","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","react":"^19.2.0","react-dom":"^19.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^5.3.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-scss":"^4.0.1","sass":"^1.93.2","tslib":"^2.6.3","typescript":"^5.6.3"},"scripts":{"clean":"rm -rf dist","build":"npm run clean && npm run build:js && npm run build:types","build:js":"rollup -c","build:types":"rollup -c rollup.dts.config.js"},"publishConfig":{"access":"public"},"_id":"react-19-credit-card@1.0.5","gitHead":"7d9f2fad3b6139ecef2b99a2b4ac8e9daafb455b","_nodeVersion":"22.5.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-hiWkFGpSw9MOqkgoWidFAbWObHsoU6kqEo9G/wNwpcObHMWxM3Xg8LuN3uOd0T19c+YJ7zqtHqA7tujSNMvfnQ==","shasum":"12956cbf433b1e3b5291d393e2d25f5df236905a","tarball":"https://registry.npmjs.org/react-19-credit-card/-/react-19-credit-card-1.0.5.tgz","fileCount":19,"unpackedSize":575251,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDqpfIdt8SqfbgGVugtrOTWwt63DdYtpjxh5yeStFYtPQIhAP+RwCAcw86Ano5McqmteXy4qafEXU7w+gvlHHuqwWXx"}]},"_npmUser":{"name":"rijo-ksd","email":"rijobdk@gmail.com"},"directories":{},"maintainers":[{"name":"rijo-ksd","email":"rijobdk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-19-credit-card_1.0.5_1762484713558_0.2664458817612827"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-31T14:14:46.462Z","modified":"2025-11-07T03:05:14.068Z","1.0.0":"2025-10-31T14:14:46.815Z","1.0.1":"2025-10-31T14:23:34.402Z","1.0.2":"2025-10-31T14:46:21.416Z","1.0.3":"2025-10-31T16:49:45.803Z","1.0.4":"2025-11-01T13:50:46.052Z","1.0.5":"2025-11-07T03:05:13.885Z"},"bugs":{"url":"https://github.com/RijoKsd/react-19-credit-card/issues"},"author":{"name":"Rijo Sebastian"},"license":"MIT","homepage":"https://react-19-credit-card.vercel.app/","keywords":["react","react-19","credit-card","payment","react-component","card","credit","react-credit-cards"],"repository":{"type":"git","url":"git+https://github.com/RijoKsd/react-19-credit-card.git"},"description":"Beautiful and modern credit card component built for React 19","maintainers":[{"name":"rijo-ksd","email":"rijobdk@gmail.com"}],"readme":"# react-19-credit-card\n\nA lightweight and modern **React 19-compatible** credit card component — inspired by `react-credit-cards-2`, rebuilt from scratch for React 19 support.\n\n![demo](https://raw.githubusercontent.com/felquis/react-credit-cards-2/master/docs/media/rccs.gif)\n\n---\n\n## ✨ Features\n\n- ⚛️ Compatible with **React 19**\n- 💳 Realistic credit card preview (number, name, expiry, CVC)\n- 🧩 Written in TypeScript\n- 🎨 Includes built-in SCSS/CSS styling\n- 🔧 Easy to integrate with forms (React Hook Form, Formik, etc.)\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install react-19-credit-card\n```\n\n\n### Usage\n\n```jsx\n🚀 Usage\nimport React, { useState } from \"react\";\nimport Cards from \"react-19-credit-card\";\nimport \"react-19-credit-card/dist/es/index.css\";\n\nfunction App() {\n  const [number, setNumber] = useState(\"\");\n  const [name, setName] = useState(\"\");\n  const [expiry, setExpiry] = useState(\"\");\n  const [cvc, setCvc] = useState(\"\");\n  const [focus, setFocus] = useState(\"\");\n\n  return (\n    <div>\n      <Cards\n        number={number}\n        name={name}\n        expiry={expiry}\n        cvc={cvc}\n        focused={focus}\n      />\n\n      <form>\n        <input\n          type=\"tel\"\n          name=\"number\"\n          placeholder=\"Card Number\"\n          value={number}\n          onChange={(e) => setNumber(e.target.value)}\n          onFocus={(e) => setFocus(e.target.name)}\n        />\n\n        <input\n          type=\"text\"\n          name=\"name\"\n          placeholder=\"Name\"\n          value={name}\n          onChange={(e) => setName(e.target.value)}\n          onFocus={(e) => setFocus(e.target.name)}\n        />\n\n        <input\n          type=\"text\"\n          name=\"expiry\"\n          placeholder=\"MM/YY\"\n          value={expiry}\n          onChange={(e) => setExpiry(e.target.value)}\n          onFocus={(e) => setFocus(e.target.name)}\n        />\n\n        <input\n          type=\"tel\"\n          name=\"cvc\"\n          placeholder=\"CVC\"\n          value={cvc}\n          onChange={(e) => setCvc(e.target.value)}\n          onFocus={(e) => setFocus(e.target.name)}\n        />\n      </form>\n    </div>\n  );\n}\n\nexport default App;\n```\n\n| Prop      | Type                                      | Default                   | Description          |\n| --------- | ----------------------------------------- | ------------------------- | -------------------- |\n| `number`  | `string` or `number`                      | `\"\"`                      | Credit card number   |\n| `name`    | `string`                                  | `\"\"`                      | Cardholder name      |\n| `expiry`  | `string` or `number`                      | `\"\"`                      | Expiry date (MM/YY)  |\n| `cvc`     | `string` or `number`                      | `\"\"`                      | CVC code             |\n| `focused` | `\"name\"`, `\"number\"`, `\"expiry\"`, `\"cvc\"` | `\"\"`                      | Highlighted field    |\n| `preview` | `boolean`                                 | `false`                   | Enables preview mode |\n| `locale`  | `{ valid: string }`                       | `{ valid: 'valid thru' }` | Custom locale text   |\n\n### Features\n\n- We support all credit card issuers available in [Payment](https://github.com/jessepollak/payment) plus Hipercard (a brazilian credit card).\n\n## Props\n\n- `name` {string}: Name on card. \\*\n- `number` {string|number}: Card number. \\*\n- `expiry` {string|number}: Card expiry date. `10/20` or `012017` \\*\n- `cvc` {string|number}: Card CVC/CVV. \\*\n- `focused` {string}: Focused card field. `name|number|expiry|cvc`\n- `locale` {object}: Localization text (e.g. `{ valid: 'valid thru' }`).\n- `placeholders` {object}: Placeholder text (e.g. `{ name: 'YOUR NAME HERE' }`).\n- `preview` {bool}: To use the card to show scrambled data (e.g. `**** 4567`).\n- `issuer` {string}: Set the issuer for the `preview` mode (e.g. `visa|mastercard|...`)\n- `acceptedCards` {array}: If you want to limit the accepted cards. (e.g. `['visa', 'mastercard']`\n- `callback` {func}: A callback function that will be called when the card number has changed with 2 paramaters: `type ({ issuer: 'visa', maxLength: 19 }), isValid ({boolean})`\n\n\\* _Required fields_\n\n## SCSS options\n\n**Credit Card sizing**\n\n- `$rccs-card-ratio`: Card ratio. Defaults to `1.5858`\n- `$rccs-size`: Card width. Defaults to `290px`\n\n**Credit Card fonts**\n\n- `$rccs-name-font-size`: Defaults to `17px`\n- `$rccs-name-font-family`: Defaults to `Consolas, Courier, monospace`\n- `$rccs-number-font-size`: Defaults to `17px`\n- `$rccs-number-font-family`: Defaults to `Consolas, Courier, monospace`\n- `$rccs-valid-font-size`: Defaults to `10px`\n- `$rccs-expiry-font-size`: Defaults to `16px`\n- `$rccs-expiry-font-family`: Defaults to `Consolas, Courier, monospace`\n- `$rccs-cvc-font-size`: Defaults to `14px`\n- `$rccs-cvc-font-family`: Defaults to `Consolas, Courier, monospace`\n- `$rccs-cvc-color`: Defaults to `#222`\n\n**Credit Card styling**\n\n- `$rccs-shadow`: Defaults to `0 0 20px rgba(#000, 0.2)`\n- `$rccs-light-text-color`: Card text color for dark cards. Defaults to `#fff`\n- `$rccs-dark-text-color`: Card text color for light cards. Defaults to `#555`\n- `$rccs-stripe-bg-color`: Stripe background color in the back. Defaults to `#2a1d16`\n- `$rccs-signature-background`: Signature background in the back. Defaults to `repeating-linear-gradient(0.1deg, #fff 20%, #fff 40%, #fea 40%, #fea 44%, #fff 44%)`\n- `$rccs-default-background`: Default card background. Defaults to `linear-gradient(25deg, #939393, #717171)`\n- `$rccs-unknown-background`: Unknown card background. Defaults to `linear-gradient(25deg, #999, #999)`\n- `$rccs-background-transition`: Card background transition. Defaults to `all 0.5s ease-out`\n- `$rccs-animate-background`: Card background animation. Defaults to `true`\n\n**Credit Card brands**\n\n- `$rccs-amex-background`: Defaults to `linear-gradient(25deg, #308c67, #a3f2cf)`\n- `$rccs-dankort-background`: Defaults to `linear-gradient(25deg, #ccc, #999)`\n- `$rccs-dinersclub-background`: Defaults to `linear-gradient(25deg, #fff, #eee)`\n- `$rccs-discover-background`: Defaults to `linear-gradient(25deg, #fff, #eee)`\n- `$rccs-mastercard-background`: Defaults to `linear-gradient(25deg, #e8e9e5, #fbfbfb)`\n- `$rccs-visa-background`: Defaults to `linear-gradient(25deg, #0f509e, #1399cd)`\n- `$rccs-elo-background`: Defaults to `linear-gradient(25deg, #211c18, #aaa7a2)`\n- `$rccs-hipercard-background`: Defaults to `linear-gradient(25deg, #8b181b, #de1f27)`\n\n## Development\n```bash\n# Clone the repo\ngit clone https://github.com/RijoKsd/react-19-credit-card.git\n# Install dependencies\nnpm install\n\n# Run build\nnpm run build\n```\n## 🌐 Author & Links\n\n**Author:** [Rijo Sebastian](https://github.com/RijoKsd)  \n**GitHub:** [@RijoKsd](https://github.com/RijoKsd)  \n**Website:** [rijoksd.netlify.app](https://rijoksd.netlify.app)\n\n## LICENSE\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","readmeFilename":"README.md"}