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

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

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

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

- git clone git@github.com:mrmuhammadali/gatsby-plugin-monetization.git
- cd gatsby-plugin-monetization/examples
- yarn install
- yarn start

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.