feat: integrate North Embedded Checkout for bidder payments

2026-05-01 08:18:26 -04:00
parent e4cccba942
commit b0816231d6
7 changed files with 274 additions and 1 deletions
@@ -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