manjapro_v6/hspages/payment/paydisini/proses.php

<?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>
    ';
}