Last week I started work on a series of web components that will make working with the Web Monetization API easier for developers and site owners. The first component to be released was the <wm-ad-hider> which hides ads once payment via Web Monetization is detected.

Today I released the first version of my second component: <wm-exclusive-content>. This is a component that you wrap around content that you want to hold back until you are receiving payment via the web monetization API.

The component is based off the simple example of the exclusive content example on webmonetization.org, but it makes it as easy as adding a script to your page:

<script src="https://unpkg.com/web-monetization-exclusive-content@0.2.0/dist/wm-exclusive-content.min.js"></script>

And then wrapping your exclusive content in the element and a <template> element:

<wm-exclusive-content>
  <template>
    <!-- Your exclusive content goes here -->
  </template>
</wm-exclusive-content>

When Web Monetization is detected and payments are being sent, your exclusive content will appear.

You can use this component to display anything from that paid-for content that you want for premium users to a thank you for supporting your site and your work.

Check out the code

You can see the code for both the <wm-exclusive-content> and <wm-ad-hider> components on GitHub here:

To do

The Web Monetization site includes a more complete example of this idea. This web component will work towards supporting the features displayed in the example, including an optional call to action, and a loading message while waiting for payments to start streaming.

This is also just the second of a potential suite of components. If you have ideas for other components, please raise an issue on the repo or drop a comment here.