EPC/SEPA QRCode

FAQ User Tutorials / How To's
1

Hello,

For those of you who, like me, want to put a QRCode on your invoices, you should read on.
Please know that I have no experience in program development…

I first looked around a bit to see what is already available within IP/Mpdf and found the library Barcode in there. In the file “example37_barcodes.php” I found the “QrCode” reference.
I then manually tweaked the dev version of the library QrCode a bit to get this working.

Then I added the “style items - .barCode and/or .barcodecell” in the css file and finally I inserted the following code in my pdf template.

image
image982×82 6.65 KB

The result:

image
image811×288 82.5 KB

Note that this is the SEPA/EPC QRCode standard that I have implemented in this example.
See: EPC QR Code - Wikipedia

2

Hi, how and where did you include this in InvoicePlane files and folder?
Only in one view.php? Where did you copy all files?
Can you share all files you installed or changed inside InvoicePlane?

3

Hello @ThomasKa,

At the time I wrote the FAQ, I was using IP v1.5.9 where the QrCode lib was still present in mPDF.
As of mPDF 8.0 (and IP v1.5.11), the QrCode lib was no longer available.
How can you make this work now?

  1. Download the QrCode lib from the github page: GitHub - mpdf/qrcode: QR code generating library with HTML/PNG/mPDF output possibilities.
  2. Create the folder QrCode in "…\vendor\mpdf\mpdf\src" and copy the content of the zip file to it.
  3. Go to the “\src” folder and copy everything to the parent “…\QrCode” folder.
  4. Open the file “QrCode.php” and in lines 498, 521 and 695 remove “…/” from “DIR . '/…/data/”
  5. Make sure the css style tags “.barcode” and “.barcodecell”
    <style>
    .barcode {
        padding: 1.5mm;
        margin: 0;
        vertical-align: top;
        color: #000000;
    }
    .barcodecell {
        text-align: center;
        vertical-align: middle;
        padding: 0;
    }
    </style>

are available in your pdf invoice template and put the code below in the appropriate place.

    <barcode code="BCD\n002\n1\nSCT\n<?php //echo $invoice->user_bic;?>\n
                    <?php echo $invoice->user_company;?>\n
                    <?php echo $invoice->user_iban;?>\n
                    <?php echo $invoice->invoice_total;?>\n
                     \n
                    <?php echo $invoice->invoice_number;?>" 
                type="QR" class="barcode" size="1" error="H" disableborder="1" />

I hope this will work for you… :open_mouth:

4

@VeRony or someone els :smiley:

Hi!

Could you help me on my way?

I have copy all the files from the zip, see below
vendor/mpdf/mpdf/src

  • QrCode
    • .github (folder)
    • data (folder)
    • Output (folder comes from src folder)
    • src (folder)
    • tests (folder)
    • .gitignore (file)
    • composer.json (file)
    • LICENSE (file)
    • phpunit.xml (file)
    • QrCode.php (file comes from src folder)
    • QrCodeException.php (file comes from src folder)
    • README.md(file)
    • ruleset.xml (file)

Open the file vendor/mpdf/mpdf/src/QrCode.php and removed the "lines 498, 521 and 695 remove “…/” from “**DIR . '/…/data/**”

Open the file application/views/invoice_templates/pdf/InvoicePlane.php and place

   <style>
    .barcode {
        padding: 1.5mm;
        margin: 0;
        vertical-align: top;
        color: #000000;
    }
    .barcodecell {
        text-align: center;
        vertical-align: middle;
        padding: 0;
    }
    </style>

in the head selection of the page.

Paste

<barcode code="BCD\n002\n1\nSCT\n<?php //echo $invoice->user_bic;?>\n
                   <?php echo $invoice->user_company;?>\n
                   <?php echo $invoice->user_iban;?>\n
                   <?php echo $invoice->invoice_total;?>\n
                    \n
                   <?php echo $invoice->invoice_number;?>" 
               type="QR" class="barcode" size="1" error="H" disableborder="1" />

On the bottom of the page.

I see now the qr code on the PDF file but when I scan the code with my bank app, it has expired.

How can I solve this?

hope you can help.

5

Hello @Michael:

It looks like my procedure is working and generating a QR-code. :grinning:
I have no idea what you mean by “expired”.
I think/suspect it could have something to do with the content/data of the QR-code itself.
Please read the pdf document in this link (EPC document - EPC069) carefully to see if your problem is related to the content.
It is absolutely important to know which version (V1 or V2) your bank is using and in which EU country you are using the banking app (BIC mandatory for non-EEA contries).
Please comply with the limitations listed in the data elements table of this document.
If necessary, check which example (pg 4 V1 or pg 5 V2) does work in your banking app.
Another V1 example:

BCD
001
1
SCT
BPOTBEB1
Red Cross of Belgium
BE72000000001616
EUR1


Urgency fund
Sample EPC QR code

The same example but now V2: (Do you see the difference?)

BCD
002
1
SCT

Red Cross of Belgium
BE72000000001616
EUR1


Urgency fund
Sample EPC QR code

Additionally, you can also possibly take a screenshot of your QR-code and decode it in this app (QR Decode).
You can encode your text with the same web app and then see how your banking app handles it.

Also be sure to check if your text is encoded correctly in your QR code and what character set is used!

Finally, you can also use this online SEPA credit transfer QR code generator to test things out.

Happy hunting…

1 Like