Restore Paystack Inline in-page sheet/modal; stop separate-browser checkout.
Deploy Ladill Give / deploy (push) Successful in 1m11s

Pass access_code through pay responses and launch PaystackPop from the shared sheet instead of window.open.
This commit is contained in:
isaacclad
2026-07-21 19:12:24 +00:00
parent 0046e96a7b
commit 4ab2fcb3ad
7 changed files with 262 additions and 89 deletions
@@ -46,6 +46,9 @@ class DonationController extends Controller
return response()->json([ return response()->json([
'checkout_url' => $result['checkout_url'], 'checkout_url' => $result['checkout_url'],
'access_code' => $result['access_code'] ?? null,
'public_key' => $result['public_key'] ?? null,
'callback_url' => $result['callback_url'] ?? null,
'callback_url' => $result['callback_url'], 'callback_url' => $result['callback_url'],
]); ]);
} }
@@ -102,6 +102,8 @@ class GiveDonationService
return [ return [
'donation' => $donation->fresh(), 'donation' => $donation->fresh(),
'checkout_url' => $checkoutUrl, 'checkout_url' => $checkoutUrl,
'access_code' => isset($payOrder['access_code']) ? (string) $payOrder['access_code'] : null,
'public_key' => isset($payOrder['public_key']) ? (string) $payOrder['public_key'] : null,
'callback_url' => $callbackUrl, 'callback_url' => $callbackUrl,
]; ];
} }
+6
View File
@@ -163,6 +163,9 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
errorMsg: config.errorMsg ?? '', errorMsg: config.errorMsg ?? '',
showSheet: false, showSheet: false,
checkoutUrl: '', checkoutUrl: '',
accessCode: '',
publicKey: '',
returnUrl: '',
paymentSheetStyle: '', paymentSheetStyle: '',
sheetBleedStyle: '', sheetBleedStyle: '',
@@ -240,6 +243,9 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
return; return;
} }
this.checkoutUrl = data.checkout_url; this.checkoutUrl = data.checkout_url;
this.accessCode = data.access_code || '';
this.publicKey = data.public_key || '';
this.returnUrl = data.callback_url || '';
this.showSheet = true; this.showSheet = true;
} catch (e) { } catch (e) {
window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.'; window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
@@ -56,6 +56,9 @@
} }
this.checkoutUrl = data.checkout_url; this.checkoutUrl = data.checkout_url;
this.accessCode = data.access_code || '';
this.publicKey = data.public_key || '';
this.returnUrl = data.callback_url || '';
this.showSheet = true; this.showSheet = true;
this.loading = false; this.loading = false;
} catch (error) { } catch (error) {
+212 -84
View File
@@ -6,13 +6,16 @@
- operator: signed-in staff flows such as wallet top-up - operator: signed-in staff flows such as wallet top-up
Optional overrides: $sheetTitle, $sheetSubtitle, $sheetFooter, $sheetAria, $iframeTitle 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 Paystack checkout.paystack.com cannot be iframed (X-Frame-Options: SAMEORIGIN).
embedded. Same-origin URLs (e.g. MoMo waiting pages) still load in an iframe. Primary path: Paystack Inline JS (PaystackPop.resumeTransaction) in-page overlay,
External checkouts stay in this chrome with a Continue CTA that opens Paystack not a separate browser tab. Same-origin URLs (e.g. MoMo waiting) still use iframe.
in a named window (user gesture not blocked). Auto-popups are intentionally
avoided so the sheet/modal always remains visibly on screen.
--}} --}}
@php @php
$audience = $audience ?? 'buyer'; $audience = $audience ?? 'buyer';
@@ -43,8 +46,9 @@
(function () { (function () {
if (window.LadillPayCheckout) return; if (window.LadillPayCheckout) return;
var PENDING_NAME = 'ladill_pay_checkout'; var INLINE_SRC = 'https://js.paystack.co/v2/inline.js';
var pendingWindow = null; var inlineLoading = null;
var activePopup = null;
function isFrameable(url) { function isFrameable(url) {
if (!url) return false; if (!url) return false;
@@ -55,46 +59,80 @@
} }
} }
function writePendingPlaceholder(win) { function isPaystackCheckoutUrl(url) {
if (!win) return; if (!url) return false;
try { try {
win.document.open(); var host = new URL(url, window.location.href).hostname.toLowerCase();
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>'); return host === 'checkout.paystack.com' || host.endsWith('.paystack.com');
win.document.close();
} catch (e) {}
}
// Kept for callers; no longer opens a window on Pay click (that stole focus
// from the sheet/modal). Prefer opening from the in-sheet Continue CTA.
function prepare() {
return null;
}
function cancel() {
if (pendingWindow && !pendingWindow.closed) {
try { pendingWindow.close(); } catch (e) {}
}
pendingWindow = null;
}
function openCheckout(url) {
if (!url) return null;
try {
if (pendingWindow && !pendingWindow.closed) {
pendingWindow.location = url;
var win = pendingWindow;
pendingWindow = null;
return win;
}
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) { } catch (e) {
pendingWindow = null; return false;
return null;
} }
} }
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) {
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;
}
function ensureStore() { function ensureStore() {
if (!window.Alpine || typeof window.Alpine.store !== 'function') return null; if (!window.Alpine || typeof window.Alpine.store !== 'function') return null;
if (window.Alpine.store('ladillPayCheckout')) { if (window.Alpine.store('ladillPayCheckout')) {
@@ -102,41 +140,109 @@
} }
window.Alpine.store('ladillPayCheckout', { window.Alpine.store('ladillPayCheckout', {
frameable: false, frameable: false,
popupBlocked: false, inline: false,
ready: false, ready: false,
launching: false,
error: '',
_launchToken: 0,
_activeCode: '',
reset() { reset() {
this.frameable = false; this.frameable = false;
this.popupBlocked = false; this.inline = false;
this.ready = false; this.ready = false;
this.launching = false;
this.error = '';
this._activeCode = '';
cancelInline();
}, },
sync(show, url) { sync(show, url, accessCode, returnUrl) {
if (!show) { if (!show) {
this._launchToken += 1;
this.reset(); this.reset();
return; return;
} }
this.ready = !!url; this.ready = !!(url || accessCode);
if (!url) { if (!url && !accessCode) {
this.frameable = false; this.frameable = false;
this.popupBlocked = false; this.inline = false;
this.launching = false;
this._activeCode = '';
return; return;
} }
this.frameable = isFrameable(url);
// Never auto-open an external popup here — the sheet/modal must stay
// visible. External checkouts use the Continue CTA (user gesture).
this.popupBlocked = !this.frameable;
},
continueTo(url) {
if (!url) return;
if (isFrameable(url)) { if (isFrameable(url)) {
this.frameable = true; this.frameable = true;
this.popupBlocked = false; this.inline = false;
this.launching = false;
this._activeCode = '';
cancelInline();
return; return;
} }
var popup = openCheckout(url); var code = resolveAccessCode(accessCode, url);
this.popupBlocked = !(popup && !popup.closed); if (code) {
if (this.popupBlocked) { this.frameable = false;
window.location.assign(url); this.inline = true;
if (this._activeCode === code && (this.launching || activePopup)) {
return;
}
this.launchInline(code, returnUrl);
return;
} }
// Non-Paystack external URL without access_code — cannot embed.
this.frameable = false;
this.inline = false;
this.launching = false;
this._activeCode = '';
this.error = '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 = '';
loadInlineJs().then(function (PaystackPop) {
if (token !== store._launchToken) return;
if (!PaystackPop) throw new Error('Paystack unavailable');
cancelInline();
var popup = new PaystackPop();
activePopup = popup;
popup.resumeTransaction(accessCode, {
onLoad: function () {
if (token !== store._launchToken) return;
store.launching = false;
},
onSuccess: function (transaction) {
if (token !== store._launchToken) return;
store.launching = false;
var reference = (transaction && (transaction.reference || transaction.trxref)) || '';
var dest = buildReturnUrl(returnUrl, reference);
if (dest) {
window.location.assign(dest);
return;
}
// Fallback: reload so server can reconcile via webhook.
window.location.reload();
},
onCancel: function () {
if (token !== store._launchToken) return;
store.launching = false;
store._activeCode = '';
activePopup = null;
window.dispatchEvent(new CustomEvent('ladill-pay-cancelled'));
},
onError: function (err) {
if (token !== store._launchToken) return;
store.launching = false;
store._activeCode = '';
store.error = (err && err.message) ? String(err.message) : 'Could not open secure payment.';
},
});
}).catch(function (err) {
if (token !== store._launchToken) return;
store.launching = false;
store._activeCode = '';
store.error = (err && err.message) ? String(err.message) : 'Could not load payment script.';
});
}, },
}); });
return window.Alpine.store('ladillPayCheckout'); return window.Alpine.store('ladillPayCheckout');
@@ -153,9 +259,16 @@
window.LadillPayCheckout = { window.LadillPayCheckout = {
isFrameable: isFrameable, isFrameable: isFrameable,
prepare: prepare, isPaystackCheckoutUrl: isPaystackCheckoutUrl,
cancel: cancel, accessCodeFromUrl: accessCodeFromUrl,
open: openCheckout, resolveAccessCode: resolveAccessCode,
prepare: function () { return null; },
cancel: function () {
cancelInline();
var store = ensureStore();
if (store) store.reset();
},
open: function () { return null; },
ensureStore: ensureStore, ensureStore: ensureStore,
}; };
})(); })();
@@ -172,10 +285,16 @@
} }
const store = $store.ladillPayCheckout; const store = $store.ladillPayCheckout;
if (store) { if (store) {
store.sync(showSheet, checkoutUrl); store.sync(
showSheet,
typeof checkoutUrl !== 'undefined' ? checkoutUrl : '',
typeof accessCode !== 'undefined' ? accessCode : '',
typeof returnUrl !== 'undefined' ? returnUrl : ''
);
} }
" "
@keydown.escape.window="if (showSheet) showSheet = false" @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" class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
@@ -191,11 +310,10 @@
x-transition:leave="transition-opacity duration-200" x-transition:leave="transition-opacity duration-200"
x-transition:leave-start="opacity-100" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" x-transition:leave-end="opacity-0"
@click="showSheet = false"> @click="showSheet = false; window.LadillPayCheckout?.cancel?.()">
</div> </div>
{{-- One panel: bottom sheet (mobile) + centered modal (desktop). Avoid Tailwind {{-- One panel: bottom sheet (mobile) + centered modal (desktop). --}}
`hidden` + Alpine x-show which can leave the desktop panel stuck invisible. --}}
<div data-ladill-pay-panel <div data-ladill-pay-panel
class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl md:max-w-lg md:rounded-2xl" 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)" style="height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
@@ -220,7 +338,7 @@
<button type="button" <button type="button"
x-ref="checkoutClose" x-ref="checkoutClose"
x-init="$watch('showSheet', value => { if (value) { $nextTick(() => $refs.checkoutClose?.focus()) } })" x-init="$watch('showSheet', value => { if (value) { $nextTick(() => $refs.checkoutClose?.focus()) } })"
@click="showSheet = false" @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" class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
aria-label="Close"> aria-label="Close">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
@@ -238,35 +356,45 @@
title="{{ $iframeTitle }}"></iframe> title="{{ $iframeTitle }}"></iframe>
<div x-show="!$store.ladillPayCheckout || !$store.ladillPayCheckout.frameable" <div x-show="!$store.ladillPayCheckout || !$store.ladillPayCheckout.frameable"
class="flex min-h-[60dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center md:min-h-[28rem] md:px-8 md:py-12"> class="flex min-h-[60dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center md:min-h-[28rem] 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"> <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600" aria-hidden="true">
<svg x-show="!checkoutUrl" class="h-6 w-6 animate-spin" fill="none" viewBox="0 0 24 24"> <svg x-show="!$store.ladillPayCheckout || $store.ladillPayCheckout.launching || !checkoutUrl && !(typeof accessCode !== 'undefined' && accessCode)"
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> <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> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg> </svg>
<svg x-show="checkoutUrl" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"> <svg x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error"
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"/> <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> </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>
<div class="max-w-xs space-y-1 md:max-w-sm"> <div class="max-w-xs space-y-1 md:max-w-sm">
<p class="text-sm font-semibold text-slate-800" <p class="text-sm font-semibold text-slate-800"
x-text="!checkoutUrl data-ladill-pay-status-title
? 'Starting secure checkout…' x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
: 'Continue to Paystack to pay'"></p> ? 'Checkout unavailable'
<p class="text-xs leading-snug text-slate-500"> : ($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching
<span x-show="!checkoutUrl">Please wait while we prepare your payment.</span> ? 'Complete payment in the Paystack window'
<span x-show="checkoutUrl">A secure Paystack window will open. Keep this page open until you finish.</span> : 'Starting secure checkout…')"></p>
</p> <p class="text-xs leading-snug text-slate-500"
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
? $store.ladillPayCheckout.error
: 'Paystack opens on this page — not in a separate browser.'"></p>
</div> </div>
<button type="button" <button type="button"
data-ladill-pay-continue data-ladill-pay-retry
x-show="checkoutUrl" x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
@click="$store.ladillPayCheckout.continueTo(checkoutUrl)" @click="$store.ladillPayCheckout.sync(true, typeof checkoutUrl !== 'undefined' ? checkoutUrl : '', typeof accessCode !== 'undefined' ? accessCode : '', typeof returnUrl !== 'undefined' ? 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"> 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>
<button type="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"> class="text-xs font-medium text-slate-500 hover:text-slate-700">
Cancel Cancel
</button> </button>
@@ -338,6 +338,9 @@
errorMsg: '', errorMsg: '',
showSheet: false, showSheet: false,
checkoutUrl: '', checkoutUrl: '',
accessCode: '',
publicKey: '',
returnUrl: '',
async give() { async give() {
if (!this.amount || parseFloat(this.amount) <= 0) { this.errorMsg = 'Enter a valid amount.'; return; } if (!this.amount || parseFloat(this.amount) <= 0) { this.errorMsg = 'Enter a valid amount.'; return; }
if (!this.name.trim()) { this.errorMsg = 'Enter your name.'; return; } if (!this.name.trim()) { this.errorMsg = 'Enter your name.'; return; }
@@ -359,6 +362,9 @@
const data = await res.json(); const data = await res.json();
if (data.error) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = data.error; this.loading = false; return; } if (data.error) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = data.error; this.loading = false; return; }
this.checkoutUrl = data.checkout_url; this.checkoutUrl = data.checkout_url;
this.accessCode = data.access_code || '';
this.publicKey = data.public_key || '';
this.returnUrl = data.callback_url || '';
this.showSheet = true; this.showSheet = true;
} catch(e) { } catch(e) {
window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.'; window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
@@ -667,6 +673,9 @@
if (data.error) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = data.error; this.loading = false; return; } if (data.error) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = data.error; this.loading = false; return; }
if (!data.paid) { window.location.href = data.success_url; return; } if (!data.paid) { window.location.href = data.success_url; return; }
this.checkoutUrl = data.checkout_url; this.checkoutUrl = data.checkout_url;
this.accessCode = data.access_code || '';
this.publicKey = data.public_key || '';
this.returnUrl = data.callback_url || '';
this.showSheet = true; this.showSheet = true;
} catch(e) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.'; this.loading = false; } } catch(e) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.'; this.loading = false; }
} }
@@ -1152,6 +1161,9 @@
errorMsg: '', errorMsg: '',
showSheet: false, showSheet: false,
checkoutUrl: '', checkoutUrl: '',
accessCode: '',
publicKey: '',
returnUrl: '',
shippingType: @js($shippingType), shippingType: @js($shippingType),
shippingFee: @js($shippingFee), shippingFee: @js($shippingFee),
freeAbove: @js($freeShippingAbove), freeAbove: @js($freeShippingAbove),
@@ -1201,6 +1213,9 @@
const data = await res.json(); const data = await res.json();
if (data.error) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = data.error; this.loading = false; return; } if (data.error) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = data.error; this.loading = false; return; }
this.checkoutUrl = data.checkout_url; this.checkoutUrl = data.checkout_url;
this.accessCode = data.access_code || '';
this.publicKey = data.public_key || '';
this.returnUrl = data.callback_url || '';
this.showSheet = true; this.showSheet = true;
} catch(e) { } catch(e) {
window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.'; window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
+21 -5
View File
@@ -14,21 +14,37 @@ class ResponsivePaystackSheetTest extends TestCase
$this->assertStringContainsString('role="dialog"', $html); $this->assertStringContainsString('role="dialog"', $html);
$this->assertStringContainsString('aria-modal="true"', $html); $this->assertStringContainsString('aria-modal="true"', $html);
$this->assertStringContainsString('data-ladill-pay-sheet', $html);
$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('md:items-center', $html);
$this->assertStringContainsString('rounded-t-2xl', $html); $this->assertStringContainsString('rounded-t-2xl', $html);
$this->assertStringContainsString('md:h-[min(720px,85vh)]', $html); $this->assertStringContainsString('md:rounded-2xl', $html);
$this->assertStringContainsString('md:max-w-lg', $html);
$this->assertStringContainsString('Complete your payment', $html); $this->assertStringContainsString('Complete your payment', $html);
$this->assertStringContainsString('safe-area-inset-bottom', $html); $this->assertStringContainsString('safe-area-inset-bottom', $html);
$this->assertStringContainsString('LadillPayCheckout', $html); $this->assertStringContainsString('LadillPayCheckout', $html);
$this->assertStringContainsString('Continue to Paystack', $html); $this->assertStringContainsString('resumeTransaction', $html);
$this->assertStringContainsString('ladill_pay_checkout', $html); $this->assertStringContainsString('js.paystack.co/v2/inline.js', $html);
$this->assertStringContainsString('prepare:', $html); $this->assertStringContainsString('Starting secure checkout', $html);
$this->assertStringContainsString('not in a separate browser', $html);
// Must not push Paystack to a separate browser as the primary path.
$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('Paystack checkout', $html);
} }
public function test_payment_return_escapes_popup_and_iframe_to_opener_or_top(): void public function test_payment_return_escapes_popup_and_iframe_to_opener_or_top(): void
{ {
$html = view('public.payment-return', [ $view = view()->exists('partials.payment-return')
? 'partials.payment-return'
: 'public.payment-return';
$html = view($view, [
'redirect' => 'https://example.test/paid', 'redirect' => 'https://example.test/paid',
])->render(); ])->render();