I’m using Paymo.biz for my invoices and time tracking since almost a year and I’m always frustrated that I can’t further customize the invoice like changing the column headers. These headers can be changed manually each time you create an invoice but it’s time consuming so i came up with a solution that works for all invoices.

Here is a solution to easily and automatically change the invoice headers like Item, Description, Price Unit and Qty when you create a new invoice.

For that I’m using Firefox with Greasemonkey installed and a user script. Greasemonkey is a Firefox add-ons that lets you use a javascript file in your browser. You can use this script file to modify the current webpage by adding, changing, styling, … content. Once you customize the script below and install it, you don’t have to do anything else each time you create an invoice.

The user script

In the script below you need to replace all ##____## with a custom value depending on your Paymo account and the header you’d like to use.

// ==UserScript==
// @name           Custommise Paymo Invoice Headers
// @include        ##ADD_INVOICE_URL##
// @require	   http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// ==/UserScript==
$(document).ready(function(){

	//Set custom headers
	var ItemText = "##ITEM_TEXT##";
	var DescriptionText = "##ITEM_DESCRIPTION##";
	var PriceUnitText = "##ITEM_PRICE_UNIT##"
	var QtyText = "##ITEM_QTY##";
	var PriceText = "##ITEM_PRICE##";	

	//Replace default headers with user headers using jQuery
	$(".item input[name^=invoice]").eq(0).val(ItemText);
	$(".description input[name^=invoice]").eq(0).val(DescriptionText);
	$(".price-unit input[name^=invoice]").eq(0).val(PriceUnitText);
	$(".quantity input[name^=invoice]").eq(0).val(QtyText);
	$(".price input[name^=invoice]").eq(0).val(PriceText );

});

You need to change these values:

  • ##ADD_INVOICE_URL## : This URL looks like “https://####.paymo.biz/invoices/add/reset/true” where #### is your Paymo URL id. Just go to create an invoice in your account and checkout your URL.
  • ##ITEM_TEXT## : This is the text you want to use as Item header. As a freelance web developer I use “Webpage”.
  • ##ITEM_DESCRIPTION## : This is the text you want to use as Description header. I use the default “Description”. You could use “Work” or “Project” or anything else.
  • ##ITEM_PRICE_UNIT## : This is the text you want to use as Price/Unit header. As a freelance web developer I use “Hourly rate”.
  • ##ITEM_QTY## : This is the text you want to use as Qty header. As a web freelance developer I use “Hours”
  • ##ITEM_PRICE## : This is the text you want to use as Price header. I use the default “Price” but it could be “Total” or anything you want.

How to use the script to customize Paymo’s invoice headers

  1. Install Greasemonkey from here. It’s a Firefox add-ons but most scripts written for Greasemonkey also work in other browsers using other plugins (for details on Greasemonkey Wiki page). I haven’t tests this script in other browsers.
  2. After you restart Firefox, the Monkey head icon should appear in the top left corner of Firefox. This means it’s ready to use our script.
  3. Create a .js file called for instance paymo.user.js (the .user.js is important as Greasemonkey uses this to recognize its scripts) and copy the above script in that file.
  4. Change all ##____## as explained above.
  5. Simply drag the file into Firefox, or from Firefox go to Open File  or from the file right click Open with.
  6. A Greasemonkey windows pops-up, click on install and you’re done.
  7. Go to your Paymo account to test the script

With this script you could also update any other inputs like addresses, date, invoice number, taxes or footer. Changing fixed text like Subtotal or Outstanding Balance is not possible.

This should work all the time and on all accounts. Let me know if you have any troubles…