freeCodeCamp Web Monetization + Interledger Protocol Course Progress Report

Project Update

freeCodeCamp has made steady progress on the development of our Web Monetization + Interledger Protocol course.

We hope to finish the course by summertime.

Progress on objectives

The following is a breakdown of our progress so far:

[x] Ideation
[x] Script written
[ ] Course overview approved
[ ] Course title approved
[ ] Script approved
[ ] Project final build approved
[ ] Filming finished
[ ] Editing Finished
[ ] Description for the YouTube Channel done
[ ] GitHub Links shared
[ ] Timestamps added
[ ] Video and supporting docs sent over to all stakeholders

And the following is a breakdown of the topics this course will cover.

Course Outline

1. Web Monetization Explainer
2. Flow Overview
3. What is the Interledger Protocol
4. What are Payment Pointers
5. Coding Tutorial (The basics)
6. Set up a web monetized wallet
7. Receiving Payments
8. Sending Payments
9. Getting started
10. JavaScript API
11. Examples:
    • Exclusive Content
    • Removing Ads
    • Micropayment counter
    • Probabilistic Revenue Sharing
    • Start/Stop Monetization
    • Receipt Verifier Service

Things we could build after the basics are covered:

Build a Web Monetization resource page using what we learnt above? https://www.grantfortheweb.org/blog/community-next

A simple website that shows ads for people without a wallet enabled (but replaces them with a "thank you" message for people who do have the wallet enabled) would be a good starting point.

Tentative Script for Course Introduction

Hi everyone on FreeCodeCamp here today, to learn about Web Monetization in theory and in practice.

So, first off, what exactly is Web Monetization? And how would you explain it to your friends?

In simple terms, Web Monetization means, that you can get money for every person that visits your website. Sounds good right? But how does it work? And who is paying for this?

These are the types of questions we will answer in this course.

By the end of this crash course, you will know what web monetization is, how to implement it onto your website to get paid for your hard work, without having to rely on ads, paywalls and the misuse of personal data, as well as how to receive payments securely, for your implementation.

We will do this with a step by step tutorial that will show a payment option for those visiting your website, or a thank you display, if they already have a wallet enabled.

My name is Ania Kubow and I am a Software Developer and Course Creator on Youtube, as well as your guide to the world of Web Monetization.

This course was made possible today by Grant For the Web, a fund that is boosting open, fair, and inclusive standards and innovation in Web Monetization.

What is Web Monetization?

As mentioned, in simple terms, Web Monetization means that you can get money for every person that visits your website.

Before I show you how to do it in a way that does not involve advertisers or monetizing user data, let’s look at all the options available first.

Uptil now, there have been several ways of gaining revenue from a website that you build.

Pay Per Click, or PPC adverts implemented onto your website,
Or Cost Per Impression advertising, also done, by implementing ads onto your website.

Both of these would involve some kind of advertisement, that is paid for usually by an advertising network, working on behalf of a company.

You have most likely seem the Pay per click advertising approach being used on google search,

A company, such as ‘XXXXXX’ (replace another company with Skin Laser Hair Removal), will pay an advertising network, such as Google Ads, to display an advertisement with hyperlinks to their website, to increase traffic, and awareness.

In this example, the company's payment will go towards making sure the company shows up at the top of the search results.

Cost Per Impression advertising works in the same way, but instead of paying for clicks, you get charged for how many people see your advert. In this situation , the service of increasing your brand awareness is being monetized.

In addition to these two forms of web monetization,

We also have:

• Banner ad types
• Affiliate programs
• And Data monetization.

Banner Ad Types include having a visual displayed on your website, that a company has directly paid for, or advertising agency or network has paid for on their behalf.

Affiliate programs usually involve you, as the website owner, receiving a commission for businesses for every time someone purchases a product or service from them, if they came from your website.

So for example, if on my website I have a link for hot tubs, and someone clicks on the link, and it takes them to amazon and they purchase a hot tub from there, I will receive a commission payment of this sale.

And then we have data monetization.

As a website owner, you can sell your user data to companies. For example, if you have a website that provides dog grooming services, you could potentially collect data on what demographics tend to buy your services the most, and at what time of year and so on. This behavioral data can be sold to advertisers to better understand their target markets, and improve their own online marketing campaigns.

