Update Banyak
This commit is contained in:
WD - Dev
@@ -0,0 +1,160 @@
|
||||
<?php
|
||||
|
||||
function getListPembayaran($idTagihan) {
|
||||
return '
|
||||
<!-- Pilihan Metode -->
|
||||
<div id="pilihanMetode">
|
||||
<h6 class="mb-3">Metode Pembayaran</h6>
|
||||
|
||||
<div id="accordionMetode">
|
||||
<!-- Virtual Account -->
|
||||
<div class="card">
|
||||
<div class="card-header p-0" id="headingVA">
|
||||
<h5 class="mb-0">
|
||||
<button class="btn btn-link w-100 text-left collapsed" type="button"
|
||||
data-toggle="collapse" data-target="#collapseVA"
|
||||
aria-expanded="false" aria-controls="collapseVA">
|
||||
<span class="d-flex justify-content-between align-items-center">
|
||||
<span class="fw-semibold">Virtual Account</span>
|
||||
<span class="accordion-icons">
|
||||
<span class="bank-icon-box"><img src="https://manjapro.net/dist/img/bri.png" alt="BRI"></span>
|
||||
<span class="bank-icon-box"><img src="https://manjapro.net/dist/img/bni.png" alt="BNI"></span>
|
||||
<span class="bank-icon-box"><img src="https://manjapro.net/dist/img/mandiri.png" alt="Mandiri"></span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseVA" class="collapse" aria-labelledby="headingVA" data-parent="#accordionMetode">
|
||||
<div class="card-body p-0">
|
||||
<ul class="list-group list-group-flush bank-list">
|
||||
<li class="list-group-item">
|
||||
<a class="list-btn pay-method" onclick="pilihMetode(\'Virtual Account\', \'BRI\', \'https://manjapro.net/dist/img/bri.png\')">
|
||||
<div class="bank-logo-box"><img src="https://manjapro.net/dist/img/bri.png" alt="BRI"></div>
|
||||
<span class="bank-name">BRI VA</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<a class="list-btn pay-method" onclick="pilihMetode(\'Virtual Account\', \'BNI\', \'https://manjapro.net/dist/img/bni.png\')">
|
||||
<div class="bank-logo-box"><img src="https://manjapro.net/dist/img/bni.png" alt="BNI"></div>
|
||||
<span class="bank-name">BNI VA</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<a class="list-btn pay-method" onclick="pilihMetode(\'Virtual Account\', \'Mandiri\', \'https://manjapro.net/dist/img/mandiri.png\')">
|
||||
<div class="bank-logo-box"><img src="https://manjapro.net/dist/img/mandiri.png" alt="Mandiri"></div>
|
||||
<span class="bank-name">Mandiri VA</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- E-Wallet & QRIS -->
|
||||
<div class="card">
|
||||
<div class="card-header p-0" id="headingQRIS">
|
||||
<h5 class="mb-0">
|
||||
<button class="btn btn-link w-100 text-left collapsed" type="button"
|
||||
data-toggle="collapse" data-target="#collapseQRIS"
|
||||
aria-expanded="false" aria-controls="collapseQRIS">
|
||||
<span class="d-flex justify-content-between align-items-center">
|
||||
<span class="fw-semibold">E-Wallet & QRIS</span>
|
||||
<span class="accordion-icons">
|
||||
<span class="bank-icon-box"><img src="https://manjapro.net/dist/img/qris.png" alt="QRIS"></span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseQRIS" class="collapse" aria-labelledby="headingQRIS" data-parent="#accordionMetode">
|
||||
<div class="card-body p-0">
|
||||
<ul class="list-group list-group-flush bank-list">
|
||||
<li class="list-group-item">
|
||||
<a class="list-btn pay-method" onclick="pilihMetode(\'E-Wallet & QRIS\', \'QRIS\', \'https://manjapro.net/dist/img/qris.png\')">
|
||||
<div class="bank-logo-box"><img src="https://manjapro.net/dist/img/qris.png" alt="QRIS"></div>
|
||||
<span class="bank-name">QRIS</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="metodeTerpilih" class="d-none">
|
||||
<div class="method-card method-selected">
|
||||
<div class="bank-logo-box" style="margin-top: 0px;">
|
||||
<img src="https://manjapro.net/dist/img/qris.png" id="metodeLogo">
|
||||
</div>
|
||||
<span class="bank-name" id="metodeText"></span>
|
||||
<button type="button" class="btn btn-sm ubah-btn" onclick="ubahMetode()" style="font-size: 105%; color: #ff7f11;"><strong>Ubah</strong></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="btnBayar" class="btn btn-orange w-100 d-none" onclick="bayar()">Bayar</button>
|
||||
|
||||
<script>
|
||||
let metodeDipilih = "";
|
||||
let metodeService = "";
|
||||
let imgMetode = "";
|
||||
const idTagihan = '.$idTagihan.';
|
||||
|
||||
function pilihMetode(metode, service, logo){
|
||||
metodeDipilih = metode;
|
||||
metodeService = service;
|
||||
imgMetode = logo;
|
||||
|
||||
document.getElementById("pilihanMetode").classList.add("d-none");
|
||||
document.getElementById("metodeTerpilih").classList.remove("d-none");
|
||||
document.getElementById("metodeText").innerHTML = metode + "<br>" + service;
|
||||
document.getElementById("metodeLogo").src = logo;
|
||||
document.getElementById("btnBayar").classList.remove("d-none");
|
||||
}
|
||||
|
||||
function ubahMetode(){
|
||||
metodeDipilih = "";
|
||||
metodeService = "";
|
||||
document.getElementById("pilihanMetode").classList.remove("d-none");
|
||||
document.getElementById("metodeTerpilih").classList.add("d-none");
|
||||
document.getElementById("btnBayar").classList.add("d-none");
|
||||
}
|
||||
|
||||
function bayar(){
|
||||
if(metodeDipilih !== ""){
|
||||
let btn = document.getElementById("btnBayar");
|
||||
btn.disabled = true;
|
||||
btn.innerText = "Memproses...";
|
||||
|
||||
fetch("/proses.php", {
|
||||
method: "POST",
|
||||
headers: {"Content-Type": "application/x-www-form-urlencoded"},
|
||||
body: "action=bayar"
|
||||
+ "&paymentMethod=" + encodeURIComponent(metodeService)
|
||||
+ "&idTagihan=" + encodeURIComponent(idTagihan)
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
btn.disabled = false;
|
||||
btn.innerText = "Bayar Sekarang";
|
||||
if(data.success){
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert("Gagal: " + (data.message || "Terjadi kesalahan"));
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
btn.disabled = false;
|
||||
btn.innerText = "Bayar Sekarang";
|
||||
console.error(err);
|
||||
alert("Terjadi error saat menghubungi server.");
|
||||
});
|
||||
|
||||
} else {
|
||||
alert("Silakan pilih metode pembayaran terlebih dahulu!");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
';
|
||||
}
|
||||
Reference in New Issue
Block a user