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-11-09
More in Web, design and marketing
SEOnaut scans websites for technical SEO issues that may affect search rankings and organizes findings by severity. It helps site owners review problems such as broken links, redirect issues, and missing or duplicate metadata.
Forked 2026-10-21Last synced 2026-11-09License: MITWeb, design and marketingGitHub
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-11-09License: 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-11-09License: MITWeb, design and marketingGitHub
An open-source, local-first workspace for creating and refining design work with AI agents. Teams can share projects, give feedback, and iterate together in one place.
Forked 2026-10-10Last synced 2026-11-09License: Apache-2.0Web, design and marketingGitHub