Pada artikel ini, kita akan membahas cara menambahkan fitur hitung mundur pembayaran menggunakan HTML, CSS, dan JavaScript. Fitur ini berguna untuk memberi tahu pelanggan tentang batas waktu pembayaran yang tersisa sebelum mereka harus menyelesaikan transaksi. Jika waktu habis, pelanggan akan secara otomatis diarahkan ke halaman tertentu, seperti halaman beranda atau halaman informasi lainnya.
Script (HTML) Tanpa Local Storage
Skrip ini akan memulai countdown dari awal setiap kali halaman dimuat ulang, tanpa menyimpan data di localStorage atau cookies. Kami menyediakan 2 jenis script, yang bisa Anda pilih.
Script Alternatif 1
<div style="text-align: center; font-size: 20px;">
<p>Bayar sebelum</p>
<p id="countdown">60</p>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var countdownElement = document.getElementById('countdown');
var timeLeft = 60;
function updateCountdown() {
if (timeLeft <= 0) {
window.location.href = "https://google.com";
} else {
countdownElement.innerHTML = timeLeft;
timeLeft--;
}
}
setInterval(updateCountdown, 1000);
});
</script>
Script Alternatif 2
<div style="text-align: left; font-size: 20px;">
<div style="margin-top: 5px;">
<p id="countdown" style="font-family: 'Arial Black', sans-serif; font-size: 48px; color: #fcba03;">02:00:00</p>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var countdownElement = document.getElementById('countdown');
var duration = 2 * 60 * 60; // durasi dalam detik (2 jam)
var endTime = new Date().getTime() + duration * 1000;
function updateCountdown() {
var now = new Date().getTime();
var timeLeft = Math.max(0, endTime - now);
if (timeLeft <= 0) {
window.location.href = "https://skripsiexpress.com/sys/pengalihan-1-pembayaran-gagal/";
} else {
var hours = Math.floor(timeLeft / 1000 / 60 / 60);
var minutes = Math.floor((timeLeft / 1000 / 60) % 60);
var seconds = Math.floor((timeLeft / 1000) % 60);
countdownElement.innerHTML =
(hours < 10 ? '0' : '') + hours + ':' +
(minutes < 10 ? '0' : '') + minutes + ':' +
(seconds < 10 ? '0' : '') + seconds;
}
}
setInterval(updateCountdown, 1000);
updateCountdown();
});
</script>
Script dengan Local Storage (Cookies)
Sedangkan script ini, menggunakan local storage atau cookies, sehingga apabila halaman di refresh, countdown nya tidak akan mengulang.
<div style="text-align: left; font-size: 20px;">
<div style="margin-top: 5px;">
<p id="countdown" style="font-family: 'Arial Black', sans-serif; font-size: 48px; color: #fcba03;">02:00:00</p>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var countdownElement = document.getElementById('countdown');
var duration = 2 * 60 * 60; // durasi dalam detik (2 jam)
var endTime = localStorage.getItem('countdownEndTime');
if (!endTime) {
endTime = new Date().getTime() + duration * 1000;
localStorage.setItem('countdownEndTime', endTime);
}
function updateCountdown() {
var now = new Date().getTime();
var timeLeft = Math.max(0, endTime - now);
if (timeLeft <= 0) {
localStorage.removeItem('countdownEndTime');
window.location.href = "https://skripsiexpress.com/sys/pengalihan-1-pembayaran-gagal/";
} else {
var hours = Math.floor(timeLeft / 1000 / 60 / 60);
var minutes = Math.floor((timeLeft / 1000 / 60) % 60);
var seconds = Math.floor((timeLeft / 1000) % 60);
countdownElement.innerHTML =
(hours < 10 ? '0' : '') + hours + ':' +
(minutes < 10 ? '0' : '') + minutes + ':' +
(seconds < 10 ? '0' : '') + seconds;
}
}
setInterval(updateCountdown, 1000);
updateCountdown();
});
</script>Tampilan
Kelemahan
Sayangnya, script dengan local storage ini, dari pengalaman kami menerapkan nya, akan membuat orang yang melakukan pemesanan, di arahkan langsung ke halaman “pembayaran gagal dilakukan” apabila mereka melakukan pemesanan untuk kedua kalinya. Namun, pemesanan ke-3 kali nya, akan berfungsi secara normal.
Misal, ada seseorang pelanggan yang melakukan pemesanan. Kemudian, dia tidak melakukan pembayaran dan mengabaikan halaman pembayaran tersebut.
Setelah lebih dari 2 jam, pelanggan itu kembali melakukan pemesanan. Ketika dia menuju ke halaman pembayaran yang berisikan script countdown ini, dia akan langsung diarahkan ke halaman “pembayaran gagal dilakukan”.
Namun, ketika dia mencobanya kembali (pembelian ke-3), dia tidak akan langsung diarahkan ke halaman “pembayaran gagal dilakukan”.
Jika disimpulkan, seperti ini:
- Pembelian ke-1: Diabaikan.
- Pembelian ke-2: Diarahkan langsung ke halaman ‘pembayaran gagal dilakukan’.
- Pembelian ke-3: Normal
Menampilkan Script dalam Shortcode
Untuk menampilkan script ini secara efektif di halaman WooCommerce, disarankan untuk menggunakan shortcode. Shortcode ini memungkinkan admin toko untuk menempatkan fitur hitung mundur di mana saja pada halaman situs dengan mudah. Penggunaan plugin seperti WPCode atau plugin snippet lainnya sangat dianjurkan untuk menciptakan shortcode ini.
Penggunaan Shortcode dengan OceanWP Library
Penempatan di OceanWP Library
Menampilkan shortcode melalui OceanWP Library adalah solusi yang lebih baik untuk mengelola dan menampilkan fitur hitung mundur pembayaran. OceanWP Library memungkinkan Anda untuk membuat dan menempatkan konten khusus, termasuk shortcode, pada halaman web dengan mudah.
Fungsi Ganda OceanWP Library
Penggunaan OceanWP Library memiliki beberapa keuntungan tambahan, di antaranya:
- Instruksi Pembayaran yang Spesifik: Dengan OceanWP Library, Anda dapat memberikan instruksi pembayaran yang lebih detail dan spesifik. Hal ini sangat membantu bagi pelanggan yang kurang familiar dengan teknologi informasi (IT), khususnya di Indonesia. Instruksi yang jelas dan mudah dipahami akan memudahkan pelanggan dalam menyelesaikan pembayaran.
- Menampilkan Formulir Konfirmasi Pembayaran: Selain fitur hitung mundur, Anda juga dapat menampilkan formulir konfirmasi pembayaran dalam OceanWP Library. Ini memungkinkan pelanggan untuk mengunggah bukti pembayaran langsung setelah melihat hitung mundur, menggabungkan dua fitur penting dalam satu tempat yang mudah diakses.
Langkah-langkah Implementasi
- Membuat OceanWP Library:
- Masuk ke dasbor WordPress Anda.
- Navigasikan ke OceanWP > Library.
- Buat konten baru dan tambahkan shortcode hitung mundur ke dalamnya.
- Menambahkan Instruksi Pembayaran:
- Pada konten yang sama, tambahkan teks instruksi yang spesifik tentang cara melakukan pembayaran.
- Gunakan bahasa yang mudah dimengerti untuk membantu pelanggan yang tidak terbiasa dengan teknologi.
- Mengintegrasikan Formulir Konfirmasi Pembayaran:
- Tambahkan shortcode untuk formulir konfirmasi pembayaran di bawah instruksi pembayaran.
- Pastikan formulir mudah diakses dan diisi oleh pelanggan.
Dengan menggunakan OceanWP Library, Anda tidak hanya menampilkan hitung mundur pembayaran tetapi juga memberikan panduan yang jelas dan memungkinkan pelanggan untuk langsung mengonfirmasi pembayaran mereka. Ini meningkatkan pengalaman pengguna dan membantu memastikan transaksi selesai dengan lancar dan tepat waktu.
