ekafyi / gatsby-theme-web-monetization

A theme for integrating the Web Monetization API on your Gatsby site 🤑

Gatsby Theme Web Monetization

Set up Web Monetization on your Gatsby site in 5 minutes 🤑

Features

• 💸 Accept payment stream via the Web Monetization API on your website/app
• 💙 Display monetization status, call to action banner, and show exclusive content to users with Web Monetization
• 😎 No imports required! (for MDX content)

Web Monetization?

Web Monetization provides an open, native, efficient, and automatic way to compensate creators, pay for API calls, and support crucial web infrastructure.

Web Monetization is ”a JavaScript browser API which allows the creation of a payment stream from the user agent to the website”. Learn more about the API and about Interledger as the transfer protocol on webmonetization.org.

Installation

New site

# create a new site at the directory "my-monetized-site"
gatsby new my-monetized-site https://github.com/ekafyi/starter-web-monetized-theme

Go to your site directory, open gatsby-config.js, and modify the paymentPointer option with your own wallet’s payment…

View on GitHub

What I built

I built gatsby-theme-web-monetization, a Gatsby theme that makes it quicker and easier to implement web monetization on Gatsby sites.

Themes in Gatsby refer to a set of functionalities, components, etc in an installable package that can be combined with other themes and plugins. With the ever-growing Gatsby themes and plugins ecosystem, this theme helps users monetize a wide range of websites/apps.

The theme comes with ready-to-use examples that only requires changing one line of code—the user’s payment pointer.

Submission Category:

Foundational Technology. (While the theme itself is the former, the examples may come under the Creative Catalysts category, though.)

Demo

• Blog example

  • Demo
  • Code / Starter

• Photography portfolio site example

  • Demo
  • Code / Starter

All starter sites come with the instant deploy to Netlify button.

Link to Code

https://github.com/ekafyi/gatsby-theme-web-monetization

How I built it

I already built and submitted react-web-monetization-ui for this hackathon. Then I thought for React sites generated from Gatsby, adopting Web Monetization and communicating it to the site visitors could be made even simpler by leveraging Gatsby themes’ composable nature.

In this theme, I bundle these monetization-related packages so users don’t have to install and configure them one by one.

• react-web-monetization-ui for the UI components
• sharafian/react-web-monetization for the hook and components detecting monetization site
• Daudr/gatsby-plugin-web-monetization to add payment pointer metadata

With the breadth of existing Gatsby starters and themes, users can add monetization features to various types of sites. In the first example site, I make a monetized blog site without writing any code by combining this theme with Gatsby’s official themes. In the second, I make a monetized portfolio site by importing and customizing the theme’s UI components.

This theme does not (yet!) address more complex use cases such as revenue sharing, manually starting.stopping monetization, and securing data sent to monetized visitors. Instead, this theme seeks to be first step for Gatsby site creators of all levels to to get started with Web Monetization.