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

feat: migrate final batch of views to tablar

Browse Source
This commit is contained in:
Russ Long
2026-05-01 12:01:47 -04:00
parent a382a434d4
commit 008000314f
5 changed files with 116 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/north_checkout.blade.php
+15 -105
View File
@@ -1,112 +1,22 @@
@extends('layouts.app')
@extends('tablar::page')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-0">
<div class="panel panel-default">
<div class="panel-heading">Checkout for Bidder #{{ $bidder->bidder_assigned_number }}</div>
<div class="panel-body">
<h4>Total Amount Due: ${{ number_format($total_cost, 2) }}</h4>
<hr>
<div id="checkout-container" style="height: 100vh; overflow: hidden;">
<div class="text-center">
<p>Loading secure checkout...</p>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<hr>
<div class="text-center">
<a href="/mywinnings?bidder_number={{ $bidder->bidder_assigned_number }}" class="btn btn-default">Cancel and Return</a>
</div>
</div>
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<h2 class="page-title">Checkout</h2>
</div>
</div>
</div>
</div>
<div class="page-body">
<div class="container-xl">
<div class="card">
<div class="card-body">
<div id="checkout-container"></div>
</div>
</div>
</div>
</div>
<script src="https://checkout.north.com/checkout.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const bidderId = "{{ $bidder->idbidders }}";
const csrfToken = "{{ csrf_token() }}";
try {
// Create a checkout session
const response = await fetch(`/north/session/${bidderId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': csrfToken
}
});
const data = await response.json();
console.log('North Session Response:', data);
if (data.error) {
document.getElementById('checkout-container').innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
return;
}
const sessionToken = data.sessionToken;
if (!sessionToken) {
document.getElementById('checkout-container').innerHTML = `<div class="alert alert-danger">Invalid session token received from server.</div>`;
return;
}
// Initialize North Checkout
// The global 'checkout' object is provided by checkout.js
console.log('Mounting checkout with token:', sessionToken);
await checkout.mount(sessionToken, 'checkout-container');
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);
document.getElementById('checkout-container').innerHTML = '<div class="alert alert-danger">An error occurred while initializing checkout. Please try again.</div>';
}
});
</script>
@endsection