diff --git a/resources/views/partials/paystack-sheet.blade.php b/resources/views/partials/paystack-sheet.blade.php
index 17afe3c..3c63f5e 100644
--- a/resources/views/partials/paystack-sheet.blade.php
+++ b/resources/views/partials/paystack-sheet.blade.php
@@ -6,13 +6,16 @@
       - operator: signed-in staff flows such as wallet top-up
 
     Optional overrides: $sheetTitle, $sheetSubtitle, $sheetFooter, $sheetAria, $iframeTitle
-    Requires Alpine ancestor with: showSheet (bool), checkoutUrl (string).
+    Requires Alpine ancestor with:
+      - showSheet (bool)
+      - checkoutUrl (string) — authorization / waiting URL
+      - accessCode (string, optional) — Paystack initialize access_code for Inline
+      - publicKey (string, optional) — unused by resumeTransaction; kept for callers
+      - returnUrl (string, optional) — where to go after Inline onSuccess (?reference=)
 
-    Paystack (checkout.paystack.com) sends X-Frame-Options: SAMEORIGIN and cannot be
-    embedded. Same-origin URLs (e.g. MoMo waiting pages) still load in an iframe.
-    External checkouts open in a named window. Call LadillPayCheckout.prepare()
-    synchronously in the Pay click handler (before await fetch) so the popup is not
-    blocked after the async response. An in-sheet Continue CTA remains as fallback.
+    checkout.paystack.com cannot be iframed (X-Frame-Options: SAMEORIGIN).
+    Primary path: Paystack Inline JS (PaystackPop.resumeTransaction) — in-page overlay,
+    not a separate browser tab. Same-origin URLs (e.g. MoMo waiting) still use iframe.
 --}}
 @php
     $audience = $audience ?? 'buyer';
