loading...
Cover image for Getting started with web monetization in React

Getting started with web monetization in React

emma profile image Emma Goto 🍙 Originally published at emgoto.com on ・2 min read

After seeing the announcement for the Grant For The Web Hackathon I did a little bit of digging and thinking to try and understand web monetization better.

If you're looking to create something using React, hopefully this quick guide can save you a bit of time in getting started.

Creating a hook to see if a user is web monetized

Here's a hook that will return you two states - isMonetized and loading:

import { useEffect, useState } from 'react';

export const useMonetization = () => {
    const [isMonetized, setIsMonetized] = useState(false);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        if (!document.monetization) {
        // This means this user doesn't have monetization capabilities
        // i.e. they don't have the Coil extension installed on their browser
            setIsLoading(false);
            setIsMonetized(false);
            return;
        }

        // Note: A user could have monetization capabilities (i.e. installed Coil)
        // but that doesn't mean they've actually signed up for an account!
        const { state } = document.monetization;

        // If the initial state is 'stopped', we can assume the user isn't
        // going to pay, and so we can stop loading
        if (state === 'stopped') {
            setIsLoading(false);
            setIsMonetized(false);
        }

        // We add a listener to wait for the user to start paying
        document.monetization.addEventListener('monetizationstart', () => {
            setIsMonetized(true);
            setIsLoading(false)
        });

    }, []);

    return { isMonetized, isLoading };
};

You would be able to use it like this:

const { isLoading, isMonetized } = useMonetization();

if (isLoading) {
    // Return a spinner
} else if (isMonetized) {
    // Show exclusive content
} else {
    // Let the user know there is exclusive content available
}

How to test your web monetization without signing up for Coil

The test-web-monetization provides a bookmarklet you can use to test your project (scroll down to the Bookmarklet for Testing section of the page). This makes it super easy to test web monetization - and it will work with the React hook I've described above too.

This does also mean that if you do set up web monetization this way, anyone will be able to easily get around it by using a bookmarklet such the one listed above. As of now there are no server-side examples on the Web Monetization website, but hopefully there will be some soon!

Other resources

If you are planning on using React or Gatsby, there are some small packages that may help you out:


I'm super excited to see what everyone comes up with for this hackathon! Good luck!

Posted on May 9 by:

emma profile

Emma Goto 🍙

@emma

Front-end developer. In my spare time I like to make Trello Power-Ups ✨

Discussion

markdown guide
 

Ooh! Onto another one! Looking forward to see your process/progress! :D

 

Haha! Unfortunately I'm completely out of ideas at the moment 😭

 

Something will come I'm sure! Always does!

 

Not to sound like a complete idiot but you returned {isMonetized, isLoading} but declared {isLoading, isMonetized} I spent a good 20 minutes figuring out why this is not working 😶

 

Did you manage to get it working? I don't think the order should matter.

 

Yes! thanks for the starter script.