This tutorial shows you how to create a custom, line-item invoice system using the Gravity Forms plugin, Advanced Custom Fields Pro plugin and a few code snippets. I wanted to come up with a simple way to create my own invoicing method that integrated seamlessly with WordPress but I didn’t want to just install an existing invoice plugin and settle for that. Instead, I wanted something that I could tailor to my exact preferences.

Custom Invoice Tutorial Outline

Here’s a quick outline of what I’ll be covering in this tutorial.

1. Create Invoice Custom Post Type
2. Create Invoice Custom Fields
3. Create Invoice Form in Gravity Forms
4. Connect Form with PayPal
5. Create Single Invoice Template
6. Send Email to Client when New Invoice is Created

Things you’ll need for this tutorial include a Gravity Forms Developer license (includes the payment gateway add-ons needed to accept payment), Advanced Custom Fields Pro (it has the “Repeater” field for creating invoices with multiple products/services) and the Genesis Framework (optional but it will make presentation a lot easier). By the time we’re done, our finished product will look something like this:

Create Invoice Custom Post Type

The first step I want to take is creating the Invoice custom post type. You can use any method you want but the quickest will be to add the code I’ve already created (below). This code registers the Invoice post type without an archive and excluded from search queries on your site. This means that users will need to have a direct URL to access an invoice post.

Create Invoice Custom Fields

Next, we need to create some custom fields for the Invoice post type. For this tutorial (and all of my custom field work), I will be using Advanced Custom Fields Pro. There is a free version of Advanced Custom Fields but this particular project will require the Repeater field for adding multiple services to a single invoice.

For this tutorial, I’ve uploaded an importable JSON file for you to quickly import the fields. If you would like to use this file, you can download it from GitHub. That said, let’s walk through creating the fields manually.

Create a field group called “Invoice Fields” or whatever you’d like to name it. In this group, we’ll be creating three fields (key is in parentheses):

1. Client Name (invoice_client_name) – This is where we’ll add the client’s name.
2. Client Email (invoice_client_email) – This is where we’ll add the client’s email address.
3. Invoice Services (invoice_services) – A repeater field that will allow us to add multiple services to each invoice.
   • Service Name (invoice_service_name) – The title of your service/product.
   • Service Amount (invoice_service_amount) – Amount to bill client for each service.
   • Service Quantity (invoice_service_quantity) – How many of each service/product.

Here’s a screenshot of what the fields groups setup should look like.

Once you’ve got your custom fields group set up properly, your “Add New Invoice” page will look like the image below. Thanks to the ACF Repeater field, we can add new invoice items by simply clicking “Add Service.”

Create Invoice Form in Gravity Forms

Up next is to create the form that will be used by your clients to pay an invoice. This is now where we’ll get into Gravity Forms. To begin, create a new form and call it “Invoice” or whatever you prefer. This may be one of the most advanced forms you’ve ever created with Gravity Forms but it’s not too bad. I’m going to break it up into different sections.

Form Editor

In the Form Editor, we need to create five form fields:

1. Invoice ID – Add a Hidden field and call it “Invoice ID”. For this tutorial, we will be giving each new invoice a unique title of our choosing. For example, you could prefix your invoices and give them unique number sequences based on date (i.e. ENGWP112914-1 for prefix, date of 11/29/14 and “-1” for the first invoice of that day). This Gravity Forms field will store the title/id of the invoice. To get this to work, add the following Gravity Forms Merge Tag to “Default Value” under the field’s Advanced tab: {embed_post:post_title}
2. Invoice Amount – This can be a simple text field. Under the Advanced tab, give it an admin label of invoice_amount. We also need to enable this field to be dynamically populated so check that box and enter as the parameter name invoice_amount. Also, make it viewable to admin only.
3. Client Name – This will be almost the same as the Invoice Amount. However, we need to change the admin label and dynamic population parameter name to client_name. Also, make it viewable to admin only.
4. Client Email – Again, the same as before but with client_email . Also, make it viewable to admin only.
5. Invoice Total – Finally, this will be a product field (under the Pricing section). In the “Field Type” dropdown, select “Calculation” and paste the invoice_total merge tag in the formula area. The merge tag will look something like {invoice_amount:2} (the 2 is for the field ID). This will set the product’s price to be equal to the Invoice Amount field. In a bit, I’ll show you where this field gets its value from. For now, save your form because we’re ready to move on.

Form Confirmations

This area is optional. You can disable confirmations or just keep the default Gravity Forms confirmation (although I don’t know why you would). I always like to display a confirmation so I’ll set one up. Nothing too fancy here. I’m just going to confirm that payment for their invoice ID was received. This will happen after the client lands back on my site after completing payment in PayPal.

Your payment for Invoice ID <strong>{Invoice ID:1}</strong> was submitted successfully.

Form Notifications

As with the Confirmation, I’ll send a simple notice via email as well so the client has multiple confirmations that the payment was received. For the sake of demonstrating what’s possible with Gravity Forms merge tags, I’ll send a little more information to the client in the email.

