If you’ve ever used any of the WordPress e-commerce plugins, you know they can be a bit overkill when you just need a simple payment solution.
I recently worked to help a utility company build a simple payment option into their WordPress website.
Their customers were demanding online payments. Payments were consistently late because people would forget to write the check and mail it off.
They knew that online payments would mean a more consistent flow of payments in a timely manner.
Their original plan was to have me help them integrate with a third party that would provide a complete online portal and payment solution.
However, after four weeks of frustration trying to work with their outdated software and poor support, the decision was made to abandon that plan and find an alternative.
Having built e-commerce websites in the past I knew there were several options, but I also knew most of those options were not the right solution.
We wanted a low friction and stupid simple way for people to “swipe” their credit card online.
I decided to use Gravity Forms to build a single payment page.
With the Pro License, you have access to some pretty sweet addons. Of which I used two.
How I Did It
To start here is a list of the tools I used for this.
- Gravity Forms
- Stripe Addon
- Mailchimp Addon
- SSL Certificate
I’m using Stripe because I prefer it over the other payment processors. But you could use PayPal for this as well.
We used Mailchimp as a bonus feature. They did not have an up-to-date email list, and because most if not all of their customers would use this payment option, I figured it was a quick way to get a list together with accurate email addresses.
You can see a Demo of this form here.
There are four sections to the form.
- Basic Info
- Account Info
- Credit Card Info
- Payment Confirmation
Section One: Basic Info
This section is simple. Just need to click to add the available fields from the “Advanced Fields” section as shown below.
Then make all fields required. In the address field select your country or international. In this case, we set it for U.S and then pre-set the state field to Arizona.
Section Two: Account Info
The first thing you’ll want to click to add is the “Section” field from the “Standard Fields” section.
Then you will select a “Single Text Field” also in the “Standard Fields” section. In this case, I used this field as the “Account Number”.
The last field is found in the “Pricing Fields” section. Click to add the “Product” field. Make this a “User Defined Price” and mark required. User defined pricing allows the person paying online to enter their price. In this case, each customer resieved a monthly bill so they knew how much they owed.
Section Three: Credit Card Info
First click to add a “Section” field from the “Standard Fields” section.
Then, in the “Pricing Fields” section click to add Credit Card. You can select the type of cards the customer can use. Make this field required. Finally, you can “force SSL” if you need to, to show the page is secure. But you will need an SSL cert installed on your server to make sure this page is secure.
Section Four: Payment Conformation
Click to add another “Section” field and a “Checkboxs” field from the “Standard Fields” section.
The checkbox field, add one choice and a description. You can hide the field label so that only the checkbox is displayed as shown below.
Finally add the “Total” field from the “Pricing Fields” section. This will automatically display whatever is entered into the price field in section two.
Integrating With Stripe
This is a very simple process and only require two steps.
The thing I really like about using Stripe is that you don’t need to create Subscriptions or Products from within Stripe, you do it all within Gravity Forms.
Get you API keys from your Stripe Dashboard and then setup a webhook within your Stripe Dashboard as well.
- Where to add API and get Webhook link within Gravity Forms
- Where to find API Keys within Stripe account
- Where to add the webhook link from Gravity Forms into your Stripe account.
Now that we have Stripe integrated we can setup “Stripe Feeds” within Gravit Forms. This is where the magic happens!
- Click Add New to start creating your feed
- Is this feed for a Product, one time payment, or Subscription, recurring payments?
- If Product Then – Select the field in your form that provides the payment amount.
- If Subscription Then – Setup how many times to charege how often, and if there is a trial period.
Don’t Forget the Follow Up Stuff!
Be sure to use the built-in email feature in Gravity Forms for notifications. You’ll want to receive an email, but you can also use the Merge Tags to create a smart receipt that is automatically sent to the customer.
What Has Been The Result?
Since implementing this simple Gravity Forms payment system, they have had daily customer payments seven days a week!
They no longer go weeks waiting for customer checks in the mail so that they can have operational cashflow.
With Stripe it’s a two-day delay from transaction to bank deposit!
Download this Simple Payment Form
With Gravity Forms you can very easily import forms and start using them immediately. So I’m making this one available to you.
You’ll need to have the Gravity Forms Pro License for this to work!
As Always use the comments below and I’ll be back to help you out!