4 Simple Ways to Setup Stripe for WordPress

By , Updated: February 3, 2017

stripe for wordpress

When it comes to choosing a payment gateway to use on your WordPress site, there are two popular ones that usually come to mind, PayPal and Stripe. Years ago PayPal used to be one of the only easy solutions for ecommerce sites, but that is no longer the case. Stripe provides lower transaction fees and is very popular in the developer community for its flexible API. Today we are going to dive into 4 simple ways to setup Stripe for WordPress, no coding needed. For startups, businesses, and those running WooCommerce and EDD shops, Stripe can be a great affordable solution.

What is Stripe?

Stripe is a fast-growing payment gateway that’s able to handle recurring payments and can process refunds automatically. It is trusted and used by big names brands all over the world, some of which include Best Buy, Target, Lyft, Docker, HubSpot, Facebook, Shopify, and IndieGoGo.  We actually use them here at Kinsta to accept payments for all of our web hosting customers.

stripe

Stripe was founded back in 2010 by two brothers, John and Patrick Collison. It launched publicly in 2011 and has received multiple rounds of funding. It even ranked #4 on Forbes Cloud 100 list in 2016. There are a lot of payment gateways to choose from, but Stripe’s focus on simplicity along with their popular Stripe API is what has set them apart from competitors. Their free structure is much easier to understand as for those doing under $1 million a year it is a flat rate of 2.9% + 30¢. They also allow you to charge credit cards from your own site for free, whereas PayPal charges you $30/month plus their transaction fees. Stripe also doesn’t have any fees for refunds or authorizing cards. PayPal does however get cheaper with larger volume of transactions.

Setup Stripe for WordPress

Stripe doesn’t technically have an official WordPress plugin or integration, but thanks to the awesome WordPress community who have utilized their API, there are now a lot of great options for easily getting Stripe on your site. Below we will go into setup Stripe for WordPress on a basic site, with a form plugin and custom fields, as well as ecommerce platforms such as WooCommerce and Easy Digital Downloads. It is important to note that SSL is required on your Stripe checkout pages to communicate payment data securely. Many hosts, even Kinsta, now offer free SSL certificates with Let’s Encrypt.  Be careful though, you can harm your site if you don’t migrate properly, so make sure to check out our in-depth HTTP to HTTPS migration guide.

All of these tutorials assume you have a Stripe account. If you don’t, you can sign up for a free Stripe account.

How to Setup Stripe on Basic WordPress site

The first way to setup Stripe for WordPress is on a basic site. Perhaps you don’t have any ecommerce solution setup and simply have one product you want to sell on a page. This can be a great way to accept payments for an ebook or digital download without any additional overhead on your site. For this we recommend the free WP Simple Pay Lite for Stripe plugin, in which you can get going in just 4 easy steps. They have a pro version of the plugin as well, which enables recurring payments and a multitude of other features, but if you need something simple and fast, you can get by fine with the free version. It currently has over 8,000 active installs with a 4.6 out of 5 star rating.

wp simple pay lite for stripe plugin

Step 1

Download and install the WP Simple Pay Lite for Stripe plugin from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins.

wp simple pay lite for stripe install

Step 2

The first thing you will need to do is click into the settings of the plugin and input your Stripe API keys, which you can grab from your Stripe account dashboard. Then click on “Save Changes.” You will notice there is an On and Off switch. You can keep it turned off until you have everything configured.

wp simple pay api keys

Step 3

Click into the “Default” settings tab. There is where you can give your site a name, set the currency, provide an image, etc. One important setting is the success redirect URL. If you are tracking conversions with a thank you page, then you will want to enable this. See our in-depth conversion tracking guide. Then scroll down and click on “Save Changes.”

wp simple pay stripe settings

Step 4

You can then insert a payment button on any page or post on your WordPress site with a simple shortcode. Remember that you can change the wording on the payment button in the plugin settings. Here is an example of a shortcode you can paste into your page or post:

[stripe name="My Store" description="My Product" amount="1999"]

wp simple pay checkout

See all of WP Simple Pay shortcodes. And that’s its! Adding Stripe to your WordPress site couldn’t be easier. Make sure to switch Live Mode over to “On” if you haven’t already in the settings. You can also take advantage of their free companion plugin which adds a button in your WordPress editor to more easily add payment buttons. No need to grab any shortcodes.

stripe shortcode button

How to Setup Stripe With Gravity Forms

A second common configuration when using Stripe for WordPress is to use it along with a form plugin. The reason you might want to do this is because it gives you more flexibility with being able to add your own custom fields in the checkout process. Many of the popular form plugins have easy Stripe integrations and extensions, such as Gravity Forms, Ninja Forms, and WP Forms. The Stripe integration is typically a premium add-on. In our example, we are going to be using the Gravity Forms plugin.

gravity formsStep 1

Download and install the Gravity Forms plugin along with their Stripe extension add-on. This does require a developer license.

Step 2

The first thing you will need to do is click into the settings of the plugin and input your Stripe API keys, which you can grab from your Stripe account dashboard. Then click on “Save Changes.” You will notice there is a Live and Test mode. You can keep it on Test mode until you have everything configured properly.

gravity forms stripe settings

Step 3

Scroll down and you will need to configure Webhooks. Gravity Forms requires a URL to be added to your Stripe account’s list of webhooks for everything to function correctly.

  • Click the following link and log in to access your Stripe Webhooks management page:
    https://dashboard.stripe.com/account/webhooks
  • Click the “Add Endpoint” button above the list of Webhook URLs.
  • Enter the following URL in the “URL” field: https://yourdomain.com/?callback=gravityformsstripe
  • Select “Live” from the “Mode” drop down.
  • Click the “Create Endpoint” button.

stripe webhook gravity forms

