{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payment-method-selector",
  "title": "Payment Method Selector",
  "description": "A payment method selector component with support for cards, digital wallets, UPI, and BNPL services",
  "dependencies": ["lucide-react", "motion"],
  "registryDependencies": [
    "button",
    "dialog",
    "tooltip",
    "card",
    "input",
    "label",
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/billingsdk/payment-method-selector.tsx",
      "content": "\"use client\";\n\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport {\n  X,\n  CreditCard,\n  QrCode,\n  Wallet,\n  Landmark,\n  ArrowRight,\n} from \"lucide-react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Badge } from \"@/components/ui/badge\";\n\ntype PaymentMethod = \"cards\" | \"digital-wallets\" | \"upi\" | \"bnpl-services\";\n\ninterface PaymentOption {\n  id: PaymentMethod;\n  name: string;\n  description: string;\n  icon: React.ReactNode;\n  examples: string[];\n  details: string;\n  features: string[];\n}\n\ninterface FormData {\n  cardNumber?: string;\n  expiryDate?: string;\n  cvv?: string;\n  cardholderName?: string;\n  email?: string;\n  phone?: string;\n  upiId?: string;\n  income?: string;\n}\n\nconst paymentOptions: PaymentOption[] = [\n  {\n    id: \"cards\",\n    name: \"Cards\",\n    description: \"Visa, Mastercard, etc.\",\n    icon: <CreditCard className=\"h-4 w-4 sm:h-5 sm:w-5\" />,\n    examples: [\"Visa\", \"Mastercard\", \"American Express\", \"Discover\"],\n    details: \"Secure card payments with fraud protection\",\n    features: [\n      \"Instant processing\",\n      \"Worldwide acceptance\",\n      \"Cashback rewards\",\n      \"Purchase protection\",\n    ],\n  },\n  {\n    id: \"digital-wallets\",\n    name: \"Digital Wallets\",\n    description: \"Apple Pay, Google Pay, etc.\",\n    icon: <Wallet className=\"h-4 w-4 sm:h-5 sm:w-5\" />,\n    examples: [\"Apple Pay\", \"Google Pay\", \"Cash App\", \"Venmo\"],\n    details: \"Quick and secure mobile payments\",\n    features: [\n      \"Touch/Face ID security\",\n      \"No card details shared\",\n      \"Fast checkout\",\n      \"Loyalty integration\",\n    ],\n  },\n  {\n    id: \"upi\",\n    name: \"UPI\",\n    description: \"Unified Payments Interface\",\n    icon: <QrCode className=\"h-4 w-4 sm:h-5 sm:w-5\" />,\n    examples: [\"PhonePe\", \"Google Pay\", \"Paytm\", \"BHIM\"],\n    details: \"Real-time bank-to-bank transfers\",\n    features: [\n      \"24/7 availability\",\n      \"No transaction fees\",\n      \"QR code payments\",\n      \"Bank account linking\",\n    ],\n  },\n  {\n    id: \"bnpl-services\",\n    name: \"Buy Now, Pay Later\",\n    description: \"Klarna, Affirm, Afterpay\",\n    icon: <Landmark className=\"h-4 w-4 sm:h-5 sm:w-5\" />,\n    examples: [\"Klarna\", \"Affirm\", \"Afterpay\", \"Sezzle\"],\n    details: \"Buy now, pay later in installments\",\n    features: [\n      \"Split payments\",\n      \"No interest options\",\n      \"Flexible terms\",\n      \"Credit building\",\n    ],\n  },\n];\n\nexport interface PaymentMethodSelectorProps {\n  className?: string;\n  onProceed?: (method: PaymentMethod, data: FormData) => void;\n}\n\nexport function PaymentMethodSelector({\n  onProceed,\n}: PaymentMethodSelectorProps) {\n  const [selectedMethod, setSelectedMethod] = useState<PaymentMethod | null>(\n    null,\n  );\n  const [formData, setFormData] = useState<FormData>({});\n\n  const handleMethodSelect = (method: PaymentMethod) => {\n    setSelectedMethod(selectedMethod === method ? null : method);\n    setFormData({});\n  };\n\n  const handleClose = () => {\n    setSelectedMethod(null);\n    setFormData({});\n  };\n\n  const handleInputChange = (field: keyof FormData, value: string) => {\n    setFormData((prev) => ({ ...prev, [field]: value }));\n  };\n\n  const renderForm = (method: PaymentMethod) => {\n    switch (method) {\n      case \"cards\":\n        return (\n          <motion.div\n            initial={{ y: 8, opacity: 0 }}\n            animate={{ y: 0, opacity: 1 }}\n            transition={{\n              delay: 0.25,\n              duration: 0.5,\n              ease: [0.25, 0.46, 0.45, 0.94],\n            }}\n            className=\"space-y-4\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"grid grid-cols-2 gap-3 sm:gap-4\">\n              <div className=\"col-span-2\">\n                <Label\n                  htmlFor=\"cardNumber\"\n                  className=\"text-foreground text-xs font-medium sm:text-sm\"\n                >\n                  Card Number\n                </Label>\n                <Input\n                  id=\"cardNumber\"\n                  type=\"text\"\n                  placeholder=\"1234 5678 9012 3456\"\n                  value={formData.cardNumber || \"\"}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    handleInputChange(\"cardNumber\", e.target.value)\n                  }\n                  className=\"border-border/50 focus:border-primary/50 mt-1.5 transition-colors\"\n                />\n              </div>\n              <div>\n                <Label\n                  htmlFor=\"expiryDate\"\n                  className=\"text-foreground text-xs font-medium sm:text-sm\"\n                >\n                  Expiry Date\n                </Label>\n                <Input\n                  id=\"expiryDate\"\n                  type=\"text\"\n                  placeholder=\"MM/YY\"\n                  value={formData.expiryDate || \"\"}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    handleInputChange(\"expiryDate\", e.target.value)\n                  }\n                  className=\"border-border/50 focus:border-primary/50 mt-1.5 transition-colors\"\n                />\n              </div>\n              <div>\n                <Label\n                  htmlFor=\"cvv\"\n                  className=\"text-foreground text-xs font-medium sm:text-sm\"\n                >\n                  CVV\n                </Label>\n                <Input\n                  id=\"cvv\"\n                  type=\"text\"\n                  placeholder=\"123\"\n                  value={formData.cvv || \"\"}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    handleInputChange(\"cvv\", e.target.value)\n                  }\n                  className=\"border-border/50 focus:border-primary/50 mt-1.5 transition-colors\"\n                />\n              </div>\n              <div className=\"col-span-2\">\n                <Label\n                  htmlFor=\"cardholderName\"\n                  className=\"text-foreground text-xs font-medium sm:text-sm\"\n                >\n                  Cardholder Name\n                </Label>\n                <Input\n                  id=\"cardholderName\"\n                  type=\"text\"\n                  placeholder=\"John Doe\"\n                  value={formData.cardholderName || \"\"}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    handleInputChange(\"cardholderName\", e.target.value)\n                  }\n                  className=\"border-border/50 focus:border-primary/50 mt-1.5 transition-colors\"\n                />\n              </div>\n            </div>\n          </motion.div>\n        );\n\n      case \"digital-wallets\":\n        return (\n          <motion.div\n            initial={{ y: 8, opacity: 0 }}\n            animate={{ y: 0, opacity: 1 }}\n            transition={{\n              delay: 0.25,\n              duration: 0.5,\n              ease: [0.25, 0.46, 0.45, 0.94],\n            }}\n            className=\"space-y-4\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"space-y-4\">\n              <div>\n                <Label\n                  htmlFor=\"email\"\n                  className=\"text-foreground text-xs font-medium sm:text-sm\"\n                >\n                  Email Address\n                </Label>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"john@example.com\"\n                  value={formData.email || \"\"}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    handleInputChange(\"email\", e.target.value)\n                  }\n                  className=\"border-border/50 focus:border-primary/50 mt-1.5 transition-colors\"\n                />\n              </div>\n              <div>\n                <Label\n                  htmlFor=\"phone\"\n                  className=\"text-foreground text-xs font-medium sm:text-sm\"\n                >\n                  Phone Number\n                </Label>\n                <Input\n                  id=\"phone\"\n                  type=\"tel\"\n                  placeholder=\"+1 (555) 123-4567\"\n                  value={formData.phone || \"\"}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    handleInputChange(\"phone\", e.target.value)\n                  }\n                  className=\"border-border/50 focus:border-primary/50 mt-1.5 transition-colors\"\n                />\n              </div>\n            </div>\n            <div className=\"bg-muted/20 border-border/30 rounded-lg border p-3\">\n              <p className=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n                You'll be redirected to your selected wallet app to complete the\n                payment securely.\n              </p>\n            </div>\n          </motion.div>\n        );\n\n      case \"upi\":\n        return (\n          <motion.div\n            initial={{ y: 8, opacity: 0 }}\n            animate={{ y: 0, opacity: 1 }}\n            transition={{\n              delay: 0.25,\n              duration: 0.5,\n              ease: [0.25, 0.46, 0.45, 0.94],\n            }}\n            className=\"space-y-4\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div>\n              <Label\n                htmlFor=\"upiId\"\n                className=\"text-foreground text-xs font-medium sm:text-sm\"\n              >\n                UPI ID\n              </Label>\n              <Input\n                id=\"upiId\"\n                type=\"text\"\n                placeholder=\"yourname@paytm\"\n                value={formData.upiId || \"\"}\n                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                  handleInputChange(\"upiId\", e.target.value)\n                }\n                className=\"border-border/50 focus:border-primary/50 mt-1.5 transition-colors\"\n              />\n            </div>\n            <div className=\"bg-muted/20 border-border/30 rounded-lg border p-3\">\n              <p className=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n                Enter your UPI ID to receive a payment request. Complete the\n                payment in your UPI app.\n              </p>\n            </div>\n          </motion.div>\n        );\n\n      case \"bnpl-services\":\n        return (\n          <motion.div\n            initial={{ y: 8, opacity: 0 }}\n            animate={{ y: 0, opacity: 1 }}\n            transition={{\n              delay: 0.25,\n              duration: 0.5,\n              ease: [0.25, 0.46, 0.45, 0.94],\n            }}\n            className=\"space-y-4\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"space-y-4\">\n              <div>\n                <Label\n                  htmlFor=\"bnplEmail\"\n                  className=\"text-foreground text-xs font-medium sm:text-sm\"\n                >\n                  Email Address\n                </Label>\n                <Input\n                  id=\"bnplEmail\"\n                  type=\"email\"\n                  placeholder=\"john@example.com\"\n                  value={formData.email || \"\"}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    handleInputChange(\"email\", e.target.value)\n                  }\n                  className=\"border-border/50 focus:border-primary/50 mt-1.5 transition-colors\"\n                />\n              </div>\n              <div>\n                <Label\n                  htmlFor=\"bnplPhone\"\n                  className=\"text-foreground text-xs font-medium sm:text-sm\"\n                >\n                  Phone Number\n                </Label>\n                <Input\n                  id=\"bnplPhone\"\n                  type=\"tel\"\n                  placeholder=\"+1 (555) 123-4567\"\n                  value={formData.phone || \"\"}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    handleInputChange(\"phone\", e.target.value)\n                  }\n                  className=\"border-border/50 focus:border-primary/50 mt-1.5 transition-colors\"\n                />\n              </div>\n              <div>\n                <Label\n                  htmlFor=\"income\"\n                  className=\"text-foreground text-xs font-medium sm:text-sm\"\n                >\n                  Annual Income\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"px-1.5 py-0.5 text-[10px]\"\n                  >\n                    Optional\n                  </Badge>\n                </Label>\n                <Input\n                  id=\"income\"\n                  type=\"text\"\n                  placeholder=\"$50,000\"\n                  value={formData.income || \"\"}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n                    handleInputChange(\"income\", e.target.value)\n                  }\n                  className=\"border-border/50 focus:border-primary/50 mt-1.5 transition-colors\"\n                />\n              </div>\n            </div>\n            <div className=\"bg-muted/20 border-border/30 rounded-lg border p-3\">\n              <p className=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n                You'll be redirected to complete a quick eligibility check and\n                set up your payment plan.\n              </p>\n            </div>\n          </motion.div>\n        );\n\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <Card className=\"mx-auto w-full max-w-lg overflow-hidden text-left shadow-lg\">\n      <CardHeader className=\"px-4 pb-2 sm:px-6\">\n        <CardTitle className=\"text-base font-semibold\">\n          Payment Methods\n        </CardTitle>\n        <p className=\"text-muted-foreground text-sm\">\n          Choose your preferred payment method to continue\n        </p>\n      </CardHeader>\n\n      <CardContent className=\"space-y-3 px-4 sm:px-6\">\n        <AnimatePresence mode=\"wait\">\n          {paymentOptions.map((option) => {\n            const isSelected = selectedMethod === option.id;\n\n            return (\n              <motion.div\n                key={option.id}\n                onClick={() => handleMethodSelect(option.id)}\n                className={`cursor-pointer rounded-lg border p-4 shadow-sm transition-all duration-300 hover:shadow-md ${\n                  isSelected\n                    ? \"border-primary shadow-md\"\n                    : \"border-border hover:border-primary/50\"\n                }`}\n              >\n                {isSelected && (\n                  <motion.button\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      handleClose();\n                    }}\n                    className=\"bg-background/80 hover:bg-background border-border/50 absolute top-3 right-3 z-20 rounded-full border p-1.5 shadow-sm transition-all duration-200 hover:shadow-md\"\n                    initial={{ scale: 0, rotate: -45 }}\n                    animate={{ scale: 1, rotate: 0 }}\n                    transition={{\n                      delay: 0.15,\n                      duration: 0.4,\n                      ease: [0.25, 0.46, 0.45, 0.94],\n                    }}\n                    whileHover={{ scale: 1.05 }}\n                    whileTap={{ scale: 0.95 }}\n                  >\n                    <X className=\"text-muted-foreground h-3 w-3\" />\n                  </motion.button>\n                )}\n\n                <div className=\"flex items-center space-x-4\">\n                  <div\n                    className={`rounded-lg border p-2.5 shadow-sm transition-all duration-300 sm:p-3 ${\n                      isSelected\n                        ? \"bg-background border-primary/30\"\n                        : \"bg-background border-border/50 hover:border-primary/30 hover:shadow-md\"\n                    }`}\n                  >\n                    {option.icon}\n                  </div>\n                  <div className=\"flex-1 text-left\">\n                    <h3\n                      className={`font-medium transition-colors ${\n                        isSelected\n                          ? \"text-primary\"\n                          : \"text-foreground hover:text-primary\"\n                      }`}\n                    >\n                      {option.name}\n                    </h3>\n                    <p className=\"text-muted-foreground mt-1 text-xs\">\n                      {option.description}\n                    </p>\n                  </div>\n                </div>\n\n                <AnimatePresence>\n                  {isSelected && (\n                    <motion.div\n                      initial={{ opacity: 0, height: 0, y: -10 }}\n                      animate={{ opacity: 1, height: \"auto\", y: 0 }}\n                      exit={{ opacity: 0, height: 0, y: -10 }}\n                      transition={{ duration: 0.3, ease: \"easeOut\" }}\n                      className=\"overflow-hidden\"\n                    >\n                      <div className=\"mt-4\">{renderForm(option.id)}</div>\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </motion.div>\n            );\n          })}\n        </AnimatePresence>\n\n        <AnimatePresence>\n          {!selectedMethod && (\n            <motion.div\n              initial={{ y: 8, opacity: 0 }}\n              animate={{ y: 0, opacity: 1 }}\n              exit={{ y: 8, opacity: 0 }}\n              transition={{\n                delay: 0.4,\n                duration: 0.5,\n                ease: [0.25, 0.46, 0.45, 0.94],\n              }}\n            >\n              <Button disabled className=\"mt-4 w-full\">\n                <span>Select Payment Method</span>\n                <span>→</span>\n              </Button>\n            </motion.div>\n          )}\n          {selectedMethod && (\n            <motion.div\n              initial={{ y: 8, opacity: 0 }}\n              animate={{ y: 0, opacity: 1 }}\n              exit={{ y: 8, opacity: 0 }}\n              transition={{\n                delay: 0.4,\n                duration: 0.5,\n                ease: [0.25, 0.46, 0.45, 0.94],\n              }}\n            >\n              <Button\n                className=\"mt-4 w-full\"\n                onClick={() => {\n                  if (onProceed) onProceed(selectedMethod, formData);\n                }}\n              >\n                <span>Proceed with Payment</span>\n                <ArrowRight className=\"h-4 w-4\" />\n              </Button>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/billingsdk/payment-method-selector.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/payment-method-selector-demo.tsx",
      "content": "import { PaymentMethodSelector } from \"@/components/billingsdk/payment-method-selector\";\n\nexport function PaymentMethodSelectorDemo() {\n  return (\n    <div className=\"bg-background-secondary flex h-full min-h-[500px] w-full flex-col gap-6 overflow-hidden rounded-lg border-2\">\n      <div className=\"flex flex-1 flex-col justify-center text-center\">\n        <PaymentMethodSelector\n          onProceed={(method, data) => {\n            console.log(\"Selected method:\", method);\n            console.log(\"Form data:\", data);\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/payment-method-selector-demo.tsx"
    }
  ],
  "type": "registry:block"
}