Fix Mini payment bottomsheet wrap and Inline launch.

Always show the mobile bottomsheet/desktop modal shell, extract access_code
from checkout URLs when needed, and open the sheet immediately on Pay.

resources/js/app.js

@@ -231,6 +231,21 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
         }
     },
 
+    accessCodeFromCheckoutUrl(url) {
+        if (!url) return '';
+        try {
+            const u = new URL(url, window.location.href);
+            const host = u.hostname.toLowerCase();
+            if (host !== 'checkout.paystack.com' && !host.endsWith('.paystack.com')) {
+                return '';
+            }
+            const code = u.pathname.replace(/^\/+/, '').split('/')[0] || '';
+            return /^[A-Za-z0-9_-]{6,}$/.test(code) ? code : '';
+        } catch (e) {
+            return '';
+        }
+    },
+
     openInlineCheckout(data = {}) {
         // Never navigate to checkout.paystack.com. Same-origin MoMo waiting can navigate.
         if (data.provider === 'mtn_momo' && this.isSameOrigin(data.checkout_url)) {
@@ -238,8 +253,14 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
             return false;
         }
 
-        this.checkoutUrl = data.checkout_url || '';
-        this.accessCode = data.access_code || '';
+        const checkoutUrl = data.checkout_url || '';
+        let accessCode = data.access_code || '';
+        if (!accessCode) {
+            accessCode = this.accessCodeFromCheckoutUrl(checkoutUrl);
+        }
+
+        this.checkoutUrl = checkoutUrl;
+        this.accessCode = accessCode;
         this.publicKey = data.public_key || '';
         this.returnUrl = data.callback_url || '';
         this.showSheet = true;
@@ -259,8 +280,8 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
         this.accessCode = '';
         this.publicKey = '';
         this.returnUrl = '';
-        // Keep sheet closed until we have a checkout payload so Inline syncs once with access_code.
-        this.showSheet = false;
+        // Open bottomsheet/modal immediately so payment feels in-app while checkout starts.
+        this.showSheet = true;
 
         const controller = new AbortController();
         const timer = setTimeout(() => controller.abort(), 45000);

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

@@ -296,43 +296,17 @@
             );
         }
      "
-     @keydown.escape.window="if (showSheet && $store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error || $store.ladillPayCheckout.launching)) showSheet = false"
+     @keydown.escape.window="if (showSheet) showSheet = false"
      @ladill-pay-cancelled.window="showSheet = false"
-     class="fixed inset-0 z-[9999]"
-     :class="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable) ? 'pointer-events-none' : ''"
+     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 }}">
 
-    {{-- Brief loader only — then Paystack Inline is the sole payment UI (avoids double modal). --}}
-    <div x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error"
-         x-cloak
-         data-ladill-pay-loading
-         class="pointer-events-auto absolute inset-0 flex items-center justify-center bg-black/40 p-6"
-         x-transition:enter="transition-opacity duration-200"
-         x-transition:enter-start="opacity-0"
-         x-transition:enter-end="opacity-100"
-         x-transition:leave="transition-opacity duration-150"
-         x-transition:leave-start="opacity-100"
-         x-transition:leave-end="opacity-0">
-        <div class="flex items-center gap-3 rounded-2xl bg-white px-5 py-4 shadow-xl">
-            <svg class="h-5 w-5 animate-spin text-indigo-600" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-                <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>
-            <p class="text-sm font-semibold text-slate-800">Opening payment…</p>
-        </div>
-    </div>
-
-    {{-- Full Ladill shell only for same-origin iframe (e.g. MoMo waiting) or recovery errors. --}}
-    <div x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
-         x-cloak
-         class="pointer-events-auto absolute inset-0 flex items-end justify-center md:items-center md:p-6"
-         data-ladill-pay-shell>
     <div class="absolute inset-0 bg-black/60"
          data-ladill-pay-backdrop
-             x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
+         x-show="showSheet"
          x-transition:enter="transition-opacity duration-300"
          x-transition:enter-start="opacity-0"
          x-transition:enter-end="opacity-100"
@@ -342,10 +316,11 @@
          @click="showSheet = false; window.LadillPayCheckout?.cancel?.()">
     </div>
 
