You can easily add the ZATCA (Fatoora) QR code to your invoice template in Order Printer Pro. Once done, your invoices will include the QR code for each order automatically:
1 - Add javascript code to your template, which can generate ZATCA QR codes:
a) Login to Order Printer Pro and go to the "Manage templates" page
b) Click "Edit template" on your invoice/receipt template
c) In the Code section of the editor, copy and paste the following to the top of your template code:
<script type="module">
//
// ZATCA QR Code Generator for SA
//
import { Invoice } from "https://esm.sh/@axenda/zatca";
const qrCodeElements = document.querySelectorAll(".zatca-qr-code:not(.loaded)");
if (qrCodeElements.length) {
qrCodeElements.forEach(async function(element) {
const dataSet = element.dataset;
console.log(dataSet)
var invoice = new Invoice({
sellerName: dataSet["sellerName"],
vatRegistrationNumber: dataSet["vatNumber"],
invoiceTimestamp: dataSet["invoiceTimestamp"],
invoiceTotal: dataSet["invoiceTotal"],
invoiceVatTotal: dataSet["invoiceVatTotal"],
});
const imageData = await invoice.render();
element.src = imageData;
element.classList.add("loaded");
});
}
</script>
2- Add image placeholder to your template:
To display the QR code image in the document, we need a placeholder where the image should be inserted, including information about the data that should be embedded into the QR code.
a) Copy the below code:
<img class="zatca-qr-code" data-seller-name="Your store name" data-vat-number="1234567891" data-invoice-timestamp="{{ created_at | date: "%Y-%m-%dT%H:%M:%SZ" }}" data-invoice-total="{{ total_price | money_without_currency }}" data-invoice-vat-total="{{ total_tax | money_without_currency }}">
b) Paste the code into your template, where you want the QR code to appear. In the default Invoice/receipt template that comes with Order Printer Pro, we suggest adding it into the notes section.
BEFORE:
AFTER:
c) IMPORTANT: Make sure to update the text "Your store name" and "1234567891" in the above code with the correct details for your store.
d) Click "Save" and you are done!
If you need help with any of the above, please do get in contact with our friendly support team.