Add a streaming payments counter
Web Monetization allows you to know exactly how much a web monetized visitor has sent to you. In cases where a web monetized visitor has chosen to pay you in time-based increments (such as per second or per minute), a streaming payments counter can be a helpful tool to show your visitor how much they’ve sent. The amount updates in real time as more payments come in during the session.
The example below illustrates how to use the
monetization event to show a web monetized visitor how much they’ve sent you during their current browsing session.
How it works
First, we’ll bind the
monetization event if the visitor is web monetized (
window.MonetizationEvent is defined).
monetization event contains details about the payments that occur. The
amountSent attribute of the event returns the amount (
value) and currency code of the sent payment. A currency code is a three-letter code, like USD, EUR, or GBP.
currency is set on the first payment and doesn’t change. Remember, it represents the sent payment’s currency, which may be different from the currency you receive (depending on how your receiving account is set up with your WM receiver).
The amount in
value is an integer, which we add to our total.
Finally, we update the text on the page with the new total. We want the total to be in a readable format, so we convert the number to a string and round it to a specified number of decimals, which is
9 in this example. This formatted version of the amount gets written to the
total span on the page.
This example simulates showing a visitor how much they are sending you based off how long they remain on your web monetized page.
The example doesn’t require you to have Web Monetization enabled in your browser and no real payments are occurring.
Click View as Web Monetized/non-Web Monetized visitor to toggle your monetization state. If source files appear instead of the example, click View App in the bottom-right corner.