Woocommerce 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:
- Installing the WooCommerce Stripe Payment Gateway plugin
- Setting up Stripe payment options
- Trying it out in Test Mode
- 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”
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.
After activating the plugin, go to WooCommerce > Settings.
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.
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.
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.
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.
When users opt to pay through Stripe, the payment popup will appear like this:
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.
Now go back to your stripe account and click Payments. In the payments page, select Apple Pay, and accept Apples terms of service.
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.
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
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.
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 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.
Now login go to your stripe dashboard and click API. 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.
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.
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.