How to Generate PDF Invoice from Invoice Template using PDF.co API (Template Sample 3)?

PDF.co supports Mustache and Handlebars templates to produce HTML to PDF. Both Mustache and Handlebars are logic-less template syntax. They can be used for source codes, config files, HTML, and more. Handlebars are compatible with Mustache and are capable of swapping with Mustache in most cases.

  1. Select PDF.co API v. 1 from the Collections Tab
  2. Select HTML Template and Click on JSON
  3. cURL Request
  4. Use JSON Code to Create the Invoice
  5. See Created Invoice from templateData then Click Send
  6. Get the URL from the Result to Open the Invoice

We are now at the Invoice Template Sample 3 tutorial. Check out Template Sample 1 and Template Sample 2 for other template sample layouts.

You can also make a PDF Invoice from scratch by adding text and images to an empty PDF. Check it out here.

1. Select PDF.co API v. 1 from the Collections Tab

Go to the Collections tab and click the PDF.co API v.1 folder.

PDF.co Postman API

2. Select HTML Template and Click on JSON

On the list of folders, look for and click on the HTML template. Then click on JSON (Invoice template 3).

JSON Invoice Template 3

3. cURL Request

curl --location --request POST 'https://api.pdf.co/v1/pdf/convert/from/url' \
--header 'x-api-key: INSERT_API_KEY_HERE' \
--header 'Content-Type: application/json' \
--data-raw '{
"url": "https://bytescout-com.s3-us-west-2.amazonaws.com/files/cloudapi-templates/template-invoice-3.html",
"name": "newInvoice.pdf",
"margins": "5px 5px 5px 5px",
"paperSize": "Letter",
"orientation": "Portrait",
"printBackground": true,
"header": "",
"footer": "",
"async": false,
"encrypt": false,
"templateData": "{\r\n \"invoice\": {\r\n \"id\": \"0021\",\r\n \"date\": \"August 29, 2041\",\r\n \"dateDue\": \"September 29, 2041\"\r\n },\r\n \"issuer\": {\r\n \"name\": \"Sarah Connor\",\r\n \"company\": \"T-800 Research Lab\",\r\n \"address\": \"435 South La Fayette Park Place, Los Angeles, CA 90057\",\r\n \"website\": \"www.example.com\",\r\n \"email\": \"info@example.com\"\r\n },\r\n \"client\": {\r\n \"name\": \"Cyberdyne Systems\",\r\n \"company\": \"Cyberdyne Systems\",\r\n \"address\": \"18144 El Camino Real, Sunnyvale, California\",\r\n \"website\": \"www.example.com\",\r\n \"email\": \"sales@example.com\"\r\n },\r\n \"items\": [\r\n {\r\n \"name\": \"T-800 Prototype Research\",\r\n \"price\": \"$1000.00\"\r\n },\r\n {\r\n \"name\": \"T-800 Cloud Sync Setup\",\r\n \"price\": \"$300.00\"\r\n },\r\n {\r\n \"name\": \"Skynet Domain Setup\",\r\n \"price\": \"$50.00\"\r\n },\r\n {\r\n \"name\": \"T-800 OS License\",\r\n \"price\": \"$350.00\"\r\n },\r\n {\r\n \"name\": \"T-800 Vision Testing\",\r\n \"price\": \"$150.00\"\r\n },\r\n ],\r\n \"discount\": \"$100.00%\",\r\n \"tax\": \"$126.88 (7.5%)\",\r\n \"total\": \"$1876.88\",\r\n \"paid\": true,\r\n \"note\": \"Thank you for your business with us.\",\r\n \"primaryColor\": \"#E4135A\",\r\n \"secondaryColor\": \"#00538B\",\r\n \"textColor\": \"#3F4254\"\r\n }"
}'

4. Use JSON Code to Create the Invoice

On the raw inside the Body menu is a JSON code that we will use to create the invoice with pre-filled invoice information.

JSON Code Body

This templateData parameter shows the invoice information that we added in the JSON code.

{
"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"
}

5. See Created Invoice from templateData then Click Send

To give you a picture of the invoice generation process. It starts from the engine that reads the HTML template. Next, the template processes the templateData parameter. Then, the invoice is created, which contains the data from templateData.

Click Send.

Send Button

You are good to go when the status says 200 OK.

Status Code

6. Get the URL from the Result to Open the Invoice

Super! We can now see our generated PDF Invoice.

Out Of Invoice Template 3

 

Similar Pages