From 97cd3c8647050d3172af8945c759a80612d42c99 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Thu, 23 Jul 2026 22:43:42 +0000
Subject: [PATCH] Render Paystack flush in the sheet loading area without a
 second stage.

Drop host shadows and keep the iframe transparent so checkout fills the
Ladill sheet body instead of floating as a second card.
---
 .../views/partials/paystack-sheet.blade.php   | 84 +++++++++++++------
 1 file changed, 58 insertions(+), 26 deletions(-)

diff --git a/resources/views/partials/paystack-sheet.blade.php b/resources/views/partials/paystack-sheet.blade.php
index 3c63f5e..13da3c6 100644
--- a/resources/views/partials/paystack-sheet.blade.php
+++ b/resources/views/partials/paystack-sheet.blade.php
@@ -378,6 +378,7 @@
             iframe.setAttribute('data-ladill-pay-mode', 'mount');
             var s = iframe.style;
             // Absolute fill of mount — NOT position:fixed 100% (that always paints viewport).
+            // Transparent so we don't paint a second white surface under Paystack's card.
             s.setProperty('position', 'absolute', 'important');
             s.setProperty('left', '0', 'important');
             s.setProperty('top', '0', 'important');
@@ -391,12 +392,14 @@
             s.setProperty('padding', '0', 'important');
             s.setProperty('border', '0', 'important');
             s.setProperty('border-radius', '0', 'important');
+            s.setProperty('box-shadow', 'none', 'important');
+            s.setProperty('filter', 'none', 'important');
             s.setProperty('z-index', '2', 'important');
             s.setProperty('visibility', 'visible', 'important');
             s.setProperty('display', 'block', 'important');
             s.setProperty('opacity', '1', 'important');
-            s.setProperty('background', '#fff', 'important');
-            s.setProperty('background-color', '#fff', 'important');
+            s.setProperty('background', 'transparent', 'important');
+            s.setProperty('background-color', 'transparent', 'important');
             s.setProperty('pointer-events', 'auto', 'important');
             s.setProperty('color-scheme', 'light', 'important');
             s.setProperty('transform', 'none', 'important');
@@ -428,12 +431,14 @@
             s.setProperty('padding', '0', 'important');
             s.setProperty('border', '0', 'important');
             s.setProperty('border-radius', '0', 'important');
+            s.setProperty('box-shadow', 'none', 'important');
+            s.setProperty('filter', 'none', 'important');
             s.setProperty('z-index', '10050', 'important');
             s.setProperty('visibility', 'visible', 'important');
             s.setProperty('display', 'block', 'important');
             s.setProperty('opacity', '1', 'important');
-            s.setProperty('background', '#fff', 'important');
-            s.setProperty('background-color', '#fff', 'important');
+            s.setProperty('background', 'transparent', 'important');
+            s.setProperty('background-color', 'transparent', 'important');
             s.setProperty('pointer-events', 'auto', 'important');
             s.setProperty('color-scheme', 'light', 'important');
             s.setProperty('transform', 'none', 'important');
@@ -971,7 +976,7 @@
 })();
 </script>
 @endonce
-{{-- Keep Paystack checkout inside the Ladill sheet loading area. --}}
+{{-- Keep Paystack checkout flush inside the Ladill sheet loading area (no double card). --}}
 @once('ladill-paystack-contain-css')
 <style>
     /* Hide Paystack's own full-screen dimmer — Ladill backdrop owns that. */
@@ -987,6 +992,7 @@
         left: -9999px !important;
         top: -9999px !important;
         position: fixed !important;
+        box-shadow: none !important;
     }
 
     [data-ladill-pay-mount] {
@@ -995,7 +1001,6 @@
         overflow: hidden;
         background: #fff;
         min-height: 12rem;
-        /* Containing block so fixed children cannot escape the sheet body. */
         transform: translateZ(0);
         isolation: isolate;
     }
@@ -1003,16 +1008,29 @@
         display: block !important;
         visibility: visible !important;
         pointer-events: auto !important;
-    }
-    html.ladill-pay-inline-active [data-ladill-pay-panel] {
-        /* Ensure panel is a stacking context above page content. */
-        z-index: 1;
+        background: transparent !important;
+        /* Clip Paystack's internal card shadow so it doesn't float over empty chrome. */
+        overflow: hidden !important;
     }
     html.ladill-pay-inline-active [data-ladill-pay-sheet] {
         z-index: 9999 !important;
     }
 
