Fix Mini Pay sheet: same-origin pay URL and visible chrome.

Cross-origin fetch to ladl.link had no CORS, so showSheet never ran. Open the sheet immediately and keep Paystack behind the Continue CTA.

app/Http/Middleware/RedirectLegacyQrToLadillLink.php

@@ -19,6 +19,13 @@ class RedirectLegacyQrToLadillLink
             return $next($request);
         }
 
+        // Same-origin AJAX from Mini-hosted payment pages (e.g. mini.ladill.com)
+        // must hit local /q/{code}/pay — redirecting to ladl.link breaks CORS and
+        // the checkout sheet never opens.
+        if ($request->ajax() || $request->expectsJson() || $request->wantsJson()) {
+            return $next($request);
+        }
+
         return LadillLink::legacyRedirect($request);
     }
 }

resources/js/app.js

@@ -217,9 +217,9 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
 
         this.errorMsg = '';
         this.loading = true;
-
-        // Open a blank checkout window synchronously so Paystack is not blocked after await.
-        window.LadillPayCheckout?.prepare?.();
+        this.checkoutUrl = '';
+        // Show sheet/modal immediately; Paystack opens from the in-sheet Continue CTA.
+        this.showSheet = true;
 
         const controller = new AbortController();
         const timer = setTimeout(() => controller.abort(), 45000);
@@ -241,12 +241,12 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
                 ? data.error
                 : (typeof data.message === 'string' ? data.message : '');
             if (!res.ok || apiError) {
-                window.LadillPayCheckout?.cancel?.();
+                this.showSheet = false;
                 this.errorMsg = apiError || (`Could not start payment (${res.status}). Please try again.`);
                 return;
             }
             if (!data.checkout_url) {
-                window.LadillPayCheckout?.cancel?.();
+                this.showSheet = false;
                 this.errorMsg = 'Could not start payment. Please try again.';
                 return;
             }
@@ -256,14 +256,13 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
             const useSheet = data.provider !== 'mtn_momo';
             if (useSheet) {
                 this.checkoutUrl = data.checkout_url;
-                this.showSheet = true;
             } else {
-                window.LadillPayCheckout?.cancel?.();
+                this.showSheet = false;
                 window.location.assign(data.checkout_url);
                 return;
             }
         } catch (e) {
-            window.LadillPayCheckout?.cancel?.();
+            this.showSheet = false;
             this.errorMsg = e?.name === 'AbortError'
                 ? 'Payment is taking too long. Please try again.'
                 : 'Network error. Please try again.';

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

@@ -10,9 +10,9 @@
 
     Paystack (checkout.paystack.com) sends X-Frame-Options: SAMEORIGIN and cannot be
     embedded. Same-origin URLs (e.g. MoMo waiting pages) still load in an iframe.
-    External checkouts open in a named window. Call LadillPayCheckout.prepare()
-    synchronously in the Pay click handler (before await fetch) so the popup is not
-    blocked after the async response. An in-sheet Continue CTA remains as fallback.
+    External checkouts stay in this chrome with a Continue CTA that opens Paystack
+    in a named window (user gesture — not blocked). Auto-popups are intentionally
+    avoided so the sheet/modal always remains visibly on screen.
 --}}
 @php
     $audience = $audience ?? 'buyer';
@@ -64,17 +64,9 @@
         } catch (e) {}
     }
 
+    // Kept for callers; no longer opens a window on Pay click (that stole focus
+    // from the sheet/modal). Prefer opening from the in-sheet Continue CTA.
     function prepare() {
-        cancel();
-        try {
-            var win = window.open('about:blank', PENDING_NAME, 'width=480,height=720');
-            if (win && !win.closed) {
-                pendingWindow = win;
-                writePendingPlaceholder(win);
-                return win;
-            }
-        } catch (e) {}
-        pendingWindow = null;
         return null;
     }
 
