fix: restore fallback verification button and error handling for North checkout

resources/views/north_checkout.blade.php

@@ -26,6 +26,7 @@
 <div class="page-body">
     <div class="container-xl">
         <div class="card">
+            <div id="payment-error-container"></div>
             <div class="card-body">
                 <div id="checkout-container">
                     <div class="text-center">
@@ -33,6 +34,13 @@
                         <div class="spinner-border" role="status"></div>
                     </div>
                 </div>
+                <div id="fallback-container" class="mt-4 text-center" style="display: none;">
+                    <div class="hr-text">Still here?</div>
+                    <p class="text-muted">If you have already completed your payment but the page hasn't redirected, please click the button below.</p>
+                    <a id="verify-button" href="#" class="btn btn-info">
+                        <i class="ti ti-shield-check me-2"></i>Verify Payment Status
+                    </a>
+                </div>
             </div>
         </div>
     </div>
@@ -67,19 +75,52 @@
                 return;
             }
 
+            // Set up fallback button
+            const verifyUrl = `/north/verify/${bidderId}?sessionToken=${sessionToken}`;
+            const verifyButton = document.getElementById('verify-button');
+            const fallbackContainer = document.getElementById('fallback-container');
+            verifyButton.href = verifyUrl;
+            
+            // Show fallback after 5 seconds to give user a manual way out if auto-redirect fails
+            setTimeout(() => {
+                fallbackContainer.style.display = 'block';
+            }, 5000);
+
             await checkout.mount(sessionToken, 'checkout-container');
 
             const handleCompletion = (result) => {
-                window.location.href = `/north/verify/${bidderId}?sessionToken=${sessionToken}`;
+                console.log('Payment complete event received:', result);
+                window.location.href = verifyUrl;
             };
 
+            // Register standard completion events
             checkout.onPaymentComplete(handleCompletion);
             if (typeof checkout.onPaymentSuccess === 'function') {
                 checkout.onPaymentSuccess(handleCompletion);
             }
+
+            // Handle errors
+            if (typeof checkout.onPaymentError === 'function') {
+                checkout.onPaymentError((error) => {
+                    console.error('Payment Error:', error);
+                    const errorDiv = document.createElement('div');
+                    errorDiv.className = 'alert alert-danger alert-dismissible';
+                    errorDiv.innerHTML = `
+                        <div class="d-flex">
+                            <div><i class="ti ti-alert-triangle me-2"></i></div>
+                            <div>
+                                <strong>Payment Error:</strong> ${error.message || 'An error occurred during payment.'}
+                            </div>
+                        </div>
+                        <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                    `;
+                    document.getElementById('payment-error-container').prepend(errorDiv);
+                });
+            }
+
         } catch (error) {
             console.error('Checkout Error:', error);
-            document.getElementById('checkout-container').innerHTML = '<div class="alert alert-danger">An error occurred. Please try again.</div>';
+            document.getElementById('checkout-container').innerHTML = '<div class="alert alert-danger">An error occurred while initializing checkout. Please try again.</div>';
         }
     });
 </script>