Use mobile-only Paystack sheet for Mini payment QRs.

Restore the bottom-sheet iframe on mobile and redirect desktop to the hosted checkout URL, matching other Ladill apps.

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

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

@@ -1,9 +1,9 @@
 {{--
-    Paystack checkout wrapper — bottom sheet on mobile, centered modal on desktop.
+    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.
 --}}
 <template x-teleport="body">
-    {{-- Mobile bottom sheet --}}
     <div x-show="showSheet"
          x-cloak
          class="fixed inset-0 z-[9999] flex flex-col justify-end md:hidden"
@@ -41,32 +41,4 @@
             @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>
 </template>

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

@@ -19,6 +19,8 @@
           amount: @js(old('amount')),
           loading: false,
           errorMsg: @js(session('error')),
+          showSheet: false,
+          checkoutUrl: '',
           async submitPay() {
               const value = parseFloat(this.amount);
               if (!value || value <= 0) {
@@ -49,7 +51,13 @@
                       this.loading = false;
                       return;
                   }
-                  window.location.assign(data.checkout_url);
+                  if (window.innerWidth < 768) {
+                      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;
@@ -134,5 +142,7 @@
             <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>