diff --git a/resources/views/partials/payment-checkout-host.blade.php b/resources/views/partials/payment-checkout-host.blade.php
index b456685..91d2855 100644
--- a/resources/views/partials/payment-checkout-host.blade.php
+++ b/resources/views/partials/payment-checkout-host.blade.php
@@ -12,6 +12,12 @@
             set showSheet(v) { if (!v) { $store.paymentCheckout.close() } },
             get checkoutUrl() { return $store.paymentCheckout.url },
          }">
-        @include('partials.paystack-sheet')
+        @include('partials.paystack-sheet', [
+            'audience' => 'operator',
+            'sheetTitle' => 'Customer payment',
+            'sheetSubtitle' => 'Hand this screen to the customer for card or mobile money.',
+            'sheetFooter' => 'Stay on this screen until the customer finishes. Closing only hides the sheet.',
+            'iframeTitle' => 'Customer card or mobile money checkout',
+        ])
     </div>
 </div>
diff --git a/resources/views/partials/paystack-sheet.blade.php b/resources/views/partials/paystack-sheet.blade.php
index cf0e98a..9d0c4a4 100644
--- a/resources/views/partials/paystack-sheet.blade.php
+++ b/resources/views/partials/paystack-sheet.blade.php
@@ -1,20 +1,49 @@
 {{--
-    POS checkout shell for till operators: bottomsheet on mobile, modal on desktop.
-    Audience is staff at the register — not the end customer browsing alone.
+    Responsive payment checkout shell: bottom sheet on mobile, centered modal on desktop.
+
+    Audiences:
+      - buyer (default): public ticket buyers, donors, shoppers — self-serve checkout
+      - operator: signed-in staff flows such as wallet top-up
+
+    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
-    $sheetTitle = $sheetTitle ?? 'Customer payment';
-    $sheetSubtitle = $sheetSubtitle ?? 'Hand this screen to the customer for card or mobile money.';
-    $sheetAria = $sheetAria ?? $sheetTitle;
-    $iframeTitle = $iframeTitle ?? 'Customer card or mobile money checkout';
+    $audience = $audience ?? 'buyer';
+    $defaults = match ($audience) {
+        'operator' => [
+            'title' => 'Complete payment',
+            'subtitle' => null,
+            'aria' => 'Complete payment',
+            'iframe' => 'Payment checkout',
+            'footer' => null,
+        ],
+        default => [
+            'title' => 'Complete your payment',
+            'subtitle' => 'Pay securely. You\'ll get a confirmation when it succeeds.',
+            'aria' => 'Complete your payment',
+            'iframe' => 'Secure payment checkout',
+            'footer' => 'Your payment is processed securely. Do not close this window until finished.',
+        ],
+    };
+    $sheetTitle = $sheetTitle ?? $defaults['title'];
+    $sheetSubtitle = $sheetSubtitle ?? $defaults['subtitle'];
+    $sheetAria = $sheetAria ?? $defaults['aria'];
+    $iframeTitle = $iframeTitle ?? $defaults['iframe'];
+    $sheetFooter = $sheetFooter ?? $defaults['footer'];
 @endphp
 <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"
@@ -28,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"
@@ -39,34 +68,41 @@
          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">
                     <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
-                    @if ($sheetSubtitle)
+                    @if (! empty($sheetSubtitle))
                         <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 payment sheet">
-                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                        aria-label="Close">
+                    <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>
-        <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500">
-            Stay on this screen until the customer finishes. Closing only hides the sheet.
-        </p>
+        <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 }}
+            </p>
+        @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"
@@ -79,25 +115,33 @@
         <div class="flex shrink-0 items-start justify-between gap-3 border-b border-slate-100 px-5 py-3">
             <div class="min-w-0">
                 <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
-                @if ($sheetSubtitle)
+                @if (! empty($sheetSubtitle))
                     <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 payment sheet">
-                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                    aria-label="Close">
+                <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>
-        <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-5 py-2 text-center text-[11px] text-slate-500">
-            Stay on this screen until the customer finishes. Closing only hides the sheet.
-        </p>
+        <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 }}
+            </p>
+        @endif
     </div>
 </div>
 </template>
diff --git a/resources/views/public/payment-return.blade.php b/resources/views/public/payment-return.blade.php
new file mode 100644
index 0000000..82ed789
--- /dev/null
+++ b/resources/views/public/payment-return.blade.php
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Payment</title>
+    <style>
+        body { font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; display: grid; place-items: center; min-height: 100vh; margin: 0; }
+        p { font-size: 0.95rem; color: #475569; }
+    </style>
+</head>
+<body>
+    <p>Confirming your payment…</p>
+    <script>
+        (function () {
+            var url = @json($redirect);
+            try {
+                if (window.top && window.top !== window.self) {
+                    window.top.location.replace(url);
+                    return;
+                }
+            } catch (e) {}
+            window.location.replace(url);
+        })();
+    </script>
+</body>
+</html>