@@ -41,10 +44,12 @@
 @once
 <script>
 (function () {
-    if (window.LadillPayCheckout) return;
+    if (window.__ladillPayCheckoutBootstrapped) return;
+    window.__ladillPayCheckoutBootstrapped = true;
 
-    var PENDING_NAME = 'ladill_pay_checkout';
-    var pendingWindow = null;
+    var INLINE_SRC = 'https://js.paystack.co/v2/inline.js';
+    var inlineLoading = null;
+    var activePopup = null;
 
     function isFrameable(url) {
         if (!url) return false;
@@ -55,136 +60,1054 @@
         }
     }
 
-    function writePendingPlaceholder(win) {
-        if (!win) return;
+    function isPaystackCheckoutUrl(url) {
+        if (!url) return false;
         try {
-            win.document.open();
-            win.document.write('<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Payment</title></head><body style="margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#f8fafc;color:#475569"><p style="font-size:0.95rem">Opening secure checkout…</p></body></html>');
-            win.document.close();
-        } catch (e) {}
+            var host = new URL(url, window.location.href).hostname.toLowerCase();
+            return host === 'checkout.paystack.com' || host.endsWith('.paystack.com');
+        } catch (e) {
+            return false;
+        }
     }
 
-    function prepare() {
-        cancel();
+    function accessCodeFromUrl(url) {
+        if (!url || !isPaystackCheckoutUrl(url)) return '';
         try {
-            var win = window.open('about:blank', PENDING_NAME, 'width=480,height=720');
-            if (win && !win.closed) {
-                pendingWindow = win;
-                writePendingPlaceholder(win);
-                return win;
+            var path = new URL(url, window.location.href).pathname.replace(/^\/+/, '');
+            var code = path.split('/')[0] || '';
+            return /^[A-Za-z0-9_-]{6,}$/.test(code) ? code : '';
+        } catch (e) {
+            return '';
+        }
+    }
+
+    function resolveAccessCode(accessCode, checkoutUrl) {
+        var code = (accessCode || '').toString().trim();
+        if (code) return code;
+        return accessCodeFromUrl(checkoutUrl);
+    }
+
+    function loadInlineJs() {
+        if (window.PaystackPop) {
+            return Promise.resolve(window.PaystackPop);
+        }
+        if (inlineLoading) return inlineLoading;
+        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;
+            }
+            var script = document.createElement('script');
+            script.src = INLINE_SRC;
+            script.async = true;
+            script.dataset.ladillPaystackInline = '1';
+            script.onload = function () { resolve(window.PaystackPop); };
+            script.onerror = function () {
+                inlineLoading = null;
+                reject(new Error('Paystack script failed'));
+            };
+            document.head.appendChild(script);
+        });
+        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 {
+            var u = new URL(returnUrl, window.location.href);
+            u.searchParams.set('reference', reference);
+            return u.toString();
+        } catch (e) {
+            var join = returnUrl.indexOf('?') >= 0 ? '&' : '?';
+            return returnUrl + join + 'reference=' + encodeURIComponent(reference);
+        }
+    }
+
+    function cancelInline() {
+        try {
+            if (activePopup && typeof activePopup.cancelTransaction === 'function') {
+                activePopup.cancelTransaction();
             }
         } catch (e) {}
-        pendingWindow = null;
+        activePopup = null;
+        setPaystackContainActive(false);
+    }
+
+    // Paystack Inline always body-appends a full-viewport modal (position:fixed 100%).
+    // Strategy:
+    //  1) On FIRST append only, put checkout iframe into our sheet mount (no later reparent
+    //     — reparent after load reloads the frame and breaks Paystack).
+    //  2) Force position:absolute + fill mount (fixed+100% always paints the whole viewport
+    //     even when the node is nested under the sheet).
+    //  3) Continuously re-apply styles (Paystack rewrites style on open/animate).
+    //  4) Hide Paystack's own dimmer; Ladill sheet owns backdrop + 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'];
+    var activeMountEl = null;
+    var activeBodyEl = null;
+    var pinRafId = 0;
+    var lastPinRect = null;
+    var nativeAppendChild = Node.prototype.appendChild;
+    var nativeInsertBefore = Node.prototype.insertBefore;
+
+    function isElementShown(el) {
+        if (!el || el.nodeType !== 1) return false;
+        if (el.getAttribute && el.getAttribute('aria-hidden') === 'true') return false;
+        var p = el;
+        while (p && p.nodeType === 1) {
+            try {
+                var s = window.getComputedStyle(p);
+                if (s.display === 'none' || s.visibility === 'hidden') return false;
+            } catch (e) {}
+            p = p.parentElement;
+        }
+        return true;
+    }
+
+    function resolveOpenSheet() {
+        var sheets = document.querySelectorAll('[data-ladill-pay-sheet]');
+        var fallback = null;
+        for (var i = 0; i < sheets.length; i++) {
+            var sheet = sheets[i];
+            if (!fallback) fallback = sheet;
+            if (sheet.getAttribute('aria-hidden') !== 'true') return sheet;
+        }
+        for (var j = 0; j < sheets.length; j++) {
+            if (isElementShown(sheets[j])) return sheets[j];
+        }
+        return fallback;
+    }
+
+    function resolvePaystackMount() {
+        var sheet = resolveOpenSheet();
+        if (sheet) {
+            var mount = sheet.querySelector('[data-ladill-pay-mount]');
+            if (mount) return mount;
+            var body = sheet.querySelector('[data-ladill-pay-body]');
+            if (body) return body;
+        }
+        return document.querySelector('[data-ladill-pay-mount]')
+            || document.querySelector('[data-ladill-pay-body]');
+    }
+
+    function getPaystackMount() {
+        if (activeMountEl && activeMountEl.isConnected) return activeMountEl;
+        return resolvePaystackMount();
+    }
+
+    function getPaystackBody() {
+        if (activeBodyEl && activeBodyEl.isConnected) return activeBodyEl;
+        var mount = getPaystackMount();
+        if (mount) {
+            var body = mount.closest('[data-ladill-pay-body]');
+            if (body) return body;
+        }
+        var sheet = resolveOpenSheet();
+        return sheet ? sheet.querySelector('[data-ladill-pay-body]') : document.querySelector('[data-ladill-pay-body]');
+    }
+
+    function armPaystackMount() {
+        var sheet = resolveOpenSheet();
+        activeMountEl = sheet
+            ? (sheet.querySelector('[data-ladill-pay-mount]') || sheet.querySelector('[data-ladill-pay-body]'))
+            : resolvePaystackMount();
+        activeBodyEl = sheet
+            ? sheet.querySelector('[data-ladill-pay-body]')
+            : getPaystackBody();
+        // Keep the mount measurable while we pin (Alpine x-show can set display:none).
+        try {
+            if (activeMountEl) {
+                activeMountEl.style.setProperty('display', 'block', 'important');
+                activeMountEl.style.setProperty('visibility', 'visible', 'important');
+                activeMountEl.style.setProperty('pointer-events', 'none', 'important');
+            }
+        } catch (e) {}
+        return activeMountEl;
+    }
+
+    function measurePinTarget() {
+        var el = getPaystackMount() || getPaystackBody();
+        if (!el) return null;
+        var rect = el.getBoundingClientRect();
+        if (rect.width >= 40 && rect.height >= 40) {
+            return rect;
+        }
+        // Mount may still be display:none — fall back to the white body panel.
+        var body = getPaystackBody();
+        if (body && body !== el) {
+            rect = body.getBoundingClientRect();
+            if (rect.width >= 40 && rect.height >= 40) return rect;
+        }
         return null;
     }
 
