Abstract tip jar

How to add a tip jar

Give your readers more opportunities to support your content (and boost your revenue) by adding a tip jar to your site. It's quick and easy, and this tutorial will walk you through everything you need to know.


Offer your most engaged readers multiple ways to support your content by adding a tip jar to your Ghost membership site with Stripe.

This tutorial will walk you through the steps of setting up the payment link in Stripe and how to add the link to your Ghost site as a navigation item, a page, and a content snippet.

Log in to your stripe account and go to Payments → Payment links. Click New to create a new payment link.

Stripe payment link screen

On the Create payment link page, select Let customers choose what to pay from the dropdown menu.

Create payment link screen with choice to let customers choose what to pay

Fill in the details for your payment link. These details are entirely up to you. When everything looks good, click Create link.

Payment link details screen

Your payment link is now created. Click Copy to get the URL that we’ll use with Ghost.

Copy payment link button screen

When a visitor clicks the link, they’ll be taken to the Stripe checkout page, where they can enter their details and complete the payment.

Customer-facing Stripe checkout screen

Anywhere you can put a URL, you can use your payment link — we’re going to focus on adding it as a navigation item, a new page, and a snippet.

If you’ve ever added a navigation item to your Ghost site, then you’re already ahead of the curve on this one, because the process with a payment link is exactly the same.

Log into your Ghost site and go to Navigation. Add the link text and payment link URL. Click Save.

Ghost navigation page

That’s it! Your tip jar is now live and active 🎉

Navbar updated with tip jar link

Page

Maybe you want to make more of a case for a tip than just a navigation item. Another option to showcase your payment link is to create a new page in Ghost.

Go to Pages → New page. The design and content of the page are up to you. In the example below, we created a fictional publication, Coffee Talk. The page includes some copy along with a Button card that uses the Stripe payment link.

Payment link page for Coffee Talk

Publish the page and add it to the navigation bar, like in the previous section, or share it in newsletters, on social media, or wherever there’s an opportunity for support.

Create a content snippet

In Ghost, snippets are user-defined reusable bits of content. With them, you can easily copy and paste content across different posts and pages.

Here, they’re perfect for quickly adding a tip jar at opportune moments in your posts.

Using our Coffee Talk publication from above, let’s say we just shared a technique for brewing the most insane cup of coffee ever known. Now’s as good a time as any to make a call for action.

Sample content snippet for Coffee Talk

For this CTA, we used the Header card, which adds a beautiful, full-width element to the page with a customizable button (where we included the Stripe payment link).

To be able to use this on other posts and pages, we can turn the card into a snippet (which works for any post content — not just Header cards).

0:00
/

To create a snippet, select content and click the create snippet icon. Enter a name for your snippet and hit Save. Your snippet is now available on any post or page from the card menu 🤯

Summary

Tip jars offer your visitors a simple way to contribute to your content financially with a one-off payment, and thanks to Stripe and Ghost, this is easy to set up for your publication

How did you implement a tip jar on your website? Join the Forum to share your witty copy, ask questions, or just see what other Ghost users are up to.

On this page Introduction

How was the tutorial?

Be the first to know.

Join the Ghost developer community — sign up to get early access to the latest features, developer tools, and tutorials.

No spam. Once a month. Unsubscribe any time.