Gatsby Theme Web Monetization
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 pointer.
Existing site
- Install the theme
npm install gatsby-theme-web-monetization# or yarn add gatsby-theme-web-monetization
- Add the configuration to your
gatsby-config.js
file
// gatsby-config.jsmoduleexports = // ... other stuff plugins: // ... other plugins resolve: `gatsby-theme-web-monetization` options: paymentPointer: "$wallet.example.com/eka" // Your wallet's payment pointer
Usage
⚠️ Important ⚠️ To accept payment, you have to set up a web monetized wallet and get your payment pointer (steps 1-2 in the Quick Start Guide).
Theme Options
This theme only has one (optional) option, paymentPointer
. Your payment pointer should be in this format: $wallet.example.com/eka
.
If you skip this option, you have to add the monetization metadata yourself as shown in Steps 3 - 4 in this guide. You should do this if, for instance, you’d like to enable monetization only in some parts of your site.
Components
As long as your metadata has a valid payment pointer, you don’t need any particular component to receive payments. That said, this theme provides these handy UI components to give you a quick start in telling your users about your new web monetized site 😌.
WebMonetizedStatus
Display content based on user’s Web Monetization status. Usage and props
<WebMonetizedStatus ='Yay! Web Monetization is active!' ='Web Monetization is inactive'/>
WebMonetizedPaywall
Display “paywall” content (eg. description and call-to-action) users without active Web Monetization. Usage and props
<WebMonetizedPaywall ="Sorry, you cannot see this content" ="Want to know the answer to the ultimate question of life, the universe, and everything? Enable Web Monetization now."/>
IfWebMonetized
The opposite of WebMonetizedPaywall
—display content to users with active Web Monetization.
<IfWebMonetized> The answer to the ultimate question of life the universe and everything is <strong>42</strong></IfWebMonetized>
This component comes from react-web-monetization, which this theme uses as dependency. As such, all components from the library is available for you to import without you having to install the package on your site.
Using in MDX
This theme wraps your site with an MDXProvider
, so you should be able to use all the components right away in your MDX pages—no imports needed.
---title: Example Postdate: 2020-06-03--- Hello world! Why did the chicken cross the road? <WebMonetizedPaywall /> <IfWebMonetized> To get to the other side.</IfWebMonetized>
Importing components
You can import the components to use elsewhere outside MDX, or for creating customized components to pass to your own MDXProvider
.
// my-component.js;;; // You can import anything from https://github.com/sharafian/react-web-monetization
This theme has been tested to work with another theme that also wraps the site with an MDXProvider
, gatsby-mdx-embed; but in case the Provider does not work, you can import MdxWebMonetizationProvider
and wrap your MDXRenderer
in your own layout component manually.
Examples
Coming soon
Get earning! 🤞🏽