This book discusses the emerging web monetization standard that allows site owners to receive micro payments privately and securely. You’ll understand how it works, how to set it up and how to work with the JavaScript Monetization API to create a VIP experience for your monetized web users.

JavaScript Monetization API

JavaScript makes your pages dance, move and interact. For a front-end developer, it’s a fundamental skill.

JavaScript

Tools & Libraries

Javascript Monetization API: How to Fund your Human Resistance Cell after the Apocalypse

Preface

Full disclosure: The author received a grant to support the writing of this book, as well as two other JavaScript books, from Grant for the Web, among whose major contributors is Coil (which as of 8/21 is the only web monetization provider available). Neither Grant for the Web nor Coil nor any of their members, employees, collaborators, program team, or anyone else had any say in the content or editing of this book. Basically the author wrote it, his normal editor edited it and the author deserves all praise, blame, and accountability for its contents.

Important Notes

Traditionally, web business models have followed the TV business models like a horde through a bottleneck. I’m sure you’re familiar with ad-sponsored sites, subscription sites, and purchase/merchandise supported sites. There are a few problems with these models—problems that web monetization seeks to fix. So, before we talk about how or why monetization seeks to fix these issues, let’s discuss the current models for supporting websites.

What Is Web Monetization?

The technology underlying web monetization is a value-exchange system called the Interledger Protocol. It allows for the exchange of money in any currency with anyone with an account. Its error correction and process reminds me of TCP/IP: Packets of information are exchanged across a network. Each packet may take a different route to the final destination, but they all come together and reconstitute the full message (value exchange) at the destination. That’s about all you need to know about the underlying Interledger Protocol, but you can read more about it at https://interledger.org/ .

Like a Zombie Nerd Sitting at the Cool Horde&rsquo;s Table: Value Exchange

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.

The Prerequisites for the JavaScript Monetization API

There’s a new object in the Document Object Model (DOM) hanging off document called monetization . (If you’re unfamiliar with the DOM, objects or events, you can read up on them in JavaScript Basics: Flinging Event, Element, and Object Bombs at Zombie Heads ) It’s exposed by the browser or a browser plug-in. And herein is a simple check for whether monetization is possible: if document.monetization is undefined, then the browser doesn’t support monetization. You can then show ads or keep monetized content secret or whatever you want to show to nonmonetized users.

Monetization States

Because the JavaScript Monetization API implements events, you don’t have to keep checking what monetization state you’re in. There are events that will fire when the state changes. Each of the following events have at least two additional properties beyond the normal event properties: paymentPointer and requestId.

Monetization Events

If you load content from other sites via an iframe, you can let them monetize through your site too. Similar to the JavaScript API, this requires just a simple change to the current standards. The iframe element has an allow attribute, so all you need to do is add monetization to the allow attribute. Like so:

Splitting Payments

Showing exclusive content and/or removing advertising are two of the major rewards you can offer users who send you money. Other things you might try are allowing access to higher/faster support, exclusive access to content authors or other influential people from the site, access to download ebooks or PDFs of content (even if that content isn’t exclusive), or special podcast access. Even though there are several options and ways to implement them, when you get down to it, they all just show or hide something. I’ve set up a special page on the Undead Institute site where you can download a web monetization cheat sheet if you have web monetization on (typically sold in a pack of JavaScript cheat sheets for $2.99). If you don’t have a web monetization account or browser set up, you can sign up for my newsletter to get the cheat sheet.

Rewarding Users for Monetization

Rewarding your monetized visitors with exclusive content is an excellent way to encourage them to visit your site with monetization on. While you can use JavaScript to securely download that exclusive content, that type of implementation is beyond this book's scope, so the way I’ve hidden the content in the demonstrations will be beaten by anyone who knows their way around web developer tools (lucky for us, zombies aren’t so good with such things)

Showing Exclusive Content

This one can be tricky, depending on your ad platform and when and how ads are loaded. Since ads are often a source of evil (e.g., slow loading times, privacy concerns, weird and/or invasive content, or letting the zombies win) and are only an indirect way of payment, it’s worth the effort to give your users a better experience.

Removing Ads

You can also count how much you are receiving as the money comes in so that you can reward users who stay on your site or those who give a certain amount. (While I don’t have any hard-and-fast statistics on what or why, I have seen web monetization amounts vary from hundredths/thousandths of a cent per second to millionths/billionths of a cent per second. I bring this up to note that getting to a certain amount of money, even if it’s only a single cent, may take some users much longer than others, so use amount determinations carefully.)

Making Apocalyptic Cents

There are a couple of ways we can optimize the counting code above.

Making Apocalyptic Sense

Another thing you might wish to do is to start and stop monetization. For instance, if you have sponsored content on your site, it might feel weird or inappropriate to monetize it, or your sponsor may not want you to monetize that portion. Preventing the monetization meta tag from being applied to the page would be ideal, but in a large site, selectively dropping the meta element may be difficult. Having a way to swap out or change the monetization meta tag may come in handy. Or maybe you want monetization to be a user choice. You can have users enable it or disable it as they see fit.

Start and Stop Monetization

Either using some of your own content or this provided content , create a page that, when monetized, does the following:

Funding Your Human Resistance Cell

Join the Undead Institute Facebook group and get answers. https://www.facebook.com/groups/undeadinstitutehelpforum

Got Questions?

John is a storyteller with design and development skills. By day he designs and builds websites and mobile apps, by night he spins sci-fi stories at StoryLab ( https://storylab.us ) and counts his words carefully at https://8wordstories.com . He's a pineapple in disguise https://pineapplecomics.com and (as you know) tries to make learning web development fun by helping you kill zombies https://undead.institute . He's been lucky enough to collect a wife and five kids along with six cats, four dogs, and a small army of fish. If he remembers to wear pants, it’s been a good day.

JavaScript Monetization API

Details

Description

Creator

John Rhea

Content

Reviews

Frequently Asked Questions

JavaScript Monetization API