Coil Developers - Web monetize your site with open technology

Get started

Create your Coil account

Set up and link an external digital wallet

Set up a digital wallet with Uphold or Gatehub.
Get your payment pointer from your wallet provider and add it to your Coil account.

Monetize your content

Add your meta tag into the <head> section of your website. You can find your meta tag in Settings > Monetize Content

<meta name="monetization" content="$your.payment.pointer.address/xxx">

Offer exclusive features for Coil Members (optional)

Now that your content is monetized you can trigger events based on whether money is streaming or not. Check out the example below.

How it works

Web Monetization allows websites to request payment from a user, via the browser

Image showing user to browser to website

The current web standard proposal incorporates

Declarative <meta> tag

for the website to tell the user agent (i.e. browser or a browser extension) how to pay it

Payment pointer

that specifies where to send the payment

Javascript API

for the user agent to tell the website when (and how much) it has paid

This means that the websites can react to payments in real time by doing things like disabling ads, displaying a thank-you message, or unlocking bonus content.

The payments are done via

Interledger is a payment messaging protocol for making payments of any size (and, significantly, supports “micropayments” of fractions of cents) that can be aggregated and settled over existing payment networks (which include financial institutions, Visa/Mastercard, etc.). Web Monetization providers and receivers use the Interledger protocol to exchange payments. Learn more »

Example of hiding content

See on Glitch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<head>

<meta name="monetization" content="$wallet.example.com/alice">

<style>
.hidden {
display: none;
}
</style>

<script>
if (document.monetization) {
document.monetization.addEventListener('monetizationstart', () => {
document.getElementById('exclusive').classList.remove('hidden')
})
}
</script>
</head>

<body>
<p>
Content will appear below here if you are Web monetized.
</p>
<hr />
<div id="exclusive" class="hidden">
Here's some exclusive content!
</div>
</body>

The user agent is looking for the Web Monetization meta tag in the head of the website.

Using JavaScript, a developer can then access the global monetization object on the DOM to track incoming payment streams/events and react to these (by showing/hiding ads, etc.).

The browser exposes the document.monetization DOM object that implements EventTarget and has a read-only state property. The object allows you to track Web Monetization events and see whether the user visiting your page is web monetized and if so, show them exclusive content.

Web Monetization sequence

What happens behind the scenes when a user navigates to a site that includes a Web Monetization <meta> tag?

Start session

The browser (user agent) parses the tag to determine where to send payments and calculates the appropriate rate of payment.
The browser fetches a unique destination address and shared secret for the session from the Web Monetization receiver.

Stream payments

The browser asks the user's Web Monetization provider to stream payments.
The Web Monetization provider sends the payment to the receiver and then notifies the browser of successful payment.
The browser, in turn, dispatches an event that informs the website of the payment.

Validate Payments (optional)

If the site's backend system is enabled to process Web Monetization Receipts then the browser will include receipts in the events that it dispatches to the page. The site can then submit those receipts to its backend to securely validate that payment occurred.

More detailed information is available in the Web Monetization explainer on webmonetization.org.