Client Login.

Justin Long // ExpressionEngine Expert

Simple Commerce = Simple Invoicing Software

Written by: Justin Long | On: March 6, 2011

For this tutorial you should have almost everything you need already installed. The only 3rd Party add-on that you will need is VZ Members which is free and will allow us to select a member to restrict access to the invoice to. This tutorial is just the basis for an invoicing system that could be built. It focuses mainly on setting up Simple Commerce and the templates so that only the member that the invoice belongs to can see the invoice on your site.


We will need to create a new channel and custom field group to house our invoices, I have given my channel a short name of "invoice". I have also created a group of custom fields which I have also named Invoice. My custom fields are really basic. I have a Matrix field that allows for me to show each task on a separate row in the template (but it is not required).

We will also need to install Simple Commerce Module. To do this goto Add-ons >> Modules and Install Simple Commerce.


Before we start building out the templates we should talk about the URL structure that we are trying to achieve. For this tutorial I wanted to achieve for when a user was actually viewing their invoice. Also it would not be good if another site member could see someones else's invoice. For this we are going to need two templates so we can get the logged in members ID and then compare it to the client select custom field that we created earlier. So for this example I have 2 templates "index" and ".invoice_single".

Index Template

In the index template we are going to have two segment conditionals to check and see if there is content in segment_2. If there is nothing in segment_2 we are going to show a message to the user saying that they need check their account page or the email that they received with the proper url to their invoice. If there is content in segment_2 we are going to embed the .invoice_single template. For this template to work you will need to make sure that PHP is enabled and it is set to parse on Input.

{!-- Index Template --}
{if segment_2 
== ""}
<p>To view an invoice please either click on the link
 in your email 
or click on the link from your account page.</p>
{if segment_2 
!= ""}
="invoices/.invoice_single" user_id="<?php echo $this->EE->session->userdata('member_id'); ?>"}

Invoice Single Template

In this template we are using the "user_id" that we passed in from the index template to check to see if the current logged in member is the same as the member that this invoice is intended for. Which will be set with the VZ Members fieldtype when we published an entry. We are also requiring that there is an entry so the URL must contain either the url_title or the entry_id or it will not show any content. The template that I am using in this example is a free one that I downloaded from the internet and is table based so I am going to post the important parts. You can see the entire template code on the example page.

{exp:channel:entries channel="invoices" limit="1" disable="pagination|categories|category_fields" require_entry="yes"}
{if invoice_client 
== "{embed:user_id}"
<!-- invoice_client is the name of the VZ Members Custom Field -->
The markup for the invoice goes here
To Pay Your Invoice
{exp:simple_commerce:purchase entry_id="{entry_id}" 
<a href="{buy_now_url}" onclick=";return false;">Pay Now</a>
/if}<!-- This is the closing of the if statement for the VZ Memeber field --> 
The last bit of the template code allows for a user to actually pay their invoice. Once the user clicks the link they will be directed to PayPal site to pay and will then be returned back to the success page of your choosing when they are done.
You can view a live example and see the complete template code on my example site here.

Creating Invoices

Now that we have done all of the hard work all we need to do now is create a few invoices and wait for clients to pay us. To create an invoice that a client will be able to pay via PayPal is going to be a 2 step process. First you will need to create a new entry in the Invoices channel, then you will need to go into the Simple Commerce module and add a product to the newly created entry. So lets start off by publishing a new entry. Make sure that you fill out the client select field or the client will not be able to see their invoice even if they have the proper URL. Now that you have finished creating your invoice entry we will need to go to the Simple Commerce Module. Click on the Items button, if you have not added any items to simple commerce yet this page should be empty. You will need to click on the Add Items button which should take you to a page that looks similar to the channel edit page. If you have a lot of entries you can sort through them to find the entry that you just created. you will need to click on the checkbox on the far right for all of the items that you want to add. You will then need to click on the Submit button which will take you to a new page which will allow you to set all of your Simple Commerce Details. You can leave most of the fields how they are, I personally only changed the price to match the total invoice price before clicking Add Item and completing the invoice.

Wrapping Up

Depending on your workflow you will need to email the user the complete URL or have an area in an account page or similar that they can access the direct URL to their invoices. This is only a very basic example and could be expanded on to create a very robust invoicing system for yourself or for your clients. A few additions that would be neat auto-calculating invoice total based upon Matrix rows or a download of files on payment.

As always please feel free to share your thoughts or questions in the comments below.

Next entry >>> <<< Previous entry


<<< Go back to entry list