Web Monetization

Labs
15

Hi @salis @cjeller1592 in case you’re interested, I’ve just posted a game development class on my Write.as site that’s only accessible to users with Web Monetization enabled (though I don’t currently check clients against a server, so it would be feasible to trick my code pretty easily).

The Web Monetized class: https://innkeepergames.com/getting-started-in-game-development-develop-strong-video-game-ideas

I’m planning on creating more tutorials and classes accessible via Web Monetization on Write.as.

My code is super messy and based on that tutorial, but I’m happy to share it:
JS:

if (document.getElementById('monetized')) {
  if (document.monetization) {
      document.getElementById('not-monetized').classList.add('hidden');
      document.getElementById('loading').classList.remove('hidden');
      document.monetization.addEventListener('monetizationstart', () => {
          document.getElementById('monetized').classList.remove('hidden');
          document.getElementById('loading').classList.add('hidden');
      })
  }
}

HTML:

<div id="not-monetized"><div id="lock">🔒</div>Please enable Web Monetization (using <a href="https://coil.com/">Coil</a> or another provider) to view this exclusive content. Thanks for supporting my work!</div>

<div id="loading" class="hidden">Loading your exclusive content. If this step is taking too long, ensure that your Web Monetization provider is active!</div>

<div id="monetized" class="hidden">Success! Thank you for your support. Feel free to reach out with any questions.</div>

I also added some CSS to make it look a little nicer, including a free loader animation.

3 Likes