4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T48db,"use client"; import type React from "react"; import { useState } from "react"; import { motion, AnimatePresence } from "motion/react"; import { X, CreditCard, QrCode, Wallet, Landmark, ArrowRight, } from "lucide-react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Badge } from "@/components/ui/badge"; type PaymentMethod = "cards" | "digital-wallets" | "upi" | "bnpl-services"; interface PaymentOption { id: PaymentMethod; name: string; description: string; icon: React.ReactNode; examples: string[]; details: string; features: string[]; } interface FormData { cardNumber?: string; expiryDate?: string; cvv?: string; cardholderName?: string; email?: string; phone?: string; upiId?: string; income?: string; } const paymentOptions: PaymentOption[] = [ { id: "cards", name: "Cards", description: "Visa, Mastercard, etc.", icon: , examples: ["Visa", "Mastercard", "American Express", "Discover"], details: "Secure card payments with fraud protection", features: [ "Instant processing", "Worldwide acceptance", "Cashback rewards", "Purchase protection", ], }, { id: "digital-wallets", name: "Digital Wallets", description: "Apple Pay, Google Pay, etc.", icon: , examples: ["Apple Pay", "Google Pay", "Cash App", "Venmo"], details: "Quick and secure mobile payments", features: [ "Touch/Face ID security", "No card details shared", "Fast checkout", "Loyalty integration", ], }, { id: "upi", name: "UPI", description: "Unified Payments Interface", icon: , examples: ["PhonePe", "Google Pay", "Paytm", "BHIM"], details: "Real-time bank-to-bank transfers", features: [ "24/7 availability", "No transaction fees", "QR code payments", "Bank account linking", ], }, { id: "bnpl-services", name: "Buy Now, Pay Later", description: "Klarna, Affirm, Afterpay", icon: , examples: ["Klarna", "Affirm", "Afterpay", "Sezzle"], details: "Buy now, pay later in installments", features: [ "Split payments", "No interest options", "Flexible terms", "Credit building", ], }, ]; export interface PaymentMethodSelectorProps { className?: string; onProceed?: (method: PaymentMethod, data: FormData) => void; } export function PaymentMethodSelector({ onProceed, }: PaymentMethodSelectorProps) { const [selectedMethod, setSelectedMethod] = useState( null, ); const [formData, setFormData] = useState({}); const handleMethodSelect = (method: PaymentMethod) => { setSelectedMethod(selectedMethod === method ? null : method); setFormData({}); }; const handleClose = () => { setSelectedMethod(null); setFormData({}); }; const handleInputChange = (field: keyof FormData, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })); }; const renderForm = (method: PaymentMethod) => { switch (method) { case "cards": return ( e.stopPropagation()} >

Card Number ) => handleInputChange("cardNumber", e.target.value) } className="border-border/50 focus:border-primary/50 mt-1.5 transition-colors" />

Expiry Date ) => handleInputChange("expiryDate", e.target.value) } className="border-border/50 focus:border-primary/50 mt-1.5 transition-colors" />

CVV ) => handleInputChange("cvv", e.target.value) } className="border-border/50 focus:border-primary/50 mt-1.5 transition-colors" />

Cardholder Name ) => handleInputChange("cardholderName", e.target.value) } className="border-border/50 focus:border-primary/50 mt-1.5 transition-colors" />

); case "digital-wallets": return ( e.stopPropagation()} >

Email Address ) => handleInputChange("email", e.target.value) } className="border-border/50 focus:border-primary/50 mt-1.5 transition-colors" />

Phone Number ) => handleInputChange("phone", e.target.value) } className="border-border/50 focus:border-primary/50 mt-1.5 transition-colors" />

You'll be redirected to your selected wallet app to complete the payment securely.

); case "upi": return ( e.stopPropagation()} >

UPI ID ) => handleInputChange("upiId", e.target.value) } className="border-border/50 focus:border-primary/50 mt-1.5 transition-colors" />

Enter your UPI ID to receive a payment request. Complete the payment in your UPI app.

); case "bnpl-services": return ( e.stopPropagation()} >

Email Address ) => handleInputChange("email", e.target.value) } className="border-border/50 focus:border-primary/50 mt-1.5 transition-colors" />

Phone Number ) => handleInputChange("phone", e.target.value) } className="border-border/50 focus:border-primary/50 mt-1.5 transition-colors" />

Annual Income Optional ) => handleInputChange("income", e.target.value) } className="border-border/50 focus:border-primary/50 mt-1.5 transition-colors" />

You'll be redirected to complete a quick eligibility check and set up your payment plan.

); default: return null; } }; return ( Payment Methods

Choose your preferred payment method to continue

{paymentOptions.map((option) => { const isSelected = selectedMethod === option.id; return ( handleMethodSelect(option.id)} className={`cursor-pointer rounded-lg border p-4 shadow-sm transition-all duration-300 hover:shadow-md ${ isSelected ? "border-primary shadow-md" : "border-border hover:border-primary/50" }`} > {isSelected && ( { e.stopPropagation(); handleClose(); }} 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" initial={{ scale: 0, rotate: -45 }} animate={{ scale: 1, rotate: 0 }} transition={{ delay: 0.15, duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94], }} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > )}

{option.icon}

{option.name}

{option.description}

{isSelected && (

{renderForm(option.id)}

)} ); })} {!selectedMethod && ( )} {selectedMethod && ( )} ); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["button","dialog","tooltip","card","input","label","utils"]}]]}],["$","$L50",null,{"sourceUrl":"https://billingsdk.com/r/payment-method-selector.json","proxyUrl":"https://shadcnregistry.com/r/billingsdk/payment-method-selector","itemId":"@billingsdk/payment-method-selector"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/billingsdk/payment-method-selector.tsx","content":"$52","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

\n {\n console.log(\"Selected method:\", method);\n console.log(\"Form data:\", data);\n }}\n />\n

\n );\n}\n","type":"registry:component","target":"components/payment-method-selector-demo.tsx"}]}]]}],"$L53"]}]

Payment Method Selector

Installation

Files

components

Styles