Getting started with web monetization in React
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 isLoading:
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!