Install and activate WooCommerce Stripe Payment GatewayWoocommerce Stripe payment gateway enables you to accept payments from customers directly onsite. Customers can purchase their items, select stripe as their checkout option, and 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 setup 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.

 

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 “Checkout” tab. If you have correctly activated the WooCommerce Stripe plugin, “Stripe” should now appear among the options. Click on it.

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 click “Enable Stripe” 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.

Set the description - WooCommerce Stripe Payment Integration

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

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

Copy test API keys - WooCommerce Stripe Payment Integration

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.

Enter settings - WooCommerce Stripe Payment Integration

 

Enabling Stripe Checkout

When the “Enable Stripe Checkout” option is ticked, users get a popup form requesting their financial details when they select stripe as payment method and click Continue To Payment. Enabling this option also gives you the ability to accept payments via Bitcoin.

To use this feature, tick “Enable Stripe Checkout”. Next, select your preferred language, and tick “Enable Bitcoin Currency” if you want to accept payments with Bitcoin.

If you want a custom image of your brand to appear on top of the Stripe checkout popup, enter the url of that image in the “Stripe Checkout Image” input box.

Enable Stripe Checkout - WooCommerce Stripe Payment Integration

When users opt to pay through Stripe, the payment popup will appear like this:

Payment with Stripe Checkout - WooCommerce Stripe Payment Integration

Enabling Apple Pay

Apple pay offers your customers a very simple way to checkout from their iOS devices. If you want to use this option, tick “Enable Apple Pay”

Next, select your button style, and enter the 2 letter code for the language you want Apple pay to be displayed in. You may leave it set to “en” for English, or click the link under that option to see the codes for other languages.

Apple pay settings - WooCommerce Stripe Payment Integration

Now go back to your stripe account and click Payments. In the payments page, select Apple Pay, and accept Apples 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 - WooCommerce Stripe Payment Integration

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.

Saving financial details - WooCommerce Stripe Payment Integration

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 cart, and click View Cart. In the cart page, click Proceed to checkout.

Fill out the form with your information. At the bottom of the page, select “Stripe” as your payment method and click Continue to payment.

Next, enter the test financial details and click Pay #Amount.

Test payment - WooCommerce Stripe Payment Integration

 

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

Payment confirmation - WooCommerce Stripe Payment Integration

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 live mode.

In your WordPress dashboard, go to WooCommerce > Settings. Next, switch to the “Checkout” tab and click Stripe.

Uncheck the enable test mode option. When you do, the key input boxes will change to accept the live keys.

Switch to live mode - WooCommerce Stripe Payment Integration

Now login go to your stripe dashboard and click API. You should currently be in test mode.

Switch API to live - WooCommerce Stripe Payment Integration

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.

Enter live keys - WooCommerce Stripe Payment Integration

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

Note: To be able to activate live mode, you must have ssl in your server (i.e. your domain should start with https), and you must have enabled the “Force secure checkout” option found in WooCommerce > Settings > Checkout.

If you do not have ssl, have your host add it for you, and then go on to enable secure checkout, and then live mode.

Further Information

We can help you setup, 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

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.