feat: Connect Payments page to real WooCommerce API

✅ Phase 1 Frontend Complete!

🎨 Payments.tsx - Complete Rewrite:
- Replaced mock data with real API calls
- useQuery to fetch gateways from /payments/gateways
- useMutation for toggle and save operations
- Optimistic updates for instant UI feedback
- Refetch on window focus (5 min stale time)
- Manual refresh button
- Loading states with spinner
- Empty states with helpful messages
- Error handling with toast notifications

🏗️ Gateway Categorization:
- Manual methods (Bank Transfer, COD, Check)
- Payment providers (Stripe, PayPal, etc.)
- Other WC-compliant gateways
- Auto-discovers all installed gateways

🎯 Features:
- Enable/disable toggle with optimistic updates
- Manage button opens settings modal
- GenericGatewayForm for configuration
- Requirements checking (SSL, extensions)
- Link to WC settings for complex cases
- Responsive design
- Keyboard accessible

📋 Checklist Progress:
- [x] PaymentGatewaysProvider.php
- [x] PaymentsController.php
- [x] GenericGatewayForm.tsx
- [x] Update Payments.tsx with real API
- [ ] Test with real WooCommerce (next)

🎉 Backend + Frontend integration complete!
Ready for testing with actual WooCommerce installation.

admin-spa/src/components/settings/GenericGatewayForm.tsx

