North-Hackathon/silent-auction
2
0
Fork 0
forked from TFMM/silent-auction
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
Russ Long
2026-05-03 06:55:40 -04:00
parent 896c96e1a4
commit c76a8ed04a
1 changed files with 43 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/north_checkout.blade.php
+43 -2
View File
@@ -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>