WD - Dev
184 lines
5.9 KiB
PHP
184 lines
5.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Status 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">
|
|
<link rel="stylesheet" href="../../style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container-custom">
|
|
|
|
<!-- ================= HEADER ================= -->
|
|
<div class="header-modern text-center mb-3">
|
|
<div class="section-title mb-0">Status Pembayaran</div>
|
|
</div>
|
|
|
|
<!-- ================= CARD ================= -->
|
|
<div class="card-modern text-center">
|
|
|
|
<?php if ($paymentActive['status'] == 'PENDING'): ?>
|
|
|
|
<div class="status-icon text-orange mb-2">
|
|
<i class="bi bi-clock-history"></i>
|
|
</div>
|
|
|
|
<div class="fw-semibold mb-1">Menunggu Pembayaran</div>
|
|
<div class="label-muted mb-3">
|
|
Selesaikan pembayaran sesuai instruksi di bawah
|
|
</div>
|
|
|
|
<!-- ================= INSTRUKSI ================= -->
|
|
<div class="summary-box mb-3">
|
|
|
|
<?php if ($paymentActive['method'] == 'qris'): ?>
|
|
<div class="text-center">
|
|
<div class="label-muted mb-2">Scan QR berikut:</div>
|
|
<img
|
|
src="<?= ($paymentActive['qr_string'] == null ) ? $paymentActive['qr_url'] : $paymentActive['qr_string']; ?>"
|
|
class="img-fluid rounded qr-image">
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (substr($paymentActive['method'], 0, 3) == 'va_'): ?>
|
|
<div class="label-muted mb-1">
|
|
Nomor Virtual Account <?= $paymentActive['channel']; ?>
|
|
</div>
|
|
|
|
<div class="va-number text-orange">
|
|
<?= $paymentActive['va_number']; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($paymentActive['method'] == 'ewallet_dana'): ?>
|
|
<div class="mb-2">
|
|
Silakan lanjutkan pembayaran melalui aplikasi E-Wallet Anda.
|
|
</div>
|
|
|
|
<a href="<?= $paymentActive['payment_url']; ?>" class="btn btn-orange w-100">
|
|
Bayar via DANA
|
|
</a>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
|
|
<div id="countdown" class="fw-semibold text-danger mb-4"></div>
|
|
|
|
<!-- ACTION -->
|
|
<button onclick="location.reload()" class="btn btn-orange w-100 mt-3">
|
|
<i class="bi bi-arrow-repeat"></i> Cek Status
|
|
</button>
|
|
|
|
<?php elseif ($paymentActive['status'] == 'PAID'): ?>
|
|
|
|
<div class="status-icon text-success mb-2">
|
|
<i class="bi bi-check-circle"></i>
|
|
</div>
|
|
|
|
<div class="fw-semibold mb-1">Pembayaran Berhasil</div>
|
|
<div class="label-muted mb-3">
|
|
Terima kasih, pembayaran Anda sudah diterima
|
|
</div>
|
|
|
|
<?php elseif ($paymentActive['status'] == 'EXPIRED'): ?>
|
|
|
|
<div class="status-icon text-danger mb-2">
|
|
<i class="bi bi-x-circle"></i>
|
|
</div>
|
|
|
|
<div class="fw-semibold mb-1">Pembayaran Expired</div>
|
|
<div class="label-muted mb-3">
|
|
Waktu pembayaran telah habis, silakan ulangi
|
|
</div>
|
|
|
|
<?php endif; ?>
|
|
|
|
<!-- BUTTON KEMBALI (DEFAULT BOOTSTRAP) -->
|
|
<a href="<?= $baseUrl . $_SESSION['token']?>/portal"
|
|
class="btn btn-abu w-100 mt-3">
|
|
Kembali ke Portal
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// kirim timestamp (lebih aman)
|
|
const endDate = new Date(<?= strtotime($paymentActive['expired_at']) * 1000 ?>);
|
|
|
|
function pad(n){
|
|
return n < 10 ? '0' + n : n;
|
|
}
|
|
|
|
function startCountdown(){
|
|
|
|
const now = new Date();
|
|
const diff = endDate - now;
|
|
|
|
if(diff <= 0){
|
|
document.getElementById('countdown').innerHTML = "Waktu habis";
|
|
|
|
setTimeout(()=>{
|
|
window.location.href = '<?= $baseUrl . $_SESSION['token'] ?>/portal';
|
|
}, 100);
|
|
|
|
return;
|
|
}
|
|
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
|
|
const minutes = Math.floor((diff / (1000 * 60)) % 60);
|
|
const seconds = Math.floor((diff / 1000) % 60);
|
|
|
|
let parts = [];
|
|
|
|
if(days > 0){
|
|
parts.push(pad(days) + " Hari");
|
|
}
|
|
|
|
if(hours > 0){
|
|
parts.push(pad(hours) + " Jam");
|
|
}
|
|
|
|
if(minutes > 0){
|
|
parts.push(pad(minutes) + " Menit");
|
|
}
|
|
|
|
parts.push(pad(seconds) + " Detik");
|
|
|
|
document.getElementById('countdown').innerHTML = parts.join(" : ");
|
|
}
|
|
|
|
startCountdown();
|
|
setInterval(startCountdown, 1000);
|
|
|
|
// ================= CONFIG =================
|
|
const trxId = "<?= $paymentActive['trx_id'] ?>";
|
|
|
|
// ================= CEK STATUS =================
|
|
function checkPaymentStatus() {
|
|
fetch(`../../services/check_status.php?trx=${trxId}`)
|
|
.then(res => res.json())
|
|
.then(res => {
|
|
if (res.success && (res.status === 'PAID' || res.status === 'EXPIRED')) {
|
|
console.log('PAID detected → reload');
|
|
location.reload();
|
|
}
|
|
})
|
|
.catch(err => console.log('Error cek status', err));
|
|
}
|
|
|
|
setInterval(checkPaymentStatus, 3000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|