A Free and Easy eCommerce Solution Using Stripe Buttons

If you’re looking for a way to easily manage inventory on your WordPress website without making the leap into a full-blown eCommerce solution, Stripe Payments is a wonderfully quick and easy solution for you and your customers. Let’s discuss why you’d need it, how it works, and how to implement it on your site. But first, a little background.

Castlewood Studios in Lebanon, Missouri (my employer), provides website design and management services across the country to all kinds of businesses, from event coordinators to electricians to Government offices and nonprofits. Each comes to us with their own unique needs and requirements, relying on us to find a solution to their specific problems. Fortunately, that’s something we enjoy helping with!

If you’d like to discuss how Castlewood Studios’s services can help your business grow, Contact Us today!

Recently, one such rather niche group of clients, pet breeders, brought to our attention an issue they were facing. After posting a litter of adoptable puppies on their website, PayPal buttons are added to collect deposits for each pup online. While these buttons worked flawlessly, they didn’t track inventory, meaning the same puppy could be reserved by more than one person before the button was disabled.

This wasn’t an issue for most people most of the time, but a few of our clients lacked reliable internet access and/or the ability to update their own websites, meaning changes to the availability of puppies couldn’t be made until we opened the office Monday morning. As a result, they were having to issue refunds to those having paid deposits for the same puppy over the weekend. Was there any way, our clients asked, to add cost-effective inventory-tracking without fully converting to an eCommerce solution?

As we do any time a client brings a problem to our attention, we immediately began searching for a solution – preferably one that wouldn’t break the bank. We spent days researching and testing various options, many costing hundreds of dollars or more to implement. Finally, we discovered a quick and easy solution that does exactly what our clients need, and best of all, is completely free! Read on to learn how you can implement this same solution on your own website for free!

THE PROBLEM

Ecommerce websites are great for selling online. They’re also more complicated, harder to rank, and cost more than a standard website. That’s why many businesses choose to keep things simple, sticking to a standard website and implementing something like PayPal’s embedded “buttons” to add basic eCommerce functionality to their sites. But this simplicity is not without its shortcomings; it WILL cost you time, and possibly lost sales and customers, things business owners cannot afford to throw away.

Imagine you have products that are all one-of-a-kind, or those with limited stock, and you want to sell them on your website. If you, like some of Castlewood’s clients, choose to forgo a full-fledged eCommerce solution in favor of something simpler, you might use PayPal buttons to list them online. Problem is, those PayPal buttons continue accepting money until the moment they are removed. So if two or more people purchase the same product before you have a chance to log in and remove them, you’ll end up needing to issue refunds to disappointed customers upset at being denied the product they wanted and thought they had already purchased. I’ll show you how to avoid this unfortunate situation in just a moment.

But first, some of you “in the know” will mention that PayPal DOES offer buttons with inventory-control built in, so what am I even talking about? Here’s the deal: Yes, PayPal offers such buttons. And they’re a giant pain to deal with. You’ll need to log in to PayPal every time you need to make the slightest change. You’ll need to create a unique button for every product, then log into your website and carefully paste each button’s HTML code into the appropriate section of your page. And make sure you do it perfectly, as a single typo could break the button entirely!

Thankfully, there’s a way to forgo all that back-and-forth, nitpicky nonsense and do everything from within your WordPress website. First let’s cover how it works, then we’ll show you how to add it to your WordPress website in just a few easy steps.

THE SOLUTION:

How these Stripe-enabled inventory-tracking buttons works is simple, at least for you and your customers! After you create a button and choose where to show it on your site, you’ll wait for visitors to find and click on it. After the button is clicked, a box pops up where the buyer enters their credit card and shipping info. Once they complete their payment, they are taken to a “Thank you” page showing their order details. Simultaneously, an email is generated and sent out to both the buyer and seller containing those same order details. Last, if the available stock has been reduced to zero, the button automatically changes into a big “RESERVED” notice that no longer allows anyone to buy/reserve that product.

This also works with multiples of the same product. Imagine you have four bookings left to sell. You simply create one button and enter the remaining stock into the button’s inventory section, then save your changes. Once those four bookings have been purchased, the button automatically changes to the “RESERVED” state and allows no further purchases.

Now for the (minor) catch: In order for these buttons to work, you must have a Stripe account. Thankfully, Stripe accounts are free and quick and easy to create. In fact, Castlewood recommends Stripe to all our clients due to their reliability and customer support. Switching to Stripe from another payment processor is painless; they also accept all major credit/debit cards, trendy digital wallets like Venmo, and automatically transfer funds to your bank account.

