One of the big wonders of the world wide web is how it has democratised content creation. Now everyone with a device and internet connection can have a voice and build an audience. In this post I’m going to show you a couple of ways to add a virtual tip jar to your website.

A note about payment gateways

Payment gateways are merchant services for handling transactions between e-commerce websites, apps and point of sales terminals. They take instructions from your website and handle banking data of customers, transferring money from the customer’s bank accounts to yours via their own.

You’ll need to set up with a payment gateway first before starting to install one of the tools below. The purpose of this post isn’t to review payment gateways, but a few you may wish to consider are:

  • PayPal – general ecommerce
  • Stripe – general ecommerce
  • Venmo – owned by PayPal and built for easy mobile payments and admin
  • Patreon especially built for creatives
  • Amazon Smile for charities
  • Cash.me – very clean and simple

Payment gateways make their money by taking a cut of transactions, usually just one or two percent. Some also offer more business services like card terminals, invoicing etc, but you won’t need these just to accept tips from fans on your website.

OK, now on to the options for adding a virtual tip jar to your website.

Option 1: AddThis Virtual Tip Jar

AddThis makes fantastic little tools to increase visitor engagement on your website. I’ve always found the process of creating, customising and integrating their widgets very smooth. Sometimes their tools can be a little bulky which may slow down your website, but you can give this one a go and see what happens. It’s totally free and easy to set up.

After creating a free account with AddThis you’ll then be prompted to choose the tool you want to add, so select the Tip Jar to the bottom right. AddThis provides further help on connecting services.

You’ll then be able to add the links to your payment pages on various payment services, adjust the design, position, and the page and device types that you want it to appear on.

How to Add a Virtual Tip Jar to Your Website 1

As you change things you’ll be able to see a desktop and mobile preview to the right.

After clicking ‘activate tool’ you’ll be taken to instructions on how to add the tool to your website, with specific instructions for plain old HTML websites, AMP pages, WordPress, Magento, Tumblr, Shopify, AngularJS and Cloudflare apps. AddThis have accompanying apps for WordPress, Shopify and Cloudflare.

Option 2: Stripe Payments

If you use WordPress I recommend using this plugin for simple transactions because it’s so lightweight, clean and simple. You can use it simply to accept donations or build it out into more of an e-commerce tool, creating products with optional variations, downloads, stock control, shipping and tax and more. If you only need to accept tips for your content the setup of this plugin is much simpler than a more extensive e-commerce solution like WooCommerce and it taxes your web server much less.

While you can create a dedicated page for products, you can also just create a donation link or button that will pop up a simple modal window like this:

How to Add a Virtual Tip Jar to Your Website 2

Of course, to use it you’ll need to use the Stripe payment gateway, which I’ve found to be better for virtual transactions than PayPal, and slightly cheaper.

To install the plugin in WordPress go to Plugins > Add New and search for Stripe Payments.

How to Add a Virtual Tip Jar to Your Website 3

After activating the the plugin it will take you through adding a few default pages it needs on your website, currency settings, email settings and more.

To allow the plugin to link to your Stripe account to accept payments you’ll need to add your Stripe API keys. Here’s how to find Stripe API keys in your dashboard.

Then it’s just a matter of creating one product (let’s call it “send me a tip”) and leaving the price blank. That will allow your site visitors to choose how much they’d like to tip you. Don’t forget to publish the product. Then you’ll be able to see a shortcode listed in a box under the publish/update button that you can insert anywhere on your website to prompt visitors to send you a tip.

Honourable mentions for WordPress tip jars

  • GiveWP – for donations and fundraising, with 80,000+ active installations
  • PayPal Donations – with 50,000+ active installations
  • PayPal Donation – similar again, with 20,000+ active installations
  • Charitable – 10,000+ active installations
  • Patreon Connect – Also allows you to create content only accessible by your paying supporters

Author: Aidan Ashby

Aidan is a web and branding designer living in Northampton, UK. He’s a cautious optimist and is loathe to discuss himself in the third person. He loves pancakes and has a perpetual desire to just be sat in the woods with his feet up in front of a bonfire.

Connect with Aidan on LinkedIn.

You may also like…

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Sign up to receive helpful free design tips in your inbox

Sign up to receive helpful free design tips in your inbox

Join our mailing list to receive the latest blog posts and updates from our team.

Includes a free download of our Good Nook font.

Thanks, you've been subscribed.