Web Monetization snippet

web-monetization-snippet.html

<div class="row">
            <div class="col-md-12">
                <!-- Testing Web Monetization -->
<div id="web-monetization" style="text-align:center;margin:2em;">This site is web monetization enabled. <a href="https://webmonetization.org/" rel="noopener noreferrer" style="text-decoration:underline">Learn more about Web Monetization</a>.</p></div>

<script>
    const adCode = '<p>My site is <a href="https://webmonetization.org/" rel="noopener noreferrer">web monetization</a> enabled. Please consider supporting me through <a href="https://coil.com" rel="noopener noreferrer" style="text-decoration:underline">Coil.com</a>.</p>'
    function showAds () {
      document.getElementById('web-monetization').innerHTML = adCode
    }

    function removeAds () {
      document.getElementById('web-monetization').innerHTML = '<p><strong>Thank you ❤️</strong> for your generous support using <a href="https://webmonetization.org/" rel="noopener noreferrer" style="text-decoration:underline">web monetization</a>! Welcome to the future of the web! 🤩 🤘</p>'
    }

    let hasPaid = false
    if (document.monetization) {
      document.monetization.addEventListener('monetizationstart', () => {
        hasPaid = true
        removeAds()
      })
    }

    window.addEventListener('load', () => {
      if (!document.monetization) {
        showAds()
      } else {
        setTimeout(() => {
          if (!hasPaid) {
            showAds()
          }
        }, 3000)
      }
    })
</script>
            </div>
        </div>