How to display the relevant payment information next to the payment QR code?

← PDF and Email FAQ

JustOn Billing & Invoice Management can produce QR codes for SEPA credit transfers and JustOn Cash Management's payment page. If the relevant conditions are met, it automatically creates the QR code and writes the produced data to the corresponding fields on the invoice. Consequently, the generated QR code is to be printed to the invoice PDF.

Your customers may want to see what is "inside" the QR code. To this end, you can disclose the payment-relevant information from the code.

• SEPA credit transfer QR codes
• Payment page QR code

SEPA Credit Transfer QR Codes

For SEPA credit transfer (SCT) QR codes, the payment-relevant information includes the recipient, the recipient's IBAN, the amount to transfer, and the payment reference.

Assume you want to display this data in a table next the QR code image. Proceed as follows:

1. Create the custom placeholder [PaymentReference].

   Field	Value
   Name	PaymentReference
   Field	PaymentReference__c
   Render as	TEXT
   Source	Invoice

   For details, see Defining Custom Placeholder.

2. Configure an appropriate Template field to include the QR code.

   This can be a standard text block or a payment information text.

   If your business requests a SEPA credit transfer from the invoice recipient, the invoice payment method is usually set to Bank Transfer. In this case, you can use the Template field Payment Info Bank Transfer.

   Remember that if you use HTML code in template text blocks, you must write all code in a single line to avoid line breaks being converted to <br/> tags.

   Simple QR code without image frameResized QR code with frame

   Specify, for example, the following text:

   Use this code to initialize the payment operation using the banking app on your phone.
   
   <table><tr><td rowspan="6">[CreditTransferQrCode|no-persist]</td><td><br/></td></tr><tr><td><br/></td></tr><tr><td><em>Payment information:</em></td></tr><tr><td><br/></td></tr><tr><td><table><tr><td>Recipient:</td><td>[BusinessEntityCompany]</td></tr><tr><td>IBAN:</td><td>[BusinessEntityIBAN]</td></tr><tr><td>Amount:</td><td>[Balance|no-persist]</td></tr><tr><td>Reference:</td><td>[PaymentReference|no-persist]</td></tr></table></td></tr><tr><td><br/></td></tr></table>
   

   This produces the following output in the PDF:

   
   Example SCT QR code and disclosed payment information

   If you want a smaller and framed image, you can use, for example, the following HTML table and some custom CSS.

   HTML table

   <div class="page-break"><table width="100%"><tr><td width="30%"><b>Bank Name (BIC):</b></td><td width="70%">[BusinessEntityBankName] ([BusinessEntityBIC])</td><td rowspan="6" style="text-align: right;"><div class="qr-code-wrapper">[CreditTransferQrCode|no-persist]<span class="vertical-text">Scan to pay</span></div></td></tr><tr><td></td><td></td></tr><tr><td><b>Recipient:</b></td><td>[BusinessEntityCompany]</td></tr><tr><td><b>IBAN:</b></td><td>[BusinessEntityIBAN]</td></tr><tr><td><b>Payment Amount:</b></td><td>[Balance|no-persist]</td></tr><tr><td><b>Payment Reference:</b></td><td>[PaymentReference]</td></tr></table><div/>
   

   Custom CSS

   .CreditTransferQrCode.value img {
       width: 2.5cm !important;
       height: 2.5cm !important;
       border: 2px solid #000;
   }
   .vertical-text {
       display: inline-block;
       background-color: white;
       font-size: 10px;
       position: relative;
       bottom: 13px;
       padding-left: 3px;
       padding-right: 3px;
   }
   .qr-code-wrapper {
       text-align: center;
   }
   table tr,table td {
       page-break-inside: avoid;
   }
   table {
       page-break-after: avoid;
   }
   

   This produces the following output in the PDF:

   
   Example SCT QR code with frame and help text

Payment Page QR Code

In QR codes that encode the link to JustOn Cash Management's payment page, the corresponding URL is the only encoded information.

Assume you want to display the URL as a readable text together with the QR code image. Proceed as follows:

1. Create the custom placeholder [PaymentPage].

   Field	Value
   Name	PaymentPage
   Field	PaymentPageUrl__c
   Render as	PLAIN
   Source	Invoice

   You can also decide to overwrite the built-in placeholder [PaymentPageURL] (which creates a clickable link, masking the URL) if you are sure that you will not need it.

   For details, see Defining Custom Placeholder.

2. Configure an appropriate Template field to include the QR code.

   This can be a standard text block or a payment information text.

   If your business requests the payment to be made using JustOn Cash Management's payment page, the invoice payment method must be set to Online Payment. In this case, you can use the the Template field Payment Info Online Payment.

   Specify, for example, the following text:

   Scan the code to open our payment page:
   
   [PaymentPageUrlQrCode|no-persist]
   
   [PaymentPage|no-persist]
   

   If you want the QR code image to be a clickable link, use, for example, this text:

   Scan or click the code to open our payment page:
   
   <a href="[PaymentPage|no-persist]">[PaymentPageUrlQrCode|no-persist]</a>
   
   [PaymentPage|no-persist]
   

   This produces the following output in the PDF:

   
   Example payment page QR code and disclosed URL

Related information:

Why do I not get a QR code image?