Close

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.

jobscan-interview-chances

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.

PayPal

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

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.

Checkoutpage.co

Checkoutpage.co is an extremely intuitive front end software that creates popup forms that can be integrated onto any webpage using just HTML and Javascript. Once you create a Checkoutpage.co account on their website, you can immediately navigate to their /pages/new section and create your first, one time or recurring payment “product”. Upon creation, Checkoutpage.co will ask you to link your existing Stripe account- a fairly intuitive process that simply requires you to “allow” Checkoutpage.co to access Stripe on your behalf. Once connected, you can begin to create your products.

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.

Website Integration

Once your product is created on Checkoutpage.co and connected to Stripe, you can begin to integrate it into your website. From the Checkoutpage.co product page, you’ll want to select the “Use” button, which will load a popup that contains a variety of integration options. In this case, we’ll navigate down to the “add as a pop-up on your site” section. From here, you’ll need to copy both the Javascript and HTML code and drop them into your index.html (or whatever page you want the payment integration to be placed). As a reminder, Javascript will be placed in either your HEAD or FOOTER as a < script > tag and the HTML will go whevever you want the button to appear.

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.

Tagged in : TechPayments

Aleksey Weyman

Aleksey Weyman is a web designer, music artist and creator of Millennial Moderator

jobscan-interview-chances