isaacclad/ladill-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stop Paystack pre-modal flash on customer checkout.
Deploy Ladill Mini / deploy (push) Successful in 1m39s
Details

Browse Source 
Use the shared Inline sheet, hold busy until payment UI opens, and avoid locking page scroll during the handoff.
This commit is contained in:
isaacclad
2026-07-24 10:14:41 +00:00
parent fa82e8e906
commit 5edbf0a677
5 changed files with 318 additions and 961 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/app.js
+4
View File
@@ -323,8 +323,12 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
: 'Network error. Please try again.';
} finally {
clearTimeout(timer);
// Keep loading while the sheet is open — ladill-pay-opened / cancel / error clear it.
// Clearing here caused a form flash before Paystack's modal painted.
if (!this.showSheet) {
this.loading = false;
}
}
},
}));
resources/views/components/user/service-topup-modal.blade.php
+1 -2
View File
@@ -59,8 +59,7 @@
this.accessCode = data.access_code || '';
this.publicKey = data.public_key || '';
this.returnUrl = data.callback_url || '';
this.showSheet = true;
this.loading = false;
this.showSheet = true; // loading cleared when payment UI opens (ladill-pay-opened)
} catch (error) {
window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
this.loading = false;
resources/views/partials/paystack-sheet.blade.php
+197 -853
View File
File diff suppressed because it is too large Load Diff
resources/views/public/qr/landing.blade.php
+3 -6
View File
@@ -374,8 +374,7 @@
this.accessCode = data.access_code || '';
this.publicKey = data.public_key || '';
this.returnUrl = data.callback_url || '';
this.showSheet = true;
this.loading = false;
this.showSheet = true; // loading cleared when payment UI opens (ladill-pay-opened)
}
} catch(e) {
window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
@@ -695,8 +694,7 @@
this.accessCode = data.access_code || '';
this.publicKey = data.public_key || '';
this.returnUrl = data.callback_url || '';
this.showSheet = true;
this.loading = false;
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; }
}
@@ -1246,8 +1244,7 @@
this.accessCode = data.access_code || '';
this.publicKey = data.public_key || '';
this.returnUrl = data.callback_url || '';
this.showSheet = true;
this.loading = false;
this.showSheet = true; // loading cleared when payment UI opens (ladill-pay-opened)
}
} catch(e) {
window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
tests/Feature/ResponsivePaystackSheetTest.php
+23 -10
View File
@@ -18,39 +18,52 @@ class ResponsivePaystackSheetTest extends TestCase
$this->assertStringContainsString('data-ladill-pay-panel', $html);
$this->assertStringContainsString('data-ladill-pay-backdrop', $html);
$this->assertStringContainsString('data-ladill-pay-handle', $html);
$this->assertStringContainsString('data-ladill-pay-inline-status', $html);
$this->assertStringContainsString('md:items-center', $html);
$this->assertStringContainsString('rounded-t-2xl', $html);
$this->assertStringContainsString('md:rounded-2xl', $html);
$this->assertStringContainsString('md:max-w-lg', $html);
$this->assertStringContainsString('data-paystack-live', $html);
$this->assertStringContainsString('data-ladill-pay-close-live', $html);
$this->assertStringContainsString('data-ladill-pay-header-minimal', $html);
$this->assertStringContainsString('Complete your payment', $html);
$this->assertStringContainsString('safe-area-inset-bottom', $html);
$this->assertStringContainsString('LadillPayCheckout', $html);
$this->assertStringContainsString('resumeTransaction', $html);
$this->assertStringContainsString("\$watch('showSheet'", $html);
$this->assertStringContainsString('js.paystack.co/v2/inline.js', $html);
$this->assertStringContainsString('Paystack owns its secure checkout popup', $html);
$this->assertStringContainsString('items-end justify-center md:items-center', $html);
// Cross-origin checkout needs fullscreen delegated on the iframe + parent policy.
$this->assertStringContainsString('rounded-t-2xl bg-white shadow-2xl md:max-w-lg md:rounded-2xl', $html);
$this->assertStringContainsString('ensurePaystackIframePermissions', $html);
$this->assertStringContainsString('installIframeAllowHook', $html);
$this->assertStringContainsString('fullscreen *', $html);
$this->assertStringContainsString("attributeFilter: ['allow', 'src', 'id', 'name', 'style', 'class']", $html);
// Paystack must load inside the Ladill sheet mount — not a second full-screen modal.
$this->assertStringNotContainsString("attributeFilter: ['allow', 'src', 'id', 'name', 'style', 'class']", $html);
$this->assertStringContainsString('childList only', $html);
$this->assertStringContainsString('Only write attributes when they actually change', $html);
$this->assertStringContainsString('Do not watch iframes or preload Paystack on every page', $html);
$this->assertStringContainsString('data-ladill-pay-mount', $html);
$this->assertStringContainsString('setPaystackContainActive', $html);
$this->assertStringContainsString('installAppendHook', $html);
$this->assertStringContainsString('ladill-pay-inline-active', $html);
// Must not push Paystack to a separate browser as the primary path.
$this->assertStringContainsString('data-ladill-pay-body', $html);
$this->assertStringNotContainsString('styleCheckoutPinnedToRect', $html);
$this->assertStringNotContainsString('waitForPinTarget', $html);
$this->assertStringNotContainsString('placeCheckoutInMount', $html);
$this->assertStringNotContainsString('installAppendHook', $html);
$this->assertStringNotContainsString('__ladillContainPaystack', $html);
$this->assertStringNotContainsString('Node.prototype.appendChild', $html);
$this->assertStringNotContainsString('data-ladill-pay-inline-status', $html);
$this->assertStringNotContainsString('Please wait', $html);
$this->assertStringContainsString('Payment UI did not open', $html);
$this->assertStringContainsString('ladill-pay-opened', $html);
$this->assertStringContainsString('Only lock page scroll when OUR shell is visible', $html);
$this->assertStringContainsString('releaseBusy', $html);
$this->assertStringContainsString('markOpened', $html);
$this->assertStringNotContainsString('Continue to Paystack', $html);
$this->assertStringNotContainsString('window.open(', $html);
// Must not use Tailwind `hidden` + x-show on the panel (desktop stays invisible).
$this->assertStringNotContainsString('hidden w-full max-w-lg', $html);
$this->assertStringNotContainsString('Paystack checkout', $html);
$this->assertStringNotContainsString('bg-transparent shadow-none', $html);
$this->assertStringNotContainsString('not in a separate browser', $html);
}
public function test_payment_return_escapes_popup_and_iframe_to_opener_or_top(): void
{
$view = view()->exists('partials.payment-return')