Stop Paystack pre-modal flash on customer checkout.

Use the shared Inline sheet, hold busy until payment UI opens, and avoid locking page scroll during the handoff.

resources/js/app.js

@@ -183,6 +183,8 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
     errorMsg: config.errorMsg ?? '',
     showSheet: false,
     checkoutUrl: '',
+    accessCode: '',
+    returnUrl: '',
     paymentSheetStyle: '',
     sheetBleedStyle: '',
 
@@ -259,9 +261,10 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
                 this.loading = false;
                 return;
             }
-            this.checkoutUrl = data.checkout_url;
+            this.checkoutUrl = data.checkout_url || data.authorization_url || '';
-            this.showSheet = true;
+            this.accessCode = data.access_code || '';
-            this.loading = false;
+            this.returnUrl = data.callback_url || this.returnUrl || '';
+            this.showSheet = true; // loading cleared when payment UI opens (ladill-pay-opened)
         } catch (e) {
             window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
             this.loading = false;

tests/Feature/ResponsivePaystackSheetTest.php

@@ -18,39 +18,52 @@ class ResponsivePaystackSheetTest extends TestCase
         $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-inline-status', $html);
         $this->assertStringContainsString('md:items-center', $html);
         $this->assertStringContainsString('rounded-t-2xl', $html);
         $this->assertStringContainsString('md:rounded-2xl', $html);
         $this->assertStringContainsString('md:max-w-lg', $html);
         $this->assertStringContainsString('data-paystack-live', $html);
         $this->assertStringContainsString('data-ladill-pay-close-live', $html);
+        $this->assertStringContainsString('data-ladill-pay-header-minimal', $html);
         $this->assertStringContainsString('Complete your payment', $html);
         $this->assertStringContainsString('safe-area-inset-bottom', $html);
         $this->assertStringContainsString('LadillPayCheckout', $html);
         $this->assertStringContainsString('resumeTransaction', $html);
         $this->assertStringContainsString("\$watch('showSheet'", $html);
         $this->assertStringContainsString('js.paystack.co/v2/inline.js', $html);
-        $this->assertStringContainsString('Paystack owns its secure checkout popup', $html);
         $this->assertStringContainsString('items-end justify-center md:items-center', $html);
-        // Cross-origin checkout needs fullscreen delegated on the iframe + parent policy.
+        $this->assertStringContainsString('rounded-t-2xl bg-white shadow-2xl md:max-w-lg md:rounded-2xl', $html);
         $this->assertStringContainsString('ensurePaystackIframePermissions', $html);
         $this->assertStringContainsString('installIframeAllowHook', $html);
         $this->assertStringContainsString('fullscreen *', $html);
-        $this->assertStringContainsString("attributeFilter: ['allow', 'src', 'id', 'name', 'style', 'class']", $html);
+        $this->assertStringNotContainsString("attributeFilter: ['allow', 'src', 'id', 'name', 'style', 'class']", $html);
-        // Paystack must load inside the Ladill sheet mount — not a second full-screen modal.
+        $this->assertStringContainsString('childList only', $html);
+        $this->assertStringContainsString('Only write attributes when they actually change', $html);
+        $this->assertStringContainsString('Do not watch iframes or preload Paystack on every page', $html);
         $this->assertStringContainsString('data-ladill-pay-mount', $html);
-        $this->assertStringContainsString('setPaystackContainActive', $html);
+        $this->assertStringContainsString('data-ladill-pay-body', $html);
-        $this->assertStringContainsString('installAppendHook', $html);
+        $this->assertStringNotContainsString('styleCheckoutPinnedToRect', $html);
-        $this->assertStringContainsString('ladill-pay-inline-active', $html);
+        $this->assertStringNotContainsString('waitForPinTarget', $html);
-        // Must not push Paystack to a separate browser as the primary path.
+        $this->assertStringNotContainsString('placeCheckoutInMount', $html);
+        $this->assertStringNotContainsString('installAppendHook', $html);
+        $this->assertStringNotContainsString('__ladillContainPaystack', $html);
+        $this->assertStringNotContainsString('Node.prototype.appendChild', $html);
+        $this->assertStringNotContainsString('data-ladill-pay-inline-status', $html);
+        $this->assertStringNotContainsString('Please wait', $html);
+        $this->assertStringContainsString('Payment UI did not open', $html);
+        $this->assertStringContainsString('ladill-pay-opened', $html);
+        $this->assertStringContainsString('Only lock page scroll when OUR shell is visible', $html);
+        $this->assertStringContainsString('releaseBusy', $html);
+        $this->assertStringContainsString('markOpened', $html);
         $this->assertStringNotContainsString('Continue to Paystack', $html);
         $this->assertStringNotContainsString('window.open(', $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);
+        $this->assertStringNotContainsString('bg-transparent shadow-none', $html);
+        $this->assertStringNotContainsString('not in a separate browser', $html);
     }
 
+
     public function test_payment_return_escapes_popup_and_iframe_to_opener_or_top(): void
     {
         $view = view()->exists('partials.payment-return')