Present Paystack checkout in a responsive mobile sheet and desktop modal.

Standardize customer-facing Ladill Pay checkout shells across products, open them on all viewports, and escape iframe callbacks back to the product flow.

resources/js/app.js

@@ -239,13 +239,8 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
                 this.loading = false;
                 return;
             }
-            if (window.innerWidth < 768) {
-                this.checkoutUrl = data.checkout_url;
+            this.checkoutUrl = data.checkout_url;
                 this.showSheet = true;
-                this.loading = false;
-            } else {
-                window.location.href = data.checkout_url;
-            }
         } catch (e) {
             this.errorMsg = 'Network error. Please try again.';
             this.loading = false;

resources/views/components/user/service-topup-modal.blade.php

@@ -36,7 +36,7 @@
                   loading: false,
                   errorMsg: '',
                   async submitTopup(event) {
-                      if (this.method !== 'paystack' || window.innerWidth >= 768) return;
+                      if (this.method !== 'paystack') return;
 
                       event.preventDefault();
                       this.loading = true;

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

@@ -1,44 +1,147 @@
 {{--
-    Paystack mobile bottom-sheet iframe.
-    Requires Alpine.js ancestor with: showSheet (bool), checkoutUrl (string).
-    On mobile (< md) the sheet slides up; on desktop nothing renders.
+    Responsive payment checkout shell: bottom sheet on mobile, centered modal on desktop.
+
+    Audiences:
+      - buyer (default): public ticket buyers, donors, shoppers — self-serve checkout
+      - operator: signed-in staff flows such as wallet top-up
+
+    Optional overrides: $sheetTitle, $sheetSubtitle, $sheetFooter, $sheetAria, $iframeTitle
+    Requires Alpine ancestor with: showSheet (bool), checkoutUrl (string).
+
+    Loads the provider authorization URL in-frame (verified via production Events/POS).
+    MoMo and other non-frameable providers should redirect instead of opening this sheet.
 --}}
+@php
+    $audience = $audience ?? 'buyer';
+    $defaults = match ($audience) {
+        'operator' => [
+            'title' => 'Complete payment',
+            'subtitle' => null,
+            'aria' => 'Complete payment',
+            'iframe' => 'Payment checkout',
+            'footer' => null,
+        ],
+        default => [
+            'title' => 'Complete your payment',
+            'subtitle' => 'Pay securely. You\'ll get a confirmation when it succeeds.',
+            'aria' => 'Complete your payment',
+            'iframe' => 'Secure payment checkout',
+            'footer' => 'Your payment is processed securely. Do not close this window until finished.',
+        ],
+    };
+    $sheetTitle = $sheetTitle ?? $defaults['title'];
+    $sheetSubtitle = $sheetSubtitle ?? $defaults['subtitle'];
+    $sheetAria = $sheetAria ?? $defaults['aria'];
+    $iframeTitle = $iframeTitle ?? $defaults['iframe'];
+    $sheetFooter = $sheetFooter ?? $defaults['footer'];
+@endphp
 <template x-teleport="body">
-    <div x-show="showSheet"
-         x-cloak
-         class="fixed inset-0 z-[9999] flex flex-col justify-end md:hidden"
-         role="dialog"
-         aria-modal="true">
+<div x-show="showSheet"
+     x-cloak
+     x-effect="document.documentElement.style.overflow = showSheet ? 'hidden' : ''"
+     @keydown.escape.window="if (showSheet) showSheet = false"
+     class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
+     role="dialog"
+     aria-modal="true"
+     :aria-hidden="(!showSheet).toString()"
+     aria-label="{{ $sheetAria }}">
 
-        <div class="absolute inset-0 bg-black/60"
-             x-show="showSheet"
-             x-transition:enter="transition-opacity duration-300"
-             x-transition:enter-start="opacity-0"
-             x-transition:enter-end="opacity-100"
-             x-transition:leave="transition-opacity duration-200"
-             x-transition:leave-start="opacity-100"
-             x-transition:leave-end="opacity-0"
-             @click="showSheet = false">
-        </div>
-
-        <div class="relative flex flex-col overflow-hidden rounded-t-2xl bg-white"
-             style="height:90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
-             x-show="showSheet"
-             x-transition:enter="transition-transform duration-300 ease-out"
-             x-transition:enter-start="translate-y-full"
-             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">
-
-            @include('partials.mini-paystack-frame-header')
-
-            <iframe :src="showSheet ? checkoutUrl : ''"
-                    class="min-h-0 flex-1 w-full border-0"
-                    allow="payment"
-                    title="Paystack checkout"></iframe>
-
-            @include('partials.mini-paystack-frame-footer')
-        </div>
+    <div class="absolute inset-0 bg-black/60"
+         x-show="showSheet"
+         x-transition:enter="transition-opacity duration-300"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition-opacity duration-200"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         @click="showSheet = false">
     </div>
+
+    {{-- Mobile bottom sheet --}}
+    <div class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:hidden"
+         style="height:90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
+         x-show="showSheet"
+         x-transition:enter="transition-transform duration-300 ease-out"
+         x-transition:enter-start="translate-y-full"
+         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"
+         @click.stop>
+        <div class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5"
+             style="padding-top: max(1.25rem, env(safe-area-inset-top, 0px))">
+            <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200"></div>
+            <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                    <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
+                    @if (! empty($sheetSubtitle))
+                        <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
+                    @endif
+                </div>
+                <button type="button"
+                        x-ref="checkoutCloseMobile"
+                        @click="showSheet = false"
+                        class="shrink-0 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" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+            <iframe :src="showSheet ? checkoutUrl : ''"
+                    class="h-full min-h-[60dvh] w-full border-0"
+                    allow="payment *"
+                    title="{{ $iframeTitle }}"></iframe>
+        </div>
+        @if (! empty($sheetFooter))
+            <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500">
+                {{ $sheetFooter }}
+            </p>
+        @endif
+    </div>
+
+    {{-- Desktop centered 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-start justify-between gap-3 border-b border-slate-100 px-5 py-3">
+            <div class="min-w-0">
+                <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
+                @if (! empty($sheetSubtitle))
+                    <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
+                @endif
+            </div>
+            <button type="button"
+                    x-ref="checkoutCloseDesktop"
+                    x-init="$watch('showSheet', value => { if (value) { $nextTick(() => ($refs.checkoutCloseDesktop || $refs.checkoutCloseMobile)?.focus()) } })"
+                    @click="showSheet = false"
+                    class="shrink-0 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" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+            <iframe :src="showSheet ? checkoutUrl : ''"
+                    class="h-full min-h-0 w-full border-0"
+                    style="min-height: 28rem"
+                    allow="payment *"
+                    title="{{ $iframeTitle }}"></iframe>
+        </div>
+        @if (! empty($sheetFooter))
+            <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-5 py-2 text-center text-[11px] text-slate-500">
+                {{ $sheetFooter }}
+            </p>
+        @endif
+    </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>Confirming your 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/book-landing.blade.php

@@ -45,14 +45,10 @@
             });
             const data = await res.json();
             if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
-            if (window.innerWidth < 768) {
-                this.showModal    = false;
-                this.checkoutUrl  = data.checkout_url;
-                this.showSheet    = true;
-                this.loading      = false;
-            } else {
-                window.location.href = data.checkout_url;
-            }
+            this.showModal   = false;
+            this.checkoutUrl = data.checkout_url;
+            this.showSheet   = true;
+            this.loading     = false;
         } catch(e) {
             this.errorMsg = 'Network error. Please try again.';
             this.loading  = false;

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

@@ -75,13 +75,9 @@
                 window.location.href = data.redirect_url;
                 return;
             }
-            if (window.innerWidth < 768) {
-                this.checkoutUrl = data.checkout_url;
-                this.showSheet = true;
-                this.loading = false;
-            } else {
-                window.location.href = data.checkout_url;
-            }
+            this.checkoutUrl = data.checkout_url;
+            this.showSheet = true;
+            this.loading = false;
         } catch (e) {
             this.errorMsg = 'Network error. Please try again.';
             this.loading = false;

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

@@ -357,13 +357,8 @@
             });
             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.showSheet   = true;
