DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Ryan Feigenbaum for Ghost

Posted on • Originally published at ghost.org

How to add a tip jar to a Ghost site

How to add a tip jar

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.

Create a payment link on Stripe

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

How to add a tip jar

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

How to add a tip jar

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

How to add a tip jar

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

How to add a tip jar

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.

How to add a tip jar

Add the payment link to Ghost

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.

Navigation item

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.

How to add a tip jar

That’s it! Your tip jar is now live and active πŸŽ‰

How to add a tip jar

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.

How to add a tip jar

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.

How to add a tip jar

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).

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.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.