Simple and composable Web Monetization advanced features with Webfunding.js (UPDATED)

Beyond streaming micropayment, Web Monetization has many advanced features like revenue share and removing ads, accessible for everyone to set up on their own websites with a bit of efforts.

However, not many would use them at the same time due to cumulative learning curve a website owner must tread in order to benefit from every single feature. After all, even removing ads with Web Monetization has its own tutorial page on official Web Monetization documentation. I have rework my library I wrote a year ago to include a simpler, composable practice of Web Monetization by chaining features of Web Monetization together in order to lower the barrier for people to adopt more complicated Web Monetization features.

🤔 How this is going to work

Take a look of this example - let's say that three people, writers and editors, working together on an article about ocean and will receive revenue share of 4:3:2 ratio before the website owner taking share 10% of Web Monetization revenue. To attract people to subscribe to Web Monetization, they want to remove ads that wrapped under <div class="ads"></div> and also give influencers way to make money from converting URL of their article into affiliate link with 15% of profit every Web Monetization subscribers they bring. Usually to make this scenario happens the developer would spend hours trying to implement the features one by one. However, with Webfunding.js, it couldn't be more simpler than a few line of codes:

install via NPM in your project folder

npm install webfunding

somewhere in your Javascript

import { WebMonetization } from "webfunding";

const monetization = new WebMonetization()
  .registerPaymentPointers([
    "$wallet.example.com/johnny#4",
    "$wallet.example.com/lynda#3",
    "$wallet.example.com/pete#2",
    "$wallet.example.com/website-owner#10%"
  ])
  .removeAdsOnStream(".ads")
  .registerDynamicRevshare("my-awesome-website", "15%")
  .start();

In example above, I'm creating a WebMonetization object that register three of WebMonetiation advanced features; .registerPaymentPointers() to set up payment pointers of creators with syntax of Webfunding.js to register revenue share between three creators and website owner based on agreed portions of the revenue. Next is .removeAdsOnStream() that will run a DOM query selector of ads class and remove it as soon as Web Monetization begins streaming. And finally, .registerDynamicRevshare(), is a feature that I created from my GftW funded project ProgNovel, which will takes URI encoded payment pointer from affiliate query string on the URL (for example https://demo.prognovel.com/novel/yashura-legacy?affiliate=%24wallet.com%2Fexample) to include the foreign payment pointer to revshare pool, allowing unknown third-party to be included as an unknown payee, useful to attract influencers--this can later be stored in some kind of persistent database (currently local via IndexedDB) so that the affiliate link can also be included for future revenue for users that the influencers brought.

All of this is chained à la JS functional programming which eventually end with a start() command, which will begin the Web Monetization stream.

Great, how can I use it on my website?

Unfortunately, this isn't available publicly (yet) to the current version of Webfunding.js. The current Webfunding.js published on NPM still use old syntax of Fundme.js (its predecessor) and only revshare feature available to try.

EDIT: This is already available to try in Webfunding.js version 0.2.6 above, although at this moment the documentation on NPM hasn't been updated to the new syntax. There will be changes and the API isn't stable right now so please don't use this for production yet.

Completing Webfunding.js and its resources (currently) isn't on my roadmap unfortunately, due to the funded GftW is my other project - but the good news is I'm already got it working on my local computer, albeit lots of rough edges need to be polished, so if anyone interested in trying let me know in the comment, maybe I can publish some early version of this. (this is already published in Webfunding.js v0.2.6, but with caveat explained above!)

Note that there's still many features of Web Monetization will come to Webfunding.js, some of them yet unexplored that might be useful to create entirely new business models for creators. For example, previously I tried to include receipt verification but later found that there's no way to implement it without having to deploy an additional backend due to CORS issue - which is something beyond the scope of a Javascript library like Webfunding (currently!). This feature might return in the future version of Webfunding.js, though... so stay tuned and follow ProgNovel for future news!

Cheers
🎉🎉🎉