In this post, we’ll show you how to use WooCommerce with Stripe by integrating the Stripe Payment Gateway into your WooCommerce WordPress e-commerce store.
Why Should You Use WooCommerce with Stripe?
Stripe, the online payment gateway, offers several key benefits, and is a great choice to use with your WooCommerce website.
- Onsite-checkout. The biggest advantage of using Stripe is on-site checkout. On-site checkout keeps your customer on your e-commerce site, instead of sending them to another site to finalize checkout, and has been proven to lead to higher conversion rates.
- Easy Integratation with WooCommerce & WordPress. Stripe is easy to implement with WooCommerce using the free WooCommerce Stripe extension that helps you get started in just a few clicks.
- Simple Fee Structure. Stripe also has a simple transaction fee structure: 2.9% + 30 cents on successful transactions with no additional fees or costs.
Getting Started: How to Use WooCommerce with Stripe
If you’re completely new to WooCommerce or WordPress, you’ll need to set up your self-hosted WordPress website. (You can check out our recommendations for WooCommerce hosting here). Here’s more information on how to install WordPress manually, the recommended method.
1. Install the WooCommerce Plugin
After you have a self-hosted WordPress site, you’ll need to install the WooCommerce plugin to turn your site into a fully functional WordPress e-commerce store.
When you install WooCommerce for the first time, you’ll have the option of going through a Setup Wizard. Any settings you select during this phase can be changed at any time after the wizard is complete. You’ll see an option to select Stripe as the payment gateway, but you will still need to add a payment gateway plugin.
2. Install an SSL Certificate
Stripe requires an SSL certificate to run on your site. (Not sure how to set up an SSL certificate? You can learn more in this WordPress HTTPS training.)
SSL protects your site data and visitors by encrypting data transferred over the web, like form submissions and credit card transactions. If you’re taking any kind of payments on your website, SSL is non-negotiable. In addition, the gateway plugin you’ll be using automatically implements Stripe JS, to tokenize payments to keep card data secure.
3. Install Test Products
If you’re just setting up your website, the easiest way to get started is to import some sample products. You can do this from your e-commerce site dashboard, under Dashboard > WooCommerce.
Select “Add example products” and click “Let’s Go” and you’ll be taken to a customizer screen. Make any changes you wish to your site’s appearance, and click Save and Publish.
Your sample products will be loaded for you, to make testing easier.
Installing the WooCommerce Stripe Payment Gateway
1. Install the Stripe Payment Gateway Plugin
After you’ve logged into your WordPress site admin, go to Dashboard > Plugins > Add New, and search for WooCommerce Stripe or WooCommerce Stripe Payment Gateway.
Click to install the plugin, and again to activate it.
2. Configure Settings
Once the plugin is installed, you will be taken to the Plugins screen, where you will click “Settings” to be taken to the Stripe setup screen.
You can also access these settings under Dashboard > WooCommerce > Checkout > Stripe at any time.
Stripe Payment Gateway Configuration
Here’s a step-by-step for how to configure the Stripe payment gateway settings:
- 1. First up, set up your Stripe account. This is a quick and easy process, clearly explained on-screen.
- 2. Enable Stripe by ticking the box.
- 3. Enter a title. This is mandatory, and will be displayed to your customers.
- 4. Enter a Description. This is optional, and text entered into this field will be shown to your customers.
- 5. Enable Test Mode. Once you have tested a successful transaction, you can return to this screen to disable Test Mode and enter your Live Publishable and Secret Keys.
- 6. Enter your Test Publishable Key.
- 7. Enter your Test Secret Key.
- 8. Enter a Statement Descriptor – this will display on your customer’s credit card statement.
- 9. In most cases, you will want to capture the charge immediately; if you do not do so, uncaptured charges will fall off in 7 days.
- 10. If you enable Stripe Checkout, your customers will be prompted to enter their card information in a pop-up modal, rather than having on-screen fields.
- 11. Select the language you wish to use.
- 12. Stripe Checkout permits you to select Bitcoin Currency as payments, if desired.
- 13. You have the option to display a 128×128 custom image in the checkout modal.
- 14. If you do not enable Stripe Checkout, you can enable the Payment Request API. This works with enabled browsers – for example, it prompts Android Chrome users to use Chrome Pay, and allows them to use their stored cards.
- 15. If you would like to enable Apple Pay, tick the box to do so.
- 16. Set your preferred button style, black or white.
- 17. Choose the language for the Apple Pay Button. You can find more two-digit ISO codes here.
- 18. Enabling payment via saved cards will allow your customers to reuse the same card in your store. Card numbers are stored on Stripe’s servers.
- 19. Enabling logging of debug messages will save messages to assist with troubleshooting the site. This does not need to be enabled unless you experience difficulty with your e-commerce store.
- 20. Last but not least, save your changes!
Testing WooCommerce with Stripe
We recommend testing your Stripe Payment Gateway, using all methods of payment you have enabled.
Visit the front of your store, and add an example product to your cart.
View the cart, and proceed to checkout.
You can process a test transaction with the test credentials displayed on the screen.
- To test Apple Pay, please follow the instructions in the Sandbox guide.
- You can learn more about Bitcoin Processing in the Stripe Bitcoin Documentation.
- If you have enabled the Payment Request API, you can test a payment using any Android device with a supported browser, such as Chrome.
Take it Live!
Once you have completed testing, return to Dashboard > WooCommerce > Checkout > Stripe and tick the box next to Enable Test Mode.You’ll need to enter your Live Publishable Key, and your Live Secret Key.
Don’t forget to delete your test products!
Once that’s done, your WooCommerce site with the Stripe Payment Gateway will be ready to allow you “to sell anything, beautifully!”
Get WooCommerce Tips
+ 5 Easy Ways to Make Your WooCommerce Store Successful
Just getting started with WooCommerce? In this ebook, we cover 5 ways to make more money with WooCommerce.