isaacclad
e03a5dc30f
Deploy Ladill Mini / deploy (push) Successful in 49s
Use Alpine watches for checkout sync, prewarm the Paystack script, and preserve bottomsheet wrapping around in-page Inline.
443 lines
21 KiB
PHP
443 lines
21 KiB
PHP
{{--
|
|
Responsive payment checkout shell: bottom sheet on mobile, centered modal on desktop.
|
|
|
|
Audiences:
|
|
- buyer (default): public ticket buyers, donors, shoppers — self-serve checkout
|
|
- operator: signed-in staff flows such as wallet top-up
|
|
|
|
Optional overrides: $sheetTitle, $sheetSubtitle, $sheetFooter, $sheetAria, $iframeTitle
|
|
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 cannot be iframed (X-Frame-Options: SAMEORIGIN).
|
|
Primary path: Paystack Inline JS (PaystackPop.resumeTransaction) — in-page overlay,
|
|
not a separate browser tab. Same-origin URLs (e.g. MoMo waiting) still use iframe.
|
|
--}}
|
|
@php
|
|
$audience = $audience ?? 'buyer';
|
|
$defaults = match ($audience) {
|
|
'operator' => [
|
|
'title' => 'Complete payment',
|
|
'subtitle' => null,
|
|
'aria' => 'Complete payment',
|
|
'iframe' => 'Payment checkout',
|
|
'footer' => null,
|
|
],
|
|
default => [
|
|
'title' => 'Complete your payment',
|
|
'subtitle' => 'Pay securely. You\'ll get a confirmation when it succeeds.',
|
|
'aria' => 'Complete your payment',
|
|
'iframe' => 'Secure payment checkout',
|
|
'footer' => 'Your payment is processed securely. Do not close this window until finished.',
|
|
],
|
|
};
|
|
$sheetTitle = $sheetTitle ?? $defaults['title'];
|
|
$sheetSubtitle = $sheetSubtitle ?? $defaults['subtitle'];
|
|
$sheetAria = $sheetAria ?? $defaults['aria'];
|
|
$iframeTitle = $iframeTitle ?? $defaults['iframe'];
|
|
$sheetFooter = $sheetFooter ?? $defaults['footer'];
|
|
@endphp
|
|
@once
|
|
<script>
|
|
(function () {
|
|
if (window.__ladillPayCheckoutBootstrapped) return;
|
|
window.__ladillPayCheckoutBootstrapped = true;
|
|
|
|
var INLINE_SRC = 'https://js.paystack.co/v2/inline.js';
|
|
var inlineLoading = null;
|
|
var activePopup = null;
|
|
|
|
function isFrameable(url) {
|
|
if (!url) return false;
|
|
try {
|
|
return new URL(url, window.location.href).origin === window.location.origin;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function isPaystackCheckoutUrl(url) {
|
|
if (!url) return false;
|
|
try {
|
|
var host = new URL(url, window.location.href).hostname.toLowerCase();
|
|
return host === 'checkout.paystack.com' || host.endsWith('.paystack.com');
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
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) {
|
|
if (window.PaystackPop) {
|
|
resolve(window.PaystackPop);
|
|
return;
|
|
}
|
|
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;
|
|
}
|
|
|
|
// Warm the Paystack script early so resumeTransaction is ready on Pay click.
|
|
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
|
loadInlineJs().catch(function () {});
|
|
} else {
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
loadInlineJs().catch(function () {});
|
|
});
|
|
}
|
|
|
|
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 createStoreDefinition() {
|
|
return {
|
|
frameable: false,
|
|
inline: false,
|
|
ready: false,
|
|
launching: false,
|
|
error: '',
|
|
_launchToken: 0,
|
|
_activeCode: '',
|
|
reset() {
|
|
this.frameable = false;
|
|
this.inline = false;
|
|
this.ready = false;
|
|
this.launching = false;
|
|
this.error = '';
|
|
this._activeCode = '';
|
|
cancelInline();
|
|
},
|
|
sync(show, url, accessCode, returnUrl) {
|
|
url = (url || '').toString();
|
|
accessCode = (accessCode || '').toString();
|
|
returnUrl = (returnUrl || '').toString();
|
|
|
|
if (!show) {
|
|
this._launchToken += 1;
|
|
this.reset();
|
|
return;
|
|
}
|
|
this.ready = !!(url || accessCode);
|
|
if (!url && !accessCode) {
|
|
this.frameable = false;
|
|
this.inline = false;
|
|
this.launching = true; // waiting for checkout payload
|
|
this.error = '';
|
|
this._activeCode = '';
|
|
return;
|
|
}
|
|
if (isFrameable(url)) {
|
|
this.frameable = true;
|
|
this.inline = false;
|
|
this.launching = false;
|
|
this.error = '';
|
|
this._activeCode = '';
|
|
cancelInline();
|
|
return;
|
|
}
|
|
var code = resolveAccessCode(accessCode, url);
|
|
if (code) {
|
|
this.frameable = false;
|
|
this.inline = true;
|
|
if (this._activeCode === code && (this.launching || activePopup)) {
|
|
return;
|
|
}
|
|
this.launchInline(code, returnUrl);
|
|
return;
|
|
}
|
|
// Never navigate to checkout.paystack.com (external tab/window).
|
|
this.frameable = false;
|
|
this.inline = false;
|
|
this.launching = false;
|
|
this._activeCode = '';
|
|
this.error = isPaystackCheckoutUrl(url)
|
|
? 'Could not start in-app payment. Please try again.'
|
|
: '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;
|
|
}
|
|
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.';
|
|
});
|
|
},
|
|
};
|
|
}
|
|
|
|
function ensureStore() {
|
|
if (!window.Alpine || typeof window.Alpine.store !== 'function') return null;
|
|
try {
|
|
var existing = window.Alpine.store('ladillPayCheckout');
|
|
if (existing) return existing;
|
|
} catch (e) {}
|
|
window.Alpine.store('ladillPayCheckout', createStoreDefinition());
|
|
return window.Alpine.store('ladillPayCheckout');
|
|
}
|
|
|
|
document.addEventListener('alpine:init', function () {
|
|
ensureStore();
|
|
});
|
|
|
|
// If Alpine already started (late include), register immediately.
|
|
if (window.Alpine && window.Alpine.version) {
|
|
ensureStore();
|
|
}
|
|
|
|
window.LadillPayCheckout = {
|
|
isFrameable: isFrameable,
|
|
isPaystackCheckoutUrl: isPaystackCheckoutUrl,
|
|
accessCodeFromUrl: accessCodeFromUrl,
|
|
resolveAccessCode: resolveAccessCode,
|
|
prepare: function () { loadInlineJs().catch(function () {}); return null; },
|
|
cancel: function () {
|
|
cancelInline();
|
|
var store = ensureStore();
|
|
if (store) store.reset();
|
|
},
|
|
open: function () { return null; },
|
|
ensureStore: ensureStore,
|
|
};
|
|
})();
|
|
</script>
|
|
@endonce
|
|
<template x-teleport="body">
|
|
{{-- No local x-data: inherit showSheet/checkoutUrl/accessCode from the including scope. --}}
|
|
<div
|
|
x-init="
|
|
window.LadillPayCheckout && window.LadillPayCheckout.ensureStore();
|
|
const runSync = () => {
|
|
const store = $store.ladillPayCheckout;
|
|
if (!store) return;
|
|
store.sync(
|
|
!!showSheet,
|
|
(typeof checkoutUrl === 'undefined' || checkoutUrl === null) ? '' : String(checkoutUrl),
|
|
(typeof accessCode === 'undefined' || accessCode === null) ? '' : String(accessCode),
|
|
(typeof returnUrl === 'undefined' || returnUrl === null) ? '' : String(returnUrl)
|
|
);
|
|
};
|
|
$watch('showSheet', () => runSync());
|
|
$watch('checkoutUrl', () => runSync());
|
|
$watch('accessCode', () => runSync());
|
|
$watch('returnUrl', () => runSync());
|
|
$nextTick(() => runSync());
|
|
"
|
|
x-show="showSheet"
|
|
x-cloak
|
|
data-ladill-pay-sheet
|
|
x-effect="document.documentElement.style.overflow = showSheet ? 'hidden' : ''"
|
|
@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"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
:aria-hidden="(!showSheet).toString()"
|
|
aria-label="{{ $sheetAria }}">
|
|
|
|
<div class="absolute inset-0 bg-black/60"
|
|
data-ladill-pay-backdrop
|
|
x-show="showSheet"
|
|
x-transition:enter="transition-opacity duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition-opacity duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="showSheet = false; window.LadillPayCheckout?.cancel?.()">
|
|
</div>
|
|
|
|
{{-- Always wrap payment: bottom sheet on mobile, centered modal on desktop. --}}
|
|
<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"
|
|
style="height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
|
|
x-show="showSheet"
|
|
x-transition:enter="transition duration-300 ease-out md:duration-200"
|
|
x-transition:enter-start="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
|
|
x-transition:enter-end="translate-y-0 opacity-100 md:scale-100"
|
|
x-transition:leave="transition duration-200 ease-in md:duration-150"
|
|
x-transition:leave-start="translate-y-0 opacity-100 md:scale-100"
|
|
x-transition:leave-end="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
|
|
@click.stop>
|
|
<div class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5 md:px-5 md:pt-3"
|
|
style="padding-top: max(1.25rem, env(safe-area-inset-top, 0px))">
|
|
<div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200 md:hidden" data-ladill-pay-handle aria-hidden="true"></div>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
|
|
@if (! empty($sheetSubtitle))
|
|
<p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
|
|
@endif
|
|
</div>
|
|
<button type="button"
|
|
x-ref="checkoutClose"
|
|
x-init="$watch('showSheet', value => { if (value) { $nextTick(() => $refs.checkoutClose?.focus()) } })"
|
|
@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"
|
|
aria-label="Close">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
|
|
<iframe x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.frameable"
|
|
:src="showSheet && $store.ladillPayCheckout && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
|
|
class="h-full min-h-[60dvh] w-full border-0 md:min-h-0"
|
|
style="min-height: 28rem"
|
|
allow="payment *"
|
|
title="{{ $iframeTitle }}"></iframe>
|
|
|
|
<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"
|
|
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">
|
|
<svg x-show="!$store.ladillPayCheckout || $store.ladillPayCheckout.launching || ($store.ladillPayCheckout && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.inline)"
|
|
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>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
|
</svg>
|
|
<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"/>
|
|
</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 class="max-w-xs space-y-1 md:max-w-sm">
|
|
<p class="text-sm font-semibold text-slate-800"
|
|
data-ladill-pay-status-title
|
|
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
|
|
? 'Checkout unavailable'
|
|
: ($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching
|
|
? 'Complete payment on this screen'
|
|
: 'Starting secure checkout…')"></p>
|
|
<p class="text-xs leading-snug text-slate-500"
|
|
x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
|
|
? $store.ladillPayCheckout.error
|
|
: 'Secure card and mobile money checkout opens on this page — not in a separate browser.'"></p>
|
|
</div>
|
|
<button type="button"
|
|
data-ladill-pay-retry
|
|
x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
|
|
@click="window.LadillPayCheckout?.ensureStore()?.sync(true, (typeof checkoutUrl==='undefined'||checkoutUrl===null)?'':String(checkoutUrl), (typeof accessCode==='undefined'||accessCode===null)?'':String(accessCode), (typeof returnUrl==='undefined'||returnUrl===null)?'':String(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">
|
|
Try again
|
|
</button>
|
|
<button type="button"
|
|
@click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
|
|
class="text-xs font-medium text-slate-500 hover:text-slate-700">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@if (! empty($sheetFooter))
|
|
<p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500 md:px-5">
|
|
{{ $sheetFooter }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</template>
|