This simple site tells you if you are sending money to a content creator via the web monetization api. Something interesting will happen if you are monetizing this page. This site also contains a full demo of the Web Monetization Javascript API in action.
No monetization events have occurred on this page.
You can learn more about supporting creators with web monetization at Coil.com. Coil is a major sponsor of Grant for the Web.
The simplest implementation of web monetization is to place a <meta> tag in your HTML page like this:
<meta name="monetization"
content="$coil.xrptipbot.com/JABJLDXNSje7h_bY26_6wg"> You can get your payment pointer ($coil....) at coil.com for free.
For more complex implementations, you can review the developer docs at coil.com or continue reading for some sample code.
Here is a full demo of the Web Monetization API in action. For the best compatibility, it's written in ES5 with vanilla javascript.
For this demo to work locally, you must run it from a localhost server and not the file system.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Monetization Demo</title>
<!-- replace with your monetization id -->
<meta name="monetization" content="$coil.xrptipbot.com/JABJLDXNSje7h_bY26_6wg">
</head>
<body>
<h1>Simple Web Monetization Demo</h1>
<h2>Monetization Events</h2>
<!-- container to display monetization events -->
<pre id="container">
</pre>
<!-- error messages -->
<div id="error-no-monetization" class="error">
Note: In order to see any events here, you need to have an extension installed from a web monetization provider, like <a href="https://coil.com">coil.com</a>.
(<a href="https://chrome.google.com/webstore/detail/coil/locbifcbeldmnphbgkdigjmkbfkhbnca">chrome</a> <a href="https://addons.mozilla.org/en-US/firefox/addon/coil/">firefox</a>)
</div>
<div id="error-wrong-protocol" class="error">
Error: This demo must be <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">run from a server</a>.
</div>
<div id="error-timeout" class="error">
Warning: No monetization events occurred after six seconds. This probably indicates that you have a web monetization extension, but no active account. Get one at <a href="https://coil.com">coil.com</a>.
</div>
</body>
<script>
(function(){
var monetizationStartEventOccurred = false;
// this is some extra error detection that you probably won't need in your implementation.
if (window.location.protocol.indexOf('http') !== 0){
document.getElementById('error-wrong-protocol').style.display = 'block';
}
else if (!document.monetization){
document.getElementById('error-no-monetization').style.display = 'block';
}
else{
setTimeout(function(){
if (!monetizationStartEventOccurred){
document.getElementById('error-timeout').style.display = 'block';
}
}, 6000);
}
// check if monetization is implemented
if (document.monetization){
//monetization start event.
document.monetization.addEventListener('monetizationstart', function(event){
monetizationStartEventOccurred = true;
container.innerText = container.innerText + 'monetizationstarted: \n' +
JSON.stringify(event.detail, null, 2) + '\n\n';
console.log('monetizationstarted', event);
});
//monetization progress event.
document.monetization.addEventListener('monetizationprogress', function(event){
container.innerText = container.innerText + 'monetizationprogress: \n' +
JSON.stringify(event.detail, null, 2) + '\n\n';
console.log('monetizationprogress', event);
});
}
})();
</script>
<style>
body{
font-family:sans-serif;
}
#container{
background-color:lightgreen;
padding:10px;
}
.error{
display:none;
background-color:pink;
padding:10px;
}
</style>
</html>
Don't have a paid coil account? Here is a bookmarklet for testing.
- Make sure the Coil extension (Chrome | Firefox) is installed. You don't need to log in.
- Drag Simulate Monetization onto your bookmarks bar.
- Go to a test page.
- Click "Simulate Monetization" in your bookmarks bar.
The bookmarklet sets document.monetization.state to started, sends a monetizationstarted event, and sends monetizationprogress events every two seconds. Here is the source code:
if (document.monetization){
const randomGuid = 'c7ff7da9-8a41-4660-98a8-ca4df0176fbe';
const meta = document.querySelector('meta[name="monetization"]');
let metaContent = null;
if (meta){
metaContent = meta.getAttribute('content');
}
if (metaContent){
const resolvedEndpoint = metaContent.replace(/^\$/, 'https://');
const monetizationstartEvent = new CustomEvent('monetizationstart',{detail:{
requestId:randomGuid,
id:randomGuid,
metaContent,
resolvedEndpoint
}});
const monetizationprogressEvent = new CustomEvent('monetizationprogress', {detail:{
"amount": "200000",
"assetCode": "USD",
"assetScale": 9
}});
document.monetization.dispatchEvent(monetizationstartEvent);
document.monetization.state = 'started';
document.monetization.dispatchEvent(monetizationprogressEvent);
setInterval(() => {
document.monetization.dispatchEvent(monetizationprogressEvent);
},2000)
}
else{
alert('monetization meta tag is not correctly configured.')
}
}
else{
alert('for this bookmarklet to work, you must have the coil extension installed.')
}
Hint: if you want to change parameters, you can run the bookmarklet source code as a script snippet in Google Chrome.
If anybody can run this bookmarklet from their browser, is it an exploit?
In a way it is, but you can also independently verify that payments are made to your wallet with Web Monetization access.
I'm Rocco Balsamo and I built this site. My html5 games platform, SIMMER.io is the first one available that allows creators to add web monetization to their game via our simple UI.
You can view the source for this site (or contribute!) on Github.