If you’ve never worked with Payment Gateways before, some of the terminology might sound a bit abstract. In this post we’ll go over how to implement a Gravity Forms form with a payment option, and how to integrate your payment service provider.
When to use?
If you have a lot of products you want to manage and sell online, you might be better off using a full blown webshop like WooCommerce or any of the other online webshop systems. That way you can easily manage stock, shipping, orders etc. However, if you’re selling only a handful of products, it might not be worth going through the trouble of setting up, configuring and maintaining an entire webshop. A small collection of simple forms might suffice. This post is aimed at those for whom a webshop is just overkill.
The Gravity Forms Elite tier comes with a couple of payment integrations (Stripe, Paypal). But when you’re on a budget, there are cheaper alternatives available which we’ll discuss in this post.
Payment Service Provider
Throughout this post, we’ll talk about the Stripe, which is a Payment Service Provider (PSP) or Payment Gateway. But what do they do for you? A PSP is the company that allows your customers to pay you online. Through your PSP you are able to receive your payments in your (bank) account. The PSP receives the payment your customer makes for your products and turns over the money to you afterwards. In return for their services, your PSP will ask for a percentage of the transaction. In short, a PSP allows you to accept electronic (online) payments. There exist many PSP’s, not all of them known in every part of the world.
Gravity Forms Integration
Unless you’re a programmer, a PSP is useless if it doesn’t integrate with your webshop. Luckily there are quite a number of Payment Gateway integrations available for Gravity Forms. For the purpose of this post we’ll use the PSP named Stripe. We’re using Stripe both because it’s pretty well known and because there is a couple of free Gravity Forms add-ons available which makes it easy to test a setup.
- A Stripe account. Registration is free.
- Gravity Forms installed and activated, obviously.
- A valid https certificate activated on your website for Stripe to work.
Https encryption is a good idea anyway, certainly if you are handling customer payment details. Certificates nowadays are free or cheap, so that shouldn’t withhold you to get a certificate. Also, Google and the major browsers are getting less and less forgiving towards websites without encryption in place. Just give your host a call to have them activate https for you. This should be a breeze. If it’s not: consider another hosting provider, seriously.
Finally, you’ll need to install one of the Stripe-for-Gravity-Forms add-ons:
Each payment integration add-on will have it’s own way of configuring stuff, as we´ll illustrate by going over the configuration of both add-ons we’ve mentioned. It shouldn’t come as a surprise to you that the PSP dictates which settings are required for the communication between your WordPress website and their service. The add-on of your choice just implements these requirements. So let’s see how this works for the mentioned plug-ins.
The configuration process of this plugin is nicely explained on the plugin page, but we’ll go over it here as well.
Gravity Forms Strip Settings
Once you’ve activated ‘Gravity Forms Stripe Integration’ in your WordPress backend, you can navigate to it’s settings page. This page is also reachable through Forms > Settings > Stripe. As you’ll see, it integrates nicely with your Gravity Forms settings page, adding a new tab which should look similar to the image below.
In the above image we’ve already changed the default API setting from ‘Live’ to ‘Test’. You should do this as well while you’re setting up, as to prevent your customers from potentially paying you for something you won’t deliver. The four fields below the Live/Test radios require you to log into your Stripe account.
In your Stripe account, both the Live and Test public/private key pairs can be found in the left menubar under ‘API’. You’ll need to flip the switch ‘View test data’ to see your Test keys. The Live keys are shown by default (also see screenshot below).
Once filled, your Stripe settings under Gravity Forms should look something like the image below.
Notice the green checkmarks behind the input fields. The add-on won’t give you an error if you fill out an incorrect key, but instead it’ll keep showing you a spinner (loading icon). Also notice publishable keys start with ‘pk_’ and secret keys start with ‘sk_’, followed by either ‘test_’ or ‘live_’. You should keep your secret keys to yourself to prevent abuse of your Stripe account.
The screen above cannot be saved unless you check the `I have enabled the Gravity Forms webhook in my Stripe account´. To find the instructions for actually doing this, click on `View instructions´:
Basically you’ll need to copy the URL (with gray background) to your Stripe account (API > Webhooks) by adding an Endpoint. The Filter event should be ‘Send all event types’.
Which will look similar to the screenshot below, once added:
Once you have the above set in Stripe, you can check the `Webhooks Enabled?´ option and save your Stripe settings in WordPress/Gravity Forms.
You’re now set to use (test) Stripe with your Gravity Forms, but you still need to add the payment options to your forms. The pricing fields are present by default in Gravity Forms.
Create a new form and add Pricing fields such as product, credit card and perhaps shipping.
Don’t forget to add fields to your form that collect contact information, required for shipping and invoicing (Advanced Fields). Also don’t forget to set your payment fields to be required 🙂 Adjust the fields to your needs and save your form. The final form might look something like below:
The final step is to add a Stripe feed to your form. In the Settings tab of your form, you’ll find some additional Stripe settings:
You need to configure a feed for your entries / orders to be recorded to Stripe.
You’re now ready to test your form. Don’t use an actual credit card while you’re in test mode, as they’ll be rejected. Instead, use the Stripe test card numbers. Once you’ve submitted a test payment, you’ll see the corresponding data appear in your Stripe dashboard:
And you’re done! Switch from testing to live under Forms > Settings > Stripe to start receiving actual payments.
Gravity Forms + Stripe
This add-on works very similar to Noor’s plug-in, with the key settings to be found under Forms > Settings > Stripe:
As metioned, the pricing fields where already available by default in Gravity Forms.
The difference with Noor’s Plugin is that you don’t need to configure a webhook / endpoint in Stripe. Additionally, the form Feed settings for Stripe are replaced with Rules:
Even if you don’t need to map any of your input fields, you’ll need to add a rule for transactions to be recorded by Stripe. Don’t omit adding this.
Although you´ll need to do some configuration, adding payments to Gravity Forms isn´t hard. Just add the required add-on for your payment provider to WordPress and go through the documented configuration option. Do test your setup carefully. The described plugins for Stripe integration in Gravity Forms have some settings (Feeds and Rules respectively) that are important, but easily missed. The same is true for the default Gravity Forms pricing fields: you’ll almost always need them to be required.