loading...
Cover image for An exclusive content Web Component for the Web Monetization API

An exclusive content Web Component for the Web Monetization API

philnash profile image Phil Nash ・2 min read

Web Monetization Components (2 Part Series)

1) Web Components for the Web Monetization API 2) An exclusive content Web Component for the Web Monetization API

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:

GitHub logo philnash / web-monetization-components

A collection of web components you can use on your web monetized websites.

<💰> Web Monetization Components </💰>

A collection of web components you can use on your web monetized websites.

Currently available:

  • <wm-ad-hider> - a component that hides ads if it determines the user is sending payments via web monetization
  • <wm-exclusive-content> - a component that shows the child content if it determines the user is sending payments via web monetization

Ideas

  • <wm-counter> - a component that shows how much you have made from the current visitor

LICENSE

MIT (c) 2020 Phil Nash

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.

Web Monetization Components (2 Part Series)

1) Web Components for the Web Monetization API 2) An exclusive content Web Component for the Web Monetization API

Posted on May 24 by:

philnash profile

Phil Nash

@philnash

Developer evangelist for Twilio and Authy. I write JavaScript and Ruby. Probably listening to ska punk right now. console.log('🍻');

Discussion

markdown guide
 

I'm completely new to this, so please forgive the noob question.

It looks like the monetized content is sent in the initial request, but it just remains hidden until the browser sends payment. I suppose that could work in some cases, but how would you go about sending the monetized content only after verification? Is there a mechanism to send some kind of token to the server for server side checks?

 
 

Ha, I checked that same page, and scanned the content but missed the bit about the server... even though it was staring me right in the face.

Thanks, this is a very exciting API, and if successful its effects will ripple on the web for a long time.

I agree, I'm pretty excited by what this might be able to unlock for creators on the web!

I look forward to getting the examples of server side verification though. It will make this a bit more trustworthy!

Definitely follow @sharafian as he explores more here including expanding server-side verification...

Followed! Will be great to see some docs on it soon.

 

Super cool! I've done a similar project for my entry - it's a web component for revenue sharing!

Would it be okay if I also linked to your repo in my repo's README to direct people to other Web Monetization components (my repo only includes rev-share)?