fix: improve Google Pay handling with additional status checks, robust data extraction, and a fallback verification button

resources/views/north_checkout.blade.php

@@ -65,11 +65,43 @@
             console.log('Mounting checkout with token:', sessionToken);
             await checkout.mount(sessionToken, 'checkout-container');
 
-            // Handle completion
-            checkout.onPaymentComplete((result) => {
+            const handleCompletion = (result) => {
+                console.log('Payment complete event received:', result);
                 // Redirect to verify the payment on the server
                 window.location.href = `/north/verify/${bidderId}?sessionToken=${sessionToken}`;
-            });
+            };
+
+            // Handle completion
+            checkout.onPaymentComplete(handleCompletion);
+            
+            // Support for possible variations in event names
+            if (typeof checkout.onPaymentSuccess === 'function') {
+                checkout.onPaymentSuccess(handleCompletion);
+            }
+
+            // Handle errors
+            if (typeof checkout.onPaymentError === 'function') {
+                checkout.onPaymentError((error) => {
+                    console.error('Payment Error:', error);
+                    // Don't clear the container, just prepend the error
+                    const errorDiv = document.createElement('div');
+                    errorDiv.className = 'alert alert-danger';
+                    errorDiv.innerHTML = `<strong>Payment Error:</strong> ${error.message || 'An error occurred during payment.'}`;
+                    document.querySelector('.panel-body').prepend(errorDiv);
+                });
+            }
+
+            // Show a fallback button after a short delay to allow for manual verification if the redirect fails
+            setTimeout(() => {
+                const fallbackDiv = document.createElement('div');
+                fallbackDiv.className = 'text-center';
+                fallbackDiv.style.marginTop = '20px';
+                fallbackDiv.innerHTML = `
+                    <p class="text-muted">Already completed your payment but still on this page?</p>
+                    <a href="/north/verify/${bidderId}?sessionToken=${sessionToken}" class="btn btn-info">Verify Payment Status</a>
+                `;
+                document.querySelector('.panel-body').appendChild(fallbackDiv);
+            }, 5000);
 
         } catch (error) {
             console.error('Checkout Error:', error);