If you run an e-shop on WooCommerce, you might like to give customers a convenient way to enter bank details using a QR code. You can of course get a ready-made plugin for this too, but with the help of the Google Chart API a few lines of code are enough.
QR payment on the order confirmation page (thank you page)
To display the QR payment code on the order confirmation page (the so-called thank you page), we use the following code, which we insert, for example, into the function.php file of our active child theme.
The code above inserts a QR code with the following parameters next to the bank details on the page:
- ACC your account number in IBAN format. So in the WooCommerce settings, in the Payments section, you must have an active bank account with the IBAN filled in.
- AM the total amount for the order (filled in based on the order).
- MSG Message for the recipient. Here set to Payment for order {order number}.
- X-VS variable symbol (here the order number).
QR payment code in the confirmation e-mail
We can insert the QR code into the order confirmation e-mail using the following action:
The code differs only in the condition at the beginning, where we verify that it’s an e-mail for the customer and not the shop administrator. It also only applies to orders in the on-hold status.
Information about the variable symbol
It might be useful to also print, alongside all the bank details, the variable symbol number that should be entered when paying. This code takes care of that both on the order confirmation page and in the e-mail. The order number is used here as the variable symbol.