Home Forums Support Invoice with QR code that updates invoice status

This topic contains 5 replies, has 2 voices, and was last updated by  Hillel Coren 2 weeks, 1 day ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #23922

    nvl-it-solutions
    Participant

    I’m using the self-hosting version of Invoice Ninja for a few months now.
    One of the things I’m looking for is a way to add QR codes on my invoices.

    For now I see two solutions:

    Solution 1
    Modify the invoice template and add QR details like below:

    { "qr": "BCD\n001\n1\nSCT\nBIC WITHOUT WHITESPACES\nFULL NAME WITH SPACES\nIBAN WITHOUT WHITESPACES\nEUR$invoice.balanceAmount\n\n\n$entityType $invoice.invoiceNumber\n", "eccLevel": "M" }

    This solutions seems to work partially.
    The payment will be executed, but the invoice status will not be updated.
    Is there a way to call a webhook to achieve this?
    Or is there something that can be included in the qr code to make this work?

    Solution 2
    Modify the invoice template and add QR details like below:

    {
    "qr" : "$paymentLink"
    }

    Unfortunately this doesn’t work at all.
    I hoped this would create a QR code that would open the payment url.
    For some reason this variable is not recognized.
    The drawback of this solutions is that bankapps will not recognize this qr code and will confuse customers.
    So I would prefere to use the first solution.

    See below for the full template.

    [
      {
        "columns": [
          {
            "image": "$accountLogo",
            "fit": [
              120,
              80
            ],
            "margin": [
              0,
              60,
              0,
              30
            ]
          },
          {
            "stack": "$clientDetails",
            "margin": [
              0,
              60,
              0,
              0
            ]
          }
        ]
      },
      {
        "style": "invoiceLineItemsTable",
        "table": {
          "headerRows": 1,
          "widths": [
            "15%",
            "40%",
            "20%",
            "10%",
            "15%"
          ],
          "body": "$invoiceLineItems"
        },
        "layout": {
          "hLineWidth": "$notFirst:.5",
          "vLineWidth": "$notFirstAndLastColumn:.5",
          "hLineColor": "#888888",
          "vLineColor": "#FFFFFF",
          "paddingLeft": "$amount:8",
          "paddingRight": "$amount:8",
          "paddingTop": "$amount:8",
          "paddingBottom": "$amount:8"
        }
      },
      {
        "columns": [
          "$notesAndTerms",
          {
            "table": {
              "widths": [
                "*",
                "40%"
              ],
              "body": "$subtotalsWithoutBalance"
            },
            "layout": {
              "hLineWidth": "$none",
              "vLineWidth": "$none",
              "paddingLeft": "$amount:34",
              "paddingRight": "$amount:8",
              "paddingTop": "$amount:4",
              "paddingBottom": "$amount:4"
            }
          }
        ]
      },
      {
        "columns": [
          {
            "canvas": [
              {
                "type": "rect",
                "x": 0,
                "y": 0,
                "w": 515,
                "h": 26,
                "r": 0,
                "lineWidth": 1,
                "color": "$secondaryColor:#403d3d"
              }
            ],
            "width": 10,
            "margin": [
              0,
              10,
              0,
              0
            ]
          },
          {
            "text": "$balanceDueLabel",
            "style": "subtotalsBalanceDueLabel",
            "margin": [
              0,
              16,
              0,
              0
            ],
            "width": 370
          },
          {
            "text": "$balanceDue",
            "style": "subtotalsBalanceDue",
            "margin": [
              0,
              16,
              8,
              0
            ]
          }
        ]
      },
      {
        "qr": "BCD\n001\n1\nSCT\nBIC WITHOUT WHITESPACES\nFULL NAME WITH SPACES\nIBAN WITHOUT WHITESPACES\nEUR$invoice.balanceAmount\n\n\n$entityType $invoice.invoiceNumber\n",
        "eccLevel": "M"
      },
      "$signature",
      {
        "stack": [
          "$invoiceDocuments"
        ],
        "style": "invoiceDocuments"
      }
    ]
    • This topic was modified 2 weeks, 6 days ago by  nvl-it-solutions. Reason: Added more whitespaces
    #23965

    Hillel Coren
    Keymaster

    The app supports adding webhooks on Settings > API Tokens

    #23985

    nvl-it-solutions
    Participant

    I already found that setting.
    But how do I trigger that webhook after someone has scanned the QR code:

    { "qr": "BCD\n001\n1\nSCT\nBIC WITHOUT WHITESPACES\nFULL NAME WITH SPACES\nIBAN WITHOUT WHITESPACES\nEUR$invoice.balanceAmount\n\n\n$entityType $invoice.invoiceNumber\n", "eccLevel": "M" }

    The person who would scan this QR code will be redirected to their banking app and can make the payment.
    However since there is no relationship between making that payment and calling the webhook, I will be required to check my bank account and update the invoice manually.

    I’m using Mollie as payment gateway provider.
    The only option I see is to use their API to create a payment (after my invoice in Invoice Ninja has been created), so that I can retrieve the QR code from them.

    https://docs.mollie.com/guides/qr-codes

    However this would require me to extend the functionality of Invoice Ninja to be able to do that I suppose.

    • This reply was modified 2 weeks, 2 days ago by  nvl-it-solutions. Reason: Additional information
    #23988

    Hillel Coren
    Keymaster

    Understood, maybe you can use the Invoice Ninja API?

    #23990

    nvl-it-solutions
    Participant

    I don’t see how using the Invoice Ninja API would help me on this one. Therefore I’m going to dive into the code and check how payment processing is being done right now. Hopefully extending this functionality isn’t a big effort. Nevertheless if I can get it working I will make a pull request.

    I replied on another topic to get more information about how the author processes the invoice after payment: https://www.invoiceninja.com/forums/topic/epc-qr-code/

    #24012

    Hillel Coren
    Keymaster

    In theory if the payment gateway provides hooks you could use the API to update the app after the payment is made.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Posted in: