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.

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-09-29