@@ -37,7 +37,11 @@ interface GenericGatewayFormProps {
   gateway: {
     id: string;
     title: string;
-    settings: GatewaySettings;
+    settings: {
+      basic: Record<string, GatewayField>;
+      api: Record<string, GatewayField>;
+      advanced: Record<string, GatewayField>;
+    };
     wc_settings_url: string;
   };
   onSave: (settings: Record<string, unknown>) => Promise<void>;

admin-spa/src/routes/Settings/Payments.tsx

@@ -1,79 +1,163 @@
 import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/lib/api';
 import { SettingsLayout } from './components/SettingsLayout';
 import { SettingsCard } from './components/SettingsCard';
 import { ToggleField } from './components/ToggleField';
+import { GenericGatewayForm } from '@/components/settings/GenericGatewayForm';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { CreditCard, DollarSign, Banknote, Settings } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { CreditCard, Banknote, Settings, RefreshCw, ExternalLink, Loader2, AlertTriangle } from 'lucide-react';
 import { toast } from 'sonner';
 
-interface PaymentProvider {
+interface GatewayField {
   id: string;
-  name: string;
+  type: string;
+  title: string;
+  description: string;
+  default: string | boolean;
+  placeholder?: string;
+  required: boolean;
+  options?: Record<string, string>;
+  custom_attributes?: Record<string, string>;
+}
+
+interface PaymentGateway {
+  id: string;
+  title: string;
   description: string;
-  icon: React.ReactNode;
   enabled: boolean;
-  connected: boolean;
-  fees?: string;
-  testMode?: boolean;
+  type: 'manual' | 'provider' | 'other';
+  icon: string;
+  method_title: string;
+  method_description: string;
+  supports: string[];
+  requirements: {
+    met: boolean;
+    missing: string[];
+  };
+  settings: {
+    basic: Record<string, GatewayField>;
+    api: Record<string, GatewayField>;
+    advanced: Record<string, GatewayField>;
+  };
+  has_fields: boolean;
+  webhook_url: string | null;
+  has_custom_ui: boolean;
+  wc_settings_url: string;
 }
 
 export default function PaymentsPage() {
-  const [testMode, setTestMode] = useState(false);
-  const [providers] = useState<PaymentProvider[]>([
-    {
-      id: 'stripe',
-      name: 'Stripe Payments',
-      description: 'Accept Visa, Mastercard, Amex, and more',
-      icon: <CreditCard className="h-6 w-6" />,
-      enabled: false,
-      connected: false,
-      fees: '2.9% + $0.30 per transaction',
-    },
-    {
-      id: 'paypal',
-      name: 'PayPal',
-      description: 'Accept PayPal payments worldwide',
-      icon: <DollarSign className="h-6 w-6" />,
-      enabled: true,
-      connected: true,
-      fees: '3.49% + fixed fee per transaction',
-    },
-  ]);
+  const queryClient = useQueryClient();
+  const [selectedGateway, setSelectedGateway] = useState<PaymentGateway | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const [manualMethods, setManualMethods] = useState([
-    { id: 'bacs', name: 'Bank Transfer (BACS)', enabled: true },
-    { id: 'cod', name: 'Cash on Delivery', enabled: true },
-    { id: 'cheque', name: 'Check Payments', enabled: false },
-  ]);
+  // Fetch all payment gateways
+  const { data: gateways = [], isLoading, refetch } = useQuery({
+    queryKey: ['payment-gateways'],
+    queryFn: () => api.get('/payments/gateways'),
+    refetchOnWindowFocus: true,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
 
-  const handleSave = async () => {
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    toast.success('Payment settings have been updated successfully.');
-  };
+  // Toggle gateway mutation
+  const toggleMutation = useMutation({
+    mutationFn: ({ id, enabled }: { id: string; enabled: boolean }) =>
+      api.post(`/payments/gateways/${id}/toggle`, { enabled }),
+    onMutate: async ({ id, enabled }) => {
+      // Optimistic update
+      await queryClient.cancelQueries({ queryKey: ['payment-gateways'] });
+      const previous = queryClient.getQueryData(['payment-gateways']);
       
-
-  const toggleManualMethod = (id: string) => {
-    setManualMethods((prev) =>
-      prev.map((m) => (m.id === id ? { ...m, enabled: !m.enabled } : m))
+      queryClient.setQueryData(['payment-gateways'], (old: PaymentGateway[]) =>
+        old.map((g) => (g.id === id ? { ...g, enabled } : g))
       );
+      
+      return { previous };
+    },
+    onError: (_err, _variables, context) => {
+      queryClient.setQueryData(['payment-gateways'], context?.previous);
+      toast.error('Failed to update gateway');
+    },
+    onSuccess: () => {
+      toast.success('Gateway updated successfully');
+    },
+  });
+
+  // Save gateway settings mutation
+  const saveMutation = useMutation({
+    mutationFn: ({ id, settings }: { id: string; settings: Record<string, unknown> }) =>
+      api.post(`/payments/gateways/${id}`, settings),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['payment-gateways'] });
+      toast.success('Settings saved successfully');
+      setIsModalOpen(false);
+      setSelectedGateway(null);
+    },
+    onError: () => {
+      toast.error('Failed to save settings');
+    },
+  });
+
+  const handleToggle = (id: string, enabled: boolean) => {
+    toggleMutation.mutate({ id, enabled });
   };
 
+  const handleManageGateway = (gateway: PaymentGateway) => {
+    setSelectedGateway(gateway);
+    setIsModalOpen(true);
+  };
+
+  const handleSaveGateway = async (settings: Record<string, unknown>) => {
+    if (!selectedGateway) return;
+    await saveMutation.mutateAsync({ id: selectedGateway.id, settings });
+  };
+
+  // Categorize gateways
+  const manualGateways = gateways.filter((g: PaymentGateway) => g.type === 'manual');
+  const providerGateways = gateways.filter((g: PaymentGateway) => g.type === 'provider');
+  const otherGateways = gateways.filter((g: PaymentGateway) => g.type === 'other');
+
+  if (isLoading) {
+    return (
+      <SettingsLayout title="Payments" description="Manage how you get paid">
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      </SettingsLayout>
+    );
+  }
+
   return (
-    <SettingsLayout
-      title="Payments"
-      description="Manage how you get paid"
-      onSave={handleSave}
+    <>
+      <SettingsLayout title="Payments" description="Manage how you get paid">
+        {/* Refresh button */}
+        <div className="flex justify-end mb-4">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => refetch()}
+            disabled={isLoading}
           >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh
+          </Button>
+        </div>
+
         {/* Manual Payment Methods - First priority */}
         <SettingsCard
           title="Manual Payment Methods"
           description="Accept payments outside your online store"
         >
+          {manualGateways.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No manual payment methods available</p>
+          ) : (
             <div className="space-y-4">
-          {manualMethods.map((method) => (
+              {manualGateways.map((gateway: PaymentGateway) => (
                 <div
-              key={method.id}
+                  key={gateway.id}
                   className="border rounded-lg p-4"
                 >
                   <div className="flex items-center justify-between">
@@ -82,31 +166,36 @@ export default function PaymentsPage() {
                         <Banknote className="h-5 w-5 text-muted-foreground" />
                       </div>
                       <div>
-                    <h3 className="font-medium">{method.name}</h3>
-                    {method.enabled && (
+                        <h3 className="font-medium">{gateway.title}</h3>
+                        {gateway.description && (
                           <p className="text-sm text-muted-foreground mt-1">
-                        Customers can choose this at checkout
+                            {gateway.description}
                           </p>
                         )}
                       </div>
                     </div>
                     <div className="flex items-center gap-2">
-                  {method.enabled && (
-                    <Button variant="ghost" size="sm">
+                      {gateway.enabled && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleManageGateway(gateway)}
+                        >
                           <Settings className="h-4 w-4" />
                         </Button>
                       )}
                       <ToggleField
-                    id={method.id}
+                        id={gateway.id}
                         label=""
-                    checked={method.enabled}
-                    onCheckedChange={() => toggleManualMethod(method.id)}
+                        checked={gateway.enabled}
+                        onCheckedChange={(checked) => handleToggle(gateway.id, checked)}
                       />
                     </div>
                   </div>
                 </div>
               ))}
             </div>
+          )}
         </SettingsCard>
 
         {/* Payment Providers - Second priority */}
@@ -114,124 +203,150 @@ export default function PaymentsPage() {
           title="Payment Providers"
           description="Accept credit cards and digital wallets"
         >
+          {providerGateways.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              No payment providers installed.{' '}
+              <a
+                href="https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline inline-flex items-center gap-1"
+              >
+                Browse payment gateways
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </p>
+          ) : (
             <div className="space-y-4">
-          {providers.map((provider) => (
+              {providerGateways.map((gateway: PaymentGateway) => (
                 <div
-              key={provider.id}
+                  key={gateway.id}
                   className="border rounded-lg p-4 hover:border-primary/50 transition-colors"
                 >
                   <div className="flex items-start justify-between">
                     <div className="flex items-start gap-4 flex-1">
                       <div className="p-2 bg-primary/10 rounded-lg text-primary">
-                    {provider.icon}
+                        <CreditCard className="h-6 w-6" />
                       </div>
                       <div className="flex-1">
                         <div className="flex items-center gap-2 mb-1">
-                      <h3 className="font-semibold">{provider.name}</h3>
-                      {provider.connected ? (
+                          <h3 className="font-semibold">{gateway.title}</h3>
+                          {gateway.enabled ? (
                             <Badge variant="default" className="bg-green-500">
-                          ● Connected
+                              ● Enabled
                             </Badge>
                           ) : (
-                        <Badge variant="secondary">○ Not connected</Badge>
+                            <Badge variant="secondary">○ Disabled</Badge>
                           )}
                         </div>
                         <p className="text-sm text-muted-foreground mb-2">
-                      {provider.description}
-                    </p>
-                    {provider.fees && (
-                      <p className="text-xs text-muted-foreground">
-                        {provider.fees}
+                          {gateway.description}
                         </p>
+                        {!gateway.requirements.met && (
+                          <Alert variant="destructive" className="mt-2">
+                            <AlertTriangle className="h-4 w-4" />
+                            <AlertDescription>
+                              Requirements not met: {gateway.requirements.missing.join(', ')}
+                            </AlertDescription>
+                          </Alert>
                         )}
                       </div>
                     </div>
                     <div className="flex items-center gap-2">
-                  {provider.connected ? (
-                    <>
-                      <Button variant="outline" size="sm">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleManageGateway(gateway)}
+                      >
                         <Settings className="h-4 w-4 mr-2" />
                         Manage
                       </Button>
-                      <Button variant="ghost" size="sm">
-                        Disconnect
-                      </Button>
-                    </>
-                  ) : (
-                    <Button size="sm">Set up {provider.name}</Button>
-                  )}
+                      <ToggleField
+                        id={gateway.id}
+                        label=""
+                        checked={gateway.enabled}
+                        onCheckedChange={(checked) => handleToggle(gateway.id, checked)}
+                        disabled={!gateway.requirements.met}
+                      />
                     </div>
                   </div>
                 </div>
               ))}
-
-          <Button variant="outline" className="w-full">
-            + Add payment provider
-          </Button>
-        </div>
-      </SettingsCard>
-
-      {/* Payment Settings - Third priority (test mode, capture, etc) */}
-      <SettingsCard
-        title="Payment Settings"
-        description="General payment options"
-      >
-        {/* Test Mode Banner */}
-        {testMode && (
-          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-4">
-            <div className="flex items-center gap-2">
-              <span className="text-yellow-600 dark:text-yellow-400 font-semibold">
-                ⚠️ Test Mode Active
-              </span>
-              <span className="text-sm text-yellow-700 dark:text-yellow-300">
-                No real charges will be processed
-              </span>
-            </div>
             </div>
           )}
-
-        <ToggleField
-          id="testMode"
-          label="Test mode"
-          description="Process test transactions without real charges"
-          checked={testMode}
-          onCheckedChange={setTestMode}
-        />
-
-        <div className="pt-4 border-t">
-          <div className="space-y-2">
-            <label className="text-sm font-medium">Payment capture</label>
-            <p className="text-sm text-muted-foreground">
-              Choose when to capture payment from customers
-            </p>
-            <div className="space-y-2 mt-2">
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input type="radio" name="capture" value="automatic" defaultChecked />
-                <span className="text-sm">
-                  <strong>Authorize and capture</strong> - Charge immediately when order is placed
-                </span>
-              </label>
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input type="radio" name="capture" value="manual" />
-                <span className="text-sm">
-                  <strong>Authorize only</strong> - Manually capture payment later
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
         </SettingsCard>
 
-      {/* Help Card */}
-      <div className="bg-muted/50 border rounded-lg p-4">
-        <p className="text-sm font-medium mb-2">💡 Need help setting up payments?</p>
-        <p className="text-sm text-muted-foreground">
-          Our setup wizard can help you connect Stripe or PayPal in minutes.
-        </p>
-        <Button variant="link" className="px-0 mt-2">
-          Start setup wizard →
-        </Button>
+        {/* Other Gateways */}
+        {otherGateways.length > 0 && (
+          <SettingsCard
+            title="Other Payment Methods"
+            description="Additional payment gateways"
+          >
+            <div className="space-y-4">
+              {otherGateways.map((gateway: PaymentGateway) => (
+                <div
+                  key={gateway.id}
+                  className="border rounded-lg p-4"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <div className="p-2 bg-muted rounded-lg">
+                        <CreditCard className="h-5 w-5 text-muted-foreground" />
                       </div>
+                      <div>
+                        <h3 className="font-medium">{gateway.title}</h3>
+                        {gateway.description && (
+                          <p className="text-sm text-muted-foreground mt-1">
+                            {gateway.description}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        asChild
+                      >
+                        <a
+                          href={gateway.wc_settings_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <ExternalLink className="h-4 w-4 mr-2" />
+                          Configure in WooCommerce
+                        </a>
+                      </Button>
+                      <ToggleField
+                        id={gateway.id}
+                        label=""
+                        checked={gateway.enabled}
+                        onCheckedChange={(checked) => handleToggle(gateway.id, checked)}
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </SettingsCard>
+        )}
       </SettingsLayout>
+
+      {/* Gateway Settings Modal */}
+      {selectedGateway && (
+        <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+          <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle>{selectedGateway.title} Settings</DialogTitle>
+            </DialogHeader>
+            <GenericGatewayForm
+              gateway={selectedGateway}
+              onSave={handleSaveGateway}
+              onCancel={() => setIsModalOpen(false)}
+            />
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
   );
 }