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 that 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 only have a handful of products that your selling, it might not be worth going through the trouble of setting up and configuring an entire webshop. A simple form 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 PSP. But what do they do for you? A Payment Service Provider or PSP is the company between your customer and your bank account. The PSP receives the payment your customer makes for your products. The PSP turns over the money to you afterwards, in return for a commission. 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

A PSP is useless if it doesn’t integrate with your webshop (unless you’re a programmer yourself). Luckily there is quite a number of Payment Gateway integrations for Gravity Forms available. For the purpose of this post we’ll use the PSP called 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.

Prerequisites

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:

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.

Noor’s Plug-in

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.

 

Stripe Settings Tab Noor's Plugin

 

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).

 

Stripe API keys

 

Once filled, your Stripe settings under Gravity Forms should look something like the image below.

 

Stripe Key Settings

 

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 throbber (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´:

 

Webhooks - 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’.

 

Stripe Add Endpoint

 

Which’ll look like the following screenshot once added:

 

Stripe - Added Endpoint

 

Once you have the above set in Stripe, you can check the `Webhooks Enabled?´ option and save your Stripe settings in WordPress/Gravity Forms.

Pricing Fields

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.

 

Pricing Fields

 

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:

Gravity Form with Payment Option

 

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:

 

Stripe Feed

 

You need to configure a feed for your entries / orders to be recorded to Stripe.

 

Stripe Feed Settings

 

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:

 

Gravity Forms + Stripe Settings

 

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:

 

Gravity Forms + Stripe Form Rule

 

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.

 

Conclusion

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.

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *