Web Monetization lets you count exactly how much you made from a given visitor. The amount updates in real-time as more micropayments come in. Like any animated effect it should be used sparingly, but it can be a cool way to show your visitors exactly how much they're supporting you!
This example shows you how to use the
monetizationprogress event to count how much you've made off of micropayments from a given visitor.
How does it work?
If the visitor is web monetized (
document.monetization is defined), we're
details about the micropayments that occur.
This is different from the exclusive content and
remove ads examples, where we bound
monetizationstart fires when Web Monetization initializes.
monetizationprogress fires every time there's a micropayment from the Web
Monetization provider to the site.
There's some attributes of the micropayments that don't change, like currency details. We set these currency details on the very first micropayment.
ev.detail.assetCode is a three-letter code that describes the currency of the micropayment, like
The asset code describes the asset the Web Monetization receiver is denominating their incoming payments in. This often matches the currency your wallet account uses, but not always.
The asset code will stay the same for a given payment pointer (your wallet provider should warn you if they change it). It is not affected by the currency that the Web Monetization provider uses.
ev.detail.assetScale defines how small the units of amount will be on this payment pointer. A bigger scale means smaller units. If your scale is 2 and your asset code is USD, then it means you need 100 (
10 ** 2) units to get one dollar.
The amount in
ev.detail.amount is an integer, which we add to our total.
Finally, we update the text on the page with our new total. Our total is an
integer with the total number of indivisible units. We want it to be a more
readable decimal number, though, so we apply the scale to format it. This
formatted version of the amount gets written to the
total span on the page.
This example simulates showing the amount being streamed from a web monetized visitor. The example doesn't require you to have Web Monetization enabled in your browser. No real payments are occurring.
Click the View as Web Monetized/non-Web Monetized visitor button to toggle your monetization state.
If you see the source files instead of the example, click View App in the bottom right.