Payment Method Selector

1"use client";
2 
3import type React from "react";
4import { useState } from "react";
5import { motion, AnimatePresence } from "motion/react";
6import {
7  X,
8  CreditCard,
9  QrCode,
10  Wallet,
11  Landmark,
12  ArrowRight,
13} from "lucide-react";
14import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
15import { Button } from "@/components/ui/button";
16import { Input } from "@/components/ui/input";
17import { Label } from "@/components/ui/label";
18import { Badge } from "@/components/ui/badge";
19 
20type PaymentMethod = "cards" | "digital-wallets" | "upi" | "bnpl-services";
21 
22interface PaymentOption {
23  id: PaymentMethod;
24  name: string;
25  description: string;
26  icon: React.ReactNode;
27  examples: string[];
28  details: string;
29  features: string[];
30}
31 
32interface FormData {
33  cardNumber?: string;
34  expiryDate?: string;
35  cvv?: string;
36  cardholderName?: string;
37  email?: string;
38  phone?: string;
39  upiId?: string;
40  income?: string;
41}
42 
43const paymentOptions: PaymentOption[] = [
44  {
45    id: "cards",
46    name: "Cards",
47    description: "Visa, Mastercard, etc.",
48    icon: <CreditCard className="h-4 w-4 sm:h-5 sm:w-5" />,
49    examples: ["Visa", "Mastercard", "American Express", "Discover"],
50    details: "Secure card payments with fraud protection",
51    features: [
52      "Instant processing",
53      "Worldwide acceptance",
54      "Cashback rewards",
55      "Purchase protection",
56    ],
57  },
58  {
59    id: "digital-wallets",
60    name: "Digital Wallets",
61    description: "Apple Pay, Google Pay, etc.",
62    icon: <Wallet className="h-4 w-4 sm:h-5 sm:w-5" />,
63    examples: ["Apple Pay", "Google Pay", "Cash App", "Venmo"],
64    details: "Quick and secure mobile payments",
65    features: [
66      "Touch/Face ID security",
67      "No card details shared",
68      "Fast checkout",
69      "Loyalty integration",
70    ],
71  },
72  {
73    id: "upi",
74    name: "UPI",
75    description: "Unified Payments Interface",
76    icon: <QrCode className="h-4 w-4 sm:h-5 sm:w-5" />,
77    examples: ["PhonePe", "Google Pay", "Paytm", "BHIM"],
78    details: "Real-time bank-to-bank transfers",
79    features: [
80      "24/7 availability",
81      "No transaction fees",
82      "QR code payments",
83      "Bank account linking",
84    ],
85  },
86  {
87    id: "bnpl-services",
88    name: "Buy Now, Pay Later",
89    description: "Klarna, Affirm, Afterpay",
90    icon: <Landmark className="h-4 w-4 sm:h-5 sm:w-5" />,
91    examples: ["Klarna", "Affirm", "Afterpay", "Sezzle"],
92    details: "Buy now, pay later in installments",
93    features: [
94// … truncated