This post covers creating a web Form in WordPress using the popular (and excellent) Gravity Forms plugin and configuring it to process payments with Stripe:
- Gravity Forms is a leading commercial Form Builder plugin for WordPress that many of my clients have had a lot of success with. It is a powerful tool when combined with Payments and it supports integration via its webhooks and API.
- Stripe is a leading payments processor that is popular due to its ease-of-use and ease-of-integration. Stripe is currently my preferred choice for eCommerce projects.
The following assumes:
- you are logged into your WordPress (/wp-admin) as an Administrator,
- your WordPress site has SSL enabled (https://),
- that Gravity Forms and the Gravity Forms Stripe Add-On plugins have been installed and activated, and
- you have a valid + verified Stripe account and have inputted all necessary Business Settings.
Get API Keys from Stripe
- Open a tab and login to your Stripe account.
- Click on Developers in the left nav. A sub-menu will appear underneath.
- Click on API Keys in the sub-menu under Developers.
- Generate a set of Test and Live API Keys. Each comes in a pair consisting of a Private Key and a Publishable Key. The keys themselves are strings of random-looking characters prefixed with: ‘sk_live’, ‘pk_live’, ‘sk_test’, and ‘pk_test’.
Make an effort to keep your Private Keys (those prefixed with ‘sk’) confidential and do not send them to anyone over email or other potentially insecure means.
Setup Gravity Forms for Stripe
In the WordPress admin dashboard:
- Click on Forms in the left nav. A sub-menu will expand underneath.
- Click on Settings in the sub-menu under Forms.
- The resulting Settings page has a series of tabs down the left side. Click on Stripe.
- On the Stripe page complete the form:
- API: choose “Live” (or “Test” if you wish all Forms to be in Test Mode)
- Input the Test Publishable Key, Test Secret Key, Live Publishable Key, and Live Secret Key that you obtained from the Stripe Dashboard
- Under Stripe Webhooks there are instructions for adding a Webhook within your Stripe account that points to a URL in your WordPress site. Click on the “View Instructions” link to reveal the necessary steps and open a tab to login to your Stripe Dashboard and complete them in Stripe. When that is complete:
- Tick the “Webhooks Enabled” checkbox
- Input the Test Signing secret and Live Signing secret values that you obtained from Stripe
Finally, click the Update Settings button to save your settings.
Create a Form and Configure Payments
Create the Gravity Form
Create a new Form and add at least a Product Field, Total field, and Credit Card field. In the Product Field, define your products/services and set their prices.
If they are applicable to your situation, you can also use Option and Quantity fields to gather additional information that can influence the price, and you can include a Shipping field as well.
Add a Stripe Feed to the Form
In your Form’s “Edit” screen, navigate to: Settings > Stripe.
Click on the Add New button to add a new Stripe Feed to this Form.
- Name textbox: input a descriptive name (e.g. “Event Registration 2018”). Note that its good to include a unique identifier in the Name (e.g. such as the year for an annually recurring event) so you can easily identify payments related to this particular Form + Stripe Feed in the future.
- Transaction Type: choose “Products & Services” from the drop-down menu (“Subscriptions” is the other available option, but it is not covered this post)
A set of new fields will appear:
- Payment Amount: choose which Form field you would like Gravity Forms to use to determine the total amount to charge the user. In most cases you’d choose the Form Total field (e.g. “Form Total”) rather than any individual product field.
- Metadata: optionally choose Form fields that you wish to send to Stripe so it can be included in Stripe Reports. This is an optional step but it can make your life easier down the line because you will be able to see more information on the payment side of things that will help you reconcile and perform accounting and customer support tasks. For each Metadata field you would like to add:
- Input the field Name (as you’d like it to appear in Stripe) and from the drop-down menu choose which Form Field you would like to use as a value. It is also useful for sending along details about what products or choices the user may have made. Examples:
- Name: “Entry ID” Value: “Entry ID” — the unique database ID of the form submission in your WordPress + Gravity
- Name: “Email” Value: “Email” — sends the customer’s email to Stripe
- Stripe Receipt: Choose whether or not you would like Stripe to automatically send an email receipt to the customer. The default option is “No” but it is often desirable to choose “Email”.
- Conditional Logic: Optionally add logic to conditionally process payments only if certain values/conditions are met. Most forms do not need to use this option.
When you are done, click on the Update Settings button to save your Stripe Feed.
You should be good to go! Ensure your Stripe Feed is Live and your Form is Live, and then add it to a Post or Page to see it up on your site!
If you want to test your form, you can enable Test mode and use one of the fake/test credit cards that Stripe has published here: https://stripe.com/docs/testing. You will be able to see any Test transactions in your Stripe Dashboard when you toggle to Test vs. Live mode.