Skip to content
Web Monetization logo Web Monetization
GitHub

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.

Example

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.

<head>
  <!-- this should be set to your own wallet address -->
  <link rel="monetization" href="https://wallet.example.com/alice" />


  <script>
    let total = 0


    if (window.MonetizationEvent) {
      const link = document.querySelector('link[rel="monetization"]')


      link.addEventListener('monetization', (event) => {
        const {
          amountSent: { value, currency },
        } = event
        console.log(`Browser sent ${currency} ${value}.`)


        if (total === 0) {
          document.getElementById('currency').innerText = currency
        }


        total += Number(value)


        document.getElementById('total').innerText = total.toFixed(9)
      })
    }
  </script>
</head>


<body>
  <p>
    Thanks to you, I've made
    <span id="total">0.00 USD</span>
    <span id="currency"></span>
  </p>
</body>

How it works

First, we’ll bind the monetization event if the visitor is web monetized (window.MonetizationEvent is defined).

The 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.

  if (window.MonetizationEvent) {
    const link = document.querySelector('link[rel="monetization"]');


    link.addEventListener("monetization", (event) => {
      const {
      amountSent: { value, currency },
    } = event;
    console.log(`Browser sent ${currency} ${value}.`);

The 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 Web Monetization receiver).

// initialize currency on first progress event
if (total === 0) {
  document.getElementById('currency').innerText = currency
}

The amount in value is an integer, which we add to our total.

total += Number(value)

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.

document.getElementById('total').innerText = total.toFixed(9)

Interactive example

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.