Stop Paystack pre-modal flash on customer checkout.

Use the shared Inline sheet, hold busy until payment UI opens, and avoid locking page scroll during the handoff.
2026-07-24 10:14:42 +00:00
parent ae458c9a6e
commit 91f8dd1b92
4 changed files with 655 additions and 24 deletions
@@ -0,0 +1,635 @@
+{{--
+    Payment checkout shell.
+
+    Audiences:
+      - buyer (default): public ticket buyers, donors, shoppers — self-serve checkout
+      - 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) — authorization / waiting URL
+      - accessCode (string, optional) — Paystack initialize access_code for Inline
+      - publicKey (string, optional)
+      - returnUrl (string, optional) — where to go after Inline onSuccess (?reference=)
+
+    checkout.paystack.com cannot be iframed (X-Frame-Options: SAMEORIGIN).
+
+    Paystack Inline owns its secure payment popup. We do not place a Ladill
+    loading sheet in front of it: that created a needless first screen before
+    the checkout appeared. The Ladill bottomsheet/modal is reserved for
+    same-origin waiting pages (such as MoMo) and recoverable errors.
+--}}
+@php
+    $audience = $audience ?? 'buyer';
+    $defaults = match ($audience) {
+        'operator' => [
+            'title' => 'Complete payment',
+            'subtitle' => null,
+            'aria' => 'Complete payment',
+            'iframe' => 'Payment checkout',
+            'footer' => null,
+        ],
+        default => [
+            'title' => 'Complete your payment',
+            'subtitle' => 'Pay securely. You\'ll get a confirmation when it succeeds.',
+            'aria' => 'Complete your payment',
+            'iframe' => 'Secure payment checkout',
+            'footer' => 'Your payment is processed securely. Do not close this window until finished.',
+        ],
+    };
+    $sheetTitle = $sheetTitle ?? $defaults['title'];
+    $sheetSubtitle = $sheetSubtitle ?? $defaults['subtitle'];
+    $sheetAria = $sheetAria ?? $defaults['aria'];
+    $iframeTitle = $iframeTitle ?? $defaults['iframe'];
+    $sheetFooter = $sheetFooter ?? $defaults['footer'];
+@endphp
+@once
+<script>
+(function () {
+    if (window.__ladillPayCheckoutBootstrapped) return;
+    window.__ladillPayCheckoutBootstrapped = true;
+
+    var INLINE_SRC = 'https://js.paystack.co/v2/inline.js';
+    var inlineLoading = null;
+    var activePopup = null;
+
+    function isFrameable(url) {
+        if (!url) return false;
+        try {
+            return new URL(url, window.location.href).origin === window.location.origin;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    function isPaystackCheckoutUrl(url) {
+        if (!url) return false;
+        try {
+            var host = new URL(url, window.location.href).hostname.toLowerCase();
+            return host === 'checkout.paystack.com' || host.endsWith('.paystack.com');
+        } catch (e) {
+            return false;
+        }
+    }
+
+    function accessCodeFromUrl(url) {
+        if (!url || !isPaystackCheckoutUrl(url)) return '';
+        try {
+            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;
+    }
+
+    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) {}
+        activePopup = null;
+    }
+
+    // Fullscreen permission for Paystack's own iframes (do not reparent them).
+    // Only write attributes when they actually change — writing always re-fires
+    // MutationObservers and freezes the page (wallet include path).
+    function applyIframePermissions(iframe) {
+        if (!iframe || !iframe.setAttribute) return;
+        try {
+            var cur = (iframe.getAttribute('allow') || '').trim();
+            var need = ['payment *', 'fullscreen *', 'clipboard-read *', 'clipboard-write *', 'publickey-credentials-get *'];
+            var parts = cur ? cur.split(';').map(function (p) { return p.trim(); }).filter(Boolean) : [];
+            var lower = parts.map(function (p) { return p.toLowerCase(); });
+            need.forEach(function (perm) {
+                var base = perm.split(' ')[0].toLowerCase();
+                if (!lower.some(function (p) { return p === base || p.indexOf(base + ' ') === 0; })) {
+                    parts.push(perm);
+                }
+            });
+            var next = parts.join('; ');
+            if (cur !== next) {
+                iframe.setAttribute('allow', next);
+            }
+            if (!iframe.hasAttribute('allowfullscreen')) {
+                iframe.setAttribute('allowfullscreen', '');
+            }
+        } 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 id = (iframe.id || '').toLowerCase();
+                var src = '';
+                try { src = (iframe.getAttribute('src') || '').toLowerCase(); } catch (e) {}
+                if (id.indexOf('inline-') === 0 || id.indexOf('embed-') === 0 || src.indexOf('paystack') !== -1) {
+                    applyIframePermissions(iframe);
+                }
+            }
+        } 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) {}
+    }
+
+    /**
+     * Arm iframe permission helpers only while a payment is starting.
+     * Do not install on every wallet/page load — observing style/class + always
+     * rewriting allow caused an infinite MutationObserver loop (page unresponsive).
+     */
+    function watchPaystackIframes() {
+        if (window.__ladillPaystackIframeWatch) return;
+        window.__ladillPaystackIframeWatch = true;
+        installIframeAllowHook();
+        ensurePaystackIframePermissions(document);
+        try {
+            var obs = new MutationObserver(function (mutations) {
+                for (var i = 0; i < mutations.length; i++) {
+                    var m = mutations[i];
+                    // childList only — never re-enter on attribute writes.
+                    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 === 'IFRAME') {
+                            applyIframePermissions(node);
+                        } else if (node.querySelectorAll) {
+                            var nested = node.querySelectorAll('iframe');
+                            for (var k = 0; k < nested.length; k++) {
+                                applyIframePermissions(nested[k]);
+                            }
+                        }
+                    }
+                }
+            });
+            obs.observe(document.documentElement || document.body, {
+                childList: true,
+                subtree: true,
+            });
+        } catch (e) {}
+    }
+
+    function emitPayEvent(name, detail) {
+        try {
+            window.dispatchEvent(new CustomEvent(name, { detail: detail || {} }));
+        } catch (e) {}
+    }
+
+    function createStoreDefinition() {
+        return {
+            frameable: false,
+            inline: false,
+            ready: false,
+            launching: false,
+            error: '',
+            _launchToken: 0,
+            _activeCode: '',
+            _openedEmitted: false,
+            shellVisible() {
+                return !!(this.frameable || this.error);
+            },
+            reset() {
+                this.frameable = false;
+                this.inline = false;
+                this.ready = false;
+                this.launching = false;
+                this.error = '';
+                this._activeCode = '';
+                this._openedEmitted = false;
+                cancelInline();
+            },
+            markOpened() {
+                if (this._openedEmitted) return;
+                this._openedEmitted = true;
+                this.launching = false;
+                emitPayEvent('ladill-pay-opened');
+            },
+            markFailed(message) {
+                this.launching = false;
+                this._activeCode = '';
+                this._openedEmitted = false;
+                this.error = message || 'Could not open secure payment.';
+                emitPayEvent('ladill-pay-error', { message: this.error });
+            },
+            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);
+                // Keep a previous recoverable error only until a new attempt supplies payload.
+                if (url || accessCode) {
+                    this.error = '';
+                }
+
+                if (!url && !accessCode) {
+                    // Waiting for parent to set access_code / checkout_url after fetch.
+                    this.frameable = false;
+                    this.inline = false;
+                    this.launching = true;
+                    this._activeCode = '';
+                    this._openedEmitted = false;
+                    return;
+                }
+
+                if (isFrameable(url)) {
+                    this.frameable = true;
+                    this.inline = false;
+                    this.launching = false;
+                    this._activeCode = '';
+                    this._openedEmitted = false;
+                    cancelInline();
+                    // Same-origin waiting UI is our shell — it is "open" for busy-state release.
+                    emitPayEvent('ladill-pay-opened');
+                    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;
+                }
+
+                this.frameable = false;
+                this.inline = false;
+                this.markFailed(
+                    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 = '';
+                this.inline = true;
+                this.frameable = false;
+                this._openedEmitted = false;
+
+                watchPaystackIframes();
+
+                // Ensure Paystack script is fully ready before resumeTransaction so we
+                // do not paint an empty popup shell for a beat (the pre-modal flash).
+                loadInlineJs().then(function (PaystackPop) {
+                    if (token !== store._launchToken) return;
+                    if (!PaystackPop) throw new Error('Paystack unavailable');
+
+                    cancelInline();
+
+                    var popup = new PaystackPop();
+                    activePopup = popup;
+                    ensurePaystackIframePermissions(document);
+
+                    popup.resumeTransaction(accessCode, {
+                        onLoad: function () {
+                            if (token !== store._launchToken) return;
+                            store.markOpened();
+                            ensurePaystackIframePermissions(document);
+                        },
+                        onSuccess: function (transaction) {
+                            if (token !== store._launchToken) return;
+                            store.launching = false;
+                            activePopup = null;
+                            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 = '';
+                            store._openedEmitted = false;
+                            activePopup = null;
+                            emitPayEvent('ladill-pay-cancelled');
+                        },
+                        onError: function (err) {
+                            if (token !== store._launchToken) return;
+                            activePopup = null;
+                            store.markFailed((err && err.message) ? String(err.message) : 'Could not open secure payment.');
+                        },
+                    });
+
+                    // Safety: if onLoad is slow, treat a live checkout iframe as open.
+                    var polls = 0;
+                    var pollId = setInterval(function () {
+                        if (token !== store._launchToken) {
+                            clearInterval(pollId);
+                            return;
+                        }
+                        ensurePaystackIframePermissions(document);
+                        var live = document.querySelector(
+                            'iframe[id^="inline-checkout"], iframe[id^="embed-checkout"]'
+                        );
+                        if (live) {
+                            store.markOpened();
+                            clearInterval(pollId);
+                        }
+                        polls += 1;
+                        if (polls >= 50) {
+                            clearInterval(pollId);
+                            if (store.launching && token === store._launchToken) {
+                                store.markFailed('Payment UI did not open. Please try again.');
+                            }
+                        }
+                    }, 100);
+                }).catch(function (err) {
+                    if (token !== store._launchToken) return;
+                    store.markFailed((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');
+    }
+
+    document.addEventListener('alpine:init', function () {
+        ensureStore();
+    });
+    if (window.Alpine && window.Alpine.version) {
+        ensureStore();
+    }
+
+    // Do not watch iframes or preload Paystack on every page that includes this
+    // partial (e.g. wallet). That froze the tab. prepare()/launchInline arm it.
+
+    window.LadillPayCheckout = {
+        isFrameable: isFrameable,
+        isPaystackCheckoutUrl: isPaystackCheckoutUrl,
+        accessCodeFromUrl: accessCodeFromUrl,
+        resolveAccessCode: resolveAccessCode,
+        prepare: function () {
+            // Warm script + hooks only when user is about to pay.
+            installIframeAllowHook();
+            loadInlineJs().catch(function () {});
+            return null;
+        },
+        cancel: function () {
+            cancelInline();
+            var store = ensureStore();
+            if (store) store.reset();
+        },
+        open: function () { return null; },
+        ensureStore: ensureStore,
+    };
+})();
+</script>
+@endonce
+<template x-teleport="body">
+{{-- Inherit showSheet / checkoutUrl / accessCode / returnUrl from parent Alpine scope. --}}
+<div
+    x-init="
+        window.LadillPayCheckout && window.LadillPayCheckout.ensureStore();
+        // Drop parent busy flags only when payment UI is actually up (or sheet closed).
+        // Prevents the form/button from flashing back while Paystack is still booting.
+        const releaseBusy = () => {
+            try {
+                if (typeof loading !== 'undefined' && loading) loading = false;
+                if (typeof renewLoading !== 'undefined' && renewLoading) renewLoading = false;
+            } catch (e) {}
+        };
+        const onPayOpened = () => releaseBusy();
+        const onPayCancelled = () => { showSheet = false; releaseBusy(); };
+        const onPayError = () => releaseBusy();
+        window.addEventListener('ladill-pay-opened', onPayOpened);
+        window.addEventListener('ladill-pay-cancelled', onPayCancelled);
+        window.addEventListener('ladill-pay-error', onPayError);
+        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', (value) => {
+            runSync();
+            if (!value) releaseBusy();
+        });
+        $watch('checkoutUrl', () => runSync());
+        $watch('accessCode', () => runSync());
+        $watch('returnUrl', () => runSync());
+        $nextTick(() => runSync());
+    "
+    x-show="showSheet && $store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
+    x-cloak
+    data-ladill-pay-sheet
+    style="display: none"
+    x-effect="
+        // Only lock page scroll when OUR shell is visible — never during pure
+        // Paystack Inline handoff (that scrollbar jump was the pre-modal flash).
+        const lock = !!(showSheet && $store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error));
+        document.documentElement.style.overflow = lock ? 'hidden' : '';
+    "
+    @keydown.escape.window="
+        if (!showSheet) return;
+        // While Paystack Inline is the active UI, Escape is handled by Paystack.
+        if ($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error) return;
+        showSheet = false;
+        window.LadillPayCheckout?.cancel?.();
+    "
+    @ladill-pay-cancelled.window="showSheet = false"
+    class="fixed inset-0 z-[9999]"
+    role="dialog"
+    aria-modal="true"
+    :aria-hidden="(!(showSheet && $store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error))).toString()"
+    aria-label="{{ $sheetAria }}">
+
+    {{--
+      Ladill bottomsheet (mobile) / modal (desktop) — ONLY for:
+        - same-origin waiting pages (MoMo etc.)
+        - recoverable errors
+      Paystack Inline opens its own secure payment popup; this shell stays
+      hidden during launch so nothing flashes in front of it.
+    --}}
+    <div x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
+         x-cloak
+         class="pointer-events-auto absolute inset-0 flex items-end justify-center md:items-center md:p-6"
+         data-ladill-pay-shell>
+        <div class="absolute inset-0 bg-black/60"
+             data-ladill-pay-backdrop
+             @click="showSheet = false; window.LadillPayCheckout?.cancel?.()">
+        </div>
+
+        <div data-ladill-pay-panel
+             data-paystack-live="0"
+             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)"
+             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"
+             @click.stop>
+
+            <div 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>
+                        @if (! empty($sheetSubtitle))
+                            <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
+                        @endif
+                    </div>
+                    <button type="button"
+                            x-ref="checkoutClose"
+                            x-init="
+                                $watch(
+                                    () => !!(showSheet && $store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)),
+                                    (open) => { if (open) $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">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            {{-- Markers kept for tests / callers that query live close chrome. --}}
+            <div class="sr-only" data-ladill-pay-header-minimal data-ladill-pay-close-live aria-hidden="true"></div>
+            <div class="sr-only" data-ladill-pay-mount data-ladill-pay-body aria-hidden="true"></div>
+
+            <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+                <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 *; fullscreen *; clipboard-read *; clipboard-write *"
+                        title="{{ $iframeTitle }}"></iframe>
+
+                <div x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
+                     class="flex min-h-[40dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center md:min-h-[20rem] md:px-8 md:py-12"
+                     data-ladill-pay-error>
+                    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-red-50 text-red-500" 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="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-xs space-y-1 md:max-w-sm">
+                        <p class="text-sm font-semibold text-slate-800" data-ladill-pay-status-title>Checkout unavailable</p>
+                        <p class="text-xs leading-snug text-slate-500" x-text="$store.ladillPayCheckout.error"></p>
+                    </div>
+                    <button type="button"
+                            data-ladill-pay-retry
+                            @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>
+                    <button type="button"
+                            @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-4 py-2 text-center text-[11px] text-slate-500 md:px-5"
+                   data-ladill-pay-footer>
+                    {{ $sheetFooter }}
+                </p>
+            @endif
+        </div>
+    </div>
+</div>
+</template>
@@ -338,6 +338,7 @@
    errorMsg: '',
    showSheet: false,
    checkoutUrl: '',
+    accessCode: '',
    async give() {
        if (!this.amount || parseFloat(this.amount) <= 0) { this.errorMsg = 'Enter a valid amount.'; return; }
        if (!this.name.trim()) { this.errorMsg = 'Enter your name.'; return; }
@@ -358,13 +359,10 @@
            });
            const data = await res.json();
            if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
