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
@@ -164,6 +164,8 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
    errorMsg: config.errorMsg ?? '',
    showSheet: false,
    checkoutUrl: '',
+    accessCode: '',
+    returnUrl: '',
    paymentSheetStyle: '',
    sheetBleedStyle: '',

@@ -240,14 +242,13 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
                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 || '';
+            window.LadillPayCheckout?.prepare?.();
+            this.showSheet = true; // loading cleared when payment UI opens (ladill-pay-opened)
        } catch (e) {
+            window.LadillPayCheckout?.cancel?.();
            this.errorMsg = 'Network error. Please try again.';
            this.loading = false;
        }