Fix proxied checkout CSRF for Merchant, Give, Invoice and Events.

Public order/pay POSTs hit ladl.link first; satellite CSRF tokens cannot bind to Link (or platform/satellite) sessions, which returned 419 and showed "Could not start checkout." Except public checkout paths and return access_code from owner-gateway Paystack init. Sync contained Paystack sheet.
2026-07-21 22:53:52 +00:00
parent 5166cd8a64
commit 97a30ee6b3
4 changed files with 493 additions and 58 deletions
@@ -47,8 +47,19 @@ class MerchantGatewayService
            throw new RuntimeException($response->json('message') ?: 'Paystack could not start checkout.');
        }

+        $accessCode = (string) ($response->json('data.access_code') ?? '');
+        $checkoutUrl = (string) $response->json('data.authorization_url');
+        if ($accessCode === '' && $checkoutUrl !== '') {
+            $path = ltrim((string) (parse_url($checkoutUrl, PHP_URL_PATH) ?: ''), '/');
+            $maybe = explode('/', $path)[0] ?? '';
+            if (preg_match('/^[A-Za-z0-9_-]{6,}$/', $maybe) === 1) {
+                $accessCode = $maybe;
+            }
+        }
+
        return [
-            'checkout_url' => (string) $response->json('data.authorization_url'),
+            'checkout_url' => $checkoutUrl,
+            'access_code' => $accessCode !== '' ? $accessCode : null,
            'reference' => (string) ($response->json('data.reference') ?: $reference),
            'provider' => PaymentGatewaySetting::PROVIDER_PAYSTACK,
        ];
