How to Create a Perfect Invoice with PDF and HTML Templates

Whether you have just started a new business or you have been running a business for a long time, you would definitely need to know how to create a proper invoice.

An invoice is the first document used by small and large companies. It includes payment details and a lot of other information about the business and services done. A properly made invoice usually facilitates any type of payments and remunerations as it discloses the terms and conditions of the transaction.

In short, any start-up would need an invoice at some point no matter what business they are doing. That’s why we gathered the key things to know and learn before creating your invoice:

Invoice Fields
Why an Accurate Invoice Maker Matters
Make a PDF Invoice by Using Images and Text with PDF.co & Zapier
Generate PDF Invoices from HTML Template using PDF.co Web API
Summary

Invoice Fields

A basic invoice includes the following fields:

You can find more info about all invoice fields here.

Why an Accurate Invoice Maker Matters

Companies dealing with generating lots of invoices every day would seek an automated solution to create invoices. The invoice maker would need to be easy-to-use, speedy, and accurate at the same time, and preferable fully automated to save time and expenses.

If you’re looking for a solution like that and you are sick of creating multiple invoices every day, you are in the right place.

PDF.co Web API offers an excellent solution to create an invoice from scratch. One of the options is to create invoices from text and images.

There are a few options you can use to generate an invoice:

Make PDF invoices by adding text and images to PDF template using PDF.co and Zapier;
Generate PDF Invoices from invoice template using PDF.co API.

In this article, we will walk you through these options. You will learn how to create simple invoices with no coding by just adding your text and images to a PDF template. You will also find out how to use HTML templates to generate an invoice for your business.

Make a PDF Invoice by Using Images and Text with PDF.co & Zapier

This tutorial will show how to create an Invoice with the help of a selected PDF template. You will see how to generate a PDF invoice by adding text and images in the PDF Filler engine. This is very simple and requires no coding. PDF Filler is one of multiple PDF.co engines. It can help you set text color and size, name and style, as well as resize the images for you.

1. Start a Free Trial with PDF.co and Zapier

First of all, you will need to open an account with Zapier and connect PDF.co. The automation will help you extract and transform PDF files as well as connect other platforms and apps.

Zapier is a flexible automation platform that connects PDF.co Web API to 2,000+ other web services. The automated connections (or tasks you can perform automatically) are called Zaps. They can be easily set up, and you don’t require coding for this.

PDF.co offers a range of PDF activities such as PDF generation, extraction, and conversion. It can create smart invoices and fill in forms automatically. Together with Zapier, it works to save your time by automating your daily routine tasks and building efficient workflows between multiple apps.

2. Customize PDF.co PDF Filler

Once you get all the accesses to Zapier and PDF.co, you can finally to making your invoice. Now, it’s time to create your first Zap (in the top-right corner of your dashboard).

Let’s set PDF.co as the App and the PDF Filler as the Action Event.

We will configure the PDF Filler engine with the invoice data to be filled in. This will include the coordinates where we will be pasting text and images in the PDF template. PDF Viewer is a good tool to get the coordinates for this.

Follow these steps to customize the invoice maker app:

The Source PDF field should be empty so that the Invoice uses a clean template.
The Text objects field should include the coordinates, font size, name and color, page number, text. Here’s the format x;y;page;text;fontSize;fontName;fontColor.
The Images field should include the coordinates, page number, image URL, width, and height. Here’s the format x;y;page;urltoimage;;width;height

You will find all the details on the screenshot below:

3. Get your invoice ready

Now, the configuration can be sent over to PDF.co for Test & Review.

Once the test is completed successfully, you will see a temporary URL for your PDF invoice. Copy and paste it into your browser to see and download the actual invoice.

We have successfully created a PDF Invoice by adding images and text to an empty PDF.

Check out the invoice output:

With the help of this short tutorial, you learned how to make an easy invoice using the PDF Filler in PDF.co. And now you know how to add text and images to a PDF template as well as find the coordinates of objects using the PDF Viewer tool.

Generate PDF Invoices from HTML Template using PDF.co Web API

If you need to automatically generate invoices, you can use pre-made invoice templates.

To proceed, you will need to get your API key and create a free account with PDF.co as well as to set up a Postman environment.

In this tutorial, we will use the Invoice Template Sample 1. You can access Invoice Template Sample 2 and Template Sample 3 here and here.

Once you set up your Postman environment and imported Postman collection, you can fully use the invoice templates for your needs. It is easy to do by following these steps:

1. Open the Postman app and click on the PDF.co API v.1 folder under the Collections tab.

2. Click on JSON (Invoice template 1) under the HTML template folder.

3. Select raw under the Body menu. Now, you can see the JSON code that can fill out the invoice.

4. You can find the templateData parameter inside the JSON code for this Invoice Template.
{ "invoice": { "id": "0021", "date": "August 29, 2041", "dateDue": "September 29, 2041" }, "issuer": { "name": "Sarah Connor", "company": "T-800 Research Lab", "address": "435 South La Fayette Park Place, Los Angeles, CA 90057", "website": "www.example.com", "email": "info@example.com" }, "client": { "name": "Cyberdyne Systems", "company": "Cyberdyne Systems", "address": "18144 El Camino Real, Sunnyvale, California", "website": "www.example.com", "email": "sales@example.com" }, "items": [ { "name": "T-800 Prototype Research", "price": "$1000.00" }, { "name": "T-800 Cloud Sync Setup", "price": "$300.00" }, { "name": "Skynet Domain Setup", "price": "$50.00" }, { "name": "T-800 OS License", "price": "$350.00" }, { "name": "T-800 Vision Testing", "price": "$150.00" }, ], "discount": "$100.00%", "tax": "$126.88 (7.5%)", "total": "$1876.88", "paid": true, "note": "Thank you for your business with us.", "primaryColor": "#E4135A", "secondaryColor": "#00538B", "textColor": "#3F4254" }

The PDF.co engine will use the HTML template that will generate an invoice by using the data from the templateData parameter.

5. On the top right, click on the Send button.

Check and make sure that the Status says 200 OK.

6. The result will show the final URL where your invoice is located. Just copy and paste the URL into your browser.

The invoice ready will look like this:

Summing Up

Now, you know everything about creating invoices using pre-made invoice templates. As you understand the invoice structure and can set the order of invoice fields, you can easily configure PDF.co invoice creator engines to automate the invoice-making process in your company.

Invoice Fields

Why an Accurate Invoice Maker Matters

Make a PDF Invoice by Using Images and Text with PDF.co & Zapier