Use mobile bottom sheet for Mini checkout and wrap Paystack in branded frame.

Amount entry slides up from the bottom on mobile; Paystack opens in a Ladill Mini sheet on mobile and a centered modal on desktop instead of leaving the site.

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

resources/views/partials/mini-paystack-frame-footer.blade.php

@@ -0,0 +1,3 @@
+<div class="shrink-0 border-t border-slate-100 bg-slate-50/80 px-4 py-2.5 text-center">
+    <p class="text-[11px] text-slate-400">Secured by Paystack · Powered by Ladill Mini</p>
+</div>

resources/views/partials/mini-paystack-frame-header.blade.php

@@ -0,0 +1,18 @@
+<div class="relative shrink-0 border-b border-slate-100 px-4 pb-3 pt-3">
+    <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200 md:hidden"></div>
+    <div class="flex items-center justify-between gap-3 pt-2 md:pt-0">
+        <div class="flex min-w-0 items-center gap-2.5">
+            <img src="{{ asset('images/logo/ladillmini-logo.svg') }}?v={{ @filemtime(public_path('images/logo/ladillmini-logo.svg')) ?: '1' }}"
+                 alt="Ladill Mini" class="h-5 w-auto shrink-0">
+            <p class="truncate text-sm font-semibold text-slate-800">Complete payment</p>
+        </div>
+        <button type="button"
+                @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">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+            </svg>
+        </button>
+    </div>
+</div>

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

