Blog Post

Zombie knocked out by a money bag

JavaScript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse – Part 3

Editor’s Note: Since this book was originally written Coil has stopped operations, which has put implementation of this on hold. That said, the content here should be accurate if/when another company takes up Coil’s mantle.

Continued from Part 2

The Prerequisites for the JavaScript Monetization API

Let’s first discuss the parts the user needs to send the payments, and then we’ll get into the weeds of how to get your site ready to receive payments. 

User needs

First, users need a wallet that supports the Interledger Protocol (a monetization provider), from which the site they are visiting (the monetized site) is paid. As of August 2021, there’s only one provider in this space: Coil.

Once users have an account in place with the monetization provider, they’ll need to use a browser that has implemented the API. As of August 2021, Puma is the only browser that supports monetization natively, but every major browser has an extension/plug-in that will support monetization. Please see https://webmonetization.org for an up-to-date list of providers. 

Night of the Living Tip:

You don’t need to have monetization on your site to use the examples provided in this book, but the best way to both understand the user’s experience and double-check that your code is working the way you expect is to actually use monetization.

Users need to know monetization exists and how to get their accounts set up in order to receive the benefits of monetized sites. However, web monetization works in such a nonintrusive way that they won’t naturally be aware of it—they won’t know that they need or want to set it up. How do you let users know monetized content exists in order for them to take part? You’ve got to tell them: Advertise. It’s kind of like the “Rent this Space” ads you sometimes see on highway billboards—you don’t realize a billboard’s an option until you see the advertisement.

How much you want to push monetization, of course, depends on your user base, their receptibility toward the concept, and how you plan to incorporate web monetization into your site. For instance, if you plan to use web monetization to supplant ads, think about the users who’d want to get rid of ads and what their needs and goals might be. Users who want to get rid of ads are likely the ones ads annoy. Adding a new banner or what amounts to an additional ad space may serve to aggravate them rather than make them choose web monetization. Replacing a current ad space every now and again with something about using web monetization to remove the ads might be an excellent choice. Or, if you want to avoid the revenue hit of not getting paid for an ad space, you could add a link near the ad space with something like, “Tired of ads?” and a link to a page that describes web monetization and how users can get rid of ads on your site. If your site/organization uses a donation model, you can include it on your ways to donate page. The ways to tell your audience about this are as many and as varied as the way you use it to benefit your audience. In all things, though, put your audience first. 

Website Server Needs

At a base level, you only need two things here too. First, you need an account or wallet that supports the interledger protocol so that you can receive payments. As of August 2021, there are two providers in this space: Uphold and Gatehub. All service providers have different offerings, different fee structures, and different currencies they support. When I signed up, Uphold had fewer and lower fees and supported a wide variety of currencies. Your needs and the fee structures and currencies each wallet offers when you sign up may be different. Be sure to look at all options before you decide. Please see https://webmonetization.org for an up-to-date list of wallets.

Second, you’ll need to add a meta tag with your wallet’s payment pointer. The meta tag is rather simple:

<meta name="monetization" content="example.com/your/payment/pointer">

My payment pointer, for example, is:

<meta name="monetization" content="$ilp.uphold.com/y32A3YwJyGKK">

That’s it. You can then accept payments. 

While it’s very easy to set up, there are several options to create a better user experience and ensure that you take excellent care of the users who have paid you. Let’s dive into the API.

To Be Continued