WD - Dev
238 lines
7.6 KiB
PHP
238 lines
7.6 KiB
PHP
<!-- FIle Payemnt.php -->
|
|
|
|
<?php
|
|
|
|
$paymentMethods = [
|
|
'qris' => [
|
|
'label' => 'QRIS',
|
|
'icon' => 'bi-qr-code',
|
|
'items' => [
|
|
[
|
|
'code' => 'qris',
|
|
'name' => 'QRIS',
|
|
'icon' => 'bi-qr-code',
|
|
'color' => 'text-orange'
|
|
]
|
|
]
|
|
],
|
|
|
|
'va' => [
|
|
'label' => 'Virtual Account',
|
|
'icon' => 'bi-bank',
|
|
'items' => [
|
|
['code' => 'va_bca', 'name' => 'BCA', 'icon' => 'bi-bank', 'color' => 'text-primary'],
|
|
['code' => 'va_bni', 'name' => 'BNI', 'icon' => 'bi-bank', 'color' => 'text-success'],
|
|
['code' => 'va_bri', 'name' => 'BRI', 'icon' => 'bi-bank', 'color' => 'text-danger'],
|
|
['code' => 'va_mandiri', 'name' => 'Mandiri', 'icon' => 'bi-bank', 'color' => 'text-warning'],
|
|
['code' => 'va_permata', 'name' => 'Permata', 'icon' => 'bi-bank', 'color' => 'text-info'],
|
|
]
|
|
]
|
|
|
|
// 'ewallet' => [
|
|
// 'label' => 'E-Wallet',
|
|
// 'icon' => 'bi-wallet',
|
|
// 'items' => [
|
|
// ['code' => 'ewallet_ovo', 'name' => 'OVO', 'icon' => 'bi-phone', 'color' => 'text-purple'],
|
|
// ['code' => 'ewallet_dana', 'name' => 'DANA', 'icon' => 'bi-phone', 'color' => 'text-info'],
|
|
// ['code' => 'ewallet_spay', 'name' => 'ShopeePay', 'icon' => 'bi-phone', 'color' => 'text-warning'],
|
|
// ['code' => 'ewallet_linkaja', 'name' => 'LinkAja', 'icon' => 'bi-phone', 'color' => 'text-danger'],
|
|
// ]
|
|
// ]
|
|
];
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Pembayaran</title>
|
|
|
|
<link rel="icon" href="https://manjapro.net/dist/img/logo-sm.png" type="image/gif" />
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS GLOBAL -->
|
|
<link rel="stylesheet" href="../style.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container-custom">
|
|
|
|
<!-- HEADER -->
|
|
<div class="header-modern mb-3">
|
|
<div class="flex-between">
|
|
|
|
<div>
|
|
<div class="label-muted mb-2">Metode Pembayaran</div>
|
|
<div class="fw-semibold mb-2">
|
|
<i class="bi bi-wallet2 me-1"></i> Pilih Pembayaran
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-end">
|
|
<div class="label-muted mb-2">Total Tagihan</div>
|
|
<div class="price text-white">
|
|
<h6>Rp <?= number_format($total); ?></h6>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CARD -->
|
|
<div class="card-modern">
|
|
|
|
<form id="paymentForm">
|
|
|
|
<input type="hidden" name="method" id="selectedMethod">
|
|
|
|
<!-- ACCORDION (DEFAULT BOOTSTRAP - TIDAK DIUBAH) -->
|
|
<div class="accordion" id="paymentAccordion">
|
|
|
|
<?php $i = 0; foreach ($paymentMethods as $key => $group): ?>
|
|
|
|
<div class="accordion-item mb-2">
|
|
|
|
<h2 class="accordion-header">
|
|
<button type="button"
|
|
class="accordion-button <?= $i > 0 ? 'collapsed' : '' ?>"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#<?= $key ?>">
|
|
|
|
<i class="bi <?= $group['icon']; ?> text-orange me-2"></i>
|
|
<small><small><?= $group['label']; ?><small></small>
|
|
</button>
|
|
</h2>
|
|
|
|
<div id="<?= $key ?>"
|
|
class="accordion-collapse collapse <?= $i == 0 ? 'show' : '' ?>"
|
|
data-bs-parent="#paymentAccordion">
|
|
|
|
<div class="accordion-body">
|
|
|
|
<div class="row g-2">
|
|
|
|
<?php foreach ($group['items'] as $item): ?>
|
|
<div class="col-6">
|
|
|
|
<div class="payment-option text-center"
|
|
onclick="selectMethod(event,this,'<?= $item['code']; ?>')">
|
|
|
|
<i class="bi <?= $item['icon']; ?> payment-icon <?= $item['color']; ?>"></i>
|
|
|
|
<div class="mt-1 fw-big">
|
|
<?= $item['name']; ?>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<?php endforeach; ?>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<?php $i++; endforeach; ?>
|
|
|
|
</div>
|
|
|
|
<!-- BUTTON BAYAR -->
|
|
<button id="btnSubmit"
|
|
type="submit"
|
|
class="btn btn-orange w-100 mt-3"
|
|
disabled>
|
|
|
|
<i class="bi bi-send me-1"></i> Proses Pembayaran
|
|
</button>
|
|
|
|
<!-- BUTTON KEMBALI (DEFAULT BOOTSTRAP) -->
|
|
<a href="<?= $baseUrl . $_SESSION['token']?>/portal"
|
|
class="btn btn-abu w-100 mt-3">
|
|
Kembali ke Portal
|
|
</a>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function selectMethod(e, el, method) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
document.querySelectorAll('.payment-option').forEach(x => x.classList.remove('active'));
|
|
el.classList.add('active');
|
|
|
|
document.getElementById('selectedMethod').value = method;
|
|
document.getElementById('btnSubmit').disabled = false;
|
|
}
|
|
|
|
// ================= AJAX SUBMIT =================
|
|
document.getElementById('paymentForm').addEventListener('submit', function(e){
|
|
e.preventDefault();
|
|
|
|
const method = document.getElementById('selectedMethod').value;
|
|
|
|
if (!method) {
|
|
Swal.fire('Oops','Pilih metode pembayaran dulu','warning');
|
|
return;
|
|
}
|
|
|
|
const btn = document.getElementById('btnSubmit');
|
|
btn.disabled = true;
|
|
btn.innerHTML = 'Memproses...';
|
|
|
|
Swal.fire({
|
|
title: 'Memproses...',
|
|
text: 'Mohon tunggu',
|
|
allowOutsideClick: false,
|
|
didOpen: () => {
|
|
Swal.showLoading();
|
|
}
|
|
});
|
|
|
|
fetch('../<?= $_SESSION['token'] ?>/payment_process', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: 'method=' + encodeURIComponent(method)
|
|
})
|
|
.then(res => res.json())
|
|
.then(res => {
|
|
|
|
if(!res.success){
|
|
Swal.fire('Gagal', res.message, 'error');
|
|
btn.disabled = false;
|
|
btn.innerHTML = 'Proses Pembayaran';
|
|
return;
|
|
}
|
|
|
|
Swal.close();
|
|
window.location.href = '../<?= $_SESSION['token'] ?>/status/' + res.trx;
|
|
|
|
})
|
|
.catch(err => {
|
|
Swal.fire('Error','Terjadi kesalahan server','error');
|
|
btn.disabled = false;
|
|
btn.innerHTML = 'Proses Pembayaran';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src='https://cdn.jsdelivr.net/npm/sweetalert2@11'></script>
|
|
</body>
|
|
</html>
|