Gravity Forms: Simple Payment Solution

If you’ve ever used any of the WordPress ecommerce plugins, you know they can be a bit overkill when you just need a simple payment solution that allows your customers to buy your products or subscribe to your services online.

The Use Case

We recently helped 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 us 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 ecommerce websites in the past we knew there were several options, but we 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 and pay their utility bills online.

The End Result

You can play with a working demo of this form here.

The Solution

We will be using Gravity Forms with a couple of add-ons and integrations to make sure they can easily merge the payment data into their client management software.

This solution requires a Pro License or Elite License, in order to have access to the payment gateway add-ons such as Stripe and PayPal.

Some of the add-ons and integrations we use are not required for the “payment” part of this solution to work.

What You’ll Need

• Gravity Forms Pro or Elite License
• Stripe Add-on

We will be using Stripe and the Stripe add-on because the company already uses Stripe as one of their payment processors. It’s also more reliable than PayPal, although you could use one of the PayPal add-ons for this as well.

I’m going to assume you already have Gravity Forms installed and setup, so I will not be covering that in this tutorial, however, if you need help with that, I recommend watching this video: How to Install Gravity Forms

Step 1: Setting Up The Add-ons

First thing is to install, activate, and setup each of the add-ons we’re going to use to build this form. Without this completed, we won’t have the tools, specifically the Stripe Card field, we need to complete the form creation process.

The Stripe Add-on

Please use the complete setup tutorial here, Setting Up the Gravity Forms Stripe Add-on

Step 2: Creating the Form

The form has four sections, we could have used the Gravity Forms multi-page feature instead of breaking the form into sections like we did, however, with the simplicity of this form, multi-page would have been overkill.

Form Sections:

1. Customer Information
2. Account Information
3. Payment Information
4. Payment Completion

Confirmation & Notifications:

With each Gravity Forms form, you can set up a confirmation page or message and automatically send emails with payment details.

For this client, we set up a confirmation page and two notification emails.

1. Confirmation Page: verify payment was successful
2. Notification 1: Email to customer, “receipt of payment”
3. Notification 2: Email to billing manager, “payment received”

Let’s Get Building!

1. Go to Forms > New Form
2. Enter a Form Title
3. Click “Create Form“

Section One: Customer Info

In this section, we will be collecting the basic customer information: Name, Phone, Email, Address

1. From the Standard Fields select the following field:
   1. Section
2. From the Advanced Fields select the following fields:
   1. Name
   1. Phone
   2. Email
   3. Address

3. Configure and layout your fields as desired

Section Two: Account Information

In this section, we will be collecting the customer’s account information and the amount due, as listed on their bill. We will use two fields: Number and Product.

1. From the Standard Fields select the following fields:
   1. Section
   2. Number
2. From the Pricing Fields select the following field:
   1. Product

Note: If you have account numbers that use both numbers and letters, instead of using the Number field, use a Single Line Text field, found in the Standard Fields section.

3. Configure and layout your fields as desired

Note: In this case, User Defined Pricing allows the customer to enter the amount received on their monthly bill. If you’re creating a payment form for a different purpose, you may wish to use a different product type.

Section Three: Payment Information

In this section, we will be collecting the customer’s credit card details using the Stripe Card field. When you use Stripe to collect credit card information, none of that data is stored in your website, it is all collected, processed, and stored by Stripe.

1. From the Standard Fields select the following field:
   1. Section
2. From the Pricing Fields select the following field:
   1. Stripe Card

3. Configure and layout your fields as desired

Section Four: Payment Conformation

In this section, the customer will be able to review their payment total, agree to the terms of their payment and submit the payment.

1. From the Standard Fields select the following field:
   1. Section
2. From the Pricing Fields select the following field:
   1. Total
3. From the Advanced Fields select the following field:
   1. Consent

3. Configure and layout your fields as desired

4. Final Step: Click “Update” to save your changes

The Magic: Setting up the Stripe Feed

Now that we have our add-ones setup and the form created, we can setup the “Stripe Feeds” within Gravity Forms. This is where the magic happens!

If you followed the instruction in step one and setup the Stripe add-on, you’re ready to setup your Stripe Feed. However if for some reason you skipped step one, follow the instruction here, before proceeding.

Note: You do not have to setup your products or subscriptions in Stripe first. All of that will be handled by the Stripe Feed.

Let’s get started!

1. Click Settings => Stripe

2. Click “Add New”

3. Name Your Feed
4. Select “Product and Services” from the Transaction Type dropdown

5. Select “Amount Due” from the Payment Amount dropdown

Note: You will see your product field name here if you named it something other than Amount Due.

Note: If you have more than one product field, i.e your actual product and another product filed for shipping or tax, you will want to select the “Form Total” option from the dropdown in this step.

6. Click “Save Settings“

7. Final Step: Make sure your feed is active
   1. Click “Stripe”
   2. Just make sure you see “Active” next to your Stripe Feed

If you do not see “Active”, you will see a red “Inactive” notice. Just click “Inactive” and it will switch to the green “Active” label.

Additional Stripe Feed Settings

The remaining settings are either optional or should already be configured.

1. Billing Information

If you have an address field in your form, this section will already be mapped in the feed settings by default. If you have multiple address fields in your from, i.e. billing and shipping, you can choose which address field to map here.

2. Other Settings

If you have other data you’re collecting in your form, that you’d like to pass to your Stripe account, you can use the Metadata section to map the data from your form to the Stripe record.

For example, in this case, we may want to pass the account number to Stripe so that the customer account in Stripe has a record of the account number.

If you’re going to use Gravity Forms to send an email confirmation or receipt, you may wish to disable the Stripe Receipt email, which can also be done from this section.

The Confirmation Page

By default Gravity Forms will create a confirmation message that displays after the form is submitted. You can modify this message, or setup a redirect to another page or URL after the form is submitted.

In this case, we create a new page with a thank you message and set the confirmation to redirect to that page after the form was submitted.

Pro Tip: I highly recommend using the redirect method anytime you use a form to collect payments. When the customer is shown a confirmation message, on the same page the form is on (the default), and if they do not close their browser window, and that page is reloaded, the form could submit again, resulting in a duplicate payment.

For more information on setting up confirmations, I’d recommend watching this video tutorial: How to Enable Confirmations

Notifications

As mentioned in the project overview, we setup two different notifications. One to send the customer, which was used as a Payment Confirmation or receipt. The other was sent the billing manager to let her know that a new payment was made and she could then update the clients account.

By default, Gravity Forms will create an Admin Notification every time you create a form. This is intended to be an email sent to the website owner to notify you of new form submissions. Like confirmations, this can be modified and you can add as many notifications as you’d like.

You can review how we configured these notifications by reviewing the images below. Each notification takes advantage of the available merge tags for pulling info from the form into the emails.

For more information on setting up notifications, I’d recommend watching this video tutorial: How to Enable Notifications.

Got Questions? Need Help?

As a reminder, you will need to have the Gravity Forms Pro or Elite License to have access to the official Stripe add-on.

If you have any issues or questions, please use the comments below and we will do what we can to help!