-    function cancel() {
-        if (pendingWindow && !pendingWindow.closed) {
-            try { pendingWindow.close(); } catch (e) {}
-        }
-        pendingWindow = null;
+    function waitForPinTarget(timeoutMs) {
+        timeoutMs = timeoutMs || 1200;
+        return new Promise(function (resolve) {
+            var start = Date.now();
+            var tick = function () {
+                armPaystackMount();
+                var rect = measurePinTarget();
+                if (rect) {
+                    syncPaystackMountBox();
+                    resolve(rect);
+                    return;
+                }
+                if (Date.now() - start >= timeoutMs) {
+                    syncPaystackMountBox();
+                    resolve(null);
+                    return;
+                }
+                if (typeof requestAnimationFrame === 'function') {
+                    requestAnimationFrame(tick);
+                } else {
+                    setTimeout(tick, 16);
+                }
+            };
+            tick();
+        });
     }
 
-    function openCheckout(url) {
-        if (!url) return null;
-        try {
-            if (pendingWindow && !pendingWindow.closed) {
-                pendingWindow.location = url;
-                var win = pendingWindow;
-                pendingWindow = null;
-                return win;
+    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 isCheckoutFrame(iframe) {
+        if (!iframe || !iframe.tagName || iframe.tagName.toUpperCase() !== 'IFRAME') return false;
+        var id = (iframe.id || '');
+        return id.indexOf('inline-checkout') === 0
+            || id.indexOf('embed-checkout') === 0
+            || iframe.hasAttribute('data-ladill-pay-contained');
+    }
+
+    function styleMountAsContainer(mount) {
+        if (!mount) return;
+        try {
+            // Create a fixed containing block so position:fixed descendants still
+            // cannot escape to the viewport (transform + isolation).
+            var s = mount.style;
+            s.setProperty('position', 'absolute', 'important');
+            s.setProperty('inset', '0', '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('overflow', 'hidden', 'important');
+            s.setProperty('display', 'block', 'important');
+            s.setProperty('visibility', 'visible', 'important');
+            s.setProperty('background', '#fff', 'important');
+            s.setProperty('transform', 'translateZ(0)', 'important');
+            s.setProperty('isolation', 'isolate', 'important');
+            s.setProperty('contain', 'layout size', 'important');
+            s.setProperty('z-index', '1', 'important');
+        } catch (e) {}
+    }
+
+    function styleCheckoutInMount(iframe) {
+        if (!iframe) return;
+        try {
+            iframe.setAttribute('data-ladill-pay-contained', '1');
+            iframe.setAttribute('data-ladill-pay-mode', 'mount');
+            var s = iframe.style;
+            // Absolute fill of mount — NOT position:fixed 100% (that always paints viewport).
+            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('max-width', 'none', 'important');
+            s.setProperty('max-height', 'none', 'important');
+            s.setProperty('margin', '0', 'important');
+            s.setProperty('padding', '0', 'important');
+            s.setProperty('border', '0', 'important');
+            s.setProperty('border-radius', '0', '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('pointer-events', 'auto', 'important');
+            s.setProperty('color-scheme', 'light', 'important');
+            s.setProperty('transform', 'none', 'important');
+            applyIframePermissions(iframe);
+        } catch (e) {}
+    }
+
+    function styleCheckoutPinnedToRect(iframe, rect) {
+        if (!iframe || !rect) return;
+        try {
+            iframe.setAttribute('data-ladill-pay-contained', '1');
+            iframe.setAttribute('data-ladill-pay-mode', 'pin');
+            var s = iframe.style;
+            var left = Math.max(0, Math.round(rect.left));
+            var top = Math.max(0, Math.round(rect.top));
+            var width = Math.max(0, Math.round(rect.width));
+            var height = Math.max(0, Math.round(rect.height));
+            // Direct pixels — CSS vars in setProperty are unreliable across browsers.
+            s.setProperty('position', 'fixed', 'important');
+            s.setProperty('left', left + 'px', 'important');
+            s.setProperty('top', top + 'px', 'important');
+            s.setProperty('right', 'auto', 'important');
+            s.setProperty('bottom', 'auto', 'important');
+            s.setProperty('width', width + 'px', 'important');
+            s.setProperty('height', height + 'px', 'important');
+            s.setProperty('max-width', 'none', 'important');
+            s.setProperty('max-height', 'none', 'important');
+            s.setProperty('margin', '0', 'important');
+            s.setProperty('padding', '0', 'important');
+            s.setProperty('border', '0', 'important');
+            s.setProperty('border-radius', '0', '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('pointer-events', 'auto', 'important');
+            s.setProperty('color-scheme', 'light', 'important');
+            s.setProperty('transform', 'none', 'important');
+            applyIframePermissions(iframe);
+        } catch (e) {}
+    }
+
+    function pinCheckoutIframe(iframe) {
+        if (!iframe || !window.__ladillContainPaystack) return;
+        var mount = getPaystackMount();
+        if (mount) {
+            styleMountAsContainer(mount);
+            // Prefer living inside the mount (absolute fill). Only first-append
+            // redirects into mount; if already elsewhere, pin with fixed+pixels.
+            if (iframe.parentNode === mount) {
+                styleCheckoutInMount(iframe);
+                return;
             }
-            pendingWindow = null;
-            // Named window (no noopener) so payment-return can redirect window.opener.
-            return window.open(url, PENDING_NAME, 'width=480,height=720');
-        } catch (e) {
-            pendingWindow = null;
-            return null;
         }
+        var rect = measurePinTarget() || lastPinRect;
+        if (rect) {
+            lastPinRect = rect;
+            styleCheckoutPinnedToRect(iframe, rect);
+        }
+    }
+
+    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');
+            s.setProperty('z-index', '-1', 'important');
+            s.setProperty('width', '0', 'important');
+            s.setProperty('height', '0', 'important');
+            s.setProperty('left', '-9999px', 'important');
+            s.setProperty('top', '-9999px', 'important');
+            s.setProperty('position', 'fixed', 'important');
+        } catch (e) {}
+    }
+
+    function containPaystackIframe(iframe) {
+        if (!iframe || !window.__ladillContainPaystack) return;
+        if (isPaystackBackgroundFrame(iframe)) {
+            hidePaystackBackground(iframe);
+            return;
+        }
+        if (!isCheckoutFrame(iframe) && !isPaystackCheckoutFrame(iframe)) {
+            if (isPaystackIframe(iframe)) applyIframePermissions(iframe);
+            return;
+        }
+        pinCheckoutIframe(iframe);
+    }
+
+    function ensurePaystackContained(root) {
+        if (!window.__ladillContainPaystack) return;
+        try {
+            syncPaystackMountBox();
+            var bgs = document.querySelectorAll('iframe[id^="inline-background"]');
+            for (var j = 0; j < bgs.length; j++) hidePaystackBackground(bgs[j]);
+
+            var checks = document.querySelectorAll(
+                'iframe[id^="inline-checkout"], iframe[id^="embed-checkout"], iframe[data-ladill-pay-contained]'
+            );
+            for (var k = 0; k < checks.length; k++) pinCheckoutIframe(checks[k]);
+
+            if (root && root !== document && root.querySelectorAll) {
+                var nested = root.querySelectorAll('iframe');
+                for (var i = 0; i < nested.length; i++) containPaystackIframe(nested[i]);
+            }
+        } 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];
+                if (isPaystackIframe(iframe) || isCheckoutFrame(iframe)) {
+                    applyIframePermissions(iframe);
+                }
+            }
+            ensurePaystackContained(scope);
+        } catch (e) {}
+    }
+
+    function syncPaystackMountBox() {
+        try {
+            if (!window.__ladillContainPaystack) return;
+            var rect = measurePinTarget();
+            var root = document.documentElement;
+            if (!rect) {
+                root.style.setProperty('--ladill-pay-left', '0px');
+                root.style.setProperty('--ladill-pay-top', '0px');
+                root.style.setProperty('--ladill-pay-width', '0px');
+                root.style.setProperty('--ladill-pay-height', '0px');
+                return;
+            }
+            lastPinRect = rect;
+            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 startPinLoop() {
+        stopPinLoop();
+        var tick = function () {
+            if (!window.__ladillContainPaystack) {
+                pinRafId = 0;
+                return;
+            }
+            ensurePaystackContained(document);
+            pinRafId = typeof requestAnimationFrame === 'function'
+                ? requestAnimationFrame(tick)
+                : setTimeout(tick, 32);
+        };
+        tick();
+    }
+
+    function stopPinLoop() {
+        if (!pinRafId) return;
+        if (typeof cancelAnimationFrame === 'function') {
+            cancelAnimationFrame(pinRafId);
+        } else {
+            clearTimeout(pinRafId);
+        }
+        pinRafId = 0;
+    }
+
+    function setPaystackContainActive(active) {
+        window.__ladillContainPaystack = !!active;
+        try {
+            document.documentElement.classList.toggle('ladill-pay-inline-active', !!active);
+        } catch (e) {}
+        if (active) {
+            armPaystackMount();
+            styleMountAsContainer(getPaystackMount());
+            installIframeAllowHook();
+            installAppendHook();
+            ensurePaystackContained(document);
+            syncPaystackMountBox();
+            startPinLoop();
+            if (!window.__ladillPayMountResizeBound) {
+                window.__ladillPayMountResizeBound = true;
+                window.addEventListener('resize', function () {
+                    syncPaystackMountBox();
+                    ensurePaystackContained(document);
+                }, { passive: true });
+                window.addEventListener('orientationchange', function () {
+                    setTimeout(function () {
+                        syncPaystackMountBox();
+                        ensurePaystackContained(document);
+                    }, 100);
+                }, { passive: true });
+                window.addEventListener('scroll', function () {
+                    if (window.__ladillContainPaystack) {
+                        syncPaystackMountBox();
+                        ensurePaystackContained(document);
+                    }
+                }, { passive: true, capture: true });
+            }
+        } else {
+            stopPinLoop();
+            lastPinRect = null;
+            try {
+                if (activeMountEl) {
+                    activeMountEl.style.removeProperty('display');
+                    activeMountEl.style.removeProperty('visibility');
+                    activeMountEl.style.removeProperty('pointer-events');
+                    activeMountEl.style.removeProperty('transform');
+                    activeMountEl.style.removeProperty('isolation');
+                    activeMountEl.style.removeProperty('contain');
+                }
+            } catch (e) {}
+            activeMountEl = null;
+            activeBodyEl = null;
+            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) {}
+        }
+    }
+
+    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 {
+            Node.prototype.appendChild = function (child) {
+                try {
+                    if (window.__ladillContainPaystack && child && child.tagName === 'IFRAME') {
+                        if (isPaystackBackgroundFrame(child)) {
+                            var bg = nativeAppendChild.call(this, child);
+                            hidePaystackBackground(child);
+                            return bg;
+                        }
+                        if (isCheckoutFrame(child) || isPaystackCheckoutFrame(child)
+                            || (child.id || '').indexOf('inline-checkout') === 0
+                            || (child.id || '').indexOf('embed-checkout') === 0) {
+                            var mount = getPaystackMount();
+                            if (mount) {
+                                styleMountAsContainer(mount);
+                                // FIRST insert goes into mount — avoids later reparent reload.
+                                var mounted = nativeAppendChild.call(mount, child);
+                                styleCheckoutInMount(child);
+                                return mounted;
+                            }
+                        }
+                    }
+                } catch (e) {}
+                var result = nativeAppendChild.call(this, child);
+                try {
+                    if (window.__ladillContainPaystack && child && child.tagName === 'IFRAME') {
+                        containPaystackIframe(child);
+                    }
+                } catch (e2) {}
+                return result;
+            };
+
+            Node.prototype.insertBefore = function (child, ref) {
+                try {
+                    if (window.__ladillContainPaystack && child && child.tagName === 'IFRAME') {
+                        if (isPaystackBackgroundFrame(child)) {
+                            var bg = nativeInsertBefore.call(this, child, ref);
+                            hidePaystackBackground(child);
+                            return bg;
+                        }
+                        if (isCheckoutFrame(child) || isPaystackCheckoutFrame(child)) {
+                            var mount = getPaystackMount();
+                            if (mount) {
+                                styleMountAsContainer(mount);
+                                var mounted = nativeAppendChild.call(mount, child);
+                                styleCheckoutInMount(child);
+                                return mounted;
+                            }
+                        }
+                    }
+                } catch (e) {}
+                var result = nativeInsertBefore.call(this, child, ref);
+                try {
+                    if (window.__ladillContainPaystack && child && child.tagName === 'IFRAME') {
+                        containPaystackIframe(child);
+                    }
+                } catch (e2) {}
+                return result;
+            };
+        } 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,
+            launching: false,
+            error: '',
+            _launchToken: 0,
+            _activeCode: '',
+            reset() {
+                this.frameable = false;
+                this.inline = false;
+                this.ready = false;
+                this.launching = false;
+                this.error = '';
+                this._activeCode = '';
+                cancelInline();
+            },
+            sync(show, url, accessCode, returnUrl) {
+                url = (url || '').toString();
+                accessCode = (accessCode || '').toString();
+                returnUrl = (returnUrl || '').toString();
+
+                if (!show) {
+                    this._launchToken += 1;
+                    this.reset();
+                    return;
+                }
+                this.ready = !!(url || accessCode);
+                if (!url && !accessCode) {
+                    this.frameable = false;
+                    this.inline = 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;
+                }
+                var code = resolveAccessCode(accessCode, url);
+                if (code) {
+                    this.frameable = false;
+                    this.inline = true;
+                    if (this._activeCode === code && (this.launching || activePopup)) {
+                        return;
+                    }
+                    this.launchInline(code, returnUrl);
+                    return;
+                }
+                // Never navigate to checkout.paystack.com (external tab/window).
+                this.frameable = false;
+                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.';
+            },
+            launchInline(accessCode, returnUrl) {
+                var store = this;
+                var token = ++this._launchToken;
+                this._activeCode = accessCode;
+                this.launching = true;
+                this.error = '';
+                // Wait for the bottomsheet/modal body to lay out, then open Paystack
+                // and pin its body iframe over that loading area (no reparent).
+                var start = function () {
+                    if (token !== store._launchToken) return;
+                    armPaystackMount();
+                    setPaystackContainActive(true);
+                    watchPaystackIframes();
+                    waitForPinTarget(1200).then(function () {
+                        if (token !== store._launchToken) return;
+                        return loadInlineJs();
+                    }).then(function (PaystackPop) {
+                        if (token !== store._launchToken) return;
+                        if (!PaystackPop) throw new Error('Paystack unavailable');
+                        try {
+                            if (activePopup && typeof activePopup.cancelTransaction === 'function') {
+                                activePopup.cancelTransaction();
+                            }
+                        } catch (e) {}
+                        activePopup = null;
+                        armPaystackMount();
+                        setPaystackContainActive(true);
+                        syncPaystackMountBox();
+                        // PaystackPop constructor appends iframes to document.body.
+                        // We leave them there and pin checkout over our sheet body.
+                        var popup = new PaystackPop();
+                        activePopup = popup;
+                        ensurePaystackContained(document);
+                        popup.resumeTransaction(accessCode, {
+                            onLoad: function () {
+                                if (token !== store._launchToken) return;
+                                store.launching = false;
+                                ensurePaystackIframePermissions(document);
+                                ensurePaystackContained(document);
+                                // Alpine swaps header/spinner; re-measure then re-pin.
+                                setTimeout(function () { ensurePaystackContained(document); }, 0);
+                                setTimeout(function () { ensurePaystackContained(document); }, 50);
+                                setTimeout(function () { ensurePaystackContained(document); }, 150);
+                                setTimeout(function () { ensurePaystackContained(document); }, 400);
+                            },
+                            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;
+                                }
+                                window.location.reload();
+                            },
+                            onCancel: function () {
+                                if (token !== store._launchToken) return;
+                                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.';
+                            },
+                        });
+                        setTimeout(function () { ensurePaystackContained(document); }, 0);
+                        setTimeout(function () { ensurePaystackContained(document); }, 50);
+                        setTimeout(function () { ensurePaystackContained(document); }, 200);
+                        setTimeout(function () { ensurePaystackContained(document); }, 500);
+                    }).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.';
+                    });
+                };
+                if (typeof requestAnimationFrame === 'function') {
+                    requestAnimationFrame(function () { requestAnimationFrame(start); });
+                } else {
+                    setTimeout(start, 32);
+                }
+            },
+        };
     }
 
     function ensureStore() {
         if (!window.Alpine || typeof window.Alpine.store !== 'function') return null;
-        if (window.Alpine.store('ladillPayCheckout')) {
-            return window.Alpine.store('ladillPayCheckout');
-        }
-        window.Alpine.store('ladillPayCheckout', {
-            frameable: false,
-            popupBlocked: false,
-            launchKey: '',
-            reset() {
-                this.frameable = false;
-                this.popupBlocked = false;
-                this.launchKey = '';
-            },
-            sync(show, url) {
-                if (!show) {
-                    this.reset();
-                    return;
-                }
-                if (!url) return;
-                this.frameable = isFrameable(url);
-                if (this.frameable) {
-                    cancel();
-                    this.popupBlocked = false;
-                    return;
-                }
-                if (this.launchKey === url) return;
-                this.launchKey = url;
-                var popup = openCheckout(url);
-                this.popupBlocked = !(popup && !popup.closed);
-            },
-            continueTo(url) {
-                if (!url) return;
-                var popup = openCheckout(url);
-                this.popupBlocked = !(popup && !popup.closed);
-                if (this.popupBlocked) {
-                    window.location.assign(url);
-                }
-            },
-        });
+        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,
-        prepare: prepare,
-        cancel: cancel,
-        open: openCheckout,
+        isPaystackCheckoutUrl: isPaystackCheckoutUrl,
+        accessCodeFromUrl: accessCodeFromUrl,
+        resolveAccessCode: resolveAccessCode,
+        prepare: function () { loadInlineJs().catch(function () {}); return null; },
+        cancel: function () {
+            cancelInline();
+            var store = ensureStore();
+            if (store) store.reset();
+        },
+        open: function () { return null; },
         ensureStore: ensureStore,
     };
 })();
 </script>
 @endonce