Now, these are all great, but there is also a way to make money from your website, without having to reply on third party advertisers, or selling your users data.

This involves users, who appreciate your hard work and the service you offer them from your website, paying you a very small payment, so for example a fraction of a cent, for visiting your site.

This way removes any need for a middle man, and allows the user to preserve their privacy in return.

To show you this in practice, we are going to build a website. Once will a ‘free’ experience, with the understanding that the user is paying to use your site in return for being shown ads, and one with a ‘premium’ experience, in which the user has enabled web monetization, so the adverts are removed, and perhaps we can even show them some exclusive content while we are at it!

But before we get going, let’s recap what we will build.

What we will build

1. A website that allows us to collect tiny payments from the user, if they wish to view the site in exchange for an advertless experience and their user privacy
2. A website that allows the user to view it anyway, if they don't care about being advertised to our sharing their user data
3. A system to preserve user privacy. This means that we must not allow for the tracking of the user based on the payments they make, and it must not be possible to get the details of the users browsing history or anything like that.

Great!

So let’s get to it, let’s look at the Flow overview, first.

Flow Overview

So the first thing we need to know, is that for the user, who is visiting our website, to be able to use the Web monetization option, they would need to have an account with a Web Monetization Provider. This is also known as a Web Monetization Sender.

They must also have a Web Monetization Agent installed on their browser. The Web Monetization Agent is what is incharge of initiating payments from the Web Monetization Provider on the users behalf.

And the third part of the puzzle is the Web Monetization receiver. This is the part that will take the payments from the user, to view the content on your website.

The Web Monetization receiver and Web Monetization provider do not need a direct relationship. Their shared use of the Interledger network allows payments to be sent from the Web Monetization provider to the Web Monetization receiver.

Here is a super detailed look at the flow of how all of this works.

image from https://webmonetization.org/docs/explainer

So in a nutshell,

At point 1, the website, which has to make a meta tag containing a payment pointer, uses the browser to parse the tag to determine where to send payments.

At point 2, the browser uses its Internal Web Monetization agent to calculate an appropriate rate of payments to make to the site.

At point 3, the browser generates a unique session ID for this payment session.

At point 4, the browser fetches a unique destination address and shared secret for the session from the site's payment pointer URL.

At point 5, a payment receipt verifier service (operated by the site or a third party) proxies the request and sends a Receipt Secret to generate receipts and Receipt Nonce to include in those receipts to the WM Receiver.

At point 6, with the site's page still in focus, the browser begins initiating payments to the website at the calculated rate from the user's WM provider.

At point 7, the WM provider sends the payment to the WM receiver.

At point 8, the WM receiver generates and sends a receipt to the WM provider.

At point 9, the WM provider notifies the browser of successful payments.

At point 10, the browser, in turn, dispatches an event that informs the page of the payment.

And finally, at point 11, the page confirms payment by sending the receipt to the verifier service.

So now that we have covered the flow, let’s do a deep dive into two terms that Web Monetization relies on, and that is ‘Interledger’, and ‘Payment Pointers’.

What is interledger Protocol
Now, because the payments that we are dealing with are so small individually, this is a problem for us as not many payment clearing tools will work with them. This is where the Interledger Protocol comes in. The term ‘Interledger’ refers to a payment messaging protocol for making payments of any size. In the case of the payments being very tiny, it allows us to aggregate them all and settle them over existing payment networks.

The Web Monetization Providers and Web Monetization receivers use this protocol to exchange payments. They could be directly connected, or might connect via one or more intermediaries.

What are Payment Pointers

Payment pointers are a really neat way to pay an account.

In the same way an email address provides an identifier for a mailbox in the email ecosystem a payment pointer is used by an account holder to share the details of their account with a counter-party.

It is essentially a URL that allows us to find a users account.

So for example here would be my payment pointer.

$ania.wallet.example

And here is an example of how I could potentially get sent a payment.

$ania.wallet.example/.well-known/pay

Using payment pointers allows us to use account identifiers that are safe to share around, unlike credit card numbers, for example.

Our site will include a url similar to this for us to get paid, by inserting it into an appropriate meta tag.

Ok, with all that knowledge, I think it's time for us to start creating our website! So let’s do it.

Coding Tutorial (The basics)

[This section will be written next]