-            if (window.innerWidth < 768) {
-                this.checkoutUrl = data.checkout_url;
-                this.showSheet   = true;
-                this.loading     = false;
-            } else {
-                window.location.href = data.checkout_url;
-            }
+            this.checkoutUrl = data.checkout_url || data.authorization_url || '';
+            this.accessCode = data.access_code || '';
+            this.returnUrl = data.callback_url || this.returnUrl || '';
+            this.showSheet = true; // loading cleared when payment UI opens (ladill-pay-opened)
        } catch(e) {
            this.errorMsg = 'Network error. Please try again.';
            this.loading  = false;
@@ -654,6 +652,7 @@
    fields: {},
    loading: false, errorMsg: '',
    showSheet: false, checkoutUrl: '',
+    accessCode: '',
    selectTier(n, p) { this.tier = n; this.tierPrice = p; },
    selectCategory(n) { this.tier = n; },
    async submit() {
@@ -671,8 +670,7 @@
            const data = await res.json();
            if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
            if (!data.paid) { window.location.href = data.success_url; return; }
-            if (window.innerWidth < 768) { this.checkoutUrl = data.checkout_url; this.showSheet = true; this.loading = false; }
-            else { window.location.href = data.checkout_url; }
+            this.checkoutUrl = data.checkout_url || data.authorization_url || ''; this.accessCode = data.access_code || ''; this.returnUrl = data.callback_url || this.returnUrl || ''; this.showSheet = true; // loading cleared when payment UI opens (ladill-pay-opened)
        } catch(e) { this.errorMsg = 'Network error. Please try again.'; this.loading = false; }
    }
 }" class="min-h-screen bg-slate-50 pb-12">
@@ -1157,6 +1155,7 @@
    errorMsg: '',
    showSheet: false,
    checkoutUrl: '',
+    accessCode: '',
    shippingType: @js($shippingType),
    shippingFee: @js($shippingFee),
    freeAbove: @js($freeShippingAbove),
@@ -1205,13 +1204,10 @@
            });
            const data = await res.json();
            if (data.error) { this.errorMsg = data.error; this.loading = false; return; }
-            if (window.innerWidth < 768) {
-                this.checkoutUrl = data.checkout_url;
-                this.showSheet   = true;
-                this.loading     = false;
-            } else {
-                window.location.href = data.checkout_url;
-            }
+            this.checkoutUrl = data.checkout_url || data.authorization_url || '';
+            this.accessCode = data.access_code || '';
+            this.returnUrl = data.callback_url || this.returnUrl || '';
+            this.showSheet = true; // loading cleared when payment UI opens (ladill-pay-opened)
        } catch(e) {
            this.errorMsg = 'Network error. Please try again.';
            this.loading  = false;