Gravity Forms and its Stripe extension can be used to create a simple website shopping cart alternative. It’s true. You don’t need to pay for and wrestle with a shopping cart. If you have less than 20 items, you can build a website shopping cart using Gravity Forms and the Stripe payment gateway extension. You can manage products and subscriptions. Taxes and shipping as well. This is a more manual set up than you would expect from a shopping cart, but once done you can duplicate the form and edit it for additional products and services.
This is the fifth post in our series on using Gravity Forms. The others are:
- Using Gravity Forms – How to Create a Simple Form
- Setting up Gravity Forms
- How to Set Gravity Forms Controls – the Definitive Guide
- Styling Gravity Forms Layouts – Ready Classes to the Rescue
- Connecting Gravity Forms and MailChimp
In this post, we will describe and demonstrate how to add the Stripe Extension to Gravity Forms, how to connect Stripe and Gravity Forms, and then how to create a form that sells your products, services, and subscriptions. We will show you how Gravity Forms can be a website shopping cart alternative.
The Gravity Forms Stripe Extension
Step one is to add the Stripe Extension to Gravity Forms. And good news, it’s included in your Gravity Forms subscription, you just need to add it.
- Go to Forms > Add ons and scroll down until you see Stripe Add-On. Click Install
- Once it’s installed, you will be asked to activate the plugin
- When the extension is enabled you will see Stripe under Forms > Settings – select this to make the connection between Gravity Forms and your Stripe account
- You will need a Stripe account. Sign up and activate the account. This will give you access to the API keys you will need to make the connection
There is an area, Payment Collection Method that lets you control the method used to collect the credit card information. The first, Gravity Forms Credit Card Field, has the least intrusive UX, the cc form is right there on the form, but it’s also the least secure. It’s safe, but if your business has PCI compliance requirements, you will want to use one of the other two options.
Stripe Webhooks lets Stripe feed information back to your website. Click on View Instructions to see the information you will need to add to Stripe.
Head on over to Stripe and log into your account. There will be some bouncing back and forth as you gather up the information you need and add it to the Gravity Forms settings.
You will be looking for the Publishable and Secret keys for both the Live Feed and the Test Feed. Copy them from Stripe and paste them into the appropriate fields in Gravity Forms settings.
Now that you have made the connection you can now build and connect a form.
Website Shopping Cart – Building a Form
Now that you have connected Stripe and Gravity Forms you can create your first sales form. You will notice that there is a new group of form building options, Pricing Fields, with new fields that you can use to build the sales form. The Stripe extension added these. It doesn’t look like much, only six new fields, but don’t be fooled, there is a lot of options inside each field that you can use to create your website shopping cart alternative. We will describe each in turn.
The Product field is the workhorse. It’s where you set up the products or subscriptions you plan to sell with your website shopping cart. It can be a single product, or you can use a dropdown to let them choose. If you have multiple products in a logical group, the Radio Button is a good choice. Or there are times when you need to identify the product so the information is sent to Stripe and included in the receipt sent to your customer, but you don’t want to clutter up the form. In a situation like this select Hidden. Calculation is another powerful option.
Depending on what you select, the settings change dynamically. For example, selecting Dropdown or Radio Button gives you fields where you can add products. The field Label will accept HTML so you can use this to add a product image.
If you select Calculation you can use this to set up taxes or volume discounts. The Calculation choice lets you insert merge tags and mathematical operators. For example, you can use the product field (price) times the quantity field and then multiply the result by the tax rate to have a simple tax calculator. Do one of these for each state you ship to and use the conditional to display the correct one based on the state shown in the address.
The Option field lets you add options to the base product. There is a selector you can use to select the product that these options apply to and you have the choice of using checkboxes, dropdowns or radio buttons to display the options.
This field lets you insert the cost of shipping. There are several choices: a single method or you can have users select their preferred shipping method using a dropdown or radio buttons.
The total field is useful when there are multiple choices. It tells users what the total is after their selections are made. It’s also the field that’s used by the cc field.
Credit Card will be the last field in the form. Adding this lets users pay for their selections. This firled doesn’t appear until the connection is made to Stripe.
Conclusion – Are You Killing House Flies with a House?
In many situation site owners are paying for online shopping cart technology that’s more than they need. This alternative website shopping cart is useful in many situations. If you have less than ten products or services, or even less than 20, why pay for a shopping cart? Is the extra overhead, is the extra time and money worth it? We don’t think so. Even complicated products can be sold using this technique. For example, our Inn8ly small business website subscription platform uses a Gravity Form and Stripe connection.
Let us know in the comments if this approach would make sense for your online store.