import { useState } from 'react' import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { CreditCardIcon } from 'lucide-react' export default function Component() { const [cardNumber, setCardNumber] = useState('') const [expiry, setExpiry] = useState('') const [cvv, setCvv] = useState('') const [name, setName] = useState('') const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Here you would typically handle the payment submission console.log('Payment submitted', { cardNumber, expiry, cvv, name }) } const formatCardNumber = (value: string) => { const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '') const matches = v.match(/\d{4,16}/g) const match = matches && matches[0] || '' const parts = [] for (let i = 0, len = match.length; i < len; i += 4) { parts.push(match.substring(i, i + 4)) } if (parts.length) { return parts.join(' ') } else { return value } } const formatExpiry = (value: string) => { const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '') if (v.length >= 2) { return `${v.substring(0, 2)}/${v.substring(2, 4)}` } return v } return ( Card Payment Enter your card details to complete the payment ) }

Credit Card Payment