{client_name:3},

Your payment was received successfully. Here are your invoice details:

Invoice ID - {Invoice ID:1}
Invoice Amount - {Invoice Total (Price):5.2}
Date Paid - {date_mdy}

If you have any questions, just reply to this email.

Sincerely,

Ren Ventura, EngageWP
Website/WordPress Developer

Configure the rest of your notifications and you’re ready for the next step.

Connect Form with PayPal

We’re halfway there! Next, we need to get our form working with a payment gateway. Since it’s the most widely used and easiest to set up, I’m going to be using PayPal. You will need to install and activate the Gravity Forms PayPal add-on. Once you’ve done that, the PayPal options you’ll need to access are found under the Form Settings section of your invoice form.

Create a new PayPal feed for the invoice form and enter the required information. Since this initial step is very simple and Gravity Forms provides good help boxes, I’m going to move onto the next part of integrating the form with PayPal.

After you’ve created the feed, you’ll be presented with more options. The most important of these options is the “Payment Amount” field. From this dropdown, you can select “Invoice Total” (our product field) or “Form Total.” Since we only have one product with no options, these two will be the same so it doesn’t matter which one you select. Go ahead and sync up any other field you wish by populating it with the information that should be sent to PayPal and finish up the remaining settings. I suggest not prompting the buyer/client to enter a note or shipping address unless absolutely necessary and to only send notification emails after payment has been received.

Create Single Invoice Template

If you’ve made it this far, you now have an Invoice custom post type with custom fields for client details and invoiced services. You also have a form connected with PayPal to accept payment from the client for the items contained in the invoice. Now, we need to display this invoice and form to the client. To do this, we need to create an invoice template. Since I use Genesis for my development, it’s what I’ll be using to show you the single-invoice.php template I put together for this tutorial.

If you don’t use Genesis, you can still use the important parts but some of the code won’t apply to you (I’ll point out what you can ignore). Your best option would be to copy your theme’s single.php file and rename it single-invoice.php.

To begin, here’s my single-invoice.php template. Take a look and I’ll give a thorough explanation next.

• On line 10, we’re creating a counter variable to keep track of the invoice total and initializing it to zero.
• Lines 13-16 are Genesis-specific and tidy up some presentational things.
• Lines 23-25 create some additional variables: Invoice ID, Client Name and Client Email.
• Lines 29-81 create the invoice container and table. The table has three columns; one for each of the repeatable service fields we created in step two. Each time you add a new service to the invoice, the counter variable ($running_total) is updated to equal the values from all of the included items.
• Lines 85-89 output the form we created in Gravity Forms to let clients pay the invoice. On line 87, you’ll see the shortcode that outputs the actual form. You will need to update this shortcode so it’s specific to your invoice form.
• Lines 93-96 pre-populate the value attribute of the Client Name field with the Client Name custom field’s value. This dynamic population is the feature that will allow us to use the same form for all of our invoice posts.
• Lines 98-102 pre-populate the value of the Invoice Amount field with the value of our counter variable, which is equal to the sum of every service in the invoice. This counter value is formatted appropriately for currency.
• Finally, line 104 wraps up the Genesis code and is only needed if using this template within Genesis. Remove it otherwise.

Send Email to Client when New Invoice is Created

A nice feature to have is to automatically send an email to the client with a link to the invoice as soon as you publish the invoice. This step is not completely necessary but I’ve included some code specifically for it.

Recall that in step two, we created a Client Email field. We added this field for two reasons: we want to associate the client with an email address and to automatically send an email to them when an invoice is created. Since we set the field to be viewable by the admin only, we need to have it dynamically populated so that the field contains an email when it’s submitted. I chose not to have this field dynamically populated via a filter like Client Name and Invoice Amount because, since these invoices are technically viewable to anyone (don’t worry, not many people are looking to pay other peoples’ invoices), the client’s email would be viewable to anyone who was able to access the invoice and skilled enough to know where to look. Therefore, I’d prefer to populate this field via a query string that is included in the email sent to the client. That way, it would be very simple for the client to populate this field (perhaps without even knowing it) and their email would not be visible to anyone who accessed the invoice.

This snippet composes an email to send to the client after an invoice is generated and sends it to the email we entered when we created it. In the email’s body, it includes a link to the invoice and dynamically appends a query string that will populate the Client Email field. Everything is still just as simple for the client but much safer.

Finishing Up

Whew! You think your worn out from following these instructions? Try writing this entire post (over 2,000 words) in one sitting! You’ve now set up a custom invoice system using a simple custom post type, some custom fields and Gravity Forms as your payment processor. Feel free to modify it as you wish. If you come up with any neat additions, please post them in the comments! Thanks for reading.

UPDATE: Since I wrote this post, I’ve further customized my own usage to include things like custom notification emails (see below), personalized invoice messages displayed to the client, data columns on the Edit Invoices page, payment statuses and conditional display of payment buttons, and more. If you need help setting this up on your website or customizing it to your requirements, send me an email.