+{{-- Keep Paystack checkout inside the Ladill sheet loading area. --}}
+@once('ladill-paystack-contain-css')
+<style>
+    /* Hide Paystack's own full-screen dimmer — Ladill backdrop owns that. */
+    html.ladill-pay-inline-active iframe[id^="inline-background"],
+    iframe[data-ladill-pay-bg-hidden] {
+        display: none !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+        opacity: 0 !important;
+        width: 0 !important;
+        height: 0 !important;
+        z-index: -1 !important;
+        left: -9999px !important;
+        top: -9999px !important;
+        position: fixed !important;
+    }
+
+    [data-ladill-pay-mount] {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        background: #fff;
+        min-height: 12rem;
+        /* Containing block so fixed children cannot escape the sheet body. */
+        transform: translateZ(0);
+        isolation: isolate;
+    }
+    html.ladill-pay-inline-active [data-ladill-pay-mount] {
+        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;
+    }
+    html.ladill-pay-inline-active [data-ladill-pay-sheet] {
+        z-index: 9999 !important;
+    }
+
+    /* Preferred: iframe lives inside the mount and fills it. */
+    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],
+    html.ladill-pay-inline-active iframe[data-ladill-pay-mode="mount"] {
+        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;
+        border-radius: 0 !important;
+        z-index: 2 !important;
+        visibility: visible !important;
+        display: block !important;
+        opacity: 1 !important;
+        background: #fff !important;
+        background-color: #fff !important;
+        color-scheme: light !important;
+        pointer-events: auto !important;
+        transform: none !important;
+    }
+
+    /*
+      Fallback when the frame stays on body: pin with measured pixels.
+      Default 0×0 until JS measures the sheet body (never flash full viewport).
+    */
+    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"] {
+        position: fixed !important;
+        left: var(--ladill-pay-left, 0px) !important;
+        top: var(--ladill-pay-top, 0px) !important;
+        right: auto !important;
+        bottom: auto !important;
+        width: var(--ladill-pay-width, 0px) !important;
+        height: var(--ladill-pay-height, 0px) !important;
+        max-width: none !important;
+        max-height: none !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        border: 0 !important;
+        border-radius: 0 !important;
+        z-index: 10050 !important;
+        visibility: visible !important;
+        display: block !important;
+        opacity: 1 !important;
+        background: #fff !important;
+        background-color: #fff !important;
+        color-scheme: light !important;
+        pointer-events: auto !important;
+        transform: none !important;
+    }
+</style>
+@endonce
 <template x-teleport="body">