@@ -13,6 +13,13 @@ return Application::configure(basePath: dirname(__DIR__))
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware): void {
+        // Storefront/booking POSTs are proxied ladl.link → platform → Merchant without
+        // a browser session cookie that matches merchant CSRF tokens.
+        $middleware->validateCsrfTokens(except: [
+            'q/*/order',
+            'q/*/booking',
+        ]);
+
        $middleware->redirectGuestsTo(fn (Request $request) => route('sso.connect', [
            'redirect' => $request->fullUrl(),
        ]));
@@ -44,7 +44,8 @@
@once
 <script>
 (function () {
-    if (window.LadillPayCheckout) return;
+    if (window.__ladillPayCheckoutBootstrapped) return;
+    window.__ladillPayCheckoutBootstrapped = true;

    var INLINE_SRC = 'https://js.paystack.co/v2/inline.js';
    var inlineLoading = null;
@@ -94,6 +95,10 @@
        inlineLoading = new Promise(function (resolve, reject) {
            var existing = document.querySelector('script[data-ladill-paystack-inline]');
            if (existing) {
+                if (window.PaystackPop) {
+                    resolve(window.PaystackPop);
+                    return;
+                }
                existing.addEventListener('load', function () { resolve(window.PaystackPop); });
                existing.addEventListener('error', function () { reject(new Error('Paystack script failed')); });
                return;
@@ -112,6 +117,15 @@
        return inlineLoading;
    }

+    // Warm the Paystack script early so resumeTransaction is ready on Pay click.
+    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+        loadInlineJs().catch(function () {});
+    } else {
+        document.addEventListener('DOMContentLoaded', function () {
+            loadInlineJs().catch(function () {});
+        });
+    }
+
    function buildReturnUrl(returnUrl, reference) {
        if (!returnUrl || !reference) return '';
        try {
@@ -131,14 +145,318 @@
            }
        } catch (e) {}
        activePopup = null;
+        setPaystackContainActive(false);
    }

-    function ensureStore() {
-        if (!window.Alpine || typeof window.Alpine.store !== 'function') return null;
-        if (window.Alpine.store('ladillPayCheckout')) {
-            return window.Alpine.store('ladillPayCheckout');
+    // 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();
+        var name = (iframe.getAttribute('name') || iframe.name || '').toLowerCase();
+        var src = '';
+        try { src = (iframe.getAttribute('src') || iframe.src || '').toLowerCase(); } catch (e) {}
+        return src.indexOf('paystack') !== -1
+            || src.indexOf('checkout.paystack.com') !== -1
+            || 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;
+    }
+
+    function mergeIframeAllow(current) {
+        var parts = current
+            ? current.split(';').map(function (p) { return p.trim(); }).filter(Boolean)
+            : [];
+        var lower = parts.map(function (p) { return p.toLowerCase(); });
+        PAYSTACK_ALLOW_FEATURES.forEach(function (perm) {
+            if (!lower.some(function (p) { return p === perm || p.indexOf(perm + ' ') === 0; })) {
+                parts.push(perm + ' *');
+            }
+        });
+        return parts.join('; ') || PAYSTACK_IFRAME_ALLOW;
+    }
+
+    function applyIframePermissions(iframe) {
+        if (!iframe || !iframe.setAttribute) return;
+        try {
+            var next = mergeIframeAllow((iframe.getAttribute('allow') || '').trim());
+            if ((iframe.getAttribute('allow') || '') !== next) {
+                iframe.setAttribute('allow', next);
+            }
+            if (!iframe.hasAttribute('allowfullscreen')) {
+                iframe.setAttribute('allowfullscreen', '');
+            }
+            try { iframe.allowFullscreen = true; } catch (e) {}
+        } 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;
        }
-        window.Alpine.store('ladillPayCheckout', {
+        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++) {
+                var iframe = nodes[i];
+                var src = '';
+                try { src = (iframe.getAttribute('src') || '').trim(); } catch (e) {}
+                if (isPaystackIframe(iframe) || !src) {
+                    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;
+        try {
+            var orig = Document.prototype.createElement;
+            Document.prototype.createElement = function (tagName, options) {
+                var el = options !== undefined ? orig.call(this, tagName, options) : orig.call(this, tagName);
+                try {
+                    if (String(tagName).toLowerCase() === 'iframe') {
+                        applyIframePermissions(el);
+                    }
+                } catch (e) {}
+                return el;
+            };
+        } 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 {
+            var obs = new MutationObserver(function (mutations) {
+                var dirty = false;
+                for (var i = 0; i < mutations.length; i++) {
+                    var m = mutations[i];
+                    if (m.type === 'attributes' && m.target) {
+                        if (m.target.tagName && m.target.tagName.toUpperCase() === 'IFRAME') {
+                            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;
+                        }
+                        continue;
+                    }
+                    if (!m.addedNodes || !m.addedNodes.length) continue;
+                    for (var n = 0; n < m.addedNodes.length; n++) {
+                        var node = m.addedNodes[n];
+                        if (!node || node.nodeType !== 1) continue;
+                        if (node.tagName && node.tagName.toUpperCase() === 'IFRAME') {
+                            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) {
+                    ensurePaystackIframePermissions(document);
+                }
+            });
+            obs.observe(document.documentElement || document.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['allow', 'src', 'id', 'name', 'style', 'class'],
+            });
+        } catch (e) {}
+
+        var polls = 0;
+        var pollId = setInterval(function () {
+            ensurePaystackIframePermissions(document);
+            polls += 1;
+            if (polls >= 60) clearInterval(pollId);
+        }, 200);
+    }
+
+
+    function createStoreDefinition() {
+        return {
            frameable: false,
            inline: false,
            ready: false,
@@ -156,6 +474,10 @@
                cancelInline();
            },
            sync(show, url, accessCode, returnUrl) {
+                url = (url || '').toString();
+                accessCode = (accessCode || '').toString();
+                returnUrl = (returnUrl || '').toString();
+
                if (!show) {
                    this._launchToken += 1;
                    this.reset();
@@ -165,14 +487,17 @@
                if (!url && !accessCode) {
                    this.frameable = false;
                    this.inline = false;
-                    this.launching = false;
+                    this.launching = true; // waiting for checkout payload
+                    this.error = '';
                    this._activeCode = '';
+                    setPaystackContainActive(false);
                    return;
                }
                if (isFrameable(url)) {
                    this.frameable = true;
                    this.inline = false;
                    this.launching = false;
+                    this.error = '';
                    this._activeCode = '';
                    cancelInline();
                    return;
@@ -187,12 +512,15 @@
                    this.launchInline(code, returnUrl);
                    return;
                }
-                // Non-Paystack external URL without access_code — cannot embed.
+                // Never navigate to checkout.paystack.com (external tab/window).
                this.frameable = false;
                this.inline = false;
                this.launching = false;
                this._activeCode = '';
-                this.error = 'Secure checkout could not be opened in-page. Please try again.';
+                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.';
            },
            launchInline(accessCode, returnUrl) {
                var store = this;
@@ -200,27 +528,39 @@
                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;
                    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) {
                                window.location.assign(dest);
                                return;
                            }
-                            // Fallback: reload so server can reconcile via webhook.
                            window.location.reload();
                        },
                        onCancel: function () {
@@ -228,41 +568,59 @@
                            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.';
                });
            },
-        });
+        };
+    }
+
+    function ensureStore() {
+        if (!window.Alpine || typeof window.Alpine.store !== 'function') return null;
+        try {
+            var existing = window.Alpine.store('ladillPayCheckout');
+            if (existing) return existing;
+        } catch (e) {}
+        window.Alpine.store('ladillPayCheckout', createStoreDefinition());
        return window.Alpine.store('ladillPayCheckout');
    }

-    function onAlpineReady() {
+    document.addEventListener('alpine:init', function () {
+        ensureStore();
+    });
+
+    // If Alpine already started (late include), register immediately.
+    if (window.Alpine && window.Alpine.version) {
        ensureStore();
    }

-    if (window.Alpine) {
-        onAlpineReady();
-    }
-    document.addEventListener('alpine:init', onAlpineReady);
+    watchPaystackIframes();

    window.LadillPayCheckout = {
        isFrameable: isFrameable,
        isPaystackCheckoutUrl: isPaystackCheckoutUrl,
        accessCodeFromUrl: accessCodeFromUrl,
        resolveAccessCode: resolveAccessCode,
-        prepare: function () { return null; },
+        prepare: function () { loadInlineJs().catch(function () {}); return null; },
        cancel: function () {
            cancelInline();
            var store = ensureStore();
@@ -274,32 +632,75 @@
 })();
 </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">
-<div x-show="showSheet"
-     x-cloak
-     data-ladill-pay-sheet
-     x-effect="
-        document.documentElement.style.overflow = showSheet ? 'hidden' : '';
-        if (typeof window.LadillPayCheckout !== 'undefined') {
-            window.LadillPayCheckout.ensureStore();
-        }
-        const store = $store.ladillPayCheckout;
-        if (store) {
+{{-- No local x-data: inherit showSheet/checkoutUrl/accessCode from the including scope. --}}
+<div
+    x-init="
+        window.LadillPayCheckout && window.LadillPayCheckout.ensureStore();
+        const runSync = () => {
+            const store = $store.ladillPayCheckout;
+            if (!store) return;
            store.sync(
-                showSheet,
-                typeof checkoutUrl !== 'undefined' ? checkoutUrl : '',
-                typeof accessCode !== 'undefined' ? accessCode : '',
-                typeof returnUrl !== 'undefined' ? returnUrl : ''
+                !!showSheet,
+                (typeof checkoutUrl === 'undefined' || checkoutUrl === null) ? '' : String(checkoutUrl),
+                (typeof accessCode === 'undefined' || accessCode === null) ? '' : String(accessCode),
+                (typeof returnUrl === 'undefined' || returnUrl === null) ? '' : String(returnUrl)
            );
-        }
-     "
-     @keydown.escape.window="if (showSheet) showSheet = false"
-     @ladill-pay-cancelled.window="showSheet = false"
-     class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
-     role="dialog"
-     aria-modal="true"
-     :aria-hidden="(!showSheet).toString()"
-     aria-label="{{ $sheetAria }}">
+        };
+        $watch('showSheet', () => runSync());
+        $watch('checkoutUrl', () => runSync());
+        $watch('accessCode', () => runSync());
+        $watch('returnUrl', () => runSync());
+        $nextTick(() => runSync());
+    "
+    x-show="showSheet"
+    x-cloak
+    data-ladill-pay-sheet
+    x-effect="document.documentElement.style.overflow = showSheet ? 'hidden' : ''"
+    @keydown.escape.window="if (showSheet) showSheet = false"
+    @ladill-pay-cancelled.window="showSheet = false"
+    class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
+    role="dialog"
+    aria-modal="true"
+    :aria-hidden="(!showSheet).toString()"
+    aria-label="{{ $sheetAria }}">

    <div class="absolute inset-0 bg-black/60"
         data-ladill-pay-backdrop
@@ -313,7 +714,7 @@
         @click="showSheet = false; window.LadillPayCheckout?.cancel?.()">
    </div>

-    {{-- One panel: bottom sheet (mobile) + centered modal (desktop). --}}
+    {{-- Always wrap payment: bottom sheet on mobile, centered modal on desktop. --}}
    <div data-ladill-pay-panel
         class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl md:max-w-lg md:rounded-2xl"
         style="height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
@@ -347,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"
-                    allow="payment *"
+                    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 || !checkoutUrl && !(typeof accessCode !== 'undefined' && accessCode)"
+                    <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"/>
@@ -378,18 +794,16 @@
                       data-ladill-pay-status-title
                       x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
                          ? 'Checkout unavailable'
-                          : ($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching
-                              ? 'Complete payment in the Paystack window'
-                              : '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
-                          : 'Paystack opens on this page — not in a separate browser.'"></p>
+                          : 'Secure card and mobile money checkout opens on this page — not in a separate browser.'"></p>
                </div>
                <button type="button"
                        data-ladill-pay-retry
                        x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
-                        @click="$store.ladillPayCheckout.sync(true, typeof checkoutUrl !== 'undefined' ? checkoutUrl : '', typeof accessCode !== 'undefined' ? accessCode : '', typeof returnUrl !== 'undefined' ? returnUrl : '')"
+                        @click="window.LadillPayCheckout?.ensureStore()?.sync(true, (typeof checkoutUrl==='undefined'||checkoutUrl===null)?'':String(checkoutUrl), (typeof accessCode==='undefined'||accessCode===null)?'':String(accessCode), (typeof returnUrl==='undefined'||returnUrl===null)?'':String(returnUrl))"
                        class="inline-flex w-full max-w-xs items-center justify-center rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">
                    Try again
                </button>
@@ -164,6 +164,9 @@ function storefront(cfg) {
        errorMsg: '',
        showSheet: false,
        checkoutUrl: '',
+        accessCode: '',
+        publicKey: '',
+        returnUrl: '',
        name: '', email: '', phone: '',
        cart: {},
        add(name, price, key) {