Integrate Stripe in WooCommerce using WooCommerce Stripe Payment Gateway Plugin

woocommerce stripe gateway

Woocommerce Stripe payment gateway enables you to accept payments from customers directly onsite. Customers can purchase their items and select stripe as their checkout option. They will then be able to pay quite easily with their credit cards.

Stripe takes care of processing the payment (for a little fee) and securing the customer’s financial details, thus giving customers both ease of use and security.

This guide will show you all the steps you need to integrate Stripe with WooCommerce using the WooCommerce Stripe Payment Gateway plugin. We assume you already have a Stripe account. If not, create one, and then go on to activate it.

Also, if you want to avoid all the work, we can help you set up and test Stripe in your WooCommerce store. Simply request our service and we will get to work on it.

Steps to Integrate Stripe Using WooCommerce Stripe Payment Gateway

This guide will explain the 4 steps needed to activate Stripe payment on your WooCommerce store, which are:

  1. Installing the WooCommerce Stripe Payment Gateway plugin
  2. Setting up Stripe payment options
  3. Trying it out in Test Mode
  4. Activating Live mode to begin processing real payments.

Before proceeding, you need to have the Woocommerce plugin installed on your WordPress site. Also, Stripe recommends that your site should have a Valid SSL before you can use the payment option. Check this guide to learn how to move from HTTP to HTTPS in WordPress.

Step 1. Installing the WooCommerce Stripe Payment Gateway plugin

To install the plugin, login to your WordPress Dashboard and go to Plugins > Add New.

Add New Plugin - WooCommerce Stripe Payment Integration

Type in “WooCommerce Stripe Payment Gateway” in the search bar. When the plugin appears, click Install Now and wait for the installation to complete. Next click Activate.

Note: Ensure you install the WooCommerce Stripe plugin designed by WooCommerce.

Install and activate WooCommerce Stripe Payment Gateway

After activating the plugin, go to WooCommerce > Settings.

Go to Settings - WooCommerce Stripe Payment Integration

Next, switch to the “Payments” tab. If you have correctly activated the WooCommerce Stripe plugin, you will find all the stripe options you can choose from. We are interested in the first option that reads ‘Stripe’. Toggle the switch to enable this option.

After that, click on the Manage button to configure stripe payment.

Step 2. Setting Up Stripe Payment Options

In this step, we are going to set up the various options needed to activate and configure stripe for your website.

First, tick “Enable Stripe” (if not already selected) to activate this payment option.

Next, setup your Title and Description. These would determine what users see during checkout. The default values may be good enough, or you can adjust as you see fit.

Since we want to try it out in test mode first, tick the “Enable Test Mode” option. Next, log in to your stripe account and click API Keys under the Developer option.

Switch to test mode with the toggle button, and copy the test “Publishable” and “Secret” keys into the corresponding fields in your stripe plugin.

Webhook Endpoint

Webhooks enables stripe to notify your application when an event such as ‘Payment completed’ occurs.

To configure this option, copy the endpoint below the webhook option and then go to your stripe account and select Webhook under the Developer option. Alternatively, you can open the webhook dashboard from this link.

On the dashboard, click on the Add Endpoint button.

Now, paste the endpoint you copied from the stripe plugin into the “Endpoint URL” box.

Next, select the Latest API version. Under the Events to send option, add the following options.

  • source.chargeable
  • source.canceled
  • charge.succeeded
  • charge.failed
  • charge.captured
  • charge.dispute.created
  • charge.refunded
  • review.opened
  • review.closed
  • payment_intent.succeeded
  • payment_intent.payment_failed
  • payment_intent.amount_capturable_updated

To add an option, copy one of the events above, then click on the ‘Select events…’ dropdown. Next, paste the event in the search box and then click on the result to add that particular event.

Now, repeat the process until all the events listed above have been added.

Click on the Add Endpoint button to configure your sites’ webhook.

Next, copy the “Signing Secret” that is generated and then paste it into the “Test Webhook secret” box in the stripe plugin settings page.

