Restore Paystack Inline in-page sheet/modal; stop separate-browser checkout.
Deploy Ladill Events / deploy (push) Successful in 1m6s
Deploy Ladill Events / deploy (push) Successful in 1m6s
Pass access_code through pay responses and launch PaystackPop from the shared sheet instead of window.open.
This commit is contained in:
isaacclad
@@ -45,6 +45,9 @@ class EventRegistrationController extends Controller
|
|||||||
return response()->json([
|
return response()->json([
|
||||||
'paid' => $result['paid'],
|
'paid' => $result['paid'],
|
||||||
'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,
|
||||||
'badge_code' => $result['registration']->badge_code,
|
'badge_code' => $result['registration']->badge_code,
|
||||||
'success_url' => $this->confirmedUrl($qrCode, $result['registration'], $request->input('meet_return')),
|
'success_url' => $this->confirmedUrl($qrCode, $result['registration'], $request->input('meet_return')),
|
||||||
]);
|
]);
|
||||||
|
|||||||
@@ -178,6 +178,8 @@ class EventRegistrationService
|
|||||||
'registration' => $registration->fresh(),
|
'registration' => $registration->fresh(),
|
||||||
'paid' => true,
|
'paid' => true,
|
||||||
'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,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -339,6 +339,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;
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
@@ -678,7 +684,10 @@
|
|||||||
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) {
|
if (data.paid) {
|
||||||
if (!data.checkout_url) { this.errorMsg = 'Could not start checkout. Please try again.'; this.loading = false; return; }
|
if (!data.checkout_url) { this.errorMsg = 'Could not start checkout. Please try again.'; this.loading = false; return; }
|
||||||
this.checkoutUrl = data.checkout_url; this.showSheet = true; this.loading = false;
|
this.checkoutUrl = data.checkout_url;
|
||||||
|
this.accessCode = data.access_code || '';
|
||||||
|
this.publicKey = data.public_key || '';
|
||||||
|
this.returnUrl = data.callback_url || ''; this.showSheet = true; this.loading = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (data.success_url) { window.location.href = data.success_url; return; }
|
if (data.success_url) { window.location.href = data.success_url; return; }
|
||||||
@@ -1210,6 +1219,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),
|
||||||
@@ -1258,6 +1270,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;
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ class ResponsivePaystackSheetTest extends TestCase
|
|||||||
$this->assertStringContainsString('data-ladill-pay-panel', $html);
|
$this->assertStringContainsString('data-ladill-pay-panel', $html);
|
||||||
$this->assertStringContainsString('data-ladill-pay-backdrop', $html);
|
$this->assertStringContainsString('data-ladill-pay-backdrop', $html);
|
||||||
$this->assertStringContainsString('data-ladill-pay-handle', $html);
|
$this->assertStringContainsString('data-ladill-pay-handle', $html);
|
||||||
$this->assertStringContainsString('data-ladill-pay-continue', $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:rounded-2xl', $html);
|
$this->assertStringContainsString('md:rounded-2xl', $html);
|
||||||
@@ -26,9 +26,13 @@ class ResponsivePaystackSheetTest extends TestCase
|
|||||||
$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('js.paystack.co/v2/inline.js', $html);
|
||||||
$this->assertStringContainsString('Starting secure checkout', $html);
|
$this->assertStringContainsString('Starting secure checkout', $html);
|
||||||
$this->assertStringContainsString('prepare:', $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).
|
// Must not use Tailwind `hidden` + x-show on the panel (desktop stays invisible).
|
||||||
$this->assertStringNotContainsString('hidden w-full max-w-lg', $html);
|
$this->assertStringNotContainsString('hidden w-full max-w-lg', $html);
|
||||||
$this->assertStringNotContainsString('Paystack checkout', $html);
|
$this->assertStringNotContainsString('Paystack checkout', $html);
|
||||||
|
|||||||
Reference in New Issue
Block a user