WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

WooCommerce Stripe Payment Gateway Tutorial (2021)

Last Updated on June 3rd, 2021

Published on August 24th, 2020

Tags: , ,

Share This Article

PayPal and Stripe are the most popular payment options for most eCommerce sites. People have faith in these payment processors. PayPal used to be one of the few simple eCommerce payment options, but that is no longer the case. You may use many different payment gateways on your site,  however, Stripe has reduced transaction fees. The Woocommerce Stripe payment gateway allows you to basically take payments from customers right on your website in a big way.

This way customers can purchase items and cull a bar as their checkout option. They will subsequently be able to pay to utilize their credit cards without difficulty. 

Stripe handles payment processing for a small fee and secures consumer financial information, giving clients accommodation and security. 

This tutorial will show you how to set up the WooCommerce Stripe Payment Gateway plugin to integrate Stripe with WooCommerce. 

What is Stripe?

Stripe is the finest credit card processor for online businesses because it connects simply to existing e-commerce stores and websites with ready-to-use connectors and prebuilt checkout forms that you can adapt to match your brand. 

Stripe WooCommerce allows you to accept payments directly on your website and on mobile devices. Customers that use Stripe continue to be on your web page at some point of checkout as a substitute than being routed to an externally hosted checkout page, which has been proven to extend conversion rates.

Stripe is a simple online payment processor. Stripe’s software tools are used by hundreds of thousands of businesses, ranging from startups to Fortune 500 corporations, to securely accept payments and expand abroad.

Stripe is used by companies in more than 40 countries. Stripe allows you to accept all major debit and credit cards in 135+ currencies from clients worldwide, as well as Apple Pay, Google Pay, and other local payment options like Alipay, iDeal, and SEPA Direct Debit.

Why choose Stripe as your payment gateway?

Stripe users gush about how simple it is to use the service. Stripe’s checkout form is simple on the customer side, making it simple for them to finish their transactions swiftly.

It’s critical to make sure that your online business is as simple to use as feasible for clients. This involves making the checkout procedure as simple as possible to assist close the deal and prevent abandoned carts. Customers may check out quickly with Stripe Checkout by clicking a pay button and inputting their credit card information. 

Article Continues Below

Stripe Checkout makes the procedure more simple for customers by securely saving their credit card information so they don’t have to enter it again on subsequent purchases. This function isn’t simply for the benefit of your customers; it may also assist you to convert one-time shoppers into repeat consumers.

Stripe charges a fee of 2.9% + 30 cents for each successful transaction for its services. Unlike its competitors, Stripe only Deducts money from your account only when you make a sale. There are no setup or monthly costs, and there is no price for using the payment gateway. There’s also no PCI compliance cost because Stripe takes care of it for you. There is no early termination fee because you accept a service agreement rather than signing a contract. Furthermore, there are no constraints on the minimum amount of monthly payments imposed by the system.

Its pricing is transparent, with flat charges, no account fees for basic services, and no contract. Its services are scalable, allowing you to expand your business by adding additional features and customizations.

How to Setup Stripe?

Stripe doesn’t have an official WordPress plugin or integration, but thanks to the astonishing WordPress community that has taken utilization of their API, there are now a ton of sublime culls for expeditiously integrating Stripe into your site. We’ll go over how to establish Stripe for WooCommerce on a rudimentary site with a form plugin and custom fields in the sections below. It’s worth noting that SSL is required on your Stripe checkout pages in order to send payment information securely.

Setup Stripe Payment Gateway Plugin for WooCommerce

1. Create stripe account 

  • Go to https://dashboard.stripe.com/register in your web browser.
  • To create an account, fill out the form below.

As soon as you’re ready, fill in your email address, full name, password, and then click “ create an account.”

WooCommerce Stripe Tutorial - Create Stripe Account
  • Verify that you are a company representative.

To correctly identify you, Stripe will want further information from you. You can use your Facebook, LinkedIn, or Google account as an alternative, but you must fill in your personal identifying information.

  • Enter your bank account information. 

You’ll need your Routing number as well as your account number on hand. Fill in the blanks, then click “Activate Account” to complete the process.

WooCommerce Stripe Tutorial - Activate Account
  • To link Stripe to your website, you’ll need the Keys.

Go to https://dashboard.stripe.com/account/apikeys to get your API keys. Alternatively, go to Dashboard > Developers > API Keys.

