How to add BPAY payment box to customer invoices and statements

We are adding BPAY to our payment methods and have been provided with a specific payment box from our bank that must be displayed on customer invoices/statements. The file has been provided in either JPG, PDF or TIF.

Please provide a guide on adding this to invoices/statements.
Thank you

Add it with HTML in a custom field.

Thanks for the reply @Tut but I don’t know html.

Xero, Myob, Reckon, Quickbooks, Invoice2go etc provide a step by step guide for their customers on how to include the BPAY logo and payment box. It would be really helpful if Manager would do the same.

Looking at other posts it seems I have to upload the picture on the Internet? @lubos said when attachments were added to Manager, then we’d be able to use locally stored files. Is this now the case?
Even if I managed to insert the image, would the Biller Code field and Ref field be usable? The Biller Code field could be prefilled with our Biller Code as this stays the same, but the Ref field is for the Customer Reference Number which would need to reference the individual customer code.

In the themes under settings you can edit the code as below.

Find the line <tfoot and copy the below code in the next line after it.

{% if title == 'Invoice' %}
    <td colspan="99" style="padding-left: 5px">
        <table style="margin-bottom: 5px"><tr>
            <td style="text-align: left"><img src="d:/program files/manager/iso.jpg" style="max-height: 150px; max-width: 150px; padding-top: 5px"></td>
            </tr>
        </table>
</td>{% endif %}

In the above replace the img src with the link to your image file. Check the preview invoice and adjust max-height and max-width values accordingly.

It is possible to display the Biller code if you could edit the image to include the same before linking it to Manager. The Ref field too is possible but you will need the help of someone with HTML knowledge as it is impossible to teach and explain completely here.

1 Like

It’s going to depend if you want it to be that exact image or you’re happy with “a close approximation” :slight_smile:

By that, you’re going to have to tackle it one of two ways:

  1. a) You would (using code similar to what @sharpdrivetek has provided) generate the output image into a region on the invoice and then b) overlay the information of your biller code and reference number over the top (more on this below), or

  2. You would generate the whole box within the template itself. You would include just the “B” from their logo in the top left hand corner in a TD with blue border. The next TD would include the html for the biller code and reference. The next TR would have the text of the message underneath. (this would be the way I’d “hack” it together)

I see on their website they have black options, but your html can generate their blue anyway. I’m not sure about manager and fonts, that’s for someone else to comment.

Unfortunately you can’t create a custom field in YOUR business area, but that’s a static number anyway and can be hard coded into the HTML or graphic. The customer reference will be a custom field within wither the customer (if it doesn’t change per customer) or invoice/sales (if it’s based on the sale) custom fields area. I would do it in the HTML so that the font and style line up with the customer reference number.

I’m not a programmer, so I will just throw this out as a question.

Could not the BPAY graphic be converted to a png image with the white background set to be clear? At the same time, the Biller Code can be added. Even I can do that using Irfanview.

Then a Custom Field with no label can be created for Sales Invoices allowing the input of the Ref number.

The tricky part would be the HTML coding to align the two objects. That is beyond my abilities.

Two work-arounds: Insert the Biller Code into the image and for the Ref insert “See above”. Label the Custom Field “Your Ref: number:”, and have it appear just above the BPAY box. HTML coding and alignment problems are avoided.

Or, convert the image to a png and place it in a Word document. (Getting the alignment correct in Word is not difficult.) Print the Invoice from Manager, and then run it through the printer a second time to add the BPAY logo and information from the Word document.

Thank you very much @sharpdrivetek, @d3mad and @dcVest for your solutions. I’ve had someone write some code for the Bpay payment box. For anyone needing it, it is the highlighted section from line 56 to 76.

The blacked out part of the code is where the Company’s Unique Biller Code is inserted. The customer’s Bpay reference number is picked up with {{recipient.code}}. It produces this:
Hope this is helpful to someone who has no coding skills like myself!

3 Likes

Mate,t hat looks awesomely perfect :smiley:

Thanks for posting the code, I’m sure that others will find this useful (if not now, then at least) down the track!

edit: could possibly add a superscript tag to the ®, (I’m not sure if it’s supported or not) but it’s not essential.

Hi@sparky thank you for providing this coding. I have decided to use the coding as I have just become a Bpay Biller.

I noticed in the code the image is sourced from a web location , which is good if you have a website but if you don’t have one do you know if this code can be changed to point to a local location on my computer ( which I doubt as I am a cloud user so the program is accessed from cloud not my local drive) and so I am keen to see if anyone and/or if @lubos can advise if the Folder menu item where we can store attachments could be utilised to access the file if uploaded to a folder in the Folders menu item or can a location be made available similar to when uploading the business logo to manager if this same process could be adopted and the location be advised so the coding can pick up the correct web address for the image to use the Bpay Logo Box in the code provided?

I hope the request makes sense ? as the coding provided seems to do the job once the image src is able to be accessed.

Thanks in advance for any advice

You can embed images by encoding them directly in src attribute.

See: https://stackoverflow.com/questions/16191974/save-image-content-inside-html-file