+    {{-- Always wrap payment: bottom sheet on mobile, centered modal on desktop. --}}
     <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="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
+         x-show="showSheet"
          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"
@@ -383,20 +358,40 @@
                     allow="payment *"
                     title="{{ $iframeTitle }}"></iframe>
 
-                <div x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
-                     class="flex min-h-[40dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center md:min-h-[20rem] md:px-8 md:py-12"
+            <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"
                  data-ladill-pay-inline-status>
-                    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-red-50 text-red-500" aria-hidden="true">
-                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
+                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600" aria-hidden="true">
+                    <svg x-show="!$store.ladillPayCheckout || $store.ladillPayCheckout.launching || $store.ladillPayCheckout && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.inline"
+                         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="$store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error"
+                         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>
+                    <svg x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
+                         class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/>
                     </svg>
                 </div>
                 <div class="max-w-xs space-y-1 md:max-w-sm">
-                        <p class="text-sm font-semibold text-slate-800" data-ladill-pay-status-title>Checkout unavailable</p>
-                        <p class="text-xs leading-snug text-slate-500" x-text="$store.ladillPayCheckout.error"></p>
+                    <p class="text-sm font-semibold text-slate-800"
+                       data-ladill-pay-status-title
+                       x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
+                          ? 'Checkout unavailable'
+                          : ($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching
+                              ? 'Complete payment on this screen'
+                              : 'Starting secure checkout…')"></p>
+                    <p class="text-xs leading-snug text-slate-500"
+                       x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
+                          ? $store.ladillPayCheckout.error
+                          : 'Secure card and mobile money checkout opens on this page — not in a separate browser.'"></p>
                 </div>
                 <button type="button"
                         data-ladill-pay-retry
+                        x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
                         @click="$store.ladillPayCheckout.sync(true, typeof checkoutUrl !== 'undefined' ? checkoutUrl : '', typeof accessCode !== 'undefined' ? accessCode : '', typeof returnUrl !== 'undefined' ? returnUrl : '')"
                         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">
                     Try again
@@ -414,6 +409,5 @@
             </p>
         @endif
     </div>
-    </div>
 </div>
 </template>

tests/Feature/MiniPaymentCheckoutTest.php

@@ -44,7 +44,7 @@ class MiniPaymentCheckoutTest extends TestCase
             ->assertSee('md:items-center', false)
             ->assertSee('Complete your payment', false)
             ->assertSee('data-ladill-pay-sheet', false)
-            ->assertSee('data-ladill-pay-loading', false)
+            ->assertSee('data-ladill-pay-panel', false)
             ->assertSee('resumeTransaction', false)
             ->assertSee('/q/'.$qr->short_code.'/pay', false)
             ->assertDontSee('https://ladl.link/'.$qr->short_code.'/pay', false)

tests/Feature/ResponsivePaystackSheetTest.php

@@ -28,13 +28,13 @@ class ResponsivePaystackSheetTest extends TestCase
         $this->assertStringContainsString('LadillPayCheckout', $html);
         $this->assertStringContainsString('resumeTransaction', $html);
         $this->assertStringContainsString('js.paystack.co/v2/inline.js', $html);
-        $this->assertStringContainsString('Opening payment', $html);
-        $this->assertStringContainsString('data-ladill-pay-loading', $html);
-        $this->assertStringContainsString('pointer-events-none', $html);
+        $this->assertStringContainsString('Starting secure checkout', $html);
+        $this->assertStringContainsString('Complete payment on this screen', $html);
+        $this->assertStringContainsString('not in a separate browser', $html);
+        $this->assertStringContainsString('items-end justify-center md:items-center', $html);
         // Must not push Paystack to a separate browser as the primary path.
         $this->assertStringNotContainsString('Continue to Paystack', $html);
         $this->assertStringNotContainsString('window.open(', $html);
-        $this->assertStringNotContainsString('Complete payment in the Paystack window', $html);
         // Must not use Tailwind `hidden` + x-show on the panel (desktop stays invisible).
         $this->assertStringNotContainsString('hidden w-full max-w-lg', $html);
         $this->assertStringNotContainsString('Paystack checkout', $html);