Web Monetization made easy for Gatsby

What I built

I'm late to the party as I got to know about #gftwhackathon yesterday. Without further ado, I read the docs of Web Monetization API and thought of creating a package for react. But after a bit of digging I found react-monetize and some other packages which were doing the same thing, so I created Gatsby plugin for react-monetize.

Submission Category:

• Foundational Technology: Gatsby plugin for Web Monetization API

Link to Code

mrmuhammadali / gatsby-plugin-monetization

Gatsby plugin for integration of Web Monetization API

gatsby-plugin-monetization

A Gatsby plugin for react-monetize to speed up your integration with Web Monetization API

Install

yarn add gatsby-plugin-monetization

Or

npm install --save gatsby-plugin-monetization

How to use

You can read how to get your payment pointer on official website of Web Monetization API.

import { useContent, useStatus } from 'gatsby-plugin-monetization';

function MyComponent() {
    // ...
    const { state, events } = useStatus();
    const { isMonetized } = useContent();
    // ...
}

./gatsby-config.js

module.exports = {
    plugins: [
        {
            resolve: `gatsby-plugin-monetization`,
            options: {
                // [required]
                paymentPointer: 'your-payment-pointer',
            },
        },
    ],
};

Examples

To setup playground locally, run following commands (without -) in sequence:

- git clone [e-mail]:mrmuhammadali/gatsby-plugin-monetization.git
- cd gatsby-plugin-monetization/examples
- yarn install
- yarn start

Author

👤 Muhammad Ali [e-mail]

• Twitter: @muhammadali_io
• Github: @mrmuhammadali

react-monetize Author

…

View on GitHub

Instructions for setting up example code is given in the docs.

How I built it

Technology Stack:

• React
• Babel
• Gatsby

I learned about Web Monetization API and how it works along the way and it was my first time of creating a plugin for Gatsby.

Additional Resources/Info

I've some ideas to create components necessary for Web Monetization API to integrate in React.

I've also created a PR in official docs of web monetization API to publish this plugin there.