-<div x-show="showSheet"
-     x-cloak
-     x-effect="
-        document.documentElement.style.overflow = showSheet ? 'hidden' : '';
-        if (typeof window.LadillPayCheckout !== 'undefined') {
-            window.LadillPayCheckout.ensureStore();
-        }
-        if ($store.ladillPayCheckout) {
-            $store.ladillPayCheckout.sync(showSheet, checkoutUrl);
-        }
-     "
-     @keydown.escape.window="if (showSheet) 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 }}">
+{{-- 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 === null) ? '' : String(checkoutUrl),
+                (typeof accessCode === 'undefined' || accessCode === null) ? '' : String(accessCode),
+                (typeof returnUrl === 'undefined' || returnUrl === null) ? '' : String(returnUrl)
+            );
+        };
+        $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
          x-show="showSheet"
          x-transition:enter="transition-opacity duration-300"
          x-transition:enter-start="opacity-0"
@@ -192,23 +1115,41 @@
          x-transition:leave="transition-opacity duration-200"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
-         @click="showSheet = false">
+         @click="showSheet = false; window.LadillPayCheckout?.cancel?.()">
     </div>
 
-    {{-- Mobile bottom sheet --}}
-    <div class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:hidden"
-         style="height:90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
+    {{--
+      ONE surface everywhere (POS / Merchant / Mini / Give / Invoice / Events):
+      - Mobile: bottom sheet
+      - Desktop: centered modal
+      - Paystack Inline fills the sheet body loading area (not a second full-screen modal)
+    --}}
+    <div data-ladill-pay-panel
          x-show="showSheet"