In the “Statement Descriptor” input, enter a description that will appear in the transaction statement. In the example below, this is “FixRunner Web Services”.

Next, tick the “Capture Charge Immediately” option to ensure charges are processed and billed as soon as the customer checks out.

After that, tick the “Enable Payment Request Buttons” option. This will include Apple Pay and Google Pay options on your checkout page. Stripe automatically configures both options once you switch to Live Mode from your stripe account and enter live API details in the Stripe plugin.

You can click on the Stipe dashboard link to open the Apple Pay settings.

Enabling Apple Pay

As stated above, this option will be configured by the Stripe plugin automatically in Live mode. However, for testing purposes, here is how to set up Apple Pay.

On the payments page, select Apple Pay, and accept Apple’s terms of service.

Accept Apple Pay terms - WooCommerce Stripe Payment Integration

Next, click Add New Domain, and type in your domain name. Your WooCommerce Stripe plugin would take care of steps 2 and 3. Go on to click Add.

Add domain for Apple Pay

Note: If you get an error that the file could not be found in your domain, go back, download the file in step 2, and upload it to the specified location in step 3. And then click Add.

After completing this step and saving the setting in your Plugin, Apple Pay would be seen in product, checkout, and other pages, when your site is accessed with a compatible iOS device.

Saving Details for Future Payments

If you would like to store customer financial details so you can use these for billing them in the future, tick the “Enable Payments Via Saved Cards” option.

Note that the financial details are not stored on your servers, but on Stripe’s servers, where all security measures are in place to protect this sensitive data.

For debugging purposes, you may also enable the “Log debug messages” option. This can be useful in finding out what went wrong if there are errors.

And that concludes your setup process. Click Save Changes to use the settings you have specified.

Step 3. Trying WooCommerce Stripe in Test Mode

In the setup above, we enabled test mode and used the test API details obtained from Stripe. This is useful to check if Stripe payment works properly before making it available to your customers.

Stripe provides test credit card details you can use for this purpose. In this example, we would be using the following details, and you should be able to use them too. If not, you can obtain other test card details.

Card number: 4242424242424242
Expiry: Any date after today
CVV: 789

Now, go to any of your products page, add the product to the cart, and click View Cart. On the cart page, click Proceed to checkout.

Fill out the form with your information. At the bottom of the page, select “ Credit Card (Stripe)” as your payment method and then enter the test credit card details on the payments form.

Next, click on the Place order button.

You would be taken to an order confirmation page like the one below:

Congratulations! Your WooCommerce Stripe payment option works!

The final step is to make this payment method available to customers.

Step 4. Activating Live Mode to begin processing real payments

To enable this payment method for your customers, you need to activate the live mode.

In your WordPress dashboard, go to WooCommerce > Settings. Next, switch to the “Payments” tab and click on the Manage button next to Stripe option.

Uncheck the “Enable Test Mode” option. When you do, the key input boxes will change to accept the live keys.

Now, go to your Stripe dashboard and click on API keys under Developers. You should currently be in test mode.

To switch to live mode, click the Live/Test toggle switch. Next, copy your live Publishable and Secret keys into their input boxes in your WooCommerce Stripe Plugin.

After that, scroll down to the Webhook Endpoint option and then paste your live webhook secret in the box.

Lastly, scroll down and click Save Changes. Customers can now make payments with Stripe on your website.

Further Information

We can help you set up, test, and activate your Stripe payment gateway and save you all the work. If you prefer this option, please request our service here: Fixrunner One Time Support.

You can learn more about Stripe and other WooCommerce payment gateways or if you are using PayPal instead, you can follow our guide on how to set up PayPal on WooCommerce.

Also, to further protect both the security of your customer information and that of your online store, we would recommend that you read this article: WordPress Security – A Complete Guide On How To Secure Your Website. For more step-by-step WordPress tutorials and guides follow our WordPress blog.

More Resources: