"use client"; import { CreditCard, Loader2, Lock, Shield } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Field, FieldContent, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface PaymentFormData { cardNumber: string; expiryMonth: string; expiryYear: string; cvv: string; holderName: string; billingAddress?: { line1: string; line2?: string; city: string; state: string; zip: string; country: string; }; saveForFuture?: boolean; setAsDefault?: boolean; } export interface BillingPaymentFormProps { onSubmit?: (data: PaymentFormData) => void; onCancel?: () => void; defaultValues?: Partial; className?: string; isLoading?: boolean; errors?: { cardNumber?: string; expiry?: string; cvv?: string; holderName?: string; billingAddress?: Record; general?: string; }; showBillingAddress?: boolean; showSaveOption?: boolean; showSetDefault?: boolean; currency?: string; } function formatCardNumber(value: string): string { const cleaned = value.replace(/\s+/g, ""); const chunks = cleaned.match(/.{1,4}/g) || []; return chunks.join(" ").slice(0, 19); } function detectCardType( cardNumber: string ): "visa" | "mastercard" | "amex" | "discover" | "other" { const cleaned = cardNumber.replace(/\s+/g, ""); if (/^4/.test(cleaned)) return "visa"; if (/^5[1-5]/.test(cleaned)) return "mastercard"; if (/^3[47]/.test(cleaned)) return "amex"; if (/^6(?:011|5)/.test(cleaned)) return "discover"; return "other"; } function getCardIcon(type: string): string { switch (type) { case "visa": return "💳"; case "mastercard": return "💳"; case "amex": return "💳"; case "discover": return "💳"; default: return "💳"; } } export default function BillingPaymentForm({ onSubmit, onCancel, defaultValues, className, isLoading = false, errors, showBillingAddress = false, showSaveOption = true, showSetDefault = false, }: BillingPaymentFormProps) { const [cardNumber, setCardNumber] = useState(defaultValues?.cardNumber || ""); const [expiryMonth, setExpiryMonth] = useState( defaultValues?.expiryMonth || "" ); const [expiryYear, setExpiryYear] = useState(defaultValues?.expiryYear || ""); const [cvv, setCvv] = useState(defaultValues?.cvv || ""); const [holderName, setHolderName] = useState(defaultValues?.holderName || ""); const [showBilling, setShowBilling] = useState(showBillingAddress); const [billingAddress, setBillingAddress] = useState( defaultValues?.billingAddress || { line1: "", city: "", state: "", zip: "", country: "", } ); const [saveForFuture, setSaveForFuture] = useState( defaultValues?.saveForFuture ?? true ); const [setAsDefault, setSetAsDefault] = useState( defaultValues?.setAsDefault ?? false ); const cardType = detectCardType(cardNumber); const cardIcon = getCardIcon(cardType); const handleCardNumberChange = (e: React.ChangeEvent) => { const formatted = formatCardNumber(e.target.value); setCardNumber(formatted); }; const handleExpiryChange = ( e: React.ChangeEvent, type: "month" | "year" ) => { const value = e.target.value.replace(/\D/g, ""); if (type === "month") { const month = Math.min(12, Math.max(1, Number.parseInt(value) || 0)); setExpiryMonth(month.toString().padStart(2, "0").slice(0, 2)); } else { setExpiryYear(value.slice(0, 2)); } }; const handleCvvChange = (e: React.ChangeEvent) => { const value = e.target.value.replace(/\D/g, ""); const maxLength = cardType === "amex" ? 4 : 3; setCvv(value.slice(0, maxLength)); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); onSubmit?.({ cardNumber: cardNumber.replace(/\s+/g, ""), expiryMonth, expiryYear, cvv, holderName, billingAddress: showBilling ? billingAddress : undefined, saveForFuture, setAsDefault, }); }; const generalError = errors?.general; return (

Payment method Add a new payment method to your account

{generalError && (

{generalError}

)} Card number * {errors?.cardNumber && ( {errors.cardNumber} )}

Expiry date *

Expiry month handleExpiryChange(e, "month")} placeholder="MM" type="text" value={expiryMonth} />

Expiry year handleExpiryChange(e, "year")} placeholder="YY" type="text" value={expiryYear} />

{errors?.expiry && ( {errors.expiry} )} CVV * {errors?.cvv && ( {errors.cvv} )}

Cardholder name * setHolderName(e.target.value)} placeholder="John Doe" type="text" value={holderName} /> {errors?.holderName && ( {errors.holderName} )} {showBillingAddress && ( <>

Billing address

{showBilling && (

Street address setBillingAddress({ ...billingAddress, line1: e.target.value, }) } placeholder="123 Main St" type="text" value={billingAddress.line1} />

City setBillingAddress({ ...billingAddress, city: e.target.value, }) } placeholder="New York" type="text" value={billingAddress.city} /> State setBillingAddress({ ...billingAddress, state: e.target.value, }) } placeholder="NY" type="text" value={billingAddress.state} />

ZIP code setBillingAddress({ ...billingAddress, zip: e.target.value, }) } placeholder="10001" type="text" value={billingAddress.zip} /> Country setBillingAddress({ ...billingAddress, country: e.target.value, }) } placeholder="United States" type="text" value={billingAddress.country} />

)}

Your payment information is encrypted and secure

{showSaveOption && (

setSaveForFuture(checked === true) } /> Save this card for future payments

)} {showSetDefault && (

setSetAsDefault(checked === true) } /> Set as default payment method

)}

{onCancel && ( )}

); }

Example Usage