You must first provide Test Keys to your web developer so that they may verify that your website is connected to your Stripe account. The Publishable Key and the Secret Key (you must click on “Reveal test Key Token”) are required by your web developer.

Article Continues Below

2. Set up an SSL Certificate for Your Website

Did you know that all non-SSL websites are labeled as “Not Secure” by Google? This means that if your website does not have an SSL certificate, you will lose clients’ trust.

SSL stands for Secure Sockets Layer, safeguards your sensitive information as it travels across the world’s computer networks, and it is the foundation of our secure Internet. 

SSL is primarily used to encrypt sensitive information transferred over the Internet so that only the intended receiver has access to it. This is significant because the information sent via the Internet gets passed from computer to computer before arriving at the destination server. If your credit card numbers, usernames and passwords, and other sensitive information is not secured with an SSL certificate, any machine between you and the server can read it. When you use an SSL certificate, the information becomes unreadable to everyone except the server to which you’re sending it. This keeps it safe from identity thieves and hackers.

To collect credit card information on your website, you must pass a series of audits demonstrating that you follow the Payment Card Industry (PCI) standards. One of the criteria is that you use an SSL Certificate correctly.

How Does It Work? 

Now that you’ve learned the fundamentals of Stripe, it’s crucial to remember that SSL is required on your Stripe checkout pages in order to securely communicate payment data. Many web hosting companies provide free SSL certificates. 

SSL encrypts data transfers between a user’s browser and a website, protecting information. When a person accesses an SSL/HTTPS website, their browser checks to see if the SSL certificate is genuine. If everything checks out, the browser encrypts the data using the website’s public key. This information is then transferred back to the target server and decrypted using the public key and a secret private key.

You need:

  • Your certificate for the server 

This is the certificate for your domain that you received from the CA. This might have been sent to you via email. If you don’t have it yet, you can get it by going to your Account Dashboard and clicking on your order. 

  • Your intermediate certificate

The devices connected to your server can use these files to identify the issuing CA. There could be several of these certifications. If you received your certificate in a ZIP folder, it should also include the Intermediate certificates. If not, you’ll need to get the right CA Bundle for your certificate.

  • Private key

If you used a free generator tool to produce your CSR, this file should be on your server or in your possession. The private key is not immediately visible on some platforms, such as Microsoft IIS, but the server keeps track of it.

Article Continues Below

 Steps in Setting SSL

  • Choose a hosting company that provides free SSL certificates

Bluehost, Pressable, and SiteGround, all WooCommerce hosting partners, offer free SSL certificates for WordPress customers that can be installed in just a few clicks. 

Check with your current or preferred hosting provider to see whether they offer a free SSL from Let’s Encrypt, and then follow the steps. If they don’t have this choice, move to the next section and install themselves.

  • Install SSL 

If you don’t already have one, get a domain name from a domain registrar. Let’s Encrypt’s free SSL certificates are domain-based, which is required. 

If you don’t already have one, choose a hosting company and a hosting plan. Go to ZeroSSL.com to learn more. Start by selecting Certificates and Tools.

  • Select Next after entering your website/domain store’s name and accepting the Terms of Service (TOS). A Certificate Signing Request is created as a result of this (CSR). Get a copy of your CSR. 
  • To generate your RSA private key, select Next. Your RSA Private Key is available for download. It’s safe to shut the browser tab once you’ve downloaded both your CSR and RSA Private Key. You’ll have to restart the process if you close it before saving these two pieces of information. 
  • The procedure for submitting the free SSL certificate varies by hosting company.
  • Following the SSL configuration, 

After installing the certificate on your server, you can access your store at https://yoursite.com. To indicate that the page is secure, your browser may display a lock icon in the address bar.

If you’re starting a new website or store,

Following the installation of an SSL certificate, the URLs for WordPress and WooCommerce must be modified. 

  • Go to General > Settings. 
  • Save the modifications to the WordPress Address and Site Address to include https://.Ensure that SSL is enabled. 
  • Before you use this setting, keep in mind that using HTTPS for your entire website/store, not just the checkout page, is strongly recommended. 
  • Force SSL Setting

Depending on your operating system and settings, you can alter your.htaccess or web.config file to force users to access your site only via HTTPS. This is located at the root of your website, and you may need to enable hidden files in order to find it. Before making any changes, make a backup of your control files. 

