react-credit-cards
A React component that shows a styled credit card preview alongside a payment form. It gives users live visual feedback as they type card details.
Pick a small issue you can reproduce, then fix it with your AI coding agent.
Share on XLicense: MIT
Overview
react-credit-cards is a React component that draws a styled credit card next to a payment form. As the user types the name, number, expiry date and CVC, the card preview updates and can show which field has focus, giving live visual feedback. It supports the card issuers covered by the Payment library plus Hipercard. You install it with npm and import either the SCSS or the compiled CSS.
Key features
- Card preview updates as details are typed
- Highlights the field that currently has focus
- Supports issuers from the Payment library plus Hipercard
- Styles available as SCSS or compiled CSS
Best for
React developers who want a clear card preview in a checkout form. It only displays the card and does not process payments.
- Upstream
- amaroteam/react-credit-cards
- Fork on GitHub
- Guo-astro/react-credit-cards
- Upstream stars
- 2.6k
- Category
- Web, design and marketing
- Language
- SCSS
- License
- MIT
- Forked
- 2018-09-15
- Sync status
- In syncLast synced 2026-10-19
More in Web, design and marketing
FigCraft is a native Rust app for designing interfaces and prototypes offline. It offers a Figma-like workflow for creating layouts, components and vector designs on your own computer.
Forked 2026-10-15Last synced 2026-10-19License: Apache-2.0Web, design and marketingGitHub
OpenPencil is an open-source design editor for opening and editing .fig and .pen files, creating designs with AI, and collaborating or exporting designs to code.
Forked 2026-10-14Last synced 2026-10-19License: MITWeb, design and marketingGitHub
An agent skill that checks blog and guide articles before publishing, following people-first, Google Search Central style guidance. It favors quality over page count.
Forked 2026-09-28Last synced 2026-10-19No license declaredWeb, design and marketingGitHub
An agent skill for website SEO across Google, Bing and AI search. It covers technical audits, keyword and page strategy, traffic diagnosis, site migration, fixes and result checks.
Forked 2026-09-25Last synced 2026-10-19License: MITWeb, design and marketingGitHub