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>
2026-06-07 20:29:13 +00:00
parent 664d2e68c2
commit f405217a33
5 changed files with 198 additions and 60 deletions
@@ -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>