"use client"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Button } from "@/components/ui/button"; import { ArrowRight, Check } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; export interface finalTextProps { text: string; } export interface PaymentCardProps { title: string; description: string; price: string; feature?: string; featuredescription?: string; feature2?: string; feature2description?: string; finalText?: finalTextProps[]; onPay?: (data: { cardNumber: string; expiry: string; cvc: string; }) => Promise | void; className?: string; } export function PaymentCard({ title, description, price, feature, featuredescription, feature2, feature2description, finalText = [], onPay, className, }: PaymentCardProps) { const [cardNumber, setCardNumber] = useState(""); const [expiry, setExpiry] = useState(""); const [cvc, setCvc] = useState(""); const [index, setIndex] = useState(0); const [errors, setErrors] = useState<{ card?: string; expiry?: string; cvc?: string; }>({}); const validate = () => { const newErrors: typeof errors = {}; // Card number validation if (!/^[0-9 ]{16,19}$/.test(cardNumber)) { newErrors.card = "Card number must be 16 digits and only numbers."; } // Expiry validation if (!/^(0[1-9]|1[0-2])\/\d{2}$/.test(expiry)) { newErrors.expiry = "Enter a valid expiry date (MM/YY)."; } else { const [month, year] = expiry.split("/").map(Number); const now = new Date(); const firstInvalidDay = new Date(2000 + year, month, 1); if (firstInvalidDay <= now) { newErrors.expiry = "Card has expired."; } } // CVC validation if (!/^[0-9]{3,4}$/.test(cvc)) { newErrors.cvc = "CVC must be 3 or 4 digits."; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handlePay = () => { if (validate()) { if (onPay) { onPay({ cardNumber, expiry, cvc }); console.log("Payment processed!"); } else { console.log("error"); } } }; // Final text animation useEffect(() => { if (!finalText || finalText.length === 0) return; const interval = setInterval(() => { setIndex((prev) => (prev + 1) % finalText.length); }, 2000); return () => clearInterval(interval); }, [finalText]); return (

{/* Order Summary */}

{/* Price Summary */} Order Summary

Subtotal ${price || "320"}.00

Total ${price || "320"}.00

{/* Features */} What's Included

{feature || "Payment & Invoice"}

{featuredescription || "Automated billing and detailed transaction records"}

{feature2 || "Priority Support"}

{feature2description || "Faster response times and technical support"}

{/* Payment Form */} {title || "Complete your payment"} {description || "Enter your card details to finalize your subscription"} {/* Card Number */}

Card number

setCardNumber(e.target.value)} className="pl-14 font-mono tracking-wider" placeholder="1234 5678 9012 3456" maxLength={19} />

{errors.card && (

{errors.card}

)}

{/* Expiry and CVC */}

Expiry date setExpiry(e.target.value)} className="font-mono" placeholder="MM/YY" maxLength={5} /> {errors.expiry && (

{errors.expiry}

)}

CVC setCvc(e.target.value)} className="font-mono" placeholder="123" maxLength={4} /> {errors.cvc && (

{errors.cvc}

)}

{/* Discount Code */}

Discount code (optional)

{/* Pay Button */}

); }

Ecommerce - Credit Card Blocks

Select an Item to view its code