Payment Selector - Copy this React, Tailwind Component to your project

import React, { useState } from "react"; import { FaCcPaypal, FaPaypal, FaStripe } from "react-icons/fa"; const plans = [ { name: "Basic", price: 29, description: "Essential tools for new agents", features: [ "5 User Access", "Basic CRM", "Email support", "Mobile app access", ], }, { name: "Pro", price: 79, description: "Advanced features for growing professionals", features: [ "10 User Access", "Advanced CRM with lead scoring", "Priority email & phone support", "Mobile app access", "Market analysis tools", "Social media integration", ], }, { name: "Enterprise", price: 199, description: "Comprehensive solution for top performers", features: [ "15 User Access", "Full-featured CRM with automation", "24/7 dedicated support", "Mobile app access", "Advanced market analysis & forecasting", "Custom branding", "Team collaboration tools", "API access", ], }, ]; export default function TestPayment() { const [isOpen, setIsOpen] = useState(false); // Modal state const [selectedForm, setSelectedForm] = useState("stripe"); // Form state const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("card"); // Payment method state return ( <div className="py-12 bg-gray-50"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="text-center"> <h2 className="text-3xl font-bold text-gray-900 sm:text-4xl"> Choose Your Real Estate Success Plan </h2> <p className="mt-4 text-xl text-gray-600"> Select the plan that best fits your needs and take your real estate business to the next level. </p> </div> <div className="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-3"> {plans.map((plan) => ( <div key={plan.name} className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200" > <div className="p-6"> <h2 className="text-2xl font-bold leading-6 text-gray-900"> {plan.name} </h2> <p className="mt-4 text-sm text-gray-500">{plan.description}</p> <p className="mt-8"> <span className="text-4xl font-bold text-gray-900"> ${plan.price} </span> <span className="text-base font-medium text-gray-500"> /month </span> </p> <a href="#" onClick={() => setIsOpen(true)} className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900" > Get Started </a> </div> <div className="pt-6 pb-8 px-6"> <h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase"> What's included </h3> <ul className="mt-6 space-y-4"> {plan.features.map((feature) => ( <li key={feature} className="flex space-x-3"> <svg className="flex-shrink-0 h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" > <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /> </svg> <span className="text-sm text-gray-500">{feature}</span> </li> ))} </ul> </div> </div> ))} </div> {/* Modal */} {isOpen && ( <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"> <div className="bg-white w-full max-w-lg rounded-lg shadow-lg p-6 relative"> {/* Close Button */} <button onClick={() => setIsOpen(false)} className="absolute top-3 right-3 text-gray-500 hover:text-gray-700" > ✕ </button> {/* Modal Title */} <h2 className="text-2xl font-semibold text-gray-800 mb-4"> Choose Payment Method </h2> {/* Radio Buttons */} <div className="flex justify-around mb-6"> <label className="flex items-center space-x-2 cursor-pointer"> <input type="radio" name="payment" value="stripe" checked={selectedForm === "stripe"} onChange={(e) => setSelectedForm(e.target.value)} className="form-radio text-blue-500" /> <span className="text-gray-700 font-medium"><FaStripe size='50px'/> </span> </label> <label className="flex items-center space-x-2 cursor-pointer"> <input type="radio" name="payment" value="paypal" checked={selectedForm === "paypal"} onChange={(e) => setSelectedForm(e.target.value)} className="form-radio text-blue-500" /> <span className="text-gray-700 font-medium"> <FaCcPaypal/> PayPal</span> </label> </div> {/* Forms */} {selectedForm === "stripe" ? ( <form className="space-y-6"> {/* Payment Method Select */} <div> <label htmlFor="paymentMethod" className="block text-gray-700 font-medium mb-2" > Payment Method </label> <select id="paymentMethod" value={selectedPaymentMethod} onChange={(e) => setSelectedPaymentMethod(e.target.value)} className="w-full border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500" > <option value="card">Credit/Debit Card</option> <option value="netBanking">Net Banking</option> <option value="upi">UPI</option> </select> </div> {/* Card Payment Fields */} {selectedPaymentMethod === "card" && ( <div id="cardFields" className="space-y-4"> <div> <label htmlFor="cardNumber" className="block text-gray-700 font-medium mb-2" > Card Number </label> <input type="text" id="cardNumber" placeholder="1234 5678 9012 3456" className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" /> </div> <div className="flex space-x-4"> <div> <label htmlFor="expiry" className="block text-gray-700 font-medium mb-2" > Expiry Date </label> <input type="text" id="expiry" placeholder="MM/YY" className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" /> </div> <div> <label htmlFor="cvc" className="block text-gray-700 font-medium mb-2" > CVC </label> <input type="text" id="cvc" placeholder="CVC" className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" /> </div> </div> </div> )} {/* Net Banking Fields */} {selectedPaymentMethod === "netBanking" && ( <div id="netBankingFields"> <label htmlFor="bankSelect" className="block text-gray-700 font-medium mb-2" > Select Bank </label> <select id="bankSelect" className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" > <option value="">Select Bank</option> <option value="bank1">Bank 1</option> <option value="bank2">Bank 2</option> </select> </div> )} {/* UPI Payment Fields */} {selectedPaymentMethod === "upi" && ( <div id="upiFields"> <label htmlFor="upiID" className="block text-gray-700 font-medium mb-2" > UPI ID </label> <input type="text" id="upiID" placeholder="yourname@upi" className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" /> </div> )} {/* Submit Button */} <button type="submit" className="mt-6 w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition duration-300" > Pay (Stripe) </button> </form> ) : ( <form className="space-y-6"> {/* Payment Method Select */} <div> <label htmlFor="paymentMethod" className="block text-gray-700 font-medium mb-2" > Paypal Payment Method </label> <select id="paymentMethod" value={selectedPaymentMethod} onChange={(e) => setSelectedPaymentMethod(e.target.value)} className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" > <option value="card">Credit/Debit Card</option> <option value="netBanking">Net Banking</option> <option value="upi">UPI</option> </select> </div> {/* Card Payment Fields */} {selectedPaymentMethod === "card" && ( <div id="cardFields" className="space-y-4"> <div> <label htmlFor="cardNumber" className="block text-gray-700 font-medium mb-2" > Card Number </label> <input type="text" id="cardNumber" placeholder="1234 5678 9012 3456" className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" /> </div> <div className="flex space-x-4"> <div> <label htmlFor="expiry" className="block text-gray-700 font-medium mb-2" > Expiry Date </label> <input type="text" id="expiry" placeholder="MM/YY" className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" /> </div> <div> <label htmlFor="cvc" className="block text-gray-700 font-medium mb-2" > CVC </label> <input type="text" id="cvc" placeholder="CVC" className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" /> </div> </div> </div> )} {/* Net Banking Fields */} {selectedPaymentMethod === "netBanking" && ( <div id="netBankingFields"> <label htmlFor="bankSelect" className="block text-gray-700 font-medium mb-2" > Select Bank </label> <select id="bankSelect" className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" > <option value="">Select Bank</option> <option value="bank1">Bank 1</option> <option value="bank2">Bank 2</option> </select> </div> )} {/* UPI Payment Fields */} {selectedPaymentMethod === "upi" && ( <div id="upiFields"> <label htmlFor="upiID" className="block text-gray-700 font-medium mb-2" > UPI ID </label> <input type="text" id="upiID" placeholder="yourname@upi" className="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500" /> </div> )} {/* Submit Button */} <button type="submit" className="mt-6 w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition duration-300" > Pay Now (Paypal) </button> </form> )} </div> </div> )} </div> </div> ); } here is my code plz updated that