Embed event checkouts and send seller email to gateways.

Ticket/contribution payments open in a desktop modal or mobile sheet, initialize with the organizer email, and break out of the iframe after callback.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/Http/Controllers/Public/EventRegistrationController.php

@@ -55,15 +55,21 @@ class EventRegistrationController extends Controller
         $reference = (string) $request->query('reference', '');
 
         if ($reference === '') {
-            return redirect()->away(LadillLink::url($shortCode))->with('error', 'Missing payment reference.');
+            return view('public.payment-return', [
+                'redirect' => LadillLink::url($shortCode),
+            ]);
         }
 
         try {
             $registration = $this->eventService->complete($reference);
 
-            return redirect()->away($this->confirmedUrl($registration->qrCode, $registration));
+            return view('public.payment-return', [
+                'redirect' => $this->confirmedUrl($registration->qrCode, $registration),
+            ]);
         } catch (\Throwable $e) {
-            return redirect()->away(LadillLink::url($shortCode))->with('order_error', 'Payment could not be verified. Reference: ' . $reference);
+            return view('public.payment-return', [
+                'redirect' => LadillLink::url($shortCode),
+            ]);
         }
     }
 

app/Services/Events/EventRegistrationService.php

@@ -130,11 +130,16 @@ class EventRegistrationService
             ? sprintf('%s — %s', $content['name'] ?? $qrCode->label, $tierName)
             : sprintf('%s ticket — %s', $content['name'] ?? $qrCode->label, $tierName);
 
