Keep Mini QR Paystack checkout fully in-app.
Stop form POSTs from 307ing to ladl.link or redirecting away to checkout.paystack.com, open Paystack Inline with access_code, and use the single-chrome sheet so payment stays on the Mini page.
This commit is contained in:
isaacclad
@@ -187,12 +187,15 @@
|
||||
this.launchInline(code, returnUrl);
|
||||
return;
|
||||
}
|
||||
// Non-Paystack external URL without access_code — cannot embed.
|
||||
// Never navigate to checkout.paystack.com (external tab/window).
|
||||
// Without access_code we cannot open Inline in-page.
|
||||
this.frameable = false;
|
||||
this.inline = false;
|
||||
this.launching = false;
|
||||
this._activeCode = '';
|
||||
this.error = 'Secure checkout could not be opened in-page. Please try again.';
|
||||
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;
|
||||
@@ -293,118 +296,124 @@
|
||||
);
|
||||
}
|
||||
"
|
||||
@keydown.escape.window="if (showSheet) showSheet = false"
|
||||
@keydown.escape.window="if (showSheet && $store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error || $store.ladillPayCheckout.launching)) 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]"
|
||||
:class="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable) ? 'pointer-events-none' : ''"
|
||||
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"
|
||||
{{-- Brief loader only — then Paystack Inline is the sole payment UI (avoids double modal). --}}
|
||||
<div x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error"
|
||||
x-cloak
|
||||
data-ladill-pay-loading
|
||||
class="pointer-events-auto absolute inset-0 flex items-center justify-center bg-black/40 p-6"
|
||||
x-transition:enter="transition-opacity duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition-opacity duration-200"
|
||||
x-transition:leave="transition-opacity duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="showSheet = false; window.LadillPayCheckout?.cancel?.()">
|
||||
x-transition:leave-end="opacity-0">
|
||||
<div class="flex items-center gap-3 rounded-2xl bg-white px-5 py-4 shadow-xl">
|
||||
<svg class="h-5 w-5 animate-spin text-indigo-600" fill="none" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<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>
|
||||
<p class="text-sm font-semibold text-slate-800">Opening payment…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- One panel: bottom sheet (mobile) + centered modal (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>
|
||||
{{-- Full Ladill shell only for same-origin iframe (e.g. MoMo waiting) or recovery errors. --}}
|
||||
<div x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
|
||||
x-cloak
|
||||
class="pointer-events-auto absolute inset-0 flex items-end justify-center md:items-center md:p-6"
|
||||
data-ladill-pay-shell>
|
||||
<div class="absolute inset-0 bg-black/60"
|
||||
data-ladill-pay-backdrop
|
||||
x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
|
||||
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>
|
||||
<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 || !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>
|
||||
<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 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="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
|
||||
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 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 in the Paystack window'
|
||||
: 'Starting secure checkout…')"></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>
|
||||
<button type="button"
|
||||
data-ladill-pay-retry
|
||||
x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
|
||||
@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">
|
||||
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 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.error"
|
||||
class="flex min-h-[40dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center md:min-h-[20rem] 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-red-50 text-red-500" aria-hidden="true">
|
||||
<svg 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="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>Checkout unavailable</p>
|
||||
<p class="text-xs leading-snug text-slate-500" x-text="$store.ladillPayCheckout.error"></p>
|
||||
</div>
|
||||
<button type="button"
|
||||
data-ladill-pay-retry
|
||||
@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">
|
||||
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>
|
||||
@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>
|
||||
|
||||
@@ -362,15 +362,20 @@
|
||||
const data = await res.json();
|
||||
if (data.error) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = data.error; this.loading = false; return; }
|
||||
if (!data.checkout_url) { this.errorMsg = 'Could not start payment.'; this.loading = false; return; }
|
||||
if (data.provider === 'mtn_momo') {
|
||||
window.LadillPayCheckout?.cancel?.(); window.location.href = data.checkout_url;
|
||||
// Never send the browser to checkout.paystack.com.
|
||||
const isSameOrigin = (u) => {
|
||||
try { return new URL(u, window.location.href).origin === window.location.origin; } catch (e) { return false; }
|
||||
};
|
||||
if (data.provider === 'mtn_momo' && isSameOrigin(data.checkout_url)) {
|
||||
window.LadillPayCheckout?.cancel?.();
|
||||
window.location.href = data.checkout_url;
|
||||
} else {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
} catch(e) {
|
||||
window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
|
||||
@@ -678,13 +683,20 @@
|
||||
const data = await res.json();
|
||||
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.provider === 'mtn_momo') {
|
||||
window.LadillPayCheckout?.cancel?.(); window.location.href = data.checkout_url;
|
||||
// Never send the browser to checkout.paystack.com.
|
||||
const isSameOrigin = (u) => {
|
||||
try { return new URL(u, window.location.href).origin === window.location.origin; } catch (e) { return false; }
|
||||
};
|
||||
if (data.provider === 'mtn_momo' && isSameOrigin(data.checkout_url)) {
|
||||
window.LadillPayCheckout?.cancel?.();
|
||||
window.location.href = data.checkout_url;
|
||||
} else {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
} catch(e) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.'; this.loading = false; }
|
||||
}
|
||||
@@ -1222,15 +1234,20 @@
|
||||
const data = await res.json();
|
||||
if (data.error) { window.LadillPayCheckout?.cancel?.(); this.errorMsg = data.error; this.loading = false; return; }
|
||||
if (!data.checkout_url) { this.errorMsg = 'Could not start payment.'; this.loading = false; return; }
|
||||
if (data.provider === 'mtn_momo') {
|
||||
window.LadillPayCheckout?.cancel?.(); window.location.href = data.checkout_url;
|
||||
// Never send the browser to checkout.paystack.com.
|
||||
const isSameOrigin = (u) => {
|
||||
try { return new URL(u, window.location.href).origin === window.location.origin; } catch (e) { return false; }
|
||||
};
|
||||
if (data.provider === 'mtn_momo' && isSameOrigin(data.checkout_url)) {
|
||||
window.LadillPayCheckout?.cancel?.();
|
||||
window.location.href = data.checkout_url;
|
||||
} else {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
} catch(e) {
|
||||
window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
|
||||
|
||||
@@ -23,8 +23,13 @@
|
||||
x-data="miniPaymentLanding({
|
||||
payUrl: @js($payUrl),
|
||||
csrf: @js($csrf),
|
||||
amount: @js(old('amount')),
|
||||
amount: @js(old('amount', session('amount'))),
|
||||
errorMsg: @js(session('error')),
|
||||
bootstrapCheckoutUrl: @js(session('checkout_url')),
|
||||
bootstrapAccessCode: @js(session('access_code')),
|
||||
bootstrapPublicKey: @js(session('public_key')),
|
||||
bootstrapCallbackUrl: @js(session('callback_url')),
|
||||
bootstrapProvider: @js(session('provider', 'paystack')),
|
||||
})">
|
||||
|
||||
{{-- Mobile: Ladill Mini branding + fixed payment sheet --}}
|
||||
@@ -123,112 +128,5 @@
|
||||
</main>
|
||||
|
||||
@include('partials.paystack-sheet')
|
||||
|
||||
{{--
|
||||
Safety net: if Alpine/Vite fails to boot, native form POST still works.
|
||||
If Alpine boots but miniPaymentLanding was missing from an old bundle, redefine it.
|
||||
--}}
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
const Alpine = window.Alpine;
|
||||
if (!Alpine || typeof Alpine.data !== 'function') return;
|
||||
// Re-register so Pay works even when Blade deploys ahead of an old Vite bundle.
|
||||
Alpine.data('miniPaymentLanding', (config = {}) => ({
|
||||
amount: config.amount ?? '',
|
||||
loading: false,
|
||||
errorMsg: config.errorMsg ?? '',
|
||||
showSheet: false,
|
||||
checkoutUrl: '',
|
||||
accessCode: '',
|
||||
publicKey: '',
|
||||
returnUrl: '',
|
||||
paymentSheetStyle: '',
|
||||
sheetBleedStyle: '',
|
||||
init() {
|
||||
this._syncSheet = () => {
|
||||
if (window.innerWidth >= 768) {
|
||||
this.paymentSheetStyle = '';
|
||||
this.sheetBleedStyle = '';
|
||||
return;
|
||||
}
|
||||
const vp = window.visualViewport;
|
||||
const offset = vp ? Math.max(0, Math.round(window.innerHeight - vp.height - vp.offsetTop)) : 0;
|
||||
const safePad = offset > 0 ? '1.25rem' : 'max(1.25rem, env(safe-area-inset-bottom))';
|
||||
this.paymentSheetStyle = `bottom: ${offset}px; padding-bottom: ${safePad};`;
|
||||
this.sheetBleedStyle = `bottom: ${offset}px;`;
|
||||
};
|
||||
this._onViewportChange = () => this._syncSheet();
|
||||
window.visualViewport?.addEventListener('resize', this._onViewportChange);
|
||||
window.visualViewport?.addEventListener('scroll', this._onViewportChange);
|
||||
if (window.innerWidth < 768) document.documentElement.classList.add('mini-payment-page');
|
||||
this._syncSheet();
|
||||
},
|
||||
async submitPay() {
|
||||
const value = parseFloat(this.amount);
|
||||
if (!value || value <= 0) {
|
||||
this.errorMsg = 'Enter an amount greater than zero.';
|
||||
return;
|
||||
}
|
||||
this.errorMsg = '';
|
||||
this.loading = true;
|
||||
this.checkoutUrl = '';
|
||||
this.accessCode = '';
|
||||
this.publicKey = '';
|
||||
this.returnUrl = '';
|
||||
// Open sheet chrome immediately (mobile bottom sheet / desktop modal).
|
||||
this.showSheet = true;
|
||||
const controller = new AbortController();
|
||||
const timer = setTimeout(() => controller.abort(), 45000);
|
||||
try {
|
||||
const res = await fetch(config.payUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/json',
|
||||
'X-CSRF-TOKEN': config.csrf,
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
body: JSON.stringify({ amount: value }),
|
||||
signal: controller.signal,
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
const apiError = typeof data.error === 'string'
|
||||
? data.error
|
||||
: (typeof data.message === 'string' ? data.message : '');
|
||||
if (!res.ok || apiError) {
|
||||
this.showSheet = false;
|
||||
this.errorMsg = apiError || ('Could not start payment (' + res.status + '). Please try again.');
|
||||
return;
|
||||
}
|
||||
if (!data.checkout_url && !data.access_code) {
|
||||
this.showSheet = false;
|
||||
this.errorMsg = 'Could not start payment. Please try again.';
|
||||
return;
|
||||
}
|
||||
// Legacy MoMo waiting page must be full-page — never trap it in the Paystack iframe.
|
||||
const useSheet = data.provider !== 'mtn_momo';
|
||||
if (useSheet) {
|
||||
this.checkoutUrl = data.checkout_url || '';
|
||||
this.accessCode = data.access_code || '';
|
||||
this.publicKey = data.public_key || '';
|
||||
this.returnUrl = data.callback_url || '';
|
||||
} else {
|
||||
this.showSheet = false;
|
||||
window.location.assign(data.checkout_url);
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
this.showSheet = false;
|
||||
this.errorMsg = e?.name === 'AbortError'
|
||||
? 'Payment is taking too long. Please try again.'
|
||||
: 'Network error. Please try again.';
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user