@@ -111,31 +103,35 @@
         window.Alpine.store('ladillPayCheckout', {
             frameable: false,
             popupBlocked: false,
-            launchKey: '',
+            ready: false,
             reset() {
                 this.frameable = false;
                 this.popupBlocked = false;
-                this.launchKey = '';
+                this.ready = false;
             },
             sync(show, url) {
                 if (!show) {
                     this.reset();
                     return;
                 }
-                if (!url) return;
-                this.frameable = isFrameable(url);
-                if (this.frameable) {
-                    cancel();
+                this.ready = !!url;
+                if (!url) {
+                    this.frameable = false;
                     this.popupBlocked = false;
                     return;
                 }
-                if (this.launchKey === url) return;
-                this.launchKey = url;
-                var popup = openCheckout(url);
-                this.popupBlocked = !(popup && !popup.closed);
+                this.frameable = isFrameable(url);
+                // Never auto-open an external popup here — the sheet/modal must stay
+                // visible. External checkouts use the Continue CTA (user gesture).
+                this.popupBlocked = !this.frameable;
             },
             continueTo(url) {
                 if (!url) return;
+                if (isFrameable(url)) {
+                    this.frameable = true;
+                    this.popupBlocked = false;
+                    return;
+                }
                 var popup = openCheckout(url);
                 this.popupBlocked = !(popup && !popup.closed);
                 if (this.popupBlocked) {
@@ -168,13 +164,15 @@
 <template x-teleport="body">
 <div x-show="showSheet"
      x-cloak
+     data-ladill-pay-sheet
      x-effect="
         document.documentElement.style.overflow = showSheet ? 'hidden' : '';
         if (typeof window.LadillPayCheckout !== 'undefined') {
             window.LadillPayCheckout.ensureStore();
         }
-        if ($store.ladillPayCheckout) {
-            $store.ladillPayCheckout.sync(showSheet, checkoutUrl);
+        const store = $store.ladillPayCheckout;
+        if (store) {
+            store.sync(showSheet, checkoutUrl);
         }
      "
      @keydown.escape.window="if (showSheet) showSheet = false"
@@ -185,6 +183,7 @@
      aria-label="{{ $sheetAria }}">
 
     <div class="absolute inset-0 bg-black/60"
+         data-ladill-pay-backdrop
          x-show="showSheet"
          x-transition:enter="transition-opacity duration-300"
          x-transition:enter-start="opacity-0"
@@ -195,20 +194,22 @@
          @click="showSheet = false">
     </div>
 
-    {{-- Mobile bottom sheet --}}
-    <div class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:hidden"
-         style="height:90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
+    {{-- One panel: bottom sheet (mobile) + centered modal (desktop). Avoid Tailwind
+         `hidden` + Alpine x-show which can leave the desktop panel stuck invisible. --}}
+    <div data-ladill-pay-panel
+         class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl md:max-w-lg md:rounded-2xl"
+         style="height: min(90dvh, 720px); max-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"
+         x-transition:enter="transition duration-300 ease-out md:duration-200"
+         x-transition:enter-start="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
+         x-transition:enter-end="translate-y-0 opacity-100 md:scale-100"
+         x-transition:leave="transition duration-200 ease-in md:duration-150"
+         x-transition:leave-start="translate-y-0 opacity-100 md:scale-100"
+         x-transition:leave-end="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
          @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 md:px-5 md:pt-3"
              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="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200 md:hidden" data-ladill-pay-handle aria-hidden="true"></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>
@@ -217,7 +218,8 @@
                     @endif
                 </div>
                 <button type="button"
-                        x-ref="checkoutCloseMobile"
+                        x-ref="checkoutClose"
+                        x-init="$watch('showSheet', value => { if (value) { $nextTick(() => $refs.checkoutClose?.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">
@@ -228,96 +230,37 @@
             </div>
         </div>
         <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-            <iframe x-show="$store.ladillPayCheckout.frameable"
-                    :src="showSheet && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
-                    class="h-full min-h-[60dvh] w-full border-0"
-                    allow="payment *"
-                    title="{{ $iframeTitle }}"></iframe>
-            <div x-show="!$store.ladillPayCheckout.frameable"
-                 class="flex min-h-[60dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center">
-                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600" aria-hidden="true">
-                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>
-                    </svg>
-                </div>
-                <div class="max-w-xs space-y-1">
-                    <p class="text-sm font-semibold text-slate-800"
-                       x-text="$store.ladillPayCheckout.popupBlocked ? 'Continue in a secure payment window' : 'Complete payment in the secure window'"></p>
-                    <p class="text-xs leading-snug text-slate-500">
-                        <span x-show="!$store.ladillPayCheckout.popupBlocked">A Paystack window should be open. If you do not see it, tap continue below.</span>
-                        <span x-show="$store.ladillPayCheckout.popupBlocked">Your browser blocked the popup. Tap continue to open Paystack.</span>
-                    </p>
-                </div>
-                <button type="button"
-                        @click="$store.ladillPayCheckout.continueTo(checkoutUrl)"
-                        class="inline-flex w-full max-w-xs items-center justify-center rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">
-                    Continue to Paystack
-                </button>
-                <button type="button"
-                        @click="showSheet = false"
-                        class="text-xs font-medium text-slate-500 hover:text-slate-700">
-                    Cancel
-                </button>
-            </div>
-        </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 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"
-         x-transition:enter-start="opacity-0 scale-95"
-         x-transition:enter-end="opacity-100 scale-100"
-         x-transition:leave="transition ease-in duration-150"
-         x-transition:leave-start="opacity-100 scale-100"
-         x-transition:leave-end="opacity-0 scale-95"
-         @click.stop>
-        <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 (! empty($sheetSubtitle))
-                    <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
-                @endif
-            </div>
-            <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" 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 x-show="$store.ladillPayCheckout.frameable"
-                    :src="showSheet && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
-                    class="h-full min-h-0 w-full border-0"
+            <iframe x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.frameable"
+                    :src="showSheet && $store.ladillPayCheckout && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
+                    class="h-full min-h-[60dvh] w-full border-0 md:min-h-0"
                     style="min-height: 28rem"
                     allow="payment *"
                     title="{{ $iframeTitle }}"></iframe>
-            <div x-show="!$store.ladillPayCheckout.frameable"
-                 class="flex h-full min-h-[28rem] flex-col items-center justify-center gap-4 px-8 py-12 text-center">
+
+            <div x-show="!$store.ladillPayCheckout || !$store.ladillPayCheckout.frameable"
+                 class="flex min-h-[60dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center md:min-h-[28rem] md:px-8 md:py-12">
                 <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600" aria-hidden="true">
-                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
+                    <svg x-show="!checkoutUrl" class="h-6 w-6 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                    </svg>
+                    <svg x-show="checkoutUrl" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>
                     </svg>
                 </div>
-                <div class="max-w-sm space-y-1">
+                <div class="max-w-xs space-y-1 md:max-w-sm">
                     <p class="text-sm font-semibold text-slate-800"
-                       x-text="$store.ladillPayCheckout.popupBlocked ? 'Continue in a secure payment window' : 'Complete payment in the secure window'"></p>
+                       x-text="!checkoutUrl
+                          ? 'Starting secure checkout…'
+                          : 'Continue to Paystack to pay'"></p>
                     <p class="text-xs leading-snug text-slate-500">
-                        <span x-show="!$store.ladillPayCheckout.popupBlocked">A Paystack window should be open. If you do not see it, click continue below.</span>
-                        <span x-show="$store.ladillPayCheckout.popupBlocked">Your browser blocked the popup. Click continue to open Paystack.</span>
+                        <span x-show="!checkoutUrl">Please wait while we prepare your payment.</span>
+                        <span x-show="checkoutUrl">A secure Paystack window will open. Keep this page open until you finish.</span>
                     </p>
                 </div>
                 <button type="button"
+                        data-ladill-pay-continue
+                        x-show="checkoutUrl"
                         @click="$store.ladillPayCheckout.continueTo(checkoutUrl)"
                         class="inline-flex w-full max-w-xs items-center justify-center rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">
                     Continue to Paystack
@@ -330,7 +273,7 @@
             </div>
         </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">
+            <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500 md:px-5">
                 {{ $sheetFooter }}
             </p>
         @endif

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

@@ -2,7 +2,9 @@
     $content = $qrCode->content();
     $businessName = $content['business_name'] ?? $qrCode->label;
     $currency = $content['currency'] ?? 'GHS';
-    $payUrl = $qrCode->publicPath('pay');
+    // Same-origin pay endpoint — ladl.link publicPath is cross-origin from
+    // mini.ladill.com and has no CORS headers, so fetch() never reaches showSheet.
+    $payUrl = url('/q/'.$qrCode->short_code.'/pay');
     $csrf = csrf_token();
 @endphp
 <!DOCTYPE html>
@@ -166,7 +168,10 @@
                     }
                     this.errorMsg = '';
                     this.loading = true;
-                    window.LadillPayCheckout?.prepare?.();
+                    this.checkoutUrl = '';
+                    // Open sheet chrome immediately so mobile bottom sheet / desktop
+                    // modal is visible before Paystack (popup opens from Continue).
+                    this.showSheet = true;
                     const controller = new AbortController();
                     const timer = setTimeout(() => controller.abort(), 45000);
                     try {
@@ -186,12 +191,12 @@
                             ? data.error
                             : (typeof data.message === 'string' ? data.message : '');
                         if (!res.ok || apiError) {
-                            window.LadillPayCheckout?.cancel?.();
+                            this.showSheet = false;
                             this.errorMsg = apiError || ('Could not start payment (' + res.status + '). Please try again.');
                             return;
                         }
                         if (!data.checkout_url) {
-                            window.LadillPayCheckout?.cancel?.();
+                            this.showSheet = false;
                             this.errorMsg = 'Could not start payment. Please try again.';
                             return;
                         }
@@ -199,14 +204,13 @@
                         const useSheet = data.provider !== 'mtn_momo';
                         if (useSheet) {
                             this.checkoutUrl = data.checkout_url;
-                            this.showSheet = true;
                         } else {
-                            window.LadillPayCheckout?.cancel?.();
+                            this.showSheet = false;
                             window.location.assign(data.checkout_url);
                             return;
                         }
                     } catch (e) {
-                        window.LadillPayCheckout?.cancel?.();
+                        this.showSheet = false;
                         this.errorMsg = e?.name === 'AbortError'
                             ? 'Payment is taking too long. Please try again.'
                             : 'Network error. Please try again.';

tests/Feature/MiniPaymentCheckoutTest.php

@@ -43,11 +43,59 @@ class MiniPaymentCheckoutTest extends TestCase
             ->assertSee('Your payment is processed securely', false)
             ->assertSee('md:items-center', false)
             ->assertSee('Complete your payment', false)
+            ->assertSee('data-ladill-pay-sheet', false)
+            ->assertSee('/q/'.$qr->short_code.'/pay', false)
+            ->assertDontSee('https://ladl.link/'.$qr->short_code.'/pay', false)
             ->assertDontSee('MTN MoMo number', false)
             ->assertDontSee('Pay with MTN MoMo', false)
             ->assertDontSee('Paystack checkout', false);
     }
 
+    public function test_json_pay_post_is_not_redirected_to_ladill_link(): void
+    {
+        $user = User::create([
+            'public_id' => (string) Str::uuid(),
+            'name' => 'Vendor',
+            'email' => 'vendor-ajax@example.com',
+        ]);
+
+        $qr = QrCode::query()->create([
+            'user_id' => $user->id,
+            'short_code' => 'payajax01',
+            'type' => QrCode::TYPE_PAYMENT,
+            'label' => 'Till',
+            'payload' => [
+                'content' => [
+                    'business_name' => 'Accra Kiosk',
+                    'currency' => 'GHS',
+                ],
+                'style' => [],
+            ],
+            'is_active' => true,
+        ]);
+
+        $pay = Mockery::mock(PayClient::class);
+        $pay->shouldReceive('createCheckout')
+            ->once()
+            ->andReturn([
+                'id' => 100,
+                'reference' => 'LP-TESTMINIAjax01',
+                'checkout_url' => 'https://checkout.paystack.com/mini-ajax',
+                'provider' => 'paystack',
+                'platform_fee_minor' => 15,
+                'merchant_amount_minor' => 985,
+            ]);
+        $this->app->instance(PayClient::class, $pay);
+
+        // No INTERNAL header — XHR/JSON must still hit Mini, not 307 to ladl.link.
+        $this->postJson('/q/'.$qr->short_code.'/pay', [
+            'amount' => 10,
+        ])
+            ->assertOk()
+            ->assertJsonPath('checkout_url', 'https://checkout.paystack.com/mini-ajax')
+            ->assertJsonPath('provider', 'paystack');
+    }
+
     public function test_pay_initiation_does_not_require_phone_and_returns_paystack_checkout(): void
     {
         $user = User::create([

tests/Feature/ResponsivePaystackSheetTest.php

@@ -14,21 +14,32 @@ class ResponsivePaystackSheetTest extends TestCase
 
         $this->assertStringContainsString('role="dialog"', $html);
         $this->assertStringContainsString('aria-modal="true"', $html);
+        $this->assertStringContainsString('data-ladill-pay-sheet', $html);
+        $this->assertStringContainsString('data-ladill-pay-panel', $html);
+        $this->assertStringContainsString('data-ladill-pay-backdrop', $html);
+        $this->assertStringContainsString('data-ladill-pay-handle', $html);
+        $this->assertStringContainsString('data-ladill-pay-continue', $html);
         $this->assertStringContainsString('md:items-center', $html);
         $this->assertStringContainsString('rounded-t-2xl', $html);
-        $this->assertStringContainsString('md:h-[min(720px,85vh)]', $html);
+        $this->assertStringContainsString('md:rounded-2xl', $html);
+        $this->assertStringContainsString('md:max-w-lg', $html);
         $this->assertStringContainsString('Complete your payment', $html);
         $this->assertStringContainsString('safe-area-inset-bottom', $html);
         $this->assertStringContainsString('LadillPayCheckout', $html);
         $this->assertStringContainsString('Continue to Paystack', $html);
-        $this->assertStringContainsString('ladill_pay_checkout', $html);
+        $this->assertStringContainsString('Starting secure checkout', $html);
         $this->assertStringContainsString('prepare:', $html);
+        $this->assertStringNotContainsString('hidden w-full max-w-lg', $html);
         $this->assertStringNotContainsString('Paystack checkout', $html);
     }
 
     public function test_payment_return_escapes_popup_and_iframe_to_opener_or_top(): void
     {
-        $html = view('public.payment-return', [
+        $view = view()->exists('partials.payment-return')
+            ? 'partials.payment-return'
+            : 'public.payment-return';
+
+        $html = view($view, [
             'redirect' => 'https://example.test/paid',
         ])->render();