update wa official API
This commit is contained in:
WD - Dev
@@ -2,19 +2,276 @@
|
||||
|
||||
function getListPembayaran($idTagihan) {
|
||||
return '
|
||||
<style>
|
||||
/* ===== Header ===== */
|
||||
.header-box {
|
||||
max-width: 550px;
|
||||
margin: 20px auto 0;
|
||||
color: #fff;
|
||||
padding: 0 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.brand-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 40px;
|
||||
zoom: 90%;
|
||||
}
|
||||
.brand-row img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #fff;
|
||||
object-fit: cover;
|
||||
}
|
||||
.brand-row h5 {
|
||||
margin: 0;
|
||||
}
|
||||
.amount {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* ===== Card Utama ===== */
|
||||
.payment-card {
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
border-radius: 22px 22px 0 0;
|
||||
padding: 25px;
|
||||
background: #fff;
|
||||
min-height: 70vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ===== Tombol Bayar ===== */
|
||||
.btn-orange {
|
||||
background: #fca503;
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin: 20px auto 0;
|
||||
display: block;
|
||||
max-width: 500px;
|
||||
}
|
||||
.btn-orange:hover {
|
||||
background: #e76e0d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ===== Accordion (Bootstrap 4) ===== */
|
||||
.card-header {
|
||||
border-radius: 12px !important;
|
||||
background: #fff !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.card-header .btn-link {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none !important;
|
||||
color: inherit !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.card-header .btn-link:focus {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.card-header .fw-semibold {
|
||||
margin-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
/* group kiri = title + icons */
|
||||
.card-header .accordion-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.card-header .accordion-icons {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.collapse.show ~ .accordion-icons {
|
||||
display: none !important;
|
||||
}
|
||||
.card-body {
|
||||
padding: 0.25rem 0 !important;
|
||||
}
|
||||
|
||||
/* ===== List Metode ===== */
|
||||
.list-group-item {
|
||||
border-color: #dee2e6;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.list-btn {
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
padding: 8px 0;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.list-btn:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* ===== Metode Terpilih ===== */
|
||||
.method-card {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
background: #fafafa;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
.method-selected {
|
||||
border: 2px solid #fca503;
|
||||
background: #fff9f4;
|
||||
}
|
||||
.ubah-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/* ===== Detail Tagihan ===== */
|
||||
#instruksiBox {
|
||||
font-size: 0.95rem;
|
||||
border-radius: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.detail-row {
|
||||
display: flex;
|
||||
margin-bottom: 6px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.detail-row .label {
|
||||
font-weight: 600;
|
||||
min-width: 120px;
|
||||
}
|
||||
.detail-row .value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* ===== Bank List ===== */
|
||||
.bank-list {
|
||||
text-align: left;
|
||||
}
|
||||
.bank-list .list-group-item {
|
||||
border: none;
|
||||
}
|
||||
.bank-list .pay-method {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
gap: 15px;
|
||||
}
|
||||
.bank-logo-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.bank-logo-box img {
|
||||
max-width: 70%;
|
||||
max-height: 70%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.bank-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
padding-bottom: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
.accordion-icons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 5px; /* jarak antara teks dan icon */
|
||||
flex-wrap: wrap; /* kalau icon banyak, bisa turun ke baris bawah */
|
||||
}
|
||||
.bank-icon-box {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bank-icon-box img {
|
||||
max-width: 70%;
|
||||
max-height: 70%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* ===== Footer Powered ===== */
|
||||
.powered {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #777;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.powered img {
|
||||
height: 20px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
/* Hide icons saat accordion aktif */
|
||||
.btn[aria-expanded="true"] .accordion-icons {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Border radius accordion */
|
||||
.card {
|
||||
border-radius: 20px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-header {
|
||||
border-radius: 20px 20px 0 0 !important;
|
||||
}
|
||||
.card:last-child {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<!-- Pilihan Metode -->
|
||||
<div id="pilihanMetode">
|
||||
<h6 class="mb-3">Metode Pembayaran</h6>
|
||||
|
||||
<div id="accordionMetode">
|
||||
<!-- Virtual Account -->
|
||||
<div class="card">
|
||||
<div class="card mb-3">
|
||||
<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="d-flex flex-column">
|
||||
<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>
|
||||
@@ -58,7 +315,7 @@ function getListPembayaran($idTagihan) {
|
||||
<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="d-flex flex-column">
|
||||
<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>
|
||||
@@ -89,7 +346,7 @@ function getListPembayaran($idTagihan) {
|
||||
<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>
|
||||
<button type="button" class="btn btn-sm ubah-btn" onclick="ubahMetode()" style="font-size: 105%; color: #fca503;"><strong>Ubah</strong></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +356,7 @@ function getListPembayaran($idTagihan) {
|
||||
let metodeDipilih = "";
|
||||
let metodeService = "";
|
||||
let imgMetode = "";
|
||||
const idTagihan = '.$idTagihan.';
|
||||
const idTagihan = '.$_SESSION['agen'].';
|
||||
|
||||
function pilihMetode(metode, service, logo){
|
||||
metodeDipilih = metode;
|
||||
@@ -121,40 +378,40 @@ function ubahMetode(){
|
||||
document.getElementById("btnBayar").classList.add("d-none");
|
||||
}
|
||||
|
||||
function bayar(){
|
||||
if(metodeDipilih !== ""){
|
||||
let btn = document.getElementById("btnBayar");
|
||||
btn.disabled = true;
|
||||
btn.innerText = "Memproses...";
|
||||
// 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.");
|
||||
});
|
||||
// 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!");
|
||||
}
|
||||
}
|
||||
// } else {
|
||||
// alert("Silakan pilih metode pembayaran terlebih dahulu!");
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user