-         x-transition:enter="transition-transform duration-300 ease-out"
-         x-transition:enter-start="translate-y-full"
-         x-transition:enter-end="translate-y-0"
-         x-transition:leave="transition-transform duration-200 ease-in"
-         x-transition:leave-start="translate-y-0"
-         x-transition:leave-end="translate-y-full"
+         x-transition:enter="transition duration-300 ease-out md:duration-200"
+         x-transition:enter-start="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
+         x-transition:enter-end="translate-y-0 opacity-100 md:scale-100"
+         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"
+         :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)"
          @click.stop>
-        <div class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5"
-             style="padding-top: max(1.25rem, env(safe-area-inset-top, 0px))">
-            <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200"></div>
+
+        {{-- Full header while loading / error / same-origin; compact bar once Paystack fills the body --}}
+        <div x-show="!$store.ladillPayCheckout
+                     || $store.ladillPayCheckout.frameable
+                     || $store.ladillPayCheckout.launching
+                     || $store.ladillPayCheckout.error
+                     || !$store.ladillPayCheckout.inline"
+             class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5 md:px-5 md:pt-3"
+             style="padding-top: max(1.25rem, env(safe-area-inset-top, 0px))"
+             data-ladill-pay-header>
+            <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>
             <div class="flex items-start justify-between gap-3">
                 <div class="min-w-0">
                     <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