@@ -1,54 +1,72 @@
 {{--
-    Paystack mobile bottom-sheet iframe.
+    Paystack checkout wrapper — bottom sheet on mobile, centered modal on desktop.
     Requires Alpine.js 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"
-     role="dialog"
-     aria-modal="true">
+    {{-- Mobile bottom sheet --}}
+    <div x-show="showSheet"
+         x-cloak
+         class="fixed inset-0 z-[9999] flex flex-col justify-end md:hidden"
+         role="dialog"
+         aria-modal="true">
 
-    {{-- Backdrop --}}
-    <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>
-
-    {{-- Sheet --}}
-    <div class="relative flex flex-col bg-white rounded-t-2xl overflow-hidden"
-         style="height:90dvh"
-         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">
-
-        <div class="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>
-            <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 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>
 
-        <iframe :src="showSheet ? checkoutUrl : ''"
-                class="flex-1 w-full border-0"
-                allow="payment"
-                title="Paystack checkout"></iframe>
+        <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>
+
+    {{-- Desktop modal --}}
+    <div x-show="showSheet"
+         x-cloak
+         class="fixed inset-0 z-[9999] hidden items-center justify-center p-6 md:flex"
+         role="dialog"
+         aria-modal="true">
+
+        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"
+             @click="showSheet = false"></div>
+
+        <div class="relative flex w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white shadow-2xl"
+             style="height: min(720px, 90vh)"
+             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">
+
+            @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>
-</div>
 </template>

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

@@ -2,17 +2,102 @@
     $content = $qrCode->content();
     $businessName = $content['business_name'] ?? $qrCode->label;
     $currency = $content['currency'] ?? 'GHS';
+    $payUrl = route('qr.public.payment.pay', $qrCode->short_code);
+    $csrf = csrf_token();
 @endphp
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="csrf-token" content="{{ $csrf }}">
     <title>Pay {{ $businessName }}</title>
-    @vite(['resources/css/app.css'])
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
-<body class="min-h-screen bg-slate-50 text-slate-900">
-    <main class="mx-auto flex min-h-screen max-w-sm flex-col justify-center px-4 py-8">
+<body class="min-h-screen bg-slate-50 text-slate-900"
+      x-data="{
+          amount: @js(old('amount')),
+          loading: false,
+          errorMsg: @js(session('error')),
+          showSheet: false,
+          checkoutUrl: '',
+          async submitPay() {
+              const value = parseFloat(this.amount);
+              if (!value || value <= 0) {
+                  this.errorMsg = 'Enter an amount greater than zero.';
+                  return;
+              }
+              this.errorMsg = '';
+              this.loading = true;
+              try {
+                  const res = await fetch(@js($payUrl), {
+                      method: 'POST',
+                      headers: {
+                          'Content-Type': 'application/json',
+                          'Accept': 'application/json',
+                          'X-CSRF-TOKEN': @js($csrf),
+                          'X-Requested-With': 'XMLHttpRequest',
+                      },
+                      body: JSON.stringify({ amount: value }),
+                  });
+                  const data = await res.json().catch(() => ({}));
+                  if (!res.ok || data.error || data.message) {
+                      this.errorMsg = data.error || data.message || 'Could not start payment. Please try again.';
+                      this.loading = false;
+                      return;
+                  }
+                  this.checkoutUrl = data.checkout_url;
+                  this.showSheet = true;
+                  this.loading = false;
+              } catch (e) {
+                  this.errorMsg = 'Network error. Please try again.';
+                  this.loading = false;
+              }
+          }
+      }">
+
+    {{-- Mobile: merchant header + bottom sheet --}}
+    <div class="md:hidden flex min-h-screen flex-col">
+        <div class="flex flex-1 flex-col items-center justify-center px-6 pb-6 pt-10 text-center">
+            @if(!empty($content['logo_path']))
+                <img src="{{ route('qr.public.payment.logo', $qrCode->short_code) }}" alt="" class="h-16 w-16 rounded-2xl object-cover shadow-sm">
+            @endif
+            <h1 class="mt-4 text-xl font-bold text-slate-900">{{ $businessName }}</h1>
+            @if(!empty($content['branch_label']))
+                <p class="mt-1 text-sm text-slate-500">{{ $content['branch_label'] }}</p>
+            @endif
+        </div>
+
+        <div class="rounded-t-3xl border-t border-slate-200/80 bg-white px-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-3 shadow-[0_-8px_30px_rgba(15,23,42,0.08)]">
+            <div class="mx-auto mb-4 h-1 w-10 rounded-full bg-slate-200"></div>
+
+            <div x-show="errorMsg" x-cloak class="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMsg"></div>
+
+            <label for="amount-mobile" class="sr-only">Amount ({{ $currency }})</label>
+            <div class="relative">
+                <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span>
+                <input type="number" id="amount-mobile" x-model="amount" step="0.01" min="0.01" required autofocus
+                       inputmode="decimal"
+                       @keydown.enter.prevent="submitPay()"
+                       class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
+                       placeholder="0.00">
+            </div>
+
+            <button type="button" @click="submitPay()" :disabled="loading"
+                    class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60">
+                <svg x-show="loading" x-cloak class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                </svg>
+                <span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span>
+            </button>
+
+            <p class="mt-4 text-center text-[11px] text-slate-400">Secured by Paystack · Powered by Ladill Mini</p>
+        </div>
+    </div>
+
+    {{-- Desktop: centered card --}}
+    <main class="mx-auto hidden min-h-screen max-w-sm flex-col justify-center px-4 py-8 md:flex">
         <div class="rounded-3xl border border-slate-200/80 bg-white p-6 shadow-sm">
             <div class="text-center">
                 @if(!empty($content['logo_path']))
@@ -24,27 +109,32 @@
                 @endif
             </div>
 
-            @if(session('error'))
-                <div class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">{{ session('error') }}</div>
-            @endif
+            <div x-show="errorMsg" x-cloak class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMsg"></div>
 
-            <form method="post" action="{{ route('qr.public.payment.pay', $qrCode->short_code) }}" class="mt-6">
-                @csrf
-                <label for="amount" class="sr-only">Amount ({{ $currency }})</label>
+            <div class="mt-6">
+                <label for="amount-desktop" class="sr-only">Amount ({{ $currency }})</label>
                 <div class="relative">
                     <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span>
-                    <input type="number" id="amount" name="amount" step="0.01" min="0.01" required autofocus
+                    <input type="number" id="amount-desktop" x-model="amount" step="0.01" min="0.01" required
                            inputmode="decimal"
+                           @keydown.enter.prevent="submitPay()"
                            class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
-                           placeholder="0.00" value="{{ old('amount') }}">
+                           placeholder="0.00">
                 </div>
-                <button type="submit" class="mt-4 w-full rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700">
-                    Pay
+                <button type="button" @click="submitPay()" :disabled="loading"
+                        class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60">
+                    <svg x-show="loading" x-cloak class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                    </svg>
+                    <span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span>
                 </button>
-            </form>
+            </div>
 
             <p class="mt-4 text-center text-[11px] text-slate-400">Secured by Paystack · Powered by Ladill Mini</p>
         </div>
     </main>
+
+    @include('partials.paystack-sheet')
 </body>
 </html>