How To Accept Payments On Your Website (Easiest Way)
There are a variety of ways to accept credit card payments on your website, but many of them require extensive technical ability or paying a premium for online store platforms.
With the continued push of e-commerce, more and more small businesses are deciding to sell their products online. For the lean entrepreneur, there is a ton of incentive to selling online- no brick and mortar overhead, minimal staff to pay, plus you can manage your online sales remotely from the comfort of your own home. However as soon as we begin to explore the online payment integration options, we are confronted with two realities:
- Custom integration of online payment gateways requires serious technical skill (for payments to be encrypted you need token generation, API calls, etc.).
- Online selling platforms like Shopify/Wordpress plugins require membership fees, which decrease margins and scare away bootstrapped entrepreneurs.
Customers want a trustworthy, secure, and (most of all) simple way to process payments. Business owners on the other hand want simplicity of integration and flexibility to customize. As a moderately novice web developer with a frugal operation, I spent weeks digging for a platform that solved my need to process payments.
At first I relied on PayPal for its familiarity and relative ease of use, but even PayPal has limitations that didn’t satisfy me. For one, every payment requires a redirect from your website to the PayPal website, which although is necessary for secure payment processing, adds an unnecessary step to the customer purchase process. That, plus it’s relatively limited customization options turned me off from using the platform. PayPal is however, a very popular and widely recognized service and great if you're just looking to accept donations. Here's a short guide to using PayPal buttons that might help.
That’s when I discovered a beautiful partnership between Stripe and Checkoutpage.co that not only satisfies all of my criteria, but is free to use (small percentage deducted from transactions). Here are the basic steps of how I setup a payment processing solution with these two platforms, followed by a more in-depth walkthrough of each:
- 1. Create a Stripe account
- 2. Create a Checkoutpage.co account
- 3. Connect your Checkoutpage.co account to your Stripe account
- 4. Create your products through Checkoutpage.co
- 5. Integrate Checkoutpage.co into your website (HTML & JS)
- 6. Track all transactions with either/both Stripe and Checkoutpage.co
Here's an example of what this integration looks like, fully functioning:
Stripe is arguably the second most trustworthy payment processing software online, after PayPal. It’s an extremely robust tool with tons of helpful documentation and enterprise level support for those who may need it. Like many online tools, it features an assortment of third party extension support and gives unlimited customization options. The only catch- it can get a bit technical. When I first looked into Stripe I was deterred by the need to set up API calls. The website I built was completely static and switching to server hosting would be both time consuming and expensive. I’m not a cheap guy, just practical. The real value I found in Stripe was its wide variety of integrations and customer support, so setting up an account was a no brainer.
Opening an account with Stripe is easy, just head over to their register page and you’ll be set up in minutes. Remember that Stripe is responsible for actually paying you for transactions, so be sure to fill out all information thoroughly and correctly.
Product customization with Checkoutpage.co is highly intuitive. Aside from setting the product name and cost (in USD), you can add custom image banners, descriptions, fields (to capture customer data) and a variety of settings, including where to redirect users after payment is processed. You can read more about the Checkoutpage.co options on their knowledge page.
Once the code has been injected, you can load your page and try clicking the button. What should appear is a mid screen popup that prompts the user for payment method information plus any other criteria you’ve specified in Checkoutpage.co. From here, customers can input their payment method and voila, you’ve collected money!
Note: your website should be served over HTTPS, meaning it has an SSL (the little padlock in your browser that indicates a website is secure). Not having this will result in an “unsecure” message being displayed to your customers, which will greatly reduce chances of making a sale. I may decide to write a guide about setting up SSL in the near future but for now, this guide may help. Also please feel free to contact me on my website for any assistance.
Again, here's an example of the finished solution:
If you enjoyed this mod about accepting payments on your website, you might enjoy this mod about the three online product types that all online businesses need to sell. Please also share this mod using the social media icons below! Any questions or comments? Let me know on Twitter.