QR codes? Scan and pay

Self-Hosted | v4/Legacy
1

Hi.

Is there an option to add QR code to the invoice. I pay a lot of invoices that way. Just grab a phone and scan the QR code. it’s very simple and it eliminates any typing errors.

Thank you
Br,
Dali

2

This is supported using a custom design:

https://pdfmake.github.io/docs/document-definition-object/qr/

3

Hi Hillel.

Yes. but each Invoice should have different QR code, based on the Invoice data. QR code should contain all data needed for payment.

Thank you

Br,
Dali

4

It should be possible using variables in the invoice design

5

Hi Hillel.

  1. UNICODE
    There are problems with unicode characters. I guess you are using PDFMake which does not use UNICODE. There is a unicode version of PDFMAKE.
By default pdfmake uses Roboto font, which does not support Unicode characters.

https://www.npmjs.com/package/pdfmake-unicode

Amount of 70,76€ is format like this: 00000007076. No other format seems to be working. I guess Invoice Ninja does not provide this kind of format?

Thank you
Br,
Dali

6

  1. It may help to select a different font on Settings > Invoice Design

  2. Hmm… which variable are you using?

7

Thank you for reply Hillel.

  1. Strange. Any QR reading app will read it just fine, but not my banking APP. Something must be wrong. I need to investigate further.

$invoice.amount or $invoice.balanceAmount

those are only 2 I know of. Any other with leading zeroes like 00000007076, like ##########7076?

Thank you

Br,
Dali

8

Sorry, there isn’t a variable with leading values

9

Hi Hillel.

Diggin up my post from 2019. I just scanned one QR code and still, the amount is written with leading zeros.

90,95€ in QR code is written as 00000009095

Any improvement on QR implementation in v5?

It’s a very nice feature.

Thank you

Br,
Dali

10

@david any thoughts?

11

@kdiamond

We are building out our QR capabilities, can you show an example of what you want to achieve? ie, where does the QR link go to? a specified url somewhere?

12

Hi David.

I just posted my solution yesterday here:
https://forum2.invoiceninja.com/t/qr-code-to-scan-and-pay/8292/13

Please check the problem I have with Live Preview.

I added this code to the bottom of the invoice design template.

Body:
<p><img src="https://chart.googleapis.com/chart?cht=qr&chl=BCD%0A002%0A1%0ASCT%0ABACXSI22%0ADB Studio, Dalibor Sternisa s.p%0ASI56290000051080930%0AEUR$amount_raw%0AGDSV%0ASI00$entity_number%0A$entity_number%0AClient: $client_name | $entity_number&chs=170x170&chld=L|0" class="qr-code img-thumbnail img-responsive" /></p>

Includes:
.qr-code {
max-width: 200px;
position: fixed;
top: 240px;
right: 15px;
}

I’am aware that Invoice client and invoice number is not selected on page load (live preview), but could use dummy data not to break the QR code, or to wait with QR code loading until selected. Or simply disable showing QR codes in LivePreview.

Br,
Dali

13

(What I would suggest for you to include in GUI is the setting page for user to fill their bank account data such as IBAN/BIC…

qr

Remittance (Reference) line10 - shoudl be Invoice number (35chars max)

Then the user should choose where he wants the code to show. Quotes, Invoices.

Here is the document for the BCD code:

Here is the online generator for your help:

Br,
Dali

14

@kdiamond

Thanks for this, looks pretty simple to implement, we’ll add this to our backlog.

15

If I made it this far, knowing HTML basics only, it should take you no more than 10 minutes :wink:

I don’t know about the US, however, it’s a great feature here in Europe. I pay many invoices by scan and pay. I always think “oh this company is serious” when I see QR code in their invoices.

Br,
Dali