Tích hợp mã QR Code thanh toán vào đơn hàng WooCommerce WordPress

Mã QR Code thanh toán

Quét mã QR Code chuyển khoản thanh toán, không sử dụng tiền mặt hiện nay đang trở nên rất phổ biến, từ việc đi siêu thị cho đến mua mớ rau ngoài chợ. Bán hàng online, đặc biệt là trên website thì không nên thiếu. Thay vì người chuyển phải nhập thủ công Số tài khoản – Ngân hàng – Số tiền – Nội dung, thì bây giờ hãy dùng QR Code để quét thông tin chuyển khoản được nhanh chóng và thuận tiện. Tăng tỷ lệ chuyển đổi và tỷ lệ thanh toán trước, cũng giúp website trở nên chuyên nghiệp và uy tín hơn.

Cấu hình chuyển khoản ngân hàng trong WooCommerce

Trong WooCommerce đã có sẵn phần cấu hình phương thức thanh toán bằng hình thức chuyển khoản ngân hàng, truy cập vào WooCommerce -> Cài đặt -> Thanh toán -> Chuyển khoản ngân hàng

Điền thông tin tài khoản vào các trường theo mẫu như trên

• Tên tài khoản: Viết hoa toàn bộ, không dấu (viết thường, có dấu vẫn nhận)
• Số tài khoản: Viết liền
• Tên ngân hàng: Viết liền (chữ hoa, thường đều được)

Code hiển thị mã QR thanh toán

Tiếp theo, sao chép đoạn code sau và đưa vào file functions.php của theme đang dùng

/*
 * Change bank transfer display
 */
 
if(!function_exists('devvn_thankyou_page')) {
	add_filter('woocommerce_bacs_accounts', '__return_false');
	// code get bin ngan hang
	function get_bin($bank_name) {
		// Gọi API và lấy kết quả JSON
		$curl = curl_init();
		curl_setopt_array($curl, array(
		  CURLOPT_URL => "https://api.vietqr.io/v2/banks",
		  CURLOPT_RETURNTRANSFER => true,
		  CURLOPT_FOLLOWLOCATION => true,
		  CURLOPT_ENCODING => "",
		  CURLOPT_MAXREDIRS => 10,
		  CURLOPT_TIMEOUT => 30,
		  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
		  CURLOPT_CUSTOMREQUEST => "GET",
		));
		$response = curl_exec($curl);
		$err = curl_error($curl);
		curl_close($curl);
		if ($err) {
		  echo "CURL Error #:" . $err;
		} else {
		  // Phân tích kết quả JSON
		  $data = json_decode($response, true);
		  // Duyệt qua từng ngân hàng trong dữ liệu
		  foreach ($data['data'] as $bank) {
			  // Kiểm tra nếu shortName của ngân hàng trùng với $bank_name
			  if (strtoupper($bank['shortName']) == strtoupper($bank_name)) {
				  // Lấy giá trị bin và in ra
				  return $bank['bin'];
				  break; // thoát khỏi vòng lặp sau khi tìm thấy kết quả
			  }
		  }
		}
	}
	// them noi dung vao email
	add_action( 'woocommerce_email_before_order_table', 'devvn_email_instructions', 10, 3 );
	function devvn_email_instructions( $order, $sent_to_admin, $plain_text = false ) {
	 
		if ( ! $sent_to_admin && 'bacs' === $order->get_payment_method() && $order->has_status( 'on-hold' ) ) {
			devvn_bank_details( $order->get_id() );
		}
	 
	}
	// Hien thi noi dung trang thank you
	add_action( 'woocommerce_thankyou_bacs', 'devvn_thankyou_page' );
	function devvn_thankyou_page($order_id){
		devvn_bank_details($order_id);
	}
	// Noi dung hien thi
	function devvn_bank_details( $order_id = '' ) {
		$order = wc_get_order( $order_id );
		
		$bacs_accounts = get_option('woocommerce_bacs_accounts');
		if ( ! empty( $bacs_accounts ) ) {
			ob_start();
			echo '<h2>Thông tin chuyển khoản: </h2>';
			echo '<table style="border: 1px solid #ddd; border-collapse: collapse; width: 100%; margin-bottom: 15px;">';
			$bank_content = 'Thanh toan don hang '.$order->get_order_number();
			foreach ( $bacs_accounts as $bacs_account ) {
				$bacs_account = (object) $bacs_account;
				$account_name = $bacs_account->account_name;
				$bank_name = $bacs_account->bank_name;
				$stk = $bacs_account->account_number;	
				?>
				<tr>
					<td style="width: 150px;border: 1px solid #eaeaea;padding: 6px 10px;">
						<img src="https://api.bnix.one/tools/vietqr/vietqr.php?bankcode=<?php echo get_bin($bank_name); ?>&account=<?php echo $stk; ?>&amount=<?php echo $order->get_total(); ?>&noidung=<?php echo $bank_content; ?>" alt="QR code <?php echo $bank_name; ?>"/>
					</td>
					<td style="border: 1px solid #eaeaea;padding: 6px 10px;color: black;line-height: 1.5;">
						<strong>Ngân hàng: </strong><?php echo strtoupper($bank_name);?><br>
						<strong>STK: </strong><?php echo $stk;?><br>
						<strong>Chủ tài khoản: </strong><?php echo $account_name;?><br>
						<strong>Số tiền: </strong><?php echo number_format($order->get_total(),0,".",","); ?> VNĐ<br>
						<strong>Nội dung: </strong><?php echo $bank_content; ?>
					</td>
				</tr>
				<?php
			}
			echo '</table>';
			echo ob_get_clean();;
		}
	 
	}

}

* Code có sử dụng API từ vietqr.io và document qr của Napas

Hoàn tất và xem kết quả

Có thể thay nội dung chuyển khoản theo ý muốn ở trên. Giờ hãy thử đặt 1 đơn hàng và xem kết quả

Và đây là kết quả trên email, để khách quên thanh toán thì vài tiếng sau vào trong email có thể quét và thanh toán ngay cho thuận tiện.

 

Trong mã QR Code đã điền sẵn tất cả các thông tin, bao gồm:

• Tên ngân hàng
• Số tài khoản
• Chủ tài khoản
• Số tiền thanh toán bằng đúng giá trị đơn hàng
• Nội dung chuyển khoản là mã đơn hàng (cái này có thể thay đổi tuỳ chỉnh đoạn code trên)

Như vậy chỉ cần cấu hình và code 1 vài bước đơn giản là đã có thể tích hợp mã QR Code thanh toán vào trong WooCommerce một cách dễ dàng. Chúc các bạn thành công.

Nội dung bài viết được tổng hợp từ 2 nguồn: vuduchong.com và levantoan.com. Cảm ơn 2 tác giả!