Contain Paystack Inline checkout inside Ladill sheet mount.

Redirect Paystack iframes into the bottomsheet/modal body (where the spinner is) instead of allowing a second full-viewport Paystack modal on top. Hide Paystack background dimmer; keep Ladill header/close chrome.
2026-07-21 22:31:56 +00:00
parent bd8764523c
commit e99e64b517
2 changed files with 269 additions and 35 deletions
@@ -145,15 +145,31 @@
            }
        } catch (e) {}
        activePopup = null;
+        setPaystackContainActive(false);
    }

-    // Paystack Inline embeds checkout.paystack.com. Browsers default fullscreen to
-    // 'self', so cross-origin checkout needs allow="fullscreen" before navigation.
-    // Patch early (createElement hook + MutationObserver) and re-apply if Paystack
-    // overwrites allow without fullscreen.
+    // Paystack Inline defaults to a full-viewport modal (body append + position:fixed).
+    // We contain it inside our bottomsheet/modal mount so checkout loads where the
+    // spinner is — not as a second modal on top of Ladill chrome.
    var PAYSTACK_IFRAME_ALLOW = 'payment *; fullscreen *; clipboard-read *; clipboard-write *; publickey-credentials-get *';
    var PAYSTACK_ALLOW_FEATURES = ['payment', 'fullscreen', 'clipboard-read', 'clipboard-write', 'publickey-credentials-get'];

+    function getPaystackMount() {
+        return document.querySelector('[data-ladill-pay-mount]');
+    }
+
+    function isPaystackCheckoutFrame(iframe) {
+        if (!iframe || !iframe.tagName || iframe.tagName.toUpperCase() !== 'IFRAME') return false;
+        var id = (iframe.id || '').toLowerCase();
+        return id.indexOf('inline-checkout') === 0 || id.indexOf('embed-checkout') === 0;
+    }
+
+    function isPaystackBackgroundFrame(iframe) {
+        if (!iframe || !iframe.tagName || iframe.tagName.toUpperCase() !== 'IFRAME') return false;
+        var id = (iframe.id || '').toLowerCase();
+        return id.indexOf('inline-background') === 0;
+    }
+
    function isPaystackIframe(iframe) {
        if (!iframe || !iframe.tagName || iframe.tagName.toUpperCase() !== 'IFRAME') return false;
        var id = (iframe.id || '').toLowerCase();
@@ -165,6 +181,7 @@
            || id.indexOf('paystack') !== -1
            || id.indexOf('inline-checkout') !== -1
            || id.indexOf('inline-background') !== -1
+            || id.indexOf('embed-checkout') !== -1
            || name.indexOf('paystack') !== -1
            || name.indexOf('inline-checkout') !== -1;
    }
@@ -196,13 +213,94 @@
        } catch (e) {}
    }

