1. New Components- src/components/PaymentMethodCard.js - Displays individual payment method- src/components/AddPaymentMethodDialog.js - Stripe Elements dialog for adding cards- src/components/PaymentMethodsSection.js - Main payment methods UI- src/components/PasswordConfirmDialog.js - Admin password re-entry dialog- src/components/admin/AdminPaymentMethodsPanel.js - Admin panel for user payment methods2. Profile Integration (src/pages/Profile.js)- Replaced placeholder Payment Method section with PaymentMethodsSection3. Admin Integration (src/pages/admin/AdminUserView.js)- Added AdminPaymentMethodsPanel to user detail view

src/pages/Profile.js

@@ -11,6 +11,7 @@ import Navbar from '../components/Navbar';
 import { User, Lock, Heart, Users, Mail, BookUser, Camera, Upload, Trash2, Eye, CreditCard, Handshake, ArrowLeft } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '../components/ui/avatar';
 import ChangePasswordDialog from '../components/ChangePasswordDialog';
+import PaymentMethodsSection from '../components/PaymentMethodsSection';
 import { useNavigate } from 'react-router-dom';
 
 const Profile = () => {
@@ -265,22 +266,10 @@ const Profile = () => {
           </p>
         </div>
 
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</p>
-            <div className="flex items-center gap-2">
-              <CreditCard className="h-6 w-6 text-brand-purple" />
-            </div>
-          </div>
-          <Button
-            type="button"
-            variant="outline"
-            className="border-2 border-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--lavender-300)] rounded-lg px-4 py-2"
-          >
-            Manage
-          </Button>
-        </div>
       </Card>
+
+      {/* Payment Methods Section */}
+      <PaymentMethodsSection />
     </div>
   );
 

src/pages/admin/AdminUserView.js

@@ -12,6 +12,7 @@ import ConfirmationDialog from '../../components/ConfirmationDialog';
 import ChangeRoleDialog from '../../components/ChangeRoleDialog';
 import StatusBadge from '../../components/StatusBadge';
 import TransactionHistory from '../../components/TransactionHistory';
+import AdminPaymentMethodsPanel from '../../components/admin/AdminPaymentMethodsPanel';
 
 const AdminUserView = () => {
   const { userId } = useParams();
@@ -417,6 +418,14 @@ const AdminUserView = () => {
         </div>
       </Card>
 
+      {/* Payment Methods Panel */}
+      <div className="mb-8">
+        <AdminPaymentMethodsPanel
+          userId={userId}
+          userName={`${user.first_name} ${user.last_name}`}
+        />
+      </div>
+
       {/* Additional Details */}
       <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)]">
         <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>