pay-invoice-with-wordpress

How to add ‘Pay Your Invoice’ or ‘Bill Payment’ feature on WordPress Using WooCommerce

Last Updated on April 20, 2022 by WP Knowledge Hub

Does your business use third-party invoices from a different software but you want to collect payment through your WooCommerce website anyways? This setup requires a few paid plugins, but is generally the best way to accomplish this goal!

Why Collect Client Invoices in WordPress?

If you’re a small growing business, manually collecting invoices and processing payments might take up too much of your valuable time. Besides, most clients expect a modern business to collect payments online.

If you don’t want to use a payment processor because of high fees, you can always collect invoices using WooCommerce.

In this example, the business added a Pay for Your Invoice link in their main navigation under Services:

This takes you to a page where the client can input their invoice amount (including taxes), and their invoice number. Filling out the two required fields allows the user to submit and pay for their invoice.

Completing this step then takes the user to the checkout page, where they will be able to use their credit card to pay for their invoice, just as-if they were buying any online product:

The key to this whole operation is to disguise “Pay for Your Invoice” as a WooCommerce product. Here’s how to do that.

Setting Up a ‘Pay Your Invoice’ Product in WooCommerce

To start, you’ll need 3 key plugins to complete this project:

  1. WooCommerce
  2. WooCommerce Name Your Price
  3. WooCommerce Product Add-ons

Step 1 – Install WooCommerce

I won’t go into too much detail here about how to setup WooCommerce. If you don’t know what WooCommerce is or how to setup an e-commerce site, I suggest you read our other post on how to create an e-commerce site using WooCommerce.

Step 2 – Install WooCommerce Name Your Price

The Name Your Price plugin lets you be flexible with the price you are willing to accept for selected products. In this case, it will be used for the client to tell us what their invoice total is. Installing and activating this plugin will add a new option in the product data, allowing you to select Name Your Price as a Simple Product option:

Step 3 – Install WooCommerce Product Add-ons

WooCommerce Product Add-Ons is one of the most popular extensions available for WooCommerce. It gives clients even more options, including the ability to let customers enter custom text in a text field input. This custom text box is where you will ask clients to enter their invoice number!

Step 4 – Create a New Product Called “Pay For Your Invoice”

Go to WordPress dashboard, and under WooCommerce, you’ll see a new Custom Post Type called Products. Select Add New.

Give your product a name. Something like Pay For Your Invoice for clarity’s sake. You need to make sure you follow these steps:

  1. Give your new product a clear name (remember this product is what people are ‘buying’ to pay for their invoice)
  2. In the Product Data box below the editor, you’ll want to make it a Simple Product and select Name Your Price.
  3. Next, you’ll want to select Add-ons, the last tab in the left navigation, and add a new field called Short Text. This is the custom text box where people will enter their invoice number. Make sure you give it a clear title and description like: Please enter your invoice number found at the top of your invoice
  4. Publish your product
  5. Go to WooCommerce > Settings > Name Your Price > and set the Name Your Price text to: Total Invoice Amount (including taxes). You can also change the text on the Add To Cart button to Pay Invoice, or something similar.

You can now preview your product, which should look something like this:

Step 5 – Display the Pay Your Invoice Product on Your WordPress Website

Now that the Pay Your Invoice product is all setup, you’ll need a way for your clients to access it. To add the Pay Your Invoice service to your main navigation under, for example, a tab like ‘Services’, so to Appearance > Menus, and follow these steps:

  1. You might notice there is no option to add Products to your navigation by default. First you need to click on the little “Screen Options” box in the top right of the screen and make sure Products is selected
  2. In the left most navigation, where it says Add Menu Items, select the Pay Your Invoice product you just created and add it to the navigation.
  3. In the example below, we dragged it under a tab called Services, because paying for your invoice is technically a service we offer on this website.
  4. Save your menu, and voila!

Visit your website and you can see that users can now go to Services > Pay Your Invoice, enter their invoice price and invoice number, and submit the payment with their credit card, all through a cleverly disguised WooCommerce product!

NOTE – We didn’t go over how to setup the payment gateways since there are too many options, but make sure you choose the one that works best for your business, and make sure you test a live transaction BEFORE launching this product.