Open Paystack from the Pay click gesture, not after fetch.

Paystack blocks iframes, so checkout uses a popup beside the sheet/modal chrome. Opening about:blank on the user tap keeps that window from being blocked after the async initiate response.

resources/js/app.js

@@ -218,6 +218,9 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
         this.errorMsg = '';
         this.loading = true;
 
+        // Open a blank checkout window synchronously so Paystack is not blocked after await.
+        window.LadillPayCheckout?.prepare?.();
+
         const controller = new AbortController();
         const timer = setTimeout(() => controller.abort(), 45000);
 
@@ -238,10 +241,12 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
                 ? data.error
                 : (typeof data.message === 'string' ? data.message : '');
             if (!res.ok || apiError) {
+                window.LadillPayCheckout?.cancel?.();
                 this.errorMsg = apiError || (`Could not start payment (${res.status}). Please try again.`);
                 return;
             }
             if (!data.checkout_url) {
+                window.LadillPayCheckout?.cancel?.();
                 this.errorMsg = 'Could not start payment. Please try again.';
                 return;
             }
@@ -253,10 +258,12 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
                 this.checkoutUrl = data.checkout_url;
                 this.showSheet = true;
             } else {
+                window.LadillPayCheckout?.cancel?.();
                 window.location.assign(data.checkout_url);
                 return;
             }
         } catch (e) {
+            window.LadillPayCheckout?.cancel?.();
             this.errorMsg = e?.name === 'AbortError'
                 ? 'Payment is taking too long. Please try again.'
                 : 'Network error. Please try again.';