How to Install Stripe on Your eCommerce Site

When you set up an online store on your WordPress website using WooCommerce, you need to decide how you are going to accept payments. 

To accept payments you must first set up a payment gateway. The two most popular payment gateway options for WooCommerce are PayPal and Stripe. Personally, I recommend using Stripe and there are a few reasons why.

Stripe allows you to take credit card payments directly on your website without needing to redirect your visitors to an external website. Also, Stripe works on a pay-as-you-go system so you are only charged when someone makes a purchase. There’s no setup or monthly fees. You can find out more about Stripe’s pricing here.

In this post, I am going to show you how to set up and activate a Stripe account, and then connect this to WooCommerce so that you can start accepting credit card payments.


Before we begin…

Before you connect Stripe to WooCommerce, you first need to make sure you have the WooCommerce plugin installed on your WordPress website. You won’t get very far with out it!

As well as having WooCommerce installed, your website must also have a valid SSL certificate and your website must be running on HTTPS.

All good? Great! Let’s get started…

1 | Sign up for Stripe

If you don’t already have a Stripe account, you will need to set one up. To do this, go over to the Stripe registration page and enter your email address and name, and choose a password. Click Create your Stripe account to continue.

stripe-registration Neon Blvd

 

You will then be asked how you want to get started with Stripe. As we are adding Stripe to WooCommerce, you need to click on the Use the Stripe API option.

stripe-get-started Neon Blvd

This will take you to your Stripe dashboard.

On your dashboard, you will see a welcome message and under this, you will see your two test API keys. The publishable key will be visible, but to see the secret key you must click on the eye icon. It’s a secret so you need to keep it secret!

 

Test API keys are used to connect your Stripe account to WooCommerce when payments are in test mode. However, to get your live API keys you need to activate your Stripe account.

2 | Activate your Stripe account

There are two steps to activating your Stripe account.

The first is to click on the link in the confirmation you received after signing up to Stripe. You should see a link that says something like “Confirm email address“.

confirm-email stripe neon blvd

After clicking on this link, you may be prompted to log in to your Stripe account using your email address and the password you chose when signing up.

The next step in the activation process is to provide Stripe with details about you and your business. To do this, click on the Activate your account link in the left-hand menu of your Stripe account.

activate-your-account neon blvd

You now need to work through this page providing information about you and your business. It’s pretty self-explanatory, but it will take some time to fill out.

account-details neon blvd

Once you have finished filling in your information and you have submitted the form, you should instantly receive confirmation that your account has been activated.

activated neon blvd

3 | Obtain your API keys

Now that you have activated your Stripe account you will have access to both your test API keys and your live API keys.

To get your API keys, click on Developers in the left-hand menu, then click on API keys.

api-keys neon blvd

Here you will find your two live keys; the publishable key and the secret key. Click Reveal live key token to see your secret key.

test-key neon blvd

You can tell this is a live key because the word “live” appears in the key itself.

If you want to switch back to test mode so that you can get your test API keys, simple switch the toggle next to the View test data option in the left-hand menu.

view-test neon blvd

This will then show you your test keys. Again, you can tell it’s a test key because the word “test” appears in it.

live-key neon blvd

You will need both your publishable key and your secret key in order to connect your Stripe account to your WooCommerce store. I recommend starting off with your test keys to make sure everything works, and then when you are ready to go live, switch these to the live keys.

4 | Install the WooCommerce Stripe Payment Gateway plugin

Now that you have set up your Stripe account, you need to login into your WordPress admin area and install a free plugin called WooCommerce Stripe Payment Gateway.

To do this, hover over Plugins in the left-hand menu and click on Add New.

new-plugin neon blvd

On the plugins page, use the search bar in the top right-hand corner of the screen and search for WooCommerce Stripe Payment Gateway.

The plugin looks like this:

stripe-plugin neon blvd

Click Install Now and when prompted to, click Activate.

5 | Enable Stripe payments in WooCommerce

Once you have installed the Stripe extension for WooCommerce, you need to activate it.

Hover over WooCommerce in the left-hand menu of WordPress and click Settings.

woocommerce-settings neon blvd

Once you are on the Settings page you will see a number of tabs at the top of screen. You need to click on the Payments tab.

payments-tab neon blvd

On the Payments settings page you will see a list of all the payment methods that are available to you. You will see that there’s a lot of different options for Stripe.

We are solely going to focus on credit card payments, so look for the option that says “Stripe – Credit Card (Stripe)” and make sure this is enabled. If it’s enabled, the toggle button will be purple.

enable-stripe. neon blvd

Once Stripe has been enabled, click the Manage button next to this option to access the Stripe settings page.

stripe-manage. neon blvd

6 | Set up Stripe in WooCommerce in test mode

Once you are on the Stripe settings page you can now start the process of connecting your Stripe account to your WooCommerce store.

Now, I’m sure you’re eggar to start making money but I would always recommend testing your payment gateway using the test API keys just to make sure everything is working smoothly.

So, start by making sure test mode is enabled, then enter your test publishable key and test secret key.

test-mode. neon blvd

Check over the other settings on this page (if you’re not sure what each of them does, just hover over the question mark next to them) and when you’re done, click Save changes at the bottom of the page.

Now when you view your checkout page you will see that you have the option to pay using card via Stripe.

payment neon blvd

A real card cannot be used in test mode, so you must use one of the card numbers provided by Stripe. You can enter any valid expiration date in the future and any random CVC number.

If the test payment was successful, you will be able to view the transaction in your Stripe account in test mode.

7 | Set up your endpoint

So your test payment went through and now you’re really ready to start earning those pennies. Well, hang on just a second! You’ve got one more thing to do before you switch to live mode and this is set up an endpoint.

An endpoint is simply a URL that will enable you to receive notifications on the charge statuses when someone makes a purchase via your website.

On the Stripe settings page in WooCommerce you will be able to see your webhook endpoint. Make a copy of this and head back to your Stripe account.

Once in your Stripe account, click on Developers in the left-hand menu, then click on Webhooks.

webhooks-1 neon blvd

On this page, click on the Add endpoint button.

add-endpoint neon blvd

Then, paste in your webhook endpoint into the URL to be called field and click Add endpoint.

endpoint neon blvd

And that’s all done.

8 | Switch to live mode

To switch to live mode you need to disable test mode by deselecting the Enable test mode option on the Stripe settings page.

live-mode neon blvd

This will switch the publishable key and secret key fields back to live mode. Here you should enter your live publishable key and live secret key.

When you’re done, click Save changes at the bottom of the page.

And that’s it! You are now ready to start accepting payments by card!

Share on facebook
Share on twitter
Share on linkedin
Share on email