Replace Ads with Web Monetization

Published in

Interledger Blog

4 min readMar 23, 2018

Most people would agree that advertising-based business models are past their prime. Ads take up processing power, violate your privacy, and manipulate users.

Users are increasingly opting out by using ad-blockers. Content creators still need to make money, though, so they’re forced to use ad-blocker-blockers.

This arms-race between users and creators would be a non-issue if there were a way for users to just support creators directly.

In order to fix the web’s business model, we need a neutral way to send payments on the web. Interledger aims to provide this neutral solution, through Web Monetization.

Web Monetization is a browser API being developed by the Interledger community group, which allows a page to request streaming Interledger payments from a user.

In this tutorial, you’ll try out Web Monetization on the Interledger testnet.

Prerequisites

You should be running Moneyd on the testnet. Check out our tutorial on how to set up Moneyd.
If you already have Moneyd installed, make sure to upgrade to the latest version. Moneyd version 4 or higher is required.
Google Chrome: Our current implementation of Web Monetization makes use of a chrome browser plugin.

You’ll be using a chrome extension called Minute. Minute connects to Moneyd and exposes the window.monetize function to web pages.

Moneyd forbids connections from the browser by default, for security reasons. In order to allow the Minute extension to make payments, stop Moneyd and restart it with:

moneyd xrp:start --testnet --unsafe-allow-extensions

Replace xrp:start with your currency of preference if you aren’t using the XRP uplink.

Install the Minute extension from the web store here.

Support a Website

Because you’re connected to the testnet, you need to go to a site that accepts testnet payments. Fortunately, we’re running one for you.

Navigate to https://www.ilp-test.com. You’ll be presented with the site below:

The “Premium Photo Gallery” is an example of a Web Monetized website. You can view the source code on Github.

If you click the Minute icon in your browser, you’ll see that you’re paying a microscopic amount of XRP (or whatever currency your Moneyd is using) to the site. This money goes over Interledger, meaning it’s paid out instantly, to any currency.

Web Monetization sends money to the site every second

Sites can choose how they incentivize users to pay them. Some sites may turn off ads if their users send payment. Others, like “Premium Photo Gallery,” may offer exclusive content. The images tagged with “Paid Content” will only load if you have Web Monetization enabled.

If a website offers a good experience to its users, they’ll stay on the site longer. But if the site shows popups and ads to paid users, they’ll leave right away.

Future Web Monetization extensions may automatically pay more or less to sites depending on how well they treat their users.

Try it Yourself

Web Monetization can be used with a simple Javascript function. To show just how easy it is, you’ll make a monetized website yourself.

mkdir my-monetized-website
vim index.html # or use your editor of choice

Now write the following code into your “index.html”. We’re not running our own Interledger receiver yet, so we’ll pay to $spsp.ilp-test.com.

<html>
<body><h1>Hello World</h1>
<p id="paying" style="display:none;">Paying!</p><script>window.onload = () => {
  if (window.monetize) {
    window.monetize({
      receiver: '$spsp.ilp-test.com'
    }).then(() => {
      document.getElementById('paying').style = ''
    })
  }
}</script>
</body>
</html>

We’ll host the site with http-server. Make sure you have permissions to install node modules globally.

npm install -g http-server
http-server .

Navigate to http://localhost:8080. When the page loads, the window.monetize call should succeed, and the “Paying!” text will appear.

Now check the Minute extension again. You’ll see that your browser is sending some money every second, just like on the Premium Photo Gallery.

Congratulations! You’ve just created a monetized website!

Going Further with Web Monetization

Try changing the receiver from $spsp.ilp-test.com to your own receiver. You can see how to run one in our SPSP tutorial.
The “Koa Web Monetization” module lets you build sites that offer exclusive paid content. You can try it out now, or stay tuned for a future tutorial.

If you build anything on Web Monetization, be sure to let us know in our Gitter!

Replace Ads with Web Monetization

Prerequisites

Support a Website

Try it Yourself

Going Further with Web Monetization

Written by Maya Sharafian