feat: integrate North Embedded Checkout for bidder payments

This commit is contained in:
2026-05-01 08:18:26 -04:00
parent e4cccba942
commit b0816231d6
7 changed files with 274 additions and 1 deletions
@@ -8,6 +8,24 @@
<div class="panel-heading">Winnings for Bidder #{{ $bidder->bidder_assigned_number }} - {{ $bidder->bidder_fname }} {{ $bidder->bidder_lname }}</div>
<div class="panel-body">
@if (isset($error))
<div class="alert alert-danger">
{{ $error }}
</div>
@endif
@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@if($winnings->count() > 0)
<table class="table table-striped">
<thead>
@@ -33,6 +51,16 @@
</tr>
</tfoot>
</table>
@if(!$is_checked_out)
<div class="text-right">
<a href="{{ route('north.checkout', ['bidder_id' => $bidder->idbidders]) }}" class="btn btn-success btn-lg">Pay Now with Credit Card</a>
</div>
@else
<div class="alert alert-success text-center">
<strong>Checked Out!</strong> Your payment has been processed.
</div>
@endif
@else
<p>No winning bids found for this bidder number.</p>
@endif
+74
View File
@@ -0,0 +1,74 @@
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<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">
<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>
</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();
if (data.error) {
document.getElementById('checkout-container').innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
return;
}
const sessionToken = data.sessionToken;
// Initialize North Checkout
// The global 'checkout' object is provided by checkout.js
await checkout.mount(sessionToken, 'checkout-container');
// Handle completion
checkout.onPaymentComplete((result) => {
// Redirect to verify the payment on the server
window.location.href = `/north/verify/${bidderId}?sessionToken=${sessionToken}`;
});
} 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