A theme for integrating the Web Monetization API on your Gatsby site 🤑
Gatsby Theme Web Monetization
💸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 provides an open, native, efficient, and automatic way to compensate creators, pay for API calls, and support crucial web infrastructure.
# 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…
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.
Foundational Technology. (While the theme itself is the former, the examples may come under the Creative Catalysts category, though.)
All starter sites come with the instant deploy to Netlify button.
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.