feat: Enhance payment processing with loading states and error handling

LXMachado · LXMachado · commit 8fc3fe162b0f · 2025-10-19T11:04:54.000+10:00
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { AuthProvider } from './hooks/useAuth'
 import Login from './components/Login'
diff --git a/frontend/src/components/CheckoutPage.tsx b/frontend/src/components/CheckoutPage.tsx
@@ -3,6 +3,7 @@ import { Elements } from '@stripe/react-stripe-js'
 import stripePromise from '../services/stripe'
 import PaymentForm from './PaymentForm'
 import { usePayment, PaymentIntent } from '../hooks/usePayment'
+import api from '../services/api'
 
 interface CartItem {
   id: number
@@ -33,6 +34,7 @@ const CheckoutPage: React.FC = () => {
   const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null)
   const [currentStep, setCurrentStep] = useState<'cart' | 'payment' | 'processing' | 'success' | 'error'>('cart')
   const [error, setError] = useState<string>('')
+  const [loadingCart, setLoadingCart] = useState(true)
 
   const { loading, initiatePayment, error: paymentError, clearError } = usePayment()
 
@@ -42,19 +44,21 @@ const CheckoutPage: React.FC = () => {
   }, [])
 
   const loadCart = async () => {
+    setLoadingCart(true)
     try {
-      const response = await fetch('/api/cart')
-      const data = await response.json()
+      const response = await api.get('/cart')
 
-      if (data.success) {
-        setCart(data.data)
+      if (response.data.success) {
+        setCart(response.data.data)
       } else {
         setError('Failed to load cart')
         setCurrentStep('error')
       }
     } catch (err: any) {
       setError('Failed to load cart')
       setCurrentStep('error')
+    } finally {
+      setLoadingCart(false)
     }
   }
 
@@ -74,7 +78,7 @@ const CheckoutPage: React.FC = () => {
     }
   }
 
