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

Make Mini Pay never fail silently.
Deploy Ladill Mini / deploy (push) Successful in 48s
Details

Browse Source 
Use form POST fallback, re-register Alpine Pay handler in Blade, timeout fetch, and always full-page navigate for MoMo so the waiting page is not blank in the Paystack iframe.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-13 23:04:28 +00:00
co-authored by Cursor
parent 53a83b84c5
commit a2bf4f435f
3 changed files with 158 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Services/Pay/PayClient.php
+1 -1
View File
@@ -26,7 +26,7 @@ class PayClient
/** @param array<string,mixed> $payload */ /** @param array<string,mixed> $payload */
public function createCheckout(array $payload): array public function createCheckout(array $payload): array
{ {
$res = Http::withToken($this->token())->acceptJson()->timeout(15)->post($this->base().'/checkouts', $payload); $res = Http::withToken($this->token())->acceptJson()->timeout(45)->post($this->base().'/checkouts', $payload);
return $this->jsonOrFail($res, 'Could not start checkout. Please try again.'); return $this->jsonOrFail($res, 'Could not start checkout. Please try again.');
} }
resources/js/app.js
+15 -7
View File
@@ -15,6 +15,7 @@ window.QRCodeStyling = QRCodeStyling;
import qrcode from 'qrcode-generator'; import qrcode from 'qrcode-generator';
window.qrcode = qrcode; window.qrcode = qrcode;
window.Alpine = Alpine;
Alpine.plugin(collapse); Alpine.plugin(collapse);
registerLadillClipboard(Alpine); registerLadillClipboard(Alpine);
@@ -224,6 +225,9 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
this.errorMsg = ''; this.errorMsg = '';
this.loading = true; this.loading = true;
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 45000);
try { try {
const res = await fetch(config.payUrl, { const res = await fetch(config.payUrl, {
method: 'POST', method: 'POST',
@@ -234,33 +238,37 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
'X-Requested-With': 'XMLHttpRequest', 'X-Requested-With': 'XMLHttpRequest',
}, },
body: JSON.stringify({ amount: value, customer_phone: phone }), body: JSON.stringify({ amount: value, customer_phone: phone }),
signal: controller.signal,
}); });
const data = await res.json().catch(() => ({})); const data = await res.json().catch(() => ({}));
const apiError = typeof data.error === 'string' const apiError = typeof data.error === 'string'
? data.error ? data.error
: (typeof data.message === 'string' ? data.message : ''); : (typeof data.message === 'string' ? data.message : '');
if (!res.ok || apiError) { if (!res.ok || apiError) {
this.errorMsg = apiError || 'Could not start payment. Please try again.'; this.errorMsg = apiError || (`Could not start payment (${res.status}). Please try again.`);
this.loading = false;
return; return;
} }
if (!data.checkout_url) { if (!data.checkout_url) {
this.errorMsg = 'Could not start payment. Please try again.'; this.errorMsg = 'Could not start payment. Please try again.';
this.loading = false;
return; return;
} }
// MoMo waiting page must be full-page (prompt + status poll), not the Paystack iframe sheet. // MoMo waiting page must be full-page — never trap it in the Paystack iframe
// (cross-origin iframe is blank / looks like "Pay did nothing").
const useSheet = data.provider !== 'mtn_momo' && window.innerWidth < 768; const useSheet = data.provider !== 'mtn_momo' && window.innerWidth < 768;
if (useSheet) { if (useSheet) {
this.checkoutUrl = data.checkout_url; this.checkoutUrl = data.checkout_url;
this.showSheet = true; this.showSheet = true;
this.loading = false;
} else { } else {
window.location.href = data.checkout_url; window.location.assign(data.checkout_url);
return;
} }
} catch (e) { } catch (e) {
this.errorMsg = 'Network error. Please try again.'; this.errorMsg = e?.name === 'AbortError'
? 'Payment is taking too long. Please try again.'
: 'Network error. Please try again.';
} finally {
clearTimeout(timer);
this.loading = false; this.loading = false;
} }
}, },
resources/views/public/qr/payment-landing.blade.php
+142 -35
View File
@@ -14,6 +14,7 @@
<title>Pay {{ $businessName }}</title> <title>Pay {{ $businessName }}</title>
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet" /> <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet" />
<style>[x-cloak]{display:none!important}</style>
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/css/app.css', 'resources/js/app.js'])
</head> </head>
<body class="min-h-screen bg-slate-50 font-sans text-slate-900 antialiased" <body class="min-h-screen bg-slate-50 font-sans text-slate-900 antialiased"
@@ -46,33 +47,38 @@
:style="paymentSheetStyle"> :style="paymentSheetStyle">
<div class="mx-auto mb-4 h-1 w-10 rounded-full bg-slate-200"></div> <div class="mx-auto mb-4 h-1 w-10 rounded-full bg-slate-200"></div>
<div x-show="errorMsg" x-cloak class="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMsg"></div> {{-- Always-visible (no x-cloak) server/client error so failures are never silent --}}
<div class="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700"
x-show="errorMsg"
x-text="errorMsg"
@if(session('error')) style="display:block" @else style="display:none" @endif>{{ session('error') }}</div>
<label for="amount-mobile" class="sr-only">Amount ({{ $currency }})</label> <form method="POST" action="{{ $payUrl }}" @submit.prevent="submitPay()" class="space-y-0">
<div class="relative"> @csrf
<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span> <label for="amount-mobile" class="sr-only">Amount ({{ $currency }})</label>
<input type="number" id="amount-mobile" x-model="amount" step="0.01" min="0.01" required autofocus <div class="relative">
inputmode="decimal" <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span>
@keydown.enter.prevent="submitPay()" <input type="number" id="amount-mobile" name="amount" x-model="amount" step="0.01" min="0.01" required autofocus
class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500" inputmode="decimal"
placeholder="0.00"> class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
</div> placeholder="0.00" value="{{ old('amount') }}">
</div>
<label for="phone-mobile" class="mt-3 block text-xs font-medium text-slate-500">MTN MoMo number</label> <label for="phone-mobile" class="mt-3 block text-xs font-medium text-slate-500">MTN MoMo number</label>
<input type="tel" id="phone-mobile" x-model="phone" required <input type="tel" id="phone-mobile" name="customer_phone" x-model="phone" required
inputmode="tel" autocomplete="tel" inputmode="tel" autocomplete="tel"
@keydown.enter.prevent="submitPay()" class="mt-1.5 w-full rounded-2xl border-slate-200 py-3.5 px-4 text-base font-medium text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
class="mt-1.5 w-full rounded-2xl border-slate-200 py-3.5 px-4 text-base font-medium text-slate-900 focus:border-indigo-500 focus:ring-indigo-500" placeholder="e.g. 024XXXXXXX" value="{{ old('customer_phone') }}">
placeholder="e.g. 024XXXXXXX">
<button type="button" @click="submitPay()" :disabled="loading" <button type="submit" :disabled="loading"
class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"> class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60">
<svg x-show="loading" x-cloak class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"> <svg x-show="loading" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24" style="display:none">
<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>
<span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span> <span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span>
</button> </button>
</form>
<p class="mt-3 text-center text-[11px] text-slate-400">Pay with MTN MoMo. Powered by Ladill Pay</p> <p class="mt-3 text-center text-[11px] text-slate-400">Pay with MTN MoMo. Powered by Ladill Pay</p>
</div> </div>
@@ -91,40 +97,141 @@
@endif @endif
</div> </div>
<div x-show="errorMsg" x-cloak class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMsg"></div> <div class="mt-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700"
x-show="errorMsg"
x-text="errorMsg"
@if(session('error')) style="display:block" @else style="display:none" @endif>{{ session('error') }}</div>
<div class="mt-6"> <form method="POST" action="{{ $payUrl }}" @submit.prevent="submitPay()" class="mt-6">
@csrf
<label for="amount-desktop" class="sr-only">Amount ({{ $currency }})</label> <label for="amount-desktop" class="sr-only">Amount ({{ $currency }})</label>
<div class="relative"> <div class="relative">
<span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span> <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-lg font-semibold text-slate-400">{{ $currency }}</span>
<input type="number" id="amount-desktop" x-model="amount" step="0.01" min="0.01" required <input type="number" id="amount-desktop" name="amount" x-model="amount" step="0.01" min="0.01" required
inputmode="decimal" inputmode="decimal"
@keydown.enter.prevent="submitPay()"
class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500" class="w-full rounded-2xl border-slate-200 py-4 pl-16 pr-4 text-3xl font-bold tracking-tight text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
placeholder="0.00"> placeholder="0.00" value="{{ old('amount') }}">
</div> </div>
<label for="phone-desktop" class="mt-3 block text-xs font-medium text-slate-500">MTN MoMo number</label> <label for="phone-desktop" class="mt-3 block text-xs font-medium text-slate-500">MTN MoMo number</label>
<input type="tel" id="phone-desktop" x-model="phone" required <input type="tel" id="phone-desktop" name="customer_phone" x-model="phone" required
inputmode="tel" autocomplete="tel" inputmode="tel" autocomplete="tel"
@keydown.enter.prevent="submitPay()"
class="mt-1.5 w-full rounded-2xl border-slate-200 py-3.5 px-4 text-base font-medium text-slate-900 focus:border-indigo-500 focus:ring-indigo-500" class="mt-1.5 w-full rounded-2xl border-slate-200 py-3.5 px-4 text-base font-medium text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
placeholder="e.g. 024XXXXXXX"> placeholder="e.g. 024XXXXXXX" value="{{ old('customer_phone') }}">
<button type="button" @click="submitPay()" :disabled="loading" <button type="submit" :disabled="loading"
class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"> class="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-4 text-base font-semibold text-white hover:bg-indigo-700 disabled:opacity-60">
<svg x-show="loading" x-cloak class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"> <svg x-show="loading" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24" style="display:none">
<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>
<span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span> <span x-text="loading ? 'Opening payment…' : 'Pay'">Pay</span>
</button> </button>
</div> </form>
<p class="mt-4 text-center text-[11px] text-slate-400">Pay with MTN MoMo. Powered by Ladill Pay</p> <p class="mt-4 text-center text-[11px] text-slate-400">Pay with MTN MoMo. Powered by Ladill Pay</p>
</div> </div>
</main> </main>
@include('partials.paystack-sheet') @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 ?? '',
phone: config.phone ?? '',
loading: false,
errorMsg: config.errorMsg ?? '',
showSheet: false,
checkoutUrl: '',
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;
}
const phone = String(this.phone || '').trim();
if (!phone) {
this.errorMsg = 'Enter your MoMo number to pay.';
return;
}
this.errorMsg = '';
this.loading = 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, customer_phone: phone }),
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.errorMsg = apiError || ('Could not start payment (' + res.status + '). Please try again.');
return;
}
if (!data.checkout_url) {
this.errorMsg = 'Could not start payment. Please try again.';
return;
}
// MoMo waiting page must be full-page — never trap it in the Paystack iframe
// (cross-origin iframe is blank / "does nothing").
const useSheet = data.provider !== 'mtn_momo' && window.innerWidth < 768;
if (useSheet) {
this.checkoutUrl = data.checkout_url;
this.showSheet = true;
} else {
window.location.assign(data.checkout_url);
return;
}
} catch (e) {
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> </body>
</html> </html>