How to Use WooCommerce to Email an Invoice with a “Pay Now” Link: A Step-by-Step Guide

Aug 16, 2015 by Scott Campbell

 

 

woocommerce_logo-300x155

If you use WordPress with the WooCommerce extension to manage your website, you know that WooCommerce works great for basic eCommerce functionality—ideal for running an online store where your customers can drop items in their cart and check out with a credit card.

WooCommerce has become such a popular way to set up a Web-based shopping experience that larger businesses are using it (according to their site, the platform “powers over 30% of all online stores,”) but many B2B-type users are finding that the one-size-fits-all approach to eCommerce isn’t quite up to the task for more complex transactions. For example, you might want to send a client an invoice for a service you performed, or allow wholesale customers the ability to purchase items in bulk with special payment terms.

Fortunately, there is a way to use WooCommerce to generate invoices with both online and offline payment options, and to keep track of those orders in the same place as your public storefront orders. Here’s a step-by-step guide to generate an invoice, automatically send it by email with a payment link, and enable your customer to pay you directly on your website, using only WooCommerce and the payment gateway plug-in of your choice.

Step 1: Create a new order

In your WordPress dashboard, go to WooCommerce > Orders > Add Order. Here you’ll enter the customer and item information that will be used to generate an invoice. Click the pencil icon next to Billing Details to enter your customer’s information.

Important: Make sure you enter a valid email address for your customer, as this is how they will be receiving your invoice.

AddNewOrderCropped

In the Payment Method drop-down, choose the payment gateway you want your customer to use for this transaction. You can find WooCommerce-compatible payment plug-ins in the dashboard by going to WooCommerce > Add-ons > Gateways, or > WooCommerce > Add-ons > Third-party. In this example, we’re using Paystand, but there are several options available depending on how you want your customer’s payment experience to flow.

Note that you can enable multiple payment gateways in Settings > Checkout, including offline types such as check and cash-on-delivery. You can choose which ones to activate in your checkout, and the order in which they should appear.

Step 2: Add Line Items

Next, list the products or services you are billing for by clicking the Add Line Item(s) button in the Order Items pane. This part is not very intuitive, so we’ll walk you through it. 

  • Click the Add Fee button instead of the Add Product(s) button (unless you are sending an invoice for a fixed-price Product already in your WooCommerce inventory).
  • Click the pencil icon to the right of the Fee you just added, and enter a description of the product or service.
  • Enter the amount for each Item under Total, and when you’ve listed all your Items, click the Calculate Total button.

OrderItems

Step 3: Generate the Invoice

Now that you’ve calculated your order total, it’s time to generate an invoice to email to your customer. Navigate to the top right corner of the window, to Order Actions. Select Customer Invoice from the drop-down menu, and then click the Save Order button.

OrderItemsCropped

 

That’s it! Your invoice has auto-magically been generated and emailed to your customer. Now let’s step into the role of your customer and see how the rest of the process looks from their perspective. 

Step 4: Your Customer Receives the Invoice

Here is what your customer sees in their inbox: a nicely formatted invoice with a “Pay Now” link at the bottom.

EmailedInvoice

Step 5: Your Customer Pays On Your Site


Clicking the “Pay Now” link in your emailed invoice brings your customer back to your site, where they see a secure page confirming their order, and a button to take them to the checkout window.

PayWithPayStandCropped

In this instance, clicking “Pay with Paystand” launches the in-line Paystand checkout window, where your customer can choose among the payment methods you have enabled and pay without leaving your site.

Here’s an example checkout window if your customer chooses to pay by credit card:

PScheckoutCCSm

From the time your customer got your invoice in their inbox, to final payment, they’ve only clicked through three windows. And, they never had to leave your site or log in to a third-party system to pay.

If your customer chooses to pay by eCheck Processing, they’ll be authorizing a direct debit from their bank account using their secure bank login. Here’s what that looks like:

 

PScheckout

Once your customer has paid, they’ll receive a receipt by email, and the order status will automatically be updated in your WooCommerce dashboard, so you have a unified set of financial data for both your online and offline sales.

Generating an invoice in WooCommerce may require a few slights of hand on your part, but once you’ve got the process down, it’s a pretty slick way to do custom billing from your website, without spending a lot of money on a separate billing service. 

Learn more about Paystand's invoice and payment plug-in for WooCommerce