+    function styleContainedCheckout(iframe) {
+        if (!iframe) return;
+        try {
+            iframe.setAttribute('data-ladill-pay-contained', '1');
+            // Force embed layout; Paystack sets position:fixed inline without !important.
+            var s = iframe.style;
+            s.setProperty('position', 'absolute', 'important');
+            s.setProperty('left', '0', 'important');
+            s.setProperty('top', '0', 'important');
+            s.setProperty('right', '0', 'important');
+            s.setProperty('bottom', '0', 'important');
+            s.setProperty('width', '100%', 'important');
+            s.setProperty('height', '100%', 'important');
+            s.setProperty('margin', '0', 'important');
+            s.setProperty('padding', '0', 'important');
+            s.setProperty('border', '0', 'important');
+            s.setProperty('z-index', '2', 'important');
+            s.setProperty('visibility', 'visible', 'important');
+            s.setProperty('display', 'block', 'important');
+            s.setProperty('background', 'transparent', 'important');
+            s.setProperty('max-width', 'none', 'important');
+            s.setProperty('max-height', 'none', 'important');
+            applyIframePermissions(iframe);
+        } catch (e) {}
+    }
+
+    function hidePaystackBackground(iframe) {
+        if (!iframe) return;
+        try {
+            iframe.setAttribute('data-ladill-pay-bg-hidden', '1');
+            var s = iframe.style;
+            s.setProperty('display', 'none', 'important');
+            s.setProperty('visibility', 'hidden', 'important');
+            s.setProperty('pointer-events', 'none', 'important');
+            s.setProperty('opacity', '0', 'important');
+        } catch (e) {}
+    }
+
+    function containPaystackIframe(iframe) {
+        if (!iframe || !window.__ladillContainPaystack) return;
+        if (isPaystackBackgroundFrame(iframe)) {
+            hidePaystackBackground(iframe);
+            return;
+        }
+        if (!isPaystackCheckoutFrame(iframe) && !isPaystackIframe(iframe)) return;
+        if (isPaystackBackgroundFrame(iframe)) return;
+
+        var mount = getPaystackMount();
+        if (!mount) return;
+
+        // Prefer checkout frames; skip stray non-checkout paystack frames if unsure.
+        if (!isPaystackCheckoutFrame(iframe) && (iframe.id || '').indexOf('inline-') !== 0) {
+            applyIframePermissions(iframe);
+            return;
+        }
+
+        try {
+            if (iframe.parentNode !== mount) {
+                mount.appendChild(iframe);
+            }
+            styleContainedCheckout(iframe);
+        } catch (e) {
+            // If reparent fails mid-load, still try absolute restyle in place.
+            styleContainedCheckout(iframe);
+        }
+    }
+
+    function ensurePaystackContained(root) {
+        if (!window.__ladillContainPaystack) return;
+        try {
+            var scope = root || document;
+            var nodes = scope.querySelectorAll ? scope.querySelectorAll('iframe') : [];
+            for (var i = 0; i < nodes.length; i++) {
+                containPaystackIframe(nodes[i]);
+            }
+            // Paystack may leave backgrounds on body outside scope walks.
+            var bgs = document.querySelectorAll('iframe[id^="inline-background"]');
+            for (var j = 0; j < bgs.length; j++) {
+                hidePaystackBackground(bgs[j]);
+            }
+        } catch (e) {}
+    }
+
    function ensurePaystackIframePermissions(root) {
        try {
            var scope = root || document;
            var nodes = scope.querySelectorAll ? scope.querySelectorAll('iframe') : [];
            for (var i = 0; i < nodes.length; i++) {
-                // Known Paystack frames, or any frame still missing a src (Paystack
-                // often inserts empty then sets id/src — pre-allow before navigation).
                var iframe = nodes[i];
                var src = '';
                try { src = (iframe.getAttribute('src') || '').trim(); } catch (e) {}
@@ -210,9 +308,22 @@
                    applyIframePermissions(iframe);
                }
            }
+            ensurePaystackContained(scope);
        } catch (e) {}
    }

+    function setPaystackContainActive(active) {
+        window.__ladillContainPaystack = !!active;
+        try {
+            document.documentElement.classList.toggle('ladill-pay-inline-active', !!active);
+        } catch (e) {}
+        if (active) {
+            installIframeAllowHook();
+            installAppendHook();
+            ensurePaystackContained(document);
+        }
+    }
+
    function installIframeAllowHook() {
        if (window.__ladillIframeAllowHook) return;
        window.__ladillIframeAllowHook = true;
@@ -222,7 +333,6 @@
                var el = options !== undefined ? orig.call(this, tagName, options) : orig.call(this, tagName);
                try {
                    if (String(tagName).toLowerCase() === 'iframe') {
-                        // Pre-delegate before Paystack assigns src so policy applies on first load.
                        applyIframePermissions(el);
                    }
                } catch (e) {}
@@ -231,10 +341,61 @@
        } catch (e) {}
    }

