Skip to content

Latest commit

 

History

History
99 lines (76 loc) · 1.62 KB

File metadata and controls

99 lines (76 loc) · 1.62 KB

Overview

React Credit Cards provides a beautiful and interactive credit card component that displays card information with realistic animations, automatic card type detection, and built-in validation.

Features

  • Beautiful card UI
  • Card flip animation
  • Auto-detect card type
  • Format card number
  • Format expiry date
  • Card brand icons (Visa, Mastercard, Amex, etc.)
  • CVV display on back
  • Input validation
  • Focus effects
  • Customizable styling
  • Localization support
  • TypeScript definitions

Card Types Supported

  • Visa
  • Mastercard
  • American Express
  • Discover
  • Diners Club
  • JCB
  • UnionPay
  • Maestro
  • Elo
  • Hipercard

Formatting

  • Card number grouping
  • Expiry date (MM/YY)
  • CVV masking
  • Card type icons
  • Custom placeholders

Validation

  • Luhn algorithm validation
  • Card type validation
  • Expiry date validation
  • CVV length validation
  • Required fields

Animations

  • Card flip on CVV focus
  • Smooth transitions
  • Focus indicators
  • Input highlights

Customization

  • Custom card background
  • Custom card issuer images
  • Custom placeholders
  • Custom locale
  • CSS styling
  • Card preview size

Accessibility

  • Keyboard navigation
  • Focus management
  • Screen reader support
  • ARIA labels

Security

  • No card data storage
  • Client-side only
  • PCI compliance friendly
  • CVV on card back
  • Secure input

Integration

  • Works with any form library
  • React Hook Form
  • Formik
  • Controlled components
  • Callback handlers

Use Cases

  • E-commerce checkout
  • Payment forms
  • Subscription signup
  • Donation forms
  • Membership registration
  • Online services

Pricing

Free and open-source under the MIT license.