From a50dc46796743f9423d242c88a2abd83d2621b07 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Thu, 23 Jul 2026 22:57:46 +0000
Subject: [PATCH] Simplify pay wait copy and scale Paystack to fill the loading
 area.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use “Please wait…” while loading, and scale the contained Paystack iframe so
checkout fills the sheet body without a floating second card.
---
 .../views/partials/paystack-sheet.blade.php   | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/resources/views/partials/paystack-sheet.blade.php b/resources/views/partials/paystack-sheet.blade.php
index 13da3c6..558f236 100644
--- a/resources/views/partials/paystack-sheet.blade.php
+++ b/resources/views/partials/paystack-sheet.blade.php
@@ -402,7 +402,10 @@
             s.setProperty('background-color', 'transparent', 'important');
             s.setProperty('pointer-events', 'auto', 'important');
             s.setProperty('color-scheme', 'light', 'important');
-            s.setProperty('transform', 'none', 'important');
+            // Scale up so Paystack's centered card fills the loading area; mount clips
+            // letterbox margins and the card's drop-shadow (cross-origin, can't restyle).
+            s.setProperty('transform', 'scale(1.32)', 'important');
+            s.setProperty('transform-origin', 'center center', 'important');
             applyIframePermissions(iframe);
         } catch (e) {}
     }
@@ -441,7 +444,8 @@
             s.setProperty('background-color', 'transparent', 'important');
             s.setProperty('pointer-events', 'auto', 'important');
             s.setProperty('color-scheme', 'light', 'important');
-            s.setProperty('transform', 'none', 'important');
+            s.setProperty('transform', 'scale(1.32)', 'important');
+            s.setProperty('transform-origin', 'center center', 'important');
             applyIframePermissions(iframe);
         } catch (e) {}
     }
@@ -1030,7 +1034,10 @@
         background: #fff !important;
     }
 
-    /* Preferred: iframe fills the loading area edge-to-edge, no host shadow. */
+    /*
+      Scale Paystack's centered card so it fills the loading area.
+      Mount overflow:hidden clips the letterbox margins + Paystack's own card 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],
@@ -1058,13 +1065,10 @@
         background-color: transparent !important;
         color-scheme: light !important;
         pointer-events: auto !important;
-        transform: none !important;
+        transform: scale(1.32) !important;
+        transform-origin: center center !important;
     }
 
-    /*
-      Fallback when the frame stays on body: pin with measured pixels.
-      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"],
     html.ladill-pay-inline-active iframe[data-ladill-pay-mode="pin"] {
@@ -1091,7 +1095,8 @@
         background-color: transparent !important;
         color-scheme: light !important;
         pointer-events: auto !important;
-        transform: none !important;
+        transform: scale(1.32) !important;
+        transform-origin: center center !important;
     }
 </style>
 @endonce
@@ -1157,10 +1162,10 @@
          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)
-            ? 'shadow-none ring-1 ring-black/10 md:max-w-[min(100vw-2rem,720px)]'
+            ? 'shadow-none ring-1 ring-black/10 md:max-w-[min(100vw-1.5rem,760px)]'
             : '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, 700px); max-height: 90dvh; padding-bottom: 0;'
             : 'height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px);'"
          @click.stop>
 
@@ -1267,11 +1272,12 @@
                        data-ladill-pay-status-title
                        x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
                           ? 'Checkout unavailable'
-                          : 'Starting secure checkout…'"></p>
+                          : 'Please wait…'"></p>
                     <p class="text-xs leading-snug text-slate-500"
+                       x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
                        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>
+                          : ''"></p>
                 </div>
                 <button type="button"
                         data-ladill-pay-retry