-                this.loading     = false;
-            } else {
-                window.location.href = data.checkout_url;
-            }
+            this.checkoutUrl = data.checkout_url;
+                this.showSheet = true;
         } catch(e) {
             this.errorMsg = 'Network error. Please try again.';
             this.loading  = false;
@@ -667,8 +662,8 @@
             const data = await res.json();
             if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
             if (!data.paid) { window.location.href = data.success_url; return; }
-            if (window.innerWidth < 768) { this.checkoutUrl = data.checkout_url; this.showSheet = true; this.loading = false; }
-            else { window.location.href = data.checkout_url; }
+            this.checkoutUrl = data.checkout_url;
+                this.showSheet = true;
         } catch(e) { this.errorMsg = 'Network error. Please try again.'; this.loading = false; }
     }
 }" class="min-h-screen bg-slate-50 pb-12">
@@ -1198,13 +1193,8 @@
             });
             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.showSheet   = true;
-                this.loading     = false;
-            } else {
-                window.location.href = data.checkout_url;
-            }
+            this.checkoutUrl = data.checkout_url;
+                this.showSheet = true;
         } catch(e) {
             this.errorMsg = 'Network error. Please try again.';
             this.loading  = false;

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

@@ -26,7 +26,7 @@
     <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <style>body{font-family:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}</style>
+    <style>body{font-family:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}[x-cloak]{display:none!important}</style>
 </head>
 <body class="bg-slate-50 text-slate-900 antialiased">
 <div x-data="storefront({
@@ -38,6 +38,7 @@
         orderUrl: @js($orderUrl),
         csrf: @js(csrf_token()),
      })" class="mx-auto max-w-2xl px-4 pb-32 pt-0">
+    @include('partials.paystack-sheet')
 
     {{-- Cover + header --}}
     <div class="relative -mx-4 mb-4 h-36 sm:h-44" style="background:{{ $brand }}">
@@ -161,6 +162,8 @@ function storefront(cfg) {
         open: false,
         loading: false,
         errorMsg: '',
+        showSheet: false,
+        checkoutUrl: '',
         name: '', email: '', phone: '',
         cart: {},
         add(name, price, key) {
@@ -191,7 +194,11 @@ function storefront(cfg) {
                 });
                 const data = await res.json();
                 if (!res.ok) { this.errorMsg = data.error || 'Could not start checkout.'; this.loading = false; return; }
-                window.location = data.checkout_url;
+                if (!data.checkout_url) { this.errorMsg = 'Could not start checkout.'; this.loading = false; return; }
+                this.open = false;
+                this.checkoutUrl = data.checkout_url;
+                this.showSheet = true;
+                this.loading = false;
             } catch (e) {
                 this.errorMsg = 'Network error. Please try again.';
                 this.loading = false;