Việc sử dụng mã QR để thanh toán đang dần trở thành xu hướng không thể thiếu trong các giao dịch mua bán hiện đại, từ những khu mua sắm lớn đến các gian hàng nhỏ lẻ ngoài chợ. Đối với các nền tảng bán hàng trực tuyến, đặc biệt là các trang web thương mại điện tử, tính năng này là một phần thiết yếu. Thay vì mất công nhập thông tin gồm số tài khoản, tên ngân hàng, số tiền và nội dung chuyển khoản thì giờ đây, chỉ cần một cái quét QR Code, mọi thông tin thanh toán sẽ được xử lý tức thì, tạo sự thuận tiện và nhanh chóng. Việc áp dụng công nghệ này không chỉ giúp tăng tỷ lệ giao dịch thành công mà còn nâng cao độ tin cậy và chuyên nghiệp cho website. Trong bài viết này Web Kinh Doanh sẽ hướng dẫn bạn tạo mã QR code thanh toán WooCommerce một cách dễ dàng
Để làm chức năng này web kinh doanh đã dùng VietQR để tạo mã QR một cách nhanh chóng
VietQR là một công cụ cho phép tích hợp dễ dàng tính năng thanh toán QR vào hệ thống của bạn, giúp các giao dịch trở nên nhanh chóng và thuận tiện hơn.
Thiết Lập Chuyển Khoản Ngân Hàng Trong WooCommerce
Trong WooCommerce, việc thiết lập chuyển khoản ngân hàng là một bước quan trọng để đảm bảo rằng khách hàng có thể thực hiện thanh toán một cách an toàn và hiệu quả. Để cấu hình, bạn cần truy cập vào phần “Cài đặt” của WooCommerce, chọn mục “Thanh toán” và tìm đến tùy chọn “Chuyển khoản ngân hàng”. Tại đây, bạn sẽ nhập thông tin chi tiết của tài khoản ngân hàng mà bạn muốn khách hàng chuyển tiền tới. Đừng quên lưu lại các thay đổi sau khi đã điền đầy đủ thông tin để đảm bảo tính năng này hoạt động chính xác.

Thêm code tạo mã QR
Tiếp theo, sao chép đoạn code sau và đưa vào file functions.php
<?php
add_action('woocommerce_thankyou_bacs', function($order_id) {
$bankAccounts = get_option('woocommerce_bacs_accounts');
if (!empty($bankAccounts)) {
$order = wc_get_order($order_id);
$transactionDescription = 'Order ' . $order->get_order_number(); // More descriptive variable name
echo '<div class="qr-code-container">';
foreach ($bankAccounts as $account) {
echo sprintf(
'<span class="bank-item">
<img class="qr-code-image" src="https://img.vietqr.io/image/%s-%s-print.jpg?amount=%s&addInfo=%s&accountName=%s" alt="QR Code for %s">
</span>',
urlencode($account['bank_name']),
urlencode($account['account_number']),
$order->get_total(),
urlencode($transactionDescription),
urlencode($account['account_name']),
$account['bank_name']
);
}
echo '<div id="modal_qr_code" class="modal">
<img class="modal-content" id="modal_image">
</div>
</div>';
?>
<style>
.qr-code-container { display: flex; justify-content: space-between; }
.bank-item { width: 100%; display: inline-block; }
.qr-code-image { width: 100%; border-radius: 5px; cursor: pointer; transition: opacity .3s; }
.qr-code-image:hover { opacity: 0.7; }
.modal { display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); }
.modal-content { margin: auto; display: block; max-height: 100%; }
@media only screen and (max-width: 768px) { .modal-content { height: auto; } }
</style>
<script>
$(document).ready(function() {
$('.qr-code-image').click(function() {
var src = $(this).attr('src');
var alt = $(this).attr('alt');
$('#modal_image').attr('src', src);
$('#modal_image').attr('alt', alt);
$('#modal_qr_code').show();
});
$('#modal_qr_code').click(function() {
$(this).hide();
});
});
</script>
<?php
}
});
Sau khi thêm code thành công bạn sẽ được kết quả như sau

Hãy thực hiện một vài giao dịch thử để kiểm tra tính năng chuyển khoản ngân hàng và tính năng quét mã QR. Kiểm tra xem tiền có được chuyển đến tài khoản đích chính xác không và liệu mã QR có được hiển thị và hoạt động đúng cách không. Nếu gặp vấn đề, hãy rà soát lại các bước cài đặt và đảm bảo rằng mọi thiết lập đều chính xác.