+    function installAppendHook() {
+        if (window.__ladillAppendHook) return;
+        window.__ladillAppendHook = true;
+        try {
+            var origAppend = Node.prototype.appendChild;
+            Node.prototype.appendChild = function (child) {
+                try {
+                    if (window.__ladillContainPaystack && child && child.tagName === 'IFRAME') {
+                        if (isPaystackBackgroundFrame(child)) {
+                            var appendedBg = origAppend.call(this, child);
+                            hidePaystackBackground(child);
+                            return appendedBg;
+                        }
+                        if (isPaystackCheckoutFrame(child) || ((child.id || '').indexOf('inline-checkout') === 0)) {
+                            var mount = getPaystackMount();
+                            if (mount) {
+                                var appended = origAppend.call(mount, child);
+                                styleContainedCheckout(child);
+                                return appended;
+                            }
+                        }
+                    }
+                } catch (e) {}
+                return origAppend.call(this, child);
+            };
+
+            var origInsert = Node.prototype.insertBefore;
+            Node.prototype.insertBefore = function (child, ref) {
+                try {
+                    if (window.__ladillContainPaystack && child && child.tagName === 'IFRAME') {
+                        if (isPaystackBackgroundFrame(child)) {
+                            var insertedBg = origInsert.call(this, child, ref);
+                            hidePaystackBackground(child);
+                            return insertedBg;
+                        }
+                        if (isPaystackCheckoutFrame(child)) {
+                            var mount = getPaystackMount();
+                            if (mount) {
+                                var inserted = origAppend.call(mount, child);
+                                styleContainedCheckout(child);
+                                return inserted;
+                            }
+                        }
+                    }
+                } catch (e) {}
+                return origInsert.call(this, child, ref);
+            };
+        } catch (e) {}
+    }
+
    function watchPaystackIframes() {
        if (window.__ladillPaystackIframeWatch) return;
        window.__ladillPaystackIframeWatch = true;
        installIframeAllowHook();
+        installAppendHook();
        ensurePaystackIframePermissions(document);

        try {
@@ -243,12 +404,13 @@
                for (var i = 0; i < mutations.length; i++) {
                    var m = mutations[i];
                    if (m.type === 'attributes' && m.target) {
-                        if (isPaystackIframe(m.target) || (m.target.tagName && m.target.tagName.toUpperCase() === 'IFRAME')) {
-                            // Only force-allow known Paystack frames; for bare iframes wait until id/src set.
+                        if (m.target.tagName && m.target.tagName.toUpperCase() === 'IFRAME') {
                            if (isPaystackIframe(m.target)) {
                                applyIframePermissions(m.target);
-                            } else if (m.attributeName === 'id' || m.attributeName === 'src' || m.attributeName === 'name') {
-                                if (isPaystackIframe(m.target)) applyIframePermissions(m.target);
+                                // Paystack rewrites style when animating the popup open — re-contain.
+                                if (window.__ladillContainPaystack) {
+                                    containPaystackIframe(m.target);
+                                }
                            }
                            dirty = true;
                        }
@@ -259,20 +421,20 @@
                        var node = m.addedNodes[n];
                        if (!node || node.nodeType !== 1) continue;
                        if (node.tagName && node.tagName.toUpperCase() === 'IFRAME') {
-                            if (isPaystackIframe(node)) applyIframePermissions(node);
-                            else applyIframePermissions(node); // safe pre-allow; Paystack often sets id after insert
+                            applyIframePermissions(node);
+                            if (window.__ladillContainPaystack) containPaystackIframe(node);
                            dirty = true;
                        } else if (node.querySelectorAll) {
                            var nested = node.querySelectorAll('iframe');
                            for (var k = 0; k < nested.length; k++) {
                                applyIframePermissions(nested[k]);
+                                if (window.__ladillContainPaystack) containPaystackIframe(nested[k]);
                                dirty = true;
                            }
                        }
                    }
                }
                if (dirty) {
-                    // Second pass after Paystack mutates attributes in the same tick.
                    ensurePaystackIframePermissions(document);
                }
            });
@@ -280,18 +442,16 @@
                childList: true,
                subtree: true,
                attributes: true,
-                attributeFilter: ['allow', 'src', 'id', 'name'],
+                attributeFilter: ['allow', 'src', 'id', 'name', 'style', 'class'],
            });
        } catch (e) {}

-        // Brief poll during the first seconds after boot/open — covers cases where
-        // Paystack inserts via paths MutationObserver can miss under heavy load.
        var polls = 0;
        var pollId = setInterval(function () {
            ensurePaystackIframePermissions(document);
            polls += 1;
-            if (polls >= 40) clearInterval(pollId);
-        }, 250);
+            if (polls >= 60) clearInterval(pollId);
+        }, 200);
    }


@@ -330,6 +490,7 @@
                    this.launching = true; // waiting for checkout payload
                    this.error = '';
                    this._activeCode = '';
