1. Giới thiệu
Trong thời đại công nghệ số, việc thanh toán qua mã QR đang trở thành xu hướng phổ biến và tiện lợi. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách tạo mã QR cho việc chuyển tiền qua dịch vụ VietQR bằng Vanilla JavaScript. Qua bài học này, bạn sẽ không chỉ làm quen với JavaScript mà còn hiểu thêm về cách tích hợp API để tạo ra những sản phẩm ứng dụng thực tế.
2. Yêu cầu
Bài toán đặt ra là khi người dùng nhấn nút "Mua khóa học", hệ thống sẽ hiển thị mã QR để khách hàng có thể thực hiện quét mã chuyển tiền. Chúng ta sẽ sử dụng API của VietQR (https://www.vietqr.io/intro) - dịch vụ giúp thực hiện giao dịch một cách nhanh chóng và an toàn qua mã QR.
Lưu ý về giao diện
Chúng ta sẽ không đi sâu vào phần giao diện trong bài viết này, mà sẽ tập trung hơn vào logic của JavaScript.
3. Cấu trúc HTML và CSS
Dưới đây là cấu trúc HTML mà chúng ta sẽ xây dựng:
html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tạo Mã QR Với VietQR</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<br>
<div class="row" id="courses-wrapper">
<!-- Danh sách khóa học sẽ được render tại đây -->
</div>
<hr>
<div class="row justify-content-center d-none" id="paid-wrapper">
<div class="col-6">
<div class="mb-4 d-flex gap-2">
<img class="w-50" src="" alt="Mã QR" id="paid-qr-code">
<div class="pt-5">
<p>Tài khoản: <b id="paid-account-name"></b></p>
<p>STK: <b id="paid-account-no"></b></p>
<p>Số tiền: <b id="paid-price"></b> <b>VND</b></p>
<p>Nội dung: <b id="paid-content"></b></p>
</div>
</div>
</div>
</div>
</div>
<script>
// Mã JavaScript sẽ được thêm ở đây
</script>
</body>
</html>Phân tích cấu trúc HTML
courses-wrapper: Thẻ div chứa danh sách các khóa học sẽ được render qua JavaScript.paid-wrapper: Thẻ div hiển thị thông tin thanh toán. Mặc định sẽ ẩn và chỉ hiện ra khi nhấn nút "Mua".
4. Giải quyết vấn đề
Chúng ta sẽ khởi tạo một danh sách bao gồm các khóa học với các thuộc tính như ID, thumbnail (hình ảnh), tiêu đề (title) và giá (price).
Ví dụ danh sách khóa học
javascript
const courses = [
{
id: 'course01',
thumbnail: 'Hình ảnh khóa học HTML',
title: 'Khóa học HTML cơ bản',
price: '399000'
},
{
id: 'course02',
thumbnail: 'Hình ảnh khóa học CSS',
title: 'Khóa học CSS cơ bản',
price: '499000'
},
{
id: 'course03',
thumbnail: 'Hình ảnh khóa học JavaScript',
title: 'Khóa học JavaScript cơ bản',
price: '799000'
}
]Thông tin tài khoản ngân hàng
javascript
const bankInfo = {
id: 'VPB',
accountNo: '79983926',
accountName: 'NGUYEN THANH TRUNG',
template: 'compact',
}Mã JavaScript chức năng
Chúng ta sẽ viết mã JavaScript để render danh sách và xử lý sự kiện nhấn nút "Mua" để hiển thị thông tin thanh toán:
javascript
function renderCourses() {
const coursesWrapper = document.querySelector('#courses-wrapper');
let html = '';
courses.forEach(course => {
html += `
<div class="col-4">
<div class="card mb-3">
<div style="height: 150px">
<img src="${course.thumbnail}" class="card-img-top h-100" alt="${course.title}">
</div>
<div class="card-body">
<h5 class="card-title">${course.title}</h5>
<p>${course.price} đ</p>
<div class="d-grid gap-2">
<button class="btn btn-primary course-buy" data-title="${course.title}" data-price="${course.price}">
Mua
</button>
</div>
</div>
</div>
</div>
`;
});
coursesWrapper.innerHTML = html;
}
renderCourses();
const paidWrapper = document.querySelector('#paid-wrapper');
const paidQRCode = document.querySelector('#paid-qr-code');
const paidAccountName = document.querySelector('#paid-account-name');
const paidAccountNo = document.querySelector('#paid-account-no');
const paidPrice = document.querySelector('#paid-price');
const paidContent = document.querySelector('#paid-content');
const coursesBtnBuy = document.querySelectorAll('.course-buy');
coursesBtnBuy.forEach(item => {
item.addEventListener('click', function () {
const courseTitle = item.getAttribute('data-title');
const coursePrice = item.getAttribute('data-price');
const qrCode = `https://img.vietqr.io/image/${bankInfo.id}-${bankInfo.accountNo}-${bankInfo.template}.png?amount=${coursePrice}&addInfo=${encodeURIComponent(courseTitle)}&accountName=${bankInfo.accountName}`;
paidWrapper.classList.remove('d-none');
paidQRCode.setAttribute('src', qrCode);
paidAccountName.innerHTML = bankInfo.accountName;
paidAccountNo.innerHTML = bankInfo.accountNo;
paidPrice.innerHTML = coursePrice;
paidContent.innerHTML = courseTitle;
});
});5. Kết luận
Bài viết đã hướng dẫn các bạn từng bước trong việc tạo mã QR thanh toán đơn giản bằng Vanilla JavaScript sử dụng API của VietQR. Hi vọng rằng bạn đã tích lũy thêm kiến thức hữu ích và vững vàng hơn trong việc phát triển ứng dụng web của riêng mình. Nếu có bất kỳ câu hỏi nào, đừng ngần ngại để lại ý kiến của bạn.
- Hãy theo dõi chúng tôi để cập nhật thêm nhiều dự án Vanilla JavaScript khác và các bài viết hướng dẫn hữu ích khác!
source: viblo