@@ -217,8 +1158,9 @@
                     @endif
                 </div>
                 <button type="button"
-                        x-ref="checkoutCloseMobile"
-                        @click="showSheet = false"
+                        x-ref="checkoutClose"
+                        x-init="$watch('showSheet', value => { if (value) { $nextTick(() => $refs.checkoutClose?.focus()) } })"
+                        @click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
                         class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
                         aria-label="Close">
                     <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
@@ -227,67 +1169,20 @@
                 </button>
             </div>
         </div>
-        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-            <iframe x-show="$store.ladillPayCheckout.frameable"
-                    :src="showSheet && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
-                    class="h-full min-h-[60dvh] w-full border-0"
-                    allow="payment *"
-                    title="{{ $iframeTitle }}"></iframe>
-            <div x-show="!$store.ladillPayCheckout.frameable"
-                 class="flex min-h-[60dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center">
-                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600" aria-hidden="true">
-                    <svg 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>
-                </div>
-                <div class="max-w-xs space-y-1">
-                    <p class="text-sm font-semibold text-slate-800"
-                       x-text="$store.ladillPayCheckout.popupBlocked ? 'Continue in a secure payment window' : 'Complete payment in the secure window'"></p>
-                    <p class="text-xs leading-snug text-slate-500">
-                        <span x-show="!$store.ladillPayCheckout.popupBlocked">A Paystack window should be open. If you do not see it, tap continue below.</span>
-                        <span x-show="$store.ladillPayCheckout.popupBlocked">Your browser blocked the popup. Tap continue to open Paystack.</span>
-                    </p>
-                </div>
-                <button type="button"
-                        @click="$store.ladillPayCheckout.continueTo(checkoutUrl)"
-                        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">
-                    Continue to Paystack
-                </button>
-                <button type="button"
-                        @click="showSheet = false"
-                        class="text-xs font-medium text-slate-500 hover:text-slate-700">
-                    Cancel
-                </button>
-            </div>
-        </div>
-        @if (! empty($sheetFooter))
-            <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500">
-                {{ $sheetFooter }}
-            </p>
-        @endif
-    </div>
 