-    /* Preferred: iframe lives inside the mount and fills it. */
+    /* Live: one flat surface — no second elevated white stage under the iframe. */
+    html.ladill-pay-inline-active [data-ladill-pay-panel][data-paystack-live="1"] {
+        box-shadow: none !important;
+        background: #fff !important;
+    }
+    html.ladill-pay-inline-active [data-ladill-pay-panel][data-paystack-live="1"] [data-ladill-pay-body] {
+        background: transparent !important;
+        min-height: 0 !important;
+    }
+    html.ladill-pay-inline-active [data-ladill-pay-panel][data-paystack-live="1"] [data-ladill-pay-header-minimal] {
+        border-bottom-color: transparent !important;
+        background: #fff !important;
+    }
+
+    /* Preferred: iframe fills the loading area edge-to-edge, no host shadow. */
     html.ladill-pay-inline-active [data-ladill-pay-mount] iframe[id^="inline-checkout"],
     html.ladill-pay-inline-active [data-ladill-pay-mount] iframe[id^="embed-checkout"],
     html.ladill-pay-inline-active [data-ladill-pay-mount] iframe[data-ladill-pay-contained],
@@ -1030,12 +1048,14 @@
         padding: 0 !important;
         border: 0 !important;
         border-radius: 0 !important;
+        box-shadow: none !important;
+        filter: none !important;
         z-index: 2 !important;
         visibility: visible !important;
         display: block !important;
         opacity: 1 !important;
-        background: #fff !important;
-        background-color: #fff !important;
+        background: transparent !important;
+        background-color: transparent !important;
         color-scheme: light !important;
         pointer-events: auto !important;
         transform: none !important;
@@ -1043,7 +1063,7 @@
 
     /*
       Fallback when the frame stays on body: pin with measured pixels.
-      Default 0×0 until JS measures the sheet body (never flash full viewport).
+      Transparent + no shadow so it reads as the sheet body, not a second modal.
     */
     html.ladill-pay-inline-active body > iframe[id^="inline-checkout"],
     html.ladill-pay-inline-active body > iframe[id^="embed-checkout"],
@@ -1061,12 +1081,14 @@
         padding: 0 !important;
         border: 0 !important;
         border-radius: 0 !important;
+        box-shadow: none !important;
+        filter: none !important;
         z-index: 10050 !important;
         visibility: visible !important;
         display: block !important;
         opacity: 1 !important;
-        background: #fff !important;
-        background-color: #fff !important;
+        background: transparent !important;
+        background-color: transparent !important;
         color-scheme: light !important;
         pointer-events: auto !important;
         transform: none !important;
@@ -1132,12 +1154,14 @@
          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"
-         class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl md:rounded-2xl"
+         class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:rounded-2xl"
          :data-paystack-live="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable) ? '1' : '0'"
          :class="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable)
-            ? 'md:max-w-3xl'
-            : 'md:max-w-lg'"
-         style="height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
+            ? 'shadow-none ring-1 ring-black/10 md:max-w-[min(100vw-2rem,720px)]'
+            : 'shadow-2xl md:max-w-lg'"
+         :style="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable)
+            ? 'height: min(88dvh, 640px); max-height: 88dvh; padding-bottom: 0;'
+            : 'height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px);'"
          @click.stop>
 
         {{-- Full header while loading / error / same-origin; compact bar once Paystack fills the body --}}
@@ -1175,7 +1199,7 @@
                      && !$store.ladillPayCheckout.launching
                      && !$store.ladillPayCheckout.error
                      && !$store.ladillPayCheckout.frameable"
-             class="relative z-20 flex shrink-0 items-center justify-between border-b border-slate-100 px-3 pb-2 pt-3 md:px-4 md:pt-2"
+             class="relative z-20 flex shrink-0 items-center justify-between px-3 pb-2 pt-3 md:px-4 md:pt-2"
              style="padding-top: max(0.75rem, env(safe-area-inset-top, 0px))"
              data-ladill-pay-header-minimal>
             <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>
@@ -1191,20 +1215,28 @@
             </button>
         </div>
 
-        {{-- Body: spinner while starting; Paystack fills this when ready --}}
-        <div class="relative min-h-0 flex-1 overflow-hidden overscroll-contain bg-white"
+        {{-- Body: spinner while starting; Paystack fills this flush when ready (no second card stage) --}}
+        <div class="relative min-h-0 flex-1 overflow-hidden overscroll-contain"
              data-ladill-pay-body
-             style="min-height: 22rem">
+             :class="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable)
+                ? 'bg-transparent'
+                : 'bg-white'"
+             :style="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable)
+                ? 'min-height: 0;'
+                : 'min-height: 22rem;'">
             <iframe x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.frameable"
                     :src="showSheet && $store.ladillPayCheckout && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
                     class="absolute inset-0 h-full w-full border-0"
                     allow="payment *; fullscreen *; clipboard-read *; clipboard-write *"
                     title="{{ $iframeTitle }}"></iframe>
 
-            {{-- Pin target for Paystack: keep in layout while inline checkout is active. --}}
+            {{-- Loading-area mount: Paystack fills this edge-to-edge when live. --}}
             <div x-show="!$store.ladillPayCheckout || !$store.ladillPayCheckout.frameable"
                  data-ladill-pay-mount
-                 class="absolute inset-0 bg-white"
+                 class="absolute inset-0"
+                 :class="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error)
+                    ? 'bg-transparent'
+                    : 'bg-white'"
                  style="min-height: 12rem"
                  aria-hidden="true"></div>