Ready to begin implementing this functionality on your website? Then let’s get started!

THE INSTRUCTIONS

First, you’ll need to create a Stripe account. Don’t forget to copy your test and live keys for later reference.

Next, you’ll want to install and activate the WordPress plugin Stripe Payments. This plugin has served Castlewood’s clients well so far, and comes with a slew of useful features, including the ability to sell physical and digital products, coupon creation and more. However, we will cover only the basics as we’re trying to keep things simple, so feel free to experiment on your own or visit their plugin page (linked above) for more detailed information.

Once the plugin is installed, click on the “Stripe Payments” link in the WordPress menu, then the “Settings” submenu. Here you’ll find the three tabs we’ll be concerned with today: General Settings, Email Settings, and Advanced Settings. While the settings you’ll want to choose will depend on your products and desired look, here’s the basics:

General Settings: Enter “Buy Now” or similar in the “Button text” field. This will determine the default text of your buttons, saving you a step later. Next, scroll down and enter your live and test API keys you copied from your Stripe account earlier. Leave the “Live Mode” button unchecked for now, but don’t forget to check it later when everything’s ready to go. Save your changes.

Email Settings: Check the boxes for what emails you’d like the buyer and seller to receive, and choose what email address, subject, and body text should be used for emails sent to buyers and the seller. Save your changes.

Advanced Settings: Most settings are self-explanatory. We like to add a custom field asking for the buyer’s phone number. We enter a name and description for that field, check the box to enable for all buttons/products, and make it mandatory. Save your changes.

We’re almost done! Last we need to actually create a button and add it to your site. You could create an entire product listing instead, but let’s focus on a basic button for today.

Click on “Stripe Payments” in WordPress again, then on “Add new product”.

On this page, enter a name for your product. Make it clear to both you and your customers what it is, as this name will display in the order details.

Find on the page where it says “product options”; to the left will be a number of tabs. You should start out on the “Price & Currency” tab. If not, click it now. Choose your price and keep the default “one-time payment”.

Next, click on the “Quantity & Stock” tab. Check the box for “Enable stock control” and set your quantity available.

Click the “Collect Address” tab on the left and check the box “Collect address on checkout” if desired.

Click the “Appearance” tab on the left. If you set a default button text earlier, you can leave the “Button Text” field blank, or enter different text if desired. Also check the “Show Button Only” box. If you’re comfortable with CSS you can also add a class name to “Button CSS Class” to adjust how the button looks, though that’s for more advanced users.

Finally, don’t forget to publish your product the same way you’d publish a post or page in WordPress.

Look to the right of your published product beneath the publish/update button for a section that says “Embed Product”. Beneath it will be a section saying “Shortcode” with something like [asp_product id=”001″] below. Copy this shortcode.

Open the page/post you want to add the button to. In the screenshot, there is a gallery of product pictures. The shortcode would be pasted below this gallery. Update your page or post and view the live version, where you should now see your new inventory-enabled button. Go ahead, give it a click!

PayPal button veterans might note that, by using Stripe, your site’s visitors remain on-site throughout the entire transaction, unlike the PayPal buttons that take your visitors off-site. This gives a more professional, integrated feel to the transaction.

Make any needed changes until the button works as desired, then go back into Stripe Payments -> General Settings and check the box for “Live Mode” before saving.

That’s it; you’re ready to accept payments and automatically track inventory right from your website!

WRAPPPING UP

If that sounds like a lot of work to set up, rest assured, it’ll be worth it the first time you don’t have to apologize to a lost customer and issue them a refund. Plus, the more products you add to and sell from your website, the more this initial investment of time and effort will pay off in the future.

The account creation, setup and testing process described above is an abridged version of the services we provide to our clients. If you’re not comfortable with creating and managing online accounts, installing and configuring plugins, building websites or marketing products online, you’re not alone! Give us a call — We’d love the opportunity to discuss how Castlewood Studios can help your business run more smoothly and efficiently. Once you factor in our affordable prices and exceptional US-based customer service and support, we’re sure you’ll be as satisfied with our work as our existing clients are!

Eric S. Streeter is a website designer at Castlewood Studios in Lebanon, Missouri. Contact the Castlewood team at (417)532-2329 with any of your questions.