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.
2026-07-21 16:50:07 +00:00
parent 7b20b71ea0
commit 183f0305ce
3 changed files with 72 additions and 18 deletions
@@ -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;
@@ -1,5 +1,5 @@
 {{--
-    Payment checkout shell: bottomsheet on mobile, centered modal on desktop.
+    Responsive payment checkout shell: bottom sheet on mobile, centered modal on desktop.

    Audiences:
      - buyer (default): public ticket buyers, donors, shoppers — self-serve checkout
@@ -7,6 +7,9 @@

    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';
@@ -35,9 +38,12 @@
 <template x-teleport="body">
 <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"
@@ -51,9 +57,9 @@
         @click="showSheet = false">
    </div>

-    {{-- Mobile bottomsheet --}}
+    {{-- Mobile bottom sheet --}}
    <div class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:hidden"
-         style="height:90dvh"
+         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"
@@ -62,7 +68,8 @@
         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">
+        <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">
@@ -71,19 +78,23 @@
                        <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
                    @endif
                </div>
-                <button type="button" @click="showSheet = false"
+                <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">
+                    <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>
-        <iframe :src="showSheet ? checkoutUrl : ''"
-                class="h-full w-full flex-1 border-0"
-                allow="payment *"
-                title="{{ $iframeTitle }}"></iframe>
+        <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 }}
@@ -91,7 +102,7 @@
        @endif
    </div>

-    {{-- Desktop modal --}}
+    {{-- 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"
@@ -108,18 +119,24 @@
                    <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
                @endif
            </div>
-            <button type="button" @click="showSheet = false"
+            <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">
+                <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>
-        <iframe :src="showSheet ? checkoutUrl : ''"
-                class="min-h-0 w-full flex-1 border-0"
-                allow="payment *"
-                title="{{ $iframeTitle }}"></iframe>
+        <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 }}