Replace Ads with Web Monetization

Ben Sharafian
Mar 23, 2018 · 4 min read

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’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:

Image for post
A Web Monetization enabled site

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.

Image for post
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.

Image for post

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.

Image for post

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!

Interledger Blog

Articles and tutorials from the Interledger community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store