I am working with a client right now setting up my first online store.  I was truly surprised at how easy it was to implement.  We are using the WooCommerce WordPress plugin as the cart and Stripe as the payment gateway.  There is an additional plugin I am using called WooCommerce Stripe Gateway which integrates directly with WooCommerce and allows for on-site credit card payment capture.  This provides customers with the ability to easily buy from you without requiring that they take extra steps by being redirected to an actual payment site – the entire payment process all takes place right on your own website.

Being able to sell directly on site boosts your company’s image of professionalism and is such highly recommended if you require a web storefront.

Here’s how to do it:

1. Stripe

Get a stripe account @ stripe.com.  The approval process is surprisingly fast.  You will need a bank account and routing number as they pay via bank transfer.

It’s not free.  The fees are $0.30 + 2.9% for each transaction.  While there are fees, the fact that you are going to be able to be a payment capture “closed loop” makes it worth it.  The minimum product price capable with the Stripe/WooCommerce combination is $0.50.

You can request a bank payout as soon as you get any money in the account; however, your first withdrawal takes 7 days to reach your bank account – each and every subsequent payout takes 2 days.

2. WooCommerce

The WooCommerce plugin is pretty cool.  It is the most popular checkout plugin in WordPress’s repertoire and is highly reviewed.  When you first install it, many elements are set for you right out of the box.  For example, it creates a “shop” page already populated with dummy items to show you how your store is going to look.  It creates the necessary checkout and cart pages needed for actual payments to take place.  Its styling is grabbed from your page’s CSS, so, if you have that set right, your shop is going to look good out of the box.

3. WooCommerce Stripe Gateway

This plugin must be installed and activated along with WooCommerce.  To provide a brief simplification of how you set this up:

  • You need to copy and paste 1 line of code from the WooCommerce WordPress plugin into your Stripe account dashboard.
  • Then, there are 2 lines of code you need to paste from your Stripe account dashboard into your WooCommerce WordPress plugin.

A. With WooCommerce and the WooCommerce Stripe Gateway installed and activated, go to WooCommerce – Settings – Payment – Stripe – Set Up.  You are looking for the “webhook endpoint” link, which should look something like this: “https://yourdomain.com/?wc-api=wc_stripe” – copy your unique webhook endpoint link to your clipboard.

In another tab, have your Stripe account dashboard open.  From the portal, go to Developers – Webhooks.  Click the first “+Add Endpoint” at the top right of your screen.  Paste from your clipboard into “URL to be called.”  Leave “Filter event” in its default setting.  Click “add endpoint.”

B. From your Stripe dashboard, go to Developers – API Keys.  Make sure you are viewing your live API keys – in other words, make sure “View Test Data” is not toggled on.  You need your live publishable key and secret key.  Your secret key will have to be revealed by clicking “Reveal live token.”  These two bits of data you are going to need to paste into your WooCommerce plugin, so have it open in another tab in the state it was in before (WooCommerce – Settings – Payment – Stripe – Set Up)

Disable test mode.  Note: I decided to do this in live mode, because I wanted to make sure it actually worked.  Your test transaction can be as small as $0.50 so it’s not going to hurt you too much if you mess it up.  Mine worked on the first try.  Paste your live publishable and secret keys from the Stripe portal into the respective WooCommerce plugin fields.  Now, tick “Enable Stripe” at the top of the screen.  Click “save changes” at the bottom.  You will get an error message at the top of the screen if something went wrong.

4. SSL

Having an HTTPS site is pretty standard when it comes to e-commerce.  At this point, web users have come to recognize the https:// prefix as offering them some security when it comes to their online transactions.  As such, you should purchase an SSL certificate from your domain/hosting provider if you are planning to run an online store.  In 2014, Google established that having a secure site would also give you a small boost in search rankings.

Another advantage to have an SSL secured site is the ability to integrate seamless web push notifications to keep your subscribers in the loop with post updates.

Once your SSL certificate is active, install the Really Simple SSL plugin, which will force all site visitors to use the https version of their site ensuring security.

5. Test Your Store

From your WordPress dashboard, from the left navigation, go to Products – Add New.  Name your test product “test.”  Scroll down past the description, and in “regular price,” type 0.50.  Tick “Virtual.”

Your test product is published.  Click on “view product.”  Now you are going to add this to your cart and checkout like you were a real customer.  Keep in mind, you are in live mode, so this test transaction is actually going to bill your credit/debit card for 50 cents.  If the transaction goes through, you will receive a confirmation on screen and in your email.  Finally, check your Stripe dashboard and see if a transaction has registered.  If yes, you’re all set.  If you have any problems, go through these instructions again and make sure you have followed every step properly.

You Now Have an Online Store

Congratulations!  You know can tell your friends that you have your own online store.  Now see if you can sell them on a t-shirt!

Harmonic Web Solutions

If you need professional SEO services, contact our SEO Firm.