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

Use Paystack/Ladill Pay on Mini payment landing.
Deploy Ladill Mini / deploy (push) Successful in 1m23s
Details

Browse Source 
Drop the required MTN MoMo number field and MoMo copy so public payment QRs open Paystack checkout via Ladill Pay like the other restored storefronts.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-21 14:55:14 +00:00
co-authored by Cursor
parent 8951f470a3
commit 5cdc0a046d
6 changed files with 121 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/public/qr/payment-landing.blade.php
+4 -24
View File
@@ -22,7 +22,6 @@
payUrl: @js($payUrl),
csrf: @js($csrf),
amount: @js(old('amount')),
phone: @js(old('customer_phone')),
errorMsg: @js(session('error')),
})">
@@ -64,12 +63,6 @@
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>
<input type="tel" id="phone-mobile" name="customer_phone" x-model="phone" required
inputmode="tel" autocomplete="tel"
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') }}">
<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">
<svg x-show="loading" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24" style="display:none">
@@ -80,7 +73,7 @@
</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">Secured by Paystack. Powered by Ladill Pay</p>
</div>
</div>
@@ -113,12 +106,6 @@
placeholder="0.00" value="{{ old('amount') }}">
</div>
<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" name="customer_phone" x-model="phone" required
inputmode="tel" autocomplete="tel"
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') }}">
<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">
<svg x-show="loading" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24" style="display:none">
@@ -129,7 +116,7 @@
</button>
</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">Secured by Paystack. Powered by Ladill Pay</p>
</div>
</main>
@@ -146,7 +133,6 @@
// 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,
@@ -178,11 +164,6 @@
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();
@@ -196,7 +177,7 @@
'X-CSRF-TOKEN': config.csrf,
'X-Requested-With': 'XMLHttpRequest',
},
body: JSON.stringify({ amount: value, customer_phone: phone }),
body: JSON.stringify({ amount: value }),
signal: controller.signal,
});
const data = await res.json().catch(() => ({}));
@@ -211,8 +192,7 @@
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").
// Legacy MoMo waiting page must be full-page — never trap it in the Paystack iframe.
const useSheet = data.provider !== 'mtn_momo' && window.innerWidth < 768;
if (useSheet) {
this.checkoutUrl = data.checkout_url;