Web Monetization API Tutorial
The Web Monetization API allows websites to automatically and passively receive nanopayments from Web Monetization-enabled visitors. This tutorial will walk you through the process of integrating the Web Monetization JavaScript API into your website.
To start using Web Monetization, you need to add a payment pointer to
your website. The payment pointer an
Interledger payment address, and you can get one from
any Interledger-enabled wallet. The popular wallets are
Fynbos and GateHub. Your payment pointer
will look something like this:
https://ilp.dev/laka
Once you have a payment pointer, add the following link tag to the head of your HTML document:
<link rel="monetization" href="https://ilp.dev/laka">
ilp.dev/laka with your actual payment
pointer from your wallet provider.
That's it! It was that simple, a single line of HTML. You've successfully added Web Monetization to your website. Now, when a visitor with a Web Monetization-enabled browser visits your site, they will automatically stream payments to your payment pointer.
The Web Monetization API emits a
monetization event you can listen
for, with the following properties:
amountSent returns an object with
amount (value) and currency code
(currency) of the Web Monetization
payment sent to the page.
incomingPayment returns the URL
that represents the incoming payment at the Web Monetization
receiver.
paymentPointer returns the URL
representing the payment endpoint used by the incoming Web
Monetization payment.
The monetization event fires when a
Web Monetization agent successfully creates an outgoing payment
request at the Web Monetization provider. There’s no guarantee that
any payments will follow or, if they do, how often or how large the
payments will be. By listening for
monetization events, you can use the
returned details to verify the receipt of a payment. You can then
choose to have the page programmatically respond to successful
payments. For example, you could remove ads or provide access to
exclusive content.
One of the most common use cases for Web Monetization is to provide
exclusive content to paying visitors. You can use the
monetization event to check if a
visitor has paid and then show them premium content. Here's an example
of how you might do this:
>
<head>
<!-- this should be set to your own wallet address
-->
<link rel="monetization" href="https://wallet.example.com/alice" />
<style>
.hidden {
display: none;
}
</style>
<script>
const link = document.querySelector('link[rel="monetization"]')
if (link.relList.supports('monetization')) {
link.addEventListener('monetization', (ev) => {
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>
coming really soon!