+        $sellerEmail = trim((string) ($qrCode->user->email ?? ''));
+        if ($sellerEmail === '' || ! str_contains($sellerEmail, '@')) {
+            $sellerEmail = 'seller+'.($qrCode->user->public_id ?? 'events').'@checkout.ladill.local';
+        }
+
         $checkout = $this->gateway->initializeCheckout(
             $qrCode->user,
             $amountMinor,
             (string) ($registration->currency ?? 'GHS'),
-            $email,
+            $sellerEmail,
             LadillLink::path($qrCode->short_code, 'register/callback'),
             $registration->reference,
             [

resources/views/partials/paystack-sheet.blade.php

@@ -1,16 +1,15 @@
 {{--
-    Paystack mobile bottom-sheet iframe.
+    Payment checkout shell: bottomsheet on mobile, centered modal on desktop.
-    Requires Alpine.js ancestor with: showSheet (bool), checkoutUrl (string).
+    Requires Alpine ancestor with: showSheet (bool), checkoutUrl (string).
-    On mobile (< md) the sheet slides up; on desktop nothing renders.
 --}}
 <template x-teleport="body">
 <div x-show="showSheet"
      x-cloak
-     class="fixed inset-0 z-[9999] flex flex-col justify-end md:hidden"
+     class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
      role="dialog"
-     aria-modal="true">
+     aria-modal="true"
+     aria-label="Complete payment">
 
-    {{-- Backdrop --}}
     <div class="absolute inset-0 bg-black/60"
          x-show="showSheet"
          x-transition:enter="transition-opacity duration-300"
@@ -22,8 +21,8 @@
          @click="showSheet = false">
     </div>
 
-    {{-- Sheet --}}
+    {{-- Mobile bottomsheet --}}
-    <div class="relative flex flex-col bg-white rounded-t-2xl overflow-hidden"
+    <div class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:hidden"
          style="height:90dvh"
          x-show="showSheet"
          x-transition:enter="transition-transform duration-300 ease-out"
@@ -31,12 +30,12 @@
          x-transition:enter-end="translate-y-0"
          x-transition:leave="transition-transform duration-200 ease-in"
          x-transition:leave-start="translate-y-0"
-         x-transition:leave-end="translate-y-full">
+         x-transition:leave-end="translate-y-full"
-
+         @click.stop>
-        <div class="flex shrink-0 items-center justify-between border-b border-slate-100 px-4 py-3">
+        <div class="relative flex shrink-0 items-center justify-between border-b border-slate-100 px-4 py-3">
             <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200"></div>
-            <p class="text-sm font-semibold text-slate-800">Complete Payment</p>
+            <p class="text-sm font-semibold text-slate-800">Complete payment</p>
-            <button @click="showSheet = false"
+            <button type="button" @click="showSheet = false"
                     class="rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
                     aria-label="Close">
                 <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
@@ -44,11 +43,36 @@
                 </svg>
             </button>
         </div>
-
         <iframe :src="showSheet ? checkoutUrl : ''"
-                class="flex-1 w-full border-0"
+                class="h-full w-full flex-1 border-0"
-                allow="payment"
+                allow="payment *"
-                title="Paystack checkout"></iframe>
+                title="Payment checkout"></iframe>
+    </div>
+
+    {{-- Desktop modal --}}
+    <div class="relative hidden w-full max-w-lg overflow-hidden rounded-2xl bg-white shadow-2xl md:flex md:h-[min(720px,85vh)] md:flex-col"
+         x-show="showSheet"
+         x-transition:enter="transition ease-out duration-200"
+         x-transition:enter-start="opacity-0 scale-95"
+         x-transition:enter-end="opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-150"
+         x-transition:leave-start="opacity-100 scale-100"
+         x-transition:leave-end="opacity-0 scale-95"
+         @click.stop>
+        <div class="flex shrink-0 items-center justify-between border-b border-slate-100 px-5 py-3">
+            <p class="text-sm font-semibold text-slate-800">Complete payment</p>
+            <button type="button" @click="showSheet = false"
+                    class="rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
+                    aria-label="Close">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+        <iframe :src="showSheet ? checkoutUrl : ''"
+                class="min-h-0 w-full flex-1 border-0"
+                allow="payment *"
+                title="Payment checkout"></iframe>
     </div>
 </div>
 </template>

resources/views/public/payment-return.blade.php

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Payment</title>
+    <style>
+        body { font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; display: grid; place-items: center; min-height: 100vh; margin: 0; }
+        p { font-size: 0.95rem; color: #475569; }
+    </style>
+</head>
+<body>
+    <p>Finishing payment…</p>
+    <script>
+        (function () {
+            var url = @json($redirect);
+            try {
+                if (window.top && window.top !== window.self) {
+                    window.top.location.replace(url);
+                    return;
+                }
+            } catch (e) {}
+            window.location.replace(url);
+        })();
+    </script>
+</body>
+</html>

resources/views/public/qr/landing.blade.php

@@ -358,13 +358,9 @@
             });
             const data = await res.json();
             if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
-            if (window.innerWidth < 768) {
+            this.checkoutUrl = data.checkout_url;
-                this.checkoutUrl = data.checkout_url;
+            this.showSheet   = true;
-                this.showSheet   = true;
+            this.loading     = false;
-                this.loading     = false;
-            } else {
-                window.location.href = data.checkout_url;
-            }
         } catch(e) {
             this.errorMsg = 'Network error. Please try again.';
             this.loading  = false;
@@ -678,8 +674,7 @@
             if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
             if (data.paid) {
                 if (!data.checkout_url) { this.errorMsg = 'Could not start checkout. Please try again.'; this.loading = false; return; }
-                if (window.innerWidth < 768) { this.checkoutUrl = data.checkout_url; this.showSheet = true; this.loading = false; }
+                this.checkoutUrl = data.checkout_url; this.showSheet = true; this.loading = false;
-                else { window.location.href = data.checkout_url; }
                 return;
             }
             if (data.success_url) { window.location.href = data.success_url; return; }
@@ -1252,13 +1247,9 @@
             });
             const data = await res.json();
             if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
-            if (window.innerWidth < 768) {
+            this.checkoutUrl = data.checkout_url;
-                this.checkoutUrl = data.checkout_url;
+            this.showSheet   = true;
-                this.showSheet   = true;
+            this.loading     = false;
-                this.loading     = false;
-            } else {
-                window.location.href = data.checkout_url;
-            }
         } catch(e) {
             this.errorMsg = 'Network error. Please try again.';
             this.loading  = false;