127 Components
Live Card Form
InputsInteractive payment checkout form paired with a photorealistic 3D credit card that automatically flips 180° when CVC is focused, with brand detection and Luhn algorithm validation.
Interactive 3D Preview (Auto-flips on CVC focus)
Payment Details
Complete your transaction with end-to-end encryption
PCI-DSS Level 1
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/live-card-form.json"
Props
TypeScript props supported by <LiveCardForm />.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultAmount | string | '$89.00' | Default transaction amount displayed on the payment CTA button. |
| onSuccess | () => void | — | Callback invoked after successful simulated card payment authorization. |
| className | string | — | Optional CSS classes to apply to the root container. |
Key Features
- Photorealistic 3D credit card with EMV gold chip, wireless antenna, and realistic holographic sheen.
- Automatic 180° 3D flip (`rotateY(180deg)`) revealing magnetic stripe and signature strip when focusing CVC.
- Real-time card brand detection for Visa, Mastercard, American Express, and Discover with dynamic styling.
- Real-time card number masking and client-side Luhn checksum algorithm validation indicator.
- Interactive stage preset fillers for instant demo testing and flipping inspection.
Keyboard & Accessibility
- Fully accessible HTML5 form inputs with descriptive labels, autocomplete, and ARIA statuses.
- Keyboard-focusable inputs and interactive 3D card preview with Space/Enter toggle.
- Reduced motion support maintains input responsiveness without disorienting 3D animations.