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/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,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>
+        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
             <iframe :src="showSheet ? checkoutUrl : ''"
-                class="h-full w-full flex-1 border-0"
+                    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>
+        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
             <iframe :src="showSheet ? checkoutUrl : ''"
-                class="min-h-0 w-full flex-1 border-0"
+                    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 }}

tests/Feature/ResponsivePaystackSheetTest.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\TestCase;
+
+class ResponsivePaystackSheetTest extends TestCase
+{
+    public function test_checkout_sheet_partial_has_mobile_sheet_and_desktop_modal(): void
+    {
+        $html = view('partials.paystack-sheet', [
+            'audience' => 'buyer',
+        ])->render();
+
+        $this->assertStringContainsString('role="dialog"', $html);
+        $this->assertStringContainsString('aria-modal="true"', $html);
+        $this->assertStringContainsString('md:items-center', $html);
+        $this->assertStringContainsString('rounded-t-2xl', $html);
+        $this->assertStringContainsString('md:h-[min(720px,85vh)]', $html);
+        $this->assertStringContainsString('Complete your payment', $html);
+        $this->assertStringNotContainsString('Paystack checkout', $html);
+    }
+
+    public function test_payment_return_escapes_iframe_to_top(): void
+    {
+        $html = view('public.payment-return', [
+            'redirect' => 'https://example.test/paid',
+        ])->render();
+
+        $this->assertStringContainsString('Confirming your payment', $html);
+        $this->assertStringContainsString('window.top.location.replace', $html);
+        $this->assertTrue(
+            str_contains($html, 'https://example.test/paid')
+            || str_contains($html, 'https:\/\/example.test\/paid')
+        );
+    }
+}