Credit Card Input
Complete credit card input solution with visual card preview, automatic formatting, card type detection, and comprehensive validation including Luhn algorithm
Pro features
What the Pro version adds to this component.
Visual Card Preview
Live credit card preview that reflects the entered number, cardholder name, expiry, and detected card type
Smart Auto-Formatting
Automatic formatting for card numbers and expiry dates with intelligent spacing
Luhn Algorithm Validation
Industry-standard credit card number validation for data integrity
Card Type Detection
Automatic detection of Visa, MasterCard, Amex, and other major card types
Security Features
Built-in security badge with a lock icon and a reassuring encryption message
Complete Validation
Real-time validation with customizable error messages and business rules
Installation
Install via CLI
npx @moontra/moonui-cli add credit-card-inputUsage
Examples
Basic Credit Card Input
Complete credit card input with all fields and visual preview
Credit Card with Validation
Real-time validation with error messages and Luhn algorithm check
Minimal Credit Card Input
Compact version without visual card preview
Custom Styled Credit Card
Credit card input with custom styling and dark theme
Form Integration Example
Complete checkout form with credit card input integration
Advanced Features Demo
Showcasing all advanced features including the live card preview and auto-formatting