-  const handlePaymentSuccess = (paymentIntentId: string) => {
+  const handlePaymentSuccess = (_paymentIntentId: string) => {
     setCurrentStep('processing')
     // The webhook will handle the actual order creation
     // We'll redirect to success page after a brief delay
@@ -182,6 +186,29 @@ const CheckoutPage: React.FC = () => {
     )
   }
 
+  if (loadingCart) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-md w-full space-y-8">
+          <div className="text-center">
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100">
+              <svg className="animate-spin h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+              </svg>
+            </div>
+            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+              Loading Cart...
+            </h2>
+            <p className="mt-2 text-sm text-gray-600">
+              Please wait while we load your cart items.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   if (!cart || cart.items.length === 0) {
     return (
       <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
diff --git a/frontend/src/components/PaymentForm.tsx b/frontend/src/components/PaymentForm.tsx
@@ -22,7 +22,7 @@ const PaymentForm: React.FC<PaymentFormProps> = ({
 }) => {
   const stripe = useStripe()
   const elements = useElements()
-  const { loading, confirmPayment, error, clearError } = usePayment()
+  const { loading, error, clearError } = usePayment()
 
   const [paymentElementReady, setPaymentElementReady] = useState(false)
   const [processing, setProcessing] = useState(false)
@@ -57,15 +57,30 @@ const PaymentForm: React.FC<PaymentFormProps> = ({
     clearError()
 
     try {
-      // First confirm payment with backend
-      const paymentConfirmed = await confirmPayment(paymentIntentId)
-
-      if (!paymentConfirmed) {
-        throw new Error('Payment confirmation failed')
+      // First, confirm the payment with Stripe client-side
+      const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
+        elements,
+        clientSecret,
+        confirmParams: {
+          return_url: `${window.location.origin}/checkout/success`,
+        },
+        redirect: 'if_required',
+      })
+
+      if (stripeError) {
+        throw new Error(stripeError.message || 'Payment confirmation failed')
       }
 
-      // If backend confirmation succeeds, the webhook will handle the rest
-      onPaymentSuccess(paymentIntentId)
+      if (paymentIntent?.status === 'succeeded') {
+        // Payment succeeded immediately (no 3DS required)
+        onPaymentSuccess(paymentIntentId)
+      } else if (paymentIntent?.status === 'processing') {
+        // Payment is processing (3DS completed, waiting for confirmation)
+        onPaymentSuccess(paymentIntentId)
+      } else {
+        // Payment requires further action or failed
+        throw new Error('Payment was not completed successfully')
+      }
 
     } catch (err: any) {
       const errorMessage = err.message || 'Payment failed'
@@ -98,7 +113,7 @@ const PaymentForm: React.FC<PaymentFormProps> = ({
               mode: 'billing',
               allowedCountries: ['US', 'CA', 'AU', 'GB'],
             }}
-            onChange={(event) => {
+            onChange={() => {
               // AddressElement doesn't provide error in the same way as PaymentElement
               // Errors are handled through form validation
             }}
diff --git a/frontend/src/components/PaymentStatus.tsx b/frontend/src/components/PaymentStatus.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { usePayment } from '../hooks/usePayment'
 
 interface PaymentStatusProps {
@@ -21,10 +21,18 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
   const [error, setError] = useState<string>('')
 
   const { checkPaymentStatus } = usePayment()
+  const timeoutRef = useRef<number | null>(null)
+  const pollingAttemptsRef = useRef(0)
 
   useEffect(() => {
+    // Reset polling when paymentIntentId changes
+    setPollingAttempts(0)
+    setPaymentStatus('pending')
+    setError('')
+    pollingAttemptsRef.current = 0
+
     const pollPaymentStatus = async () => {
-      if (pollingAttempts >= maxPollingAttempts) {
+      if (pollingAttemptsRef.current >= maxPollingAttempts) {
         setError('Payment confirmation timeout. Please contact support.')
         onPaymentError('Payment confirmation timeout')
         return
@@ -43,9 +51,8 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
 
             case 'processing':
               // Continue polling
-              setTimeout(() => {
-                setPollingAttempts(prev => prev + 1)
-              }, pollingInterval)
+              pollingAttemptsRef.current += 1
+              timeoutRef.current = setTimeout(pollPaymentStatus, pollingInterval)
               break
 
             case 'requires_payment_method':
@@ -69,33 +76,40 @@ const PaymentStatus: React.FC<PaymentStatusProps> = ({
                 onPaymentError(status.last_payment_error.message || 'Payment failed')
               } else {
                 // Continue polling for unknown status
-                setTimeout(() => {
-                  setPollingAttempts(prev => prev + 1)
-                }, pollingInterval)
+                pollingAttemptsRef.current += 1
+                timeoutRef.current = setTimeout(pollPaymentStatus, pollingInterval)
               }
           }
         } else {
           // Continue polling if no status received
-          setTimeout(() => {
-            setPollingAttempts(prev => prev + 1)
-          }, pollingInterval)
+          pollingAttemptsRef.current += 1
+          timeoutRef.current = setTimeout(pollPaymentStatus, pollingInterval)
         }
       } catch (err: any) {
         setError('Failed to check payment status')
         onPaymentError('Failed to check payment status')
 
         // Continue polling on error
-        setTimeout(() => {
-          setPollingAttempts(prev => prev + 1)
-        }, pollingInterval)
+        pollingAttemptsRef.current += 1
+        timeoutRef.current = setTimeout(pollPaymentStatus, pollingInterval)
       }
     }
 
     // Start polling after initial delay
-    const timeoutId = setTimeout(pollPaymentStatus, 1000)
+    timeoutRef.current = setTimeout(pollPaymentStatus, 1000)
 
-    return () => clearTimeout(timeoutId)
-  }, [paymentIntentId, pollingAttempts, maxPollingAttempts, pollingInterval, checkPaymentStatus, onPaymentSuccess, onPaymentError])
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+        timeoutRef.current = null
+      }
+    }
+  }, [paymentIntentId, maxPollingAttempts, pollingInterval, checkPaymentStatus, onPaymentSuccess, onPaymentError])
+
+  // Update polling attempts display
+  useEffect(() => {
+    setPollingAttempts(pollingAttemptsRef.current)
+  }, [pollingAttemptsRef.current])
 
   const getStatusMessage = () => {
     switch (paymentStatus) {
diff --git a/frontend/src/components/PaymentSuccess.tsx b/frontend/src/components/PaymentSuccess.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useSearchParams, useNavigate } from 'react-router-dom'
+import api from '../services/api'
 
 interface OrderData {
   id: number
@@ -47,39 +48,61 @@ const PaymentSuccess: React.FC = () => {
 
     const poll = async () => {
       try {
-        // This would typically call an API endpoint to get order by payment intent
-        // For now, we'll simulate the polling
-        await new Promise(resolve => setTimeout(resolve, 1000))
+        // Try to find order by payment intent ID
+        // This would typically call an API endpoint like /api/orders/by-payment-intent/{paymentIntentId}
+        // For now, we'll poll the payment status and assume order creation
+        const response = await api.get(`/checkout/payment-status/${paymentIntentId}`)
 
-        // Simulate order creation after a few attempts
-        if (attempts >= 2) {
-          // Mock order data
-          setOrderData({
-            id: 1,
-            order_number: 'ORD-20250119-ABC12345',
-            total_amount: 299.99,
-            status: 'paid',
-            created_at: new Date().toISOString(),
-            items: [
-              {
-                id: 1,
-                quantity: 1,
-                price_at_time: 299.99,
-                product: {
-                  name: 'Solar Panel Pro 300W',
-                  slug: 'solar-panel-pro-300w'
+        if (response.data.success) {
+          const paymentStatus = response.data.data
+
+          if (paymentStatus.status === 'succeeded') {
+            // Payment succeeded, try to get order details
+            // Since we don't have a specific order lookup endpoint yet,
+            // we'll show a generic success message
+            setOrderData({
+              id: 1,
+              order_number: 'ORD-PENDING',
+              total_amount: paymentStatus.amount / 100, // Convert from cents
+              status: 'paid',
+              created_at: new Date().toISOString(),
+              items: [
+                {
+                  id: 1,
+                  quantity: 1,
+                  price_at_time: paymentStatus.amount / 100,
+                  product: {
+                    name: 'Order Processed',
+                    slug: 'order-processed'
+                  }
                 }
-              }
-            ]
-          })
-          setLoading(false)
+              ]
+            })
+            setLoading(false)
+          } else if (attempts >= maxAttempts) {
+            setError('Order confirmation timeout. Please check your email for order details.')
+            setLoading(false)
+          } else {
+            attempts++
+            setTimeout(poll, 2000) // Poll every 2 seconds
+          }
         } else {
           attempts++
-          setTimeout(poll, 1000)
+          if (attempts >= maxAttempts) {
+            setError('Failed to confirm payment status')
+            setLoading(false)
+          } else {
+            setTimeout(poll, 2000)
+          }
         }
       } catch (err: any) {
-        setError('Failed to retrieve order information')
-        setLoading(false)
+        attempts++
+        if (attempts >= maxAttempts) {
+          setError('Failed to retrieve order information')
+          setLoading(false)
+        } else {
+          setTimeout(poll, 2000)
+        }
       }
     }
 
@@ -88,22 +111,22 @@ const PaymentSuccess: React.FC = () => {
 
   const loadOrderData = async (orderId: string) => {
     try {
-      // This would call the orders API endpoint
-      // For now, we'll use mock data
+      // This would call the orders API endpoint: /api/orders/{orderId}
+      // For now, we'll show a message that the order is being processed
       setOrderData({
         id: parseInt(orderId),
-        order_number: 'ORD-20250119-ABC12345',
-        total_amount: 299.99,
-        status: 'paid',
+        order_number: 'ORD-PENDING',
+        total_amount: 0,
+        status: 'processing',
         created_at: new Date().toISOString(),
         items: [
           {
             id: 1,
             quantity: 1,
-            price_at_time: 299.99,
+            price_at_time: 0,
             product: {
-              name: 'Solar Panel Pro 300W',
-              slug: 'solar-panel-pro-300w'
+              name: 'Order Being Processed',
+              slug: 'order-processing'
             }
           }
         ]
diff --git a/frontend/src/hooks/usePayment.tsx b/frontend/src/hooks/usePayment.tsx
@@ -83,7 +83,7 @@ export const usePayment = () => {
     }
   }, [])
 
-  const checkPaymentStatus = useCallback(async (paymentIntentId: string): Promise<PaymentStatus | null> => {
+  const checkPaymentStatus = useCallback(async (paymentIntentId: string, retryCount = 0): Promise<PaymentStatus | null> => {
     try {
       const response = await api.get(`/checkout/payment-status/${paymentIntentId}`)
 
@@ -94,6 +94,13 @@ export const usePayment = () => {
       }
     } catch (err: any) {
       console.error('Failed to check payment status:', err)
+
+      // Retry logic for network failures
+      if (retryCount < 3 && (err.code === 'NETWORK_ERROR' || err.response?.status >= 500)) {
+        await new Promise(resolve => setTimeout(resolve, Math.pow(2, retryCount) * 1000)) // Exponential backoff
+        return checkPaymentStatus(paymentIntentId, retryCount + 1)
+      }
+
       return null
     }
   }, [])

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from 'react'`
`2`	`1`	`import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'`
`3`	`2`	`import { AuthProvider } from './hooks/useAuth'`
`4`	`3`	`import Login from './components/Login'`