Other Apache techniques, such as using your virtual host file, are available. If you’re using an IIS server, the URL Rewrite Module can be used, and nginx servers can utilize the nginx configuration file. 

To redirect HTTP users to the HTTPS version of your site, paste the following directive into the.htaccess file: 

Add this code snippet to your.htaccess file.

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_HOST} ^(www\.)?domain\.com$ [NC]
RewriteRule ^(.*)$ https://www.domain.com/$1 [L,R=301]

Congratulations on your achievement! Your SSL certificate has been successfully installed! To double-check your work, go to https://yourdomain.tld in your browser and look at the certificate/site information to determine if HTTPS/SSL is working properly. Remember that for modifications to take effect, your server may need to be restarted.

3. Download the Stripe Plugin for WooCommerce

WooCommerce Stripe Tutorial - Download plugin

Stripe is quite simple to set up as a payment gateway. You can easily accept major credit cards for payments on your WooCommerce store using the Stripe Payment Gateway Plugin for WooCommerce. The following are some of the cards that are permitted: 

  • Visa MasterCard 
  • American Express is a credit card company based in 
  • JCB
  • Diners Club. 

Credit card information can also be saved for future usage by customers. The entire payment transaction takes place in a Stripe iframe on your website. As a result, your clients will not have to leave your site to make a payment, resulting in a simple checkout experience.

It is not included in the default payment gateway options, so you must install it. It’s possible that Stripe is already installed if you used the Setup Wizard to get started. 

If Stripe isn’t already installed, go to Plugins > Add New and search for “WooCommerce Stripe Payment Gateway.” Locate the Automattic release and click Install Now.

WooCommerce Stripe Tutorial - Search for plugin

4. Configure the Plugin 

You must go to WooCommerce>>Settings>>Payments after enabling the plugin. Select the choices that best meet your needs.

WooCommerce Stripe - Configure the Plugin

You may enable the Stripe service for your WooCommerce store from this page. After you’ve activated the Stripe button, click Set up, and you’ll be taken to the following screen.

WooCommerce Stripe Tutorial - active Stripe Button

Enable Stripe – You can manually capture or refund payments from the Stripe Overview page. You can now get a graphical version of the Stripe payment overview for a specific time period. You can also see all of the order/transaction details. It also enables for the capture or return of entire or partial payments.

Capture- By default, the Capture Payment option is enabled, which allows you to capture payments instantly after a successful transaction. If you want to collect payment later, however, leave the option turned off.

Payment Request Buttons – Users will be able to pay with Chrome Payment Request if the browser supports it if Payment Request Buttons are enabled. 

Show on pages: The payment request button can be displayed on the cart, checkout, or product pages. 

Button Configuration: 

Type – Choose between Buy, Pay, or Donate as the type of button you want. 

Theme – Choose between dark, light, or light outline for the button motif. 

Height: In pixels, enter the appropriate height. 

Finally, save/update the plugin settings by clicking Save changes.

5. At the checkout, select the Credit Card (Stripe) option

After you’ve finished configuring all of the settings, go to the checkout page to see how to pay with a credit or debit card.

To complete the payment procedure, enter the card data (Card Number, Expiration Date, CVV) and then click the Pay Through Stripe option. 

That concludes our discussion. You may accept credit card payments using the Stripe Payment Plugin for WooCommerce by following these simple steps.

Wrapping Up!

As you can see, setting up Stripe for Woocommerce is quite simple. By following the above discussion, you may accept credit card payments using the Stripe Payment Plugin for WooCommerce. 

Based on our discussion you can see that WordPress is a great place to start if you want to develop an eCommerce site because it allows you to construct it yourself. You can ensure consistent transactions and proper sales management by using the WooCommerce plugin with Stripe integration. Any firm that accepts credit cards, especially online, is concerned about security. Stripe uses a variety of security mechanisms to protect your clients’ payment information. Stripe adds many layers of protection for web-based financial transactions automatically. 

You learned how to use the free WooCommerce Stripe Payment Gateway plugin to integrate Stripe with WooCommerce in this quick tutorial. However, in order to obtain the activation keys, you must first create a Stripe account. SSL is also required for safe payment processing.

So now that you know how to set it up, be sure to optimize and protect your new eCommerce site to provide the finest shopping experience for your customers! Good luck!

Stay informed on WordPress

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.