Then check the box saying you have enabled the webhook URL and click “Update Settings.”

update stripe webhooks

Step 4

Now it’s time to setup your form. If you don’t already have one you will need to create a new form.

create new form gravity formsStep 5

In the form you can configure it to accept any data that you want. You could even have a required field for a message. As you can see this offers much more customization than the Simple Pay plugin we walked through above. Just ensure you have the credit card field and price. Everything is drag and drop in Gravity Forms so it is quick and easy to create this.

gravity forms billing form

Step 6

After you create your form you need to hook it up to Stripe with a feed. Click into the settings of the form itself and into “Stripe.” You can set the transaction type and the payment amount. Then click “Update Settings.”

billing form feed

Step 7

Then you can insert your form into a page or post. In the WordPress editor Gravity Forms has a button called “Add Form.” Select your form that you created and click on “Insert Form.”

insert form

And that’s it. Your form is now a fully functional form that is integrated with Stripe and able to capture payments.

credit cards gravity forms

How to Setup Stripe in WooCommerce

A third common configuration when using Stripe for WordPress is to use it with WooCommerce. With over 1+ million active installs, a 4.6 user rating on WordPress.org, WooCommerce is the one of the most popular free e-commerce solutions for WordPress. According to BuiltWith, as of January 2017, WooCommerce powers over 42% of all online stores.

woocommerce

And the great news is that as of February 2016, Stripe is free to use with WooCommerce!  Previously you had to purchase the Stripe payment gateway direct from WooCommerce, which started at $79 for a single site license. This significantly lowers the barrier of entry for anyone wanting to launch a WooCommerce shop and accept credit cards with Stripe. This tutorial below assumes you have WooCommerce already up and running. If you don’t, check out our in-depth WooCommerce tutorial.

Step 1

The first thing you will need to do is install the free WooCommerce Stripe Payment Gateway plugin. It currently has over 100,000 active installs with a 4.7 out of 5 star rating.

woocommerce stripe payment gateway

You can download the plugin from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins.

Step 2

Then click into the WooCommerce Settings in the dashboard and click on the “Checkout” tab. You will want to enable Stripe and input your Stripe API keys, which you can grab from your Stripe account dashboard. You can also choose whether or not to enable “Stripe Checkout.” Stripe checkout shows a pay button and modal credit card form on checkout instead of the classic credit card fields. Then scroll down and click on “Save Changes.”

woocommerce stripe settings

Step 3

Then under the Checkout tab click into “Checkout Options.” You will want to enable “Force secure checkout.” Remember that Stripe requires SSL to accept credit cards securely on your WordPress site. Then scroll down and click on “Save Changes.”

woocommerce force secure checkout

And that’s it. Your checkout pages should now be able to accept credit cards with Stripe. Here are a couple examples.

Default WooCommerce Stripe Checkout

This is the default look of Stripe on a WooCommerce checkout page with credit card fields inline on the page.

credit card checkout woocommerce

 WooCommerce with Stripe Checkout Option Enabled

This is the look if you enable the “Stripe Checkout” option in the settings. The customer clicks on “Continue to payment” and they get the Stripe modal.

stripe checkout woocommerce

How to Setup Stripe in Easy Digital Downloads

A fourth common configuration when using Stripe for WordPress is to use it with Easy Digital Downloads. Just like WooCommerce, Easy Digital Downloads is a popular free ecommerce solution for WordPress. Primarily it is used to sell digital products, however there is also an extension to adapt it for physical products. It really has turned into a WooCommerce alternative now. It currently has over 50,000 active installs with 4.8 out of 5 star rating. This tutorial below assumes you have EDD already up and running. If you don’t, check out the Easy Digital Downloads documentation.

easy digital downloads

The one downfall to Easy Digital Downloads Stripe integration is that it does require the premium extension, which starts at $89.00 for a single site license. However, that might be worth it to you if you prefer EDD and want to use Stripe.

Step 1

Download, install, and activate the Stripe payment gateway extension.

Step 2

Under Downloads (which is EDD), click into Settings, and then into the Payment Gateways gab. In the Gateway settings you will want to check Stripe to enable it. Then change the default gateway over to Stripe. You can then also select the credit cards icons to show on checkout. Then click on “Save Changes.”

edd stripe payment gateway settings

Step 3

Under the Payment Gateways tab, click into “Stripe.” You will want to input your Stripe API keys, which you can grab from your Stripe account dashboard. You also need to configure Webhooks.

  • Click the following link and log in to access your Stripe Webhooks management page:
    https://dashboard.stripe.com/account/webhooks
  • Click the “Add Endpoint” button above the list of Webhook URLs.
  • Enter the following URL in the “URL” field: https://yourdomain.com/index.php?edd-listener=stripe
  • Select “Live” from the “Mode” drop down.
  • Click the “Create Endpoint” button.

There are some additional options you can set. You can choose whether or not to enable “Stripe Checkout.” Stripe checkout shows a pay button and modal credit card form on checkout instead of the classic credit card fields. Then scroll down and click on “Save Changes.”

stripe settings edd

And that’s it. Your checkout pages should now be able to accept credit cards with Stripe. Here are a couple examples.

Default EDD Stripe Checkout

This is the default look of Stripe on an EDD checkout page with credit card fields inline on the page.

stripe credit card checkout edd

 Easy Digital Downloads with Stripe Checkout Option Enabled

This is the look if you enable the “Stripe Checkout” option in the settings. The customer clicks on “Continue to payment” and they get the Stripe modal.

stripe checkout edd

Summary

As you can see it is fairly simple to get Stripe for WordPress up and running. In fact, all four of the integrations above only take a few minutes. It is a lot easier than it was a couple years ago. It is also getting cheaper as a lot of the solutions are now free. What has been your experience? Are you using Stripe on your WordPress site?