-    {{-- Desktop centered modal --}}
-    <div class="relative hidden w-full max-w-lg overflow-hidden rounded-2xl bg-white shadow-2xl md:flex md:h-[min(720px,85vh)] md:flex-col"
-         x-show="showSheet"
-         x-transition:enter="transition ease-out duration-200"
-         x-transition:enter-start="opacity-0 scale-95"
-         x-transition:enter-end="opacity-100 scale-100"
-         x-transition:leave="transition ease-in duration-150"
-         x-transition:leave-start="opacity-100 scale-100"
-         x-transition:leave-end="opacity-0 scale-95"
-         @click.stop>
-        <div class="flex shrink-0 items-start justify-between gap-3 border-b border-slate-100 px-5 py-3">
-            <div class="min-w-0">
-                <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
-                @if (! empty($sheetSubtitle))
-                    <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
-                @endif
-            </div>
+        <div x-show="$store.ladillPayCheckout
+                     && $store.ladillPayCheckout.inline
+                     && !$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"
+             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>
+            <p class="pl-1 text-xs font-medium text-slate-500">{{ $sheetTitle }}</p>
             <button type="button"
-                    x-ref="checkoutCloseDesktop"
-                    x-init="$watch('showSheet', value => { if (value) { $nextTick(() => ($refs.checkoutCloseDesktop || $refs.checkoutCloseMobile)?.focus()) } })"
-                    @click="showSheet = false"
+                    data-ladill-pay-close-live
+                    @click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
                     class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
                     aria-label="Close">
                 <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
@@ -295,42 +1190,80 @@
                 </svg>
             </button>
         </div>
-        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-            <iframe x-show="$store.ladillPayCheckout.frameable"
-                    :src="showSheet && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
-                    class="h-full min-h-0 w-full border-0"
-                    style="min-height: 28rem"
-                    allow="payment *"
+
+        {{-- Body: spinner while starting; Paystack fills this when ready --}}
+        <div class="relative min-h-0 flex-1 overflow-hidden overscroll-contain bg-white"
+             data-ladill-pay-body
+             style="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>
-            <div x-show="!$store.ladillPayCheckout.frameable"
-                 class="flex h-full min-h-[28rem] flex-col items-center justify-center gap-4 px-8 py-12 text-center">
+
+            {{-- Pin target for Paystack: keep in layout while inline checkout is active. --}}
+            <div x-show="!$store.ladillPayCheckout || !$store.ladillPayCheckout.frameable"
+                 data-ladill-pay-mount
+                 class="absolute inset-0 bg-white"
+                 style="min-height: 12rem"
+                 aria-hidden="true"></div>
+
+            <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 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 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.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"/>
                     </svg>
                 </div>
-                <div class="max-w-sm space-y-1">
+                <div class="max-w-xs space-y-1 md:max-w-sm">
                     <p class="text-sm font-semibold text-slate-800"
-                       x-text="$store.ladillPayCheckout.popupBlocked ? 'Continue in a secure payment window' : 'Complete payment in the secure window'"></p>
-                    <p class="text-xs leading-snug text-slate-500">
-                        <span x-show="!$store.ladillPayCheckout.popupBlocked">A Paystack window should be open. If you do not see it, click continue below.</span>
-                        <span x-show="$store.ladillPayCheckout.popupBlocked">Your browser blocked the popup. Click continue to open Paystack.</span>
-                    </p>
+                       data-ladill-pay-status-title
+                       x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
+                          ? 'Checkout unavailable'
+                          : 'Starting secure checkout…'"></p>
+                    <p class="text-xs leading-snug text-slate-500"
+                       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>
                 </div>
                 <button type="button"
-                        @click="$store.ladillPayCheckout.continueTo(checkoutUrl)"
+                        data-ladill-pay-retry
+                        x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
+                        @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">
-                    Continue to Paystack
+                    Try again
                 </button>
                 <button type="button"
-                        @click="showSheet = false"
+                        @click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
                         class="text-xs font-medium text-slate-500 hover:text-slate-700">
                     Cancel
                 </button>
             </div>
         </div>
+
         @if (! empty($sheetFooter))
-            <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-5 py-2 text-center text-[11px] text-slate-500">
+            <p x-show="!$store.ladillPayCheckout
+                       || $store.ladillPayCheckout.frameable
+                       || $store.ladillPayCheckout.launching
+                       || $store.ladillPayCheckout.error
+                       || !$store.ladillPayCheckout.inline"
+               class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500 md:px-5"
+               data-ladill-pay-footer>
                 {{ $sheetFooter }}
             </p>
         @endif
