AL lPyment methods fully fucntion onstripe and paypal on sandbox

frontend/src/pages/account/PlansAndBillingPage.tsx

@@ -153,6 +153,7 @@ export default function PlansAndBillingPage() {
     const purchase = params.get('purchase');
     const paypalStatus = params.get('paypal');
     const paypalToken = params.get('token'); // PayPal token from URL
+    const paypalSubscriptionId = params.get('subscription_id'); // PayPal subscription ID (for recurring)
     const planIdParam = params.get('plan_id');
     const packageIdParam = params.get('package_id');
     
@@ -169,7 +170,8 @@ export default function PlansAndBillingPage() {
     
     // Detect which payment flow we're in
     const paymentFlow = 
-      (paypalStatus === 'success' && paypalToken) ? 'PAYPAL_SUCCESS' :
+      (paypalStatus === 'success' && paypalSubscriptionId) ? 'PAYPAL_SUBSCRIPTION_SUCCESS' :
+      (paypalStatus === 'success' && paypalToken) ? 'PAYPAL_ORDER_SUCCESS' :
       paypalStatus === 'cancel' ? 'PAYPAL_CANCEL' :
       (success === 'true' && sessionId) ? 'STRIPE_SUCCESS_WITH_SESSION' :
       success === 'true' ? 'STRIPE_SUCCESS_NO_SESSION' :
@@ -180,11 +182,90 @@ export default function PlansAndBillingPage() {
     
     console.log(`${LOG_PREFIX} ===== DETECTED PAYMENT FLOW =====`);
     console.log(`${LOG_PREFIX} Flow type:`, paymentFlow);
+    console.log(`${LOG_PREFIX} PayPal subscription_id:`, paypalSubscriptionId);
     console.groupEnd();
 
-    // Handle PayPal return - Get order_id from localStorage and capture
+    // Handle PayPal SUBSCRIPTION return (recurring billing)
+    // Call backend to verify subscription status and activate account
+    if (paypalStatus === 'success' && paypalSubscriptionId) {
+      console.group(`${LOG_PREFIX} PayPal Subscription Success Flow`);
+      console.log(`${LOG_PREFIX} Subscription ID:`, paypalSubscriptionId);
+      
+      // Show processing UI
+      setPaymentProcessing({
+        active: true,
+        stage: 'verifying',
+        message: 'Verifying your subscription...'
+      });
+      
+      // Clean URL immediately
+      window.history.replaceState({}, '', window.location.pathname);
+      
+      // Clean up any stored data
+      localStorage.removeItem('paypal_order_id');
+      localStorage.removeItem('paypal_subscription_id');
+      
+      // Call backend to verify and activate subscription
+      import('../../services/billing.api').then(async ({ verifyPayPalSubscription }) => {
+        try {
+          console.log(`${LOG_PREFIX} Calling verifyPayPalSubscription...`);
+          
+          setPaymentProcessing({
+            active: true,
+            stage: 'processing',
+            message: 'Processing your subscription...'
+          });
+          
+          const result = await verifyPayPalSubscription(paypalSubscriptionId);
+          
+          console.log(`${LOG_PREFIX} ✓ Subscription verification result:`, result);
+          
+          setPaymentProcessing({
+            active: true,
+            stage: 'activating',
+            message: 'Activating your account...'
+          });
+          
+          // Refresh user data to get updated account status
+          try {
+            await refreshUser();
+            console.log(`${LOG_PREFIX} ✓ User refreshed after subscription activation`);
+          } catch (refreshErr) {
+            console.error(`${LOG_PREFIX} User refresh failed:`, refreshErr);
+          }
+          
+          // Show success
+          setTimeout(() => {
+            setPaymentProcessing(null);
+            if (result.already_active) {
+              toast?.info?.('Subscription is already active!');
+            } else {
+              toast?.success?.(`Subscription activated! ${result.credits_added ? `${result.credits_added} credits added.` : ''}`);
+            }
+            loadData();
+          }, 500);
+          
+        } catch (err: any) {
+          console.error(`${LOG_PREFIX} ❌ Subscription verification FAILED:`, err);
+          setPaymentProcessing(null);
+          
+          // Show specific error message
+          const errorMsg = err?.message || err?.error || 'Failed to activate subscription';
+          toast?.error?.(errorMsg);
+          
+          // Still load data to show current state
+          loadData();
+        }
+        
+        console.groupEnd();
+      });
+      
+      return;
+    }
+
+    // Handle PayPal ORDER return (one-time credit purchase) - Get order_id from localStorage and capture
     if (paypalStatus === 'success' && paypalToken) {
-      console.group(`${LOG_PREFIX} PayPal Success Flow`);
+      console.group(`${LOG_PREFIX} PayPal Order Success Flow`);
       
       // FIX: Retrieve order_id from localStorage (stored before redirect)
       const storedOrderId = localStorage.getItem('paypal_order_id');

frontend/src/services/billing.api.ts

@@ -1373,6 +1373,27 @@ export async function createPayPalSubscription(planId: string, options?: {
   });
 }
 
+/**
+ * Verify and activate PayPal subscription
+ * Called after user returns from PayPal with subscription_id
+ * This activates the account if subscription is approved on PayPal
+ */
+export async function verifyPayPalSubscription(subscriptionId: string): Promise<{
+  status: string;
+  subscription_id: string;
+  plan_name: string;
+  credits_added?: number;
+  already_active?: boolean;
+  message: string;
+}> {
+  return fetchAPI('/v1/billing/paypal/verify-subscription/', {
+    method: 'POST',
+    body: JSON.stringify({
+      subscription_id: subscriptionId,
+    }),
+  });
+}
+
 // ============================================================================
 // PAYMENT GATEWAY HELPERS
 // ============================================================================
@@ -1445,10 +1466,11 @@ export async function subscribeToPlan(
       return { redirect_url: redirectUrl.toString() };
     }
     case 'paypal': {
-      const order = await createPayPalSubscriptionOrder(planId, options);
-      // FIX: Store order_id in localStorage before redirect
-      localStorage.setItem('paypal_order_id', order.order_id);
-      return { redirect_url: order.approval_url };
+      // Use PayPal Subscriptions API for recurring billing
+      const subscription = await createPayPalSubscription(planId, options);
+      // Store subscription_id for verification after return
+      localStorage.setItem('paypal_subscription_id', subscription.subscription_id);
+      return { redirect_url: subscription.approval_url };
     }
     case 'manual':
       throw new Error('Manual payment requires different flow - use submitManualPayment()');