From daf40f831bc20189cca3ce7f0cfb879fd55b7a5c Mon Sep 17 00:00:00 2001 From: isaacclad Date: Tue, 21 Jul 2026 23:02:59 +0000 Subject: [PATCH] Tighten payment sheet UI to match POS single-surface checkout. When Paystack Inline is ready: widen desktop panel for channel sidebar, collapse to a minimal header, hide footer trust line, and re-pin the checkout iframe to the sheet body so it does not read as a second modal on top of Ladill chrome. --- .../views/partials/paystack-sheet.blade.php | 122 ++++++++++++++++-- 1 file changed, 112 insertions(+), 10 deletions(-) diff --git a/resources/views/partials/paystack-sheet.blade.php b/resources/views/partials/paystack-sheet.blade.php index 040a60b..88d86f9 100644 --- a/resources/views/partials/paystack-sheet.blade.php +++ b/resources/views/partials/paystack-sheet.blade.php @@ -312,6 +312,19 @@ } catch (e) {} } + function syncPaystackMountBox() { + try { + var mount = getPaystackMount(); + if (!mount || !window.__ladillContainPaystack) return; + var rect = mount.getBoundingClientRect(); + var root = document.documentElement; + root.style.setProperty('--ladill-pay-left', Math.max(0, Math.round(rect.left)) + 'px'); + root.style.setProperty('--ladill-pay-top', Math.max(0, Math.round(rect.top)) + 'px'); + root.style.setProperty('--ladill-pay-width', Math.max(0, Math.round(rect.width)) + 'px'); + root.style.setProperty('--ladill-pay-height', Math.max(0, Math.round(rect.height)) + 'px'); + } catch (e) {} + } + function setPaystackContainActive(active) { window.__ladillContainPaystack = !!active; try { @@ -321,6 +334,20 @@ installIframeAllowHook(); installAppendHook(); ensurePaystackContained(document); + syncPaystackMountBox(); + if (!window.__ladillPayMountResizeBound) { + window.__ladillPayMountResizeBound = true; + window.addEventListener('resize', syncPaystackMountBox, { passive: true }); + window.addEventListener('orientationchange', syncPaystackMountBox, { passive: true }); + } + } else { + try { + var root = document.documentElement; + root.style.removeProperty('--ladill-pay-left'); + root.style.removeProperty('--ladill-pay-top'); + root.style.removeProperty('--ladill-pay-width'); + root.style.removeProperty('--ladill-pay-height'); + } catch (e) {} } } @@ -550,6 +577,13 @@ store.launching = false; ensurePaystackIframePermissions(document); ensurePaystackContained(document); + // After Alpine hides the loading overlay, re-measure mount and re-pin iframe. + setTimeout(function () { + ensurePaystackContained(document); + syncPaystackMountBox(); + }, 0); + setTimeout(syncPaystackMountBox, 120); + setTimeout(syncPaystackMountBox, 400); }, onSuccess: function (transaction) { if (token !== store._launchToken) return; @@ -647,6 +681,7 @@ overflow: hidden; background: #fff; } + /* Paystack draws its own modal chrome inside the iframe — give it the full body. */ [data-ladill-pay-mount] iframe[data-ladill-pay-contained], [data-ladill-pay-mount] iframe[id^="inline-checkout"], [data-ladill-pay-mount] iframe[id^="embed-checkout"] { @@ -662,10 +697,31 @@ margin: 0 !important; padding: 0 !important; border: 0 !important; + border-radius: 0 !important; z-index: 2 !important; visibility: visible !important; display: block !important; - background: transparent !important; + background: #fff !important; + color-scheme: light !important; + } + /* If a Paystack frame escapes the mount, pin it over the panel body instead of full viewport. */ + html.ladill-pay-inline-active body > iframe[id^="inline-checkout"], + html.ladill-pay-inline-active body > iframe[id^="embed-checkout"] { + position: fixed !important; + /* Fallback rect; JS updates these CSS vars from the mount box. */ + left: var(--ladill-pay-left, 0) !important; + top: var(--ladill-pay-top, 0) !important; + width: var(--ladill-pay-width, 100%) !important; + height: var(--ladill-pay-height, 100%) !important; + max-width: none !important; + max-height: none !important; + margin: 0 !important; + border: 0 !important; + border-radius: 0 !important; + z-index: 10000 !important; + visibility: visible !important; + display: block !important; + background: #fff !important; } @endonce @@ -714,10 +770,18 @@ @click="showSheet = false; window.LadillPayCheckout?.cancel?.()"> - {{-- Always wrap payment: bottom sheet on mobile, centered modal on desktop. --}} + {{-- + Single payment surface (same pattern as POS): + - Mobile: bottom sheet + - Desktop: centered modal, wide enough for Paystack channel sidebar + - When Inline is ready: minimal chrome so Paystack fills the body (no double header/footer) + --}}
-
+ + {{-- Full title header only while loading / error / same-origin frame --}} +
@@ -748,10 +820,32 @@
- {{-- Body: Paystack mounts here (same area as the spinner). No second full-screen modal. --}} -
+ +

{{ $sheetTitle }}

+ +
+ + {{-- Body: Paystack mounts here (same area as the spinner). --}} +
+ style="min-height: 22rem"> {{-- Same-origin waiting pages (e.g. MoMo status) --}}