+                    setPaystackContainActive(false);
                    return;
                }
                if (isFrameable(url)) {
@@ -356,6 +517,7 @@
                this.inline = false;
                this.launching = false;
                this._activeCode = '';
+                setPaystackContainActive(false);
                this.error = isPaystackCheckoutUrl(url)
                    ? 'Could not start in-app payment. Please try again.'
                    : 'Secure checkout could not be opened in-page. Please try again.';
@@ -366,22 +528,33 @@
                this._activeCode = accessCode;
                this.launching = true;
                this.error = '';
+                // Arm containment before Paystack creates iframes so the first
+                // body.appendChild is redirected into our sheet mount.
+                setPaystackContainActive(true);
+                watchPaystackIframes();
                loadInlineJs().then(function (PaystackPop) {
                    if (token !== store._launchToken) return;
                    if (!PaystackPop) throw new Error('Paystack unavailable');
-                    cancelInline();
+                    try {
+                        if (activePopup && typeof activePopup.cancelTransaction === 'function') {
+                            activePopup.cancelTransaction();
+                        }
+                    } catch (e) {}
+                    activePopup = null;
+                    setPaystackContainActive(true);
                    var popup = new PaystackPop();
                    activePopup = popup;
-                    watchPaystackIframes();
                    popup.resumeTransaction(accessCode, {
                        onLoad: function () {
                            if (token !== store._launchToken) return;
                            store.launching = false;
                            ensurePaystackIframePermissions(document);
+                            ensurePaystackContained(document);
                        },
                        onSuccess: function (transaction) {
                            if (token !== store._launchToken) return;
                            store.launching = false;
+                            setPaystackContainActive(false);
                            var reference = (transaction && (transaction.reference || transaction.trxref)) || '';
                            var dest = buildReturnUrl(returnUrl, reference);
                            if (dest) {
@@ -395,19 +568,26 @@
                            store.launching = false;
                            store._activeCode = '';
                            activePopup = null;
+                            setPaystackContainActive(false);
                            window.dispatchEvent(new CustomEvent('ladill-pay-cancelled'));
                        },
                        onError: function (err) {
                            if (token !== store._launchToken) return;
                            store.launching = false;
                            store._activeCode = '';
+                            setPaystackContainActive(false);
                            store.error = (err && err.message) ? String(err.message) : 'Could not open secure payment.';
                        },
                    });
+                    // Paystack often inserts frames a tick after resumeTransaction.
+                    setTimeout(function () { ensurePaystackContained(document); }, 0);
+                    setTimeout(function () { ensurePaystackContained(document); }, 50);
+                    setTimeout(function () { ensurePaystackContained(document); }, 200);
                }).catch(function (err) {
                    if (token !== store._launchToken) return;
                    store.launching = false;
                    store._activeCode = '';
+                    setPaystackContainActive(false);
                    store.error = (err && err.message) ? String(err.message) : 'Could not load payment script.';
                });
            },
@@ -452,6 +632,43 @@
 })();
 </script>
@endonce
+{{-- Override Paystack's full-viewport popup styles so checkout sits in our sheet mount. --}}
+@once('ladill-paystack-contain-css')
+<style>
+    html.ladill-pay-inline-active iframe[id^="inline-background"] {
+        display: none !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+        opacity: 0 !important;
+    }
+    [data-ladill-pay-mount] {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        background: #fff;
+    }
+    [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"] {
+        position: absolute !important;
+        left: 0 !important;
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        max-width: none !important;
+        max-height: none !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        border: 0 !important;
+        z-index: 2 !important;
+        visibility: visible !important;
+        display: block !important;
+        background: transparent !important;
+    }
+</style>
+@endonce
 <template x-teleport="body">
 {{-- No local x-data: inherit showSheet/checkoutUrl/accessCode from the including scope. --}}
 <div
@@ -531,27 +748,42 @@
                </button>
            </div>
        </div>
-        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+        {{-- Body: Paystack mounts here (same area as the spinner). No second full-screen modal. --}}
+        <div class="relative min-h-0 flex-1 overflow-hidden overscroll-contain"
+             data-ladill-pay-body
+             style="min-height: 28rem">
+            {{-- Same-origin waiting pages (e.g. MoMo status) --}}
            <iframe x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.frameable"
                    :src="showSheet && $store.ladillPayCheckout && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
-                    class="h-full min-h-[60dvh] w-full border-0 md:min-h-0"
-                    style="min-height: 28rem"
+                    class="absolute inset-0 h-full w-full border-0"
                    allow="payment *; fullscreen *; clipboard-read *; clipboard-write *"
                    title="{{ $iframeTitle }}"></iframe>

+            {{-- Paystack Inline checkout iframe is reparented into this mount --}}
            <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-mount
+                 id="ladill-paystack-mount"
+                 class="absolute inset-0 bg-white"
+                 aria-hidden="true"></div>
+
+            {{-- Loading / error only — hides once Paystack has loaded inside the mount --}}
+            <div x-show="(!$store.ladillPayCheckout || !$store.ladillPayCheckout.frameable)
+                         && (!$store.ladillPayCheckout
+                             || $store.ladillPayCheckout.launching
+                             || $store.ladillPayCheckout.error
+                             || !$store.ladillPayCheckout.inline
+                             || !$store.ladillPayCheckout.ready)"
+                 x-transition:leave="transition ease-in duration-150"
+                 x-transition:leave-start="opacity-100"
+                 x-transition:leave-end="opacity-0"
+                 class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-4 bg-white px-6 py-10 text-center 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-indigo-50 text-indigo-600" aria-hidden="true">
-                    <svg x-show="!$store.ladillPayCheckout || $store.ladillPayCheckout.launching || ($store.ladillPayCheckout && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.inline)"
+                    <svg x-show="!$store.ladillPayCheckout || !$store.ladillPayCheckout.error"
                         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"/>
@@ -562,9 +794,7 @@
                       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>
+                          : 'Starting secure checkout…'"></p>
                    <p class="text-xs leading-snug text-slate-500"
                       x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
                          ? $store.ladillPayCheckout.error