awesome-awesomeness/html/webmonetization.html

<p><img src="assets/wm_icon_animated.svg" alt="Logo Web Monetization" align="right" width="120px" /></p>
<h1 id="awesome-web-monetization-awesome">Awesome Web Monetization <a
href="https://awesome.re"><img src="https://awesome.re/badge-flat2.svg"
alt="Awesome" /></a></h1>
<blockquote>
<p>Awesome stuffs about Web Monetization. Learn more, check modules and
others tools.</p>
</blockquote>
<p><strong>Web Monetization</strong> is a web service that allows you to
send money directly in your browser. This is a JavaScript browser API
that allows the creation of a payment stream from the user agent to the
website</p>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#about-web-monetization">About Web Monetization</a></li>
<li><a href="#how-to-start-monetize-my-website">How to start monetize my
website</a></li>
<li><a href="#resources">Resources</a>
<ul>
<li><a href="#packages">Packages</a></li>
<li><a href="#tutorials">Tutorials</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#newsletters">Newsletters</a></li>
<li><a href="#tools">Tools</a></li>
<li><a href="#community">Community</a></li>
</ul></li>
<li><a href="#contribute">Contribute</a></li>
<li><a href="#donate">Donate</a></li>
</ul>
<h2 id="about-web-monetization">About Web Monetization</h2>
<ul>
<li><a href="https://webmonetization.org/">Webmonetization.org</a></li>
<li><a href="https://webmonetization.org/docs/">Documentation</a></li>
<li><a
href="https://webmonetization.org/docs/intro/sending-payments/">How Web
Monetization work for paying payments</a></li>
<li><a
href="https://webmonetization.org/docs/intro/receiving-payments/">How
Web Monetization work for receiving payments</a></li>
<li><a
href="https://webmonetization.org/specification/">Specifications</a></li>
<li><a href="https://forum.interledger.org/">ILP Forum (read
only)</a></li>
<li><a href="https://www.grantfortheweb.org/">Grant For The Web</a></li>
</ul>
<hr />
<ul>
<li><a href="https://interledger.org/">Interledger : Open protocol suite
for sending payments across different ledgers</a></li>
</ul>
<h2 id="how-to-start-monetize-my-website">How to start monetize my
website</h2>
<p>If you would like to monetize your content, you must have a Wallet
and Provider account. See below the platforms that allow you to use
them.</p>
<details>
<summary>
More details about Wallet and Provider account
</summary>
<p>
<hr />
<table>
<colgroup>
<col style="width: 4%" />
<col style="width: 29%" />
<col style="width: 64%" />
<col style="width: 1%" />
</colgroup>
<thead>
<tr class="header">
<th style="text-align: center;"><strong>Wallets</strong></th>
<th style="text-align: center;"></th>
<th style="text-align: center;"></th>
<th style="text-align: center;"></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: center;">Name</td>
<td style="text-align: center;"><a href="https://gatehub.net/"><img
src="https://webmonetization.org/img/logo-wallet-gatehub.svg"
alt="GateHub" /></a></td>
<td style="text-align: center;"><a
href="https://github.com/thomasbnt/awesome-web-monetization/issues/new?assignees=thomasbnt&amp;labels=Wallet%2C+%E2%86%94+WM+repository&amp;template=new-wallet.md&amp;title=%5BWa%5D">New
Wallet ?<br>Create a issue !</a></td>
<td style="text-align: center;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">Fees</td>
<td style="text-align: center;">SEPA: 1.00 EUR &lt; 50,000 EUR<br>Wire:
$15 min ($150 max)</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr class="header">
<th><strong>Payments</strong></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Name</td>
<td>Empty.</td>
</tr>
</tbody>
</table>
<hr />
</p>
</details>
<p>On your webpage, integrate your <code>monetization</code> tag on
meta</p>
<div class="sourceCode" id="cb1"><pre
class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">link</span><span class="ot"> rel</span><span class="op">=</span><span class="st">&quot;monetization&quot;</span><span class="ot"> href</span><span class="op">=</span><span class="st">&quot;https://ilp.example.com/alice&quot;</span><span class="dt">&gt;</span></span></code></pre></div>
<p>and detect if <code>monetization</code> is possible, then work</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="cf">if</span> (<span class="bu">document</span><span class="op">.</span><span class="at">monetization</span>) {</span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>  <span class="bu">document</span><span class="op">.</span><span class="at">monetization</span><span class="op">.</span><span class="fu">addEventListener</span>(<span class="st">&quot;monetizationstart&quot;</span><span class="op">,</span> () <span class="kw">=&gt;</span> {</span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a>    <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(</span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>      <span class="st">&quot;🎉 Awesome ! You use Web Monetization.</span><span class="sc">\n</span><span class="st">More information https://webmonetization.org&quot;</span><span class="op">,</span></span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a>    )<span class="op">;</span></span>
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a>  })<span class="op">;</span></span>
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<h2 id="resources">Resources</h2>
<h3 id="packages">Packages</h3>
<p><em>Any packages/modules and plugins</em></p>
<ul>
<li><a href="https://github.com/sunchayn/monetize.js">monetize.js</a> -
An event-driven library to manage and simulate Web Monetization. <img
src="assets/small_icons/javascript.png" /></li>
<li><a href="https://github.com/dacioromero/types-wm">types-wm</a> -
TypeScript definitions for Web Monetization <img
src="assets/small_icons/typescript.png" /></li>
<li><a
href="https://github.com/CDDelta/ngx-monetization">ngx-monetization
(archived)</a> - Web Monetization API for Angular. <img
src="assets/small_icons/angular.png" /></li>
<li><a
href="https://github.com/dacioromero/react-hook-wm">react-hook-wm</a> -
React hooks for integrating with Web Monetization. <img
src="assets/small_icons/react.png" /></li>
<li><a
href="https://github.com/guidovizoso/react-monetize">react-monetize</a>
- Helpers and hooks to speed up your integration with Web Monetization
API. <img src="assets/small_icons/react.png" /></li>
<li><a
href="https://github.com/ISNIT0/ep_monetization">ep_monetization</a> -
Plugin for applying payment pointer meta tag to Etherpad site. <img
src="assets/small_icons/javascript.png" /></li>
<li><a
href="https://wordpress.org/plugins/wp-connect-coil/">wp-connect-coil</a>
- Plugin for applying Coil payment pointer meta tag to WordPress site.
<img src="assets/small_icons/wordpress.png" /></li>
<li><a
href="https://wordpress.org/plugins/widget-xrptipbot/">xrptipbot-wordpress-widget</a>
- WordPress Widget based on XRPTIPBOT embed code to donate content
creators. <img src="assets/small_icons/wordpress.png" /></li>
<li><a
href="https://github.com/DanCanetti/eleventy-plugin-monetization">eleventy-plugin-monetization</a>
- An Eleventy plugin to monetize posts and site content. <img
src="assets/small_icons/11ty.png" /></li>
<li><a
href="https://github.com/philnash/web-monetization-components">web-monetization-components</a>
- A collection of web components you can use on your web monetized
websites. <img src="assets/small_icons/javascript.png" /></li>
<li><a href="https://github.com/kewbish/revshare">revshare</a> - A JS
library for revenue sharing. <img
src="assets/small_icons/javascript.png" /></li>
<li><a
href="https://github.com/tcdowney/web-monetization-proxy">web-monetization-proxy</a>
- Simple Go proxy for injecting Web Monetization meta tags. <img
src="assets/small_icons/go.png" /></li>
<li><a
href="https://github.com/Sergix/gridsome-plugin-monetization">gridsome-plugin-monetization</a>
- Web monetization for Gridsome. <img
src="assets/small_icons/gridsome.png" /></li>
<li><a
href="https://github.com/spekulatius/vuepress-plugin-web-monetization">vuepress-plugin-web-monetization</a>
- Adds the web-monetization metatag to your VuePress website. <img
src="assets/small_icons/vuejs.png" /></li>
<li><a
href="https://github.com/philnash/jekyll-web_monetization">jekyll-web_monetization</a>
- A Jekyll plugin to add Web MonetizationAPI payment pointers to your
site. <img src="assets/small_icons/jekyll.png" /></li>
<li><a href="https://github.com/KNawm/monetization">Monetization</a> - A
wrapper around the Web Monetization API to monetize apps. <img
src="assets/small_icons/dart.png" /></li>
<li><a
href="https://github.com/uchibeke/react-webmonetization-meta">react-webmonetization-meta</a>
- A Web Monetization meta tag manager for React. <img
src="assets/small_icons/react.png" /></li>
<li><a
href="https://github.com/Jasmin2895/web-monetization-electron-app">web-monetization-electron-app</a>
- Project demonstrate basic setup to enable web monetization in Electron
App. <img src="assets/small_icons/electron.png" /></li>
<li><a
href="https://github.com/Jasmin2895/web-monetized-video">web-monetized-video</a>
- A web component with has play and pay policy and charges you for the
amount of video watched. <img
src="assets/small_icons/javascript.png" /></li>
<li><a
href="https://github.com/immers-space/web-monetization-polyfill/">web-monetization-polyfill</a>
- Ensure the JavaScript Web Monetization API is available, even in
environments with Content Security Policies enabled. <img
src="assets/small_icons/javascript.png" /></li>
<li><a
href="https://www.npmjs.com/package/web-monetization-video-ads">web-monetization-video-ads</a>
- Linking Web Monetization with video advertising to allow a freemium
business model to be implemented for Web Monetization. <img
src="assets/small_icons/javascript.png" /></li>
<li><a
href="https://www.npmjs.com/package/web-monetization-revenue-share">web-monetization-revenue-share</a>
- Automated redistribution of funds to a community via smart contracts.
<img src="assets/small_icons/javascript.png" /></li>
<li><a
href="https://github.com/proyecto26/awesome-jsgames">awesome-jsgames</a>
- A curated list of awesome JavaScript Games <img
src="assets/small_icons/javascript.png" /></li>
<li><a
href="https://github.com/oofdere/mediadisclosures">mediadisclosures</a>
- An open-source, always evolving, universal content rating system. <img
src="assets/small_icons/javascript.png" /></li>
<li><a
href="https://github.com/peter279k/web-monetization-demo">web-monetization-demo</a>
- This is a Web Monetization Demo <img
src="assets/small_icons/javascript.png" /></li>
<li><a href="https://github.com/dfoderick/money-chat">money-chat</a> -
Web Monetization chat app <img
src="assets/small_icons/javascript.png" /></li>
</ul>
<h3 id="tutorials">Tutorials</h3>
<ul>
<li><a
href="https://webmonetization.org/docs/guides/monetize-page/">Getting
started</a> - Official documents from webmonetization.org.</li>
<li><a
href="https://webmonetization.org/docs/guides/provide-exclusive-content/">Exclusive
content</a> - Put exclusive content on your website.</li>
<li><a href="https://esse-dev.github.io/a-web-monetization-story/">‘A
Web Monetization Story’</a> - An interactive, story-based Web
Monetization tutorial for online creators.</li>
<li><a
href="https://dev.to/hacksultan/web-monetization-like-i-m-5-1418">Web
Monetization like I’m 5</a> - Monetizing the web!</li>
</ul>
<h3 id="articles">Articles</h3>
<ul>
<li><a
href="https://dev.to/godwinagedah/monetizing-content-in-view-paying-for-what-you-see-462a">Monetizing
Content in View</a> - Paying for what you see.</li>
<li><a
href="https://dev.to/philnash/web-components-for-the-web-monetization-api-4ed9">Web
Components</a> - For the Web Monetization API (serie).</li>
</ul>
<h3 id="newsletters">Newsletters</h3>
<ul>
<li><a href="https://www.grantfortheweb.org/signup">Newsletter of
grantfortheweb.org</a> - Sign up for email updates.</li>
</ul>
<h3 id="tools">Tools</h3>
<ul>
<li><p><a
href="https://webmonetization.org/prob-revshare/">Probabilistic Revshare
Generator - Web Monetization</a> - Probabilistic revenue sharing
(revshare) is one way to share a portion of a web monetized pages
earnings between multiple payment pointers.</p>
<blockquote>
<p>Use this tool to define a list of payment pointers and their weights.
Then, add the generated monetization link element to your site. The link
will contain a unique URL hosted on
https://webmonetization.org/api/revshare/pay/. If you’d prefer to not
use a hosted URL, you can set up revshare by adding a script to your
site.</p>
</blockquote></li>
<li><p><a href="https://github.com/jkga/is-web-monetized">Is web
monetized</a> - A very simple tool for checking if Web Monetization is
enabled.</p>
<blockquote>
<div class="sourceCode" id="cb3"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="ex">npm</span> install is-web-monetized <span class="at">-g</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="ex">monetized</span> example.com</span></code></pre></div>
<p>You can also test your website with the dependency.</p>
</blockquote></li>
<li><p><a href="https://github.com/thomasbnt/paytrackr">Paytrackr</a> -
(Forked from <a
href="https://github.com/wobsoriano">wobsoriano/paytrackr</a>) - Track
and manage your micropayments into one place.</p>
<blockquote>
<p>PayTrackr is the easiest and safest way to track and manage your
micropayments to web monetized websites, having a web monetization
provider membership.</p>
</blockquote></li>
<li><p><a href="https://github.com/esse-dev/akita">Akita</a> - A browser
extension that gives you insight into your involvement with Web
Monetization.</p>
<blockquote>
<p>Akita presents your top visited monetized sites, how much time you’re
spending on them, and how much you’re contributing (or could contribute)
to them.</p>
</blockquote></li>
<li><p><a
href="https://github.com/kristianfreeman/openmonetizationwallet">Open
Monetization Wallet</a> - Tools for managing your vanity Web
Monetization wallet.</p>
<blockquote>
<p>Open Monetization Wallet (OMW) makes it easier to accept payments
with the Web Monetization API at scale. Some features:</p>
<ul>
<li>Custom wallet URLs: own your own “Payment Pointer”,
e.g. $wallet.signalnerve.com, instead of
$pay.stronghold.co/abcdef123</li>
<li>Change between wallets/providers with no downtime</li>
<li>Logs of incoming payment requests</li>
<li>Revenue sharing between multiple wallets, e.g. for multiple team
members</li>
<li>Infinitely scalable with serverless technology</li>
<li>Free and open-source</li>
</ul>
</blockquote></li>
</ul>
<h3 id="community">Community</h3>
<ul>
<li><a href="https://community.interledger.org/">Web Monetization
Community</a></li>
<li><a href="https://twitter.com/GrantForTheWeb"><span class="citation"
data-cites="GrantForTheWeb">@GrantForTheWeb</span> on Twitter</a></li>
<li><a href="https://dev.to/t/webmonetization">Web Monetization tag on
DEV</a></li>
</ul>
<hr />
<h2 id="contribute">Contribute</h2>
<p>Contributions welcome ! Read the <a
href="contributing.md">contribution guidelines</a> first. You can also
contribute to share this repository and Web Monetization with your
friends. 😄</p>
<p>If you want to add a new small icon, the height must be
<strong>16px</strong>. Put in <code>assets/small_icons/NAME.png</code>.
Format PNG only accepted.</p>
<blockquote>
<p><strong>Powered by Netlify</strong> ✨</p>
</blockquote>
<p>Netlify powering <a
href="https://awesomewebmonetization.netlify.app/">the website</a>.
Thanks to them! 💚</p>
<p><a href="https://netlify.com"><img
src="https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&amp;logo=netlify&amp;logoColor=white"
alt="Deploys by Netlify" /></a></p>
<h2 id="donate">Donate</h2>
<p>Feel free to help <a href="https://github.com/thomasbnt">me</a> for
the maintenance of this project ! Thanks to all <strong>Sponsors on
GitHub</strong> !</p>
<figure>
<img src="https://cdn.jsdelivr.net/gh/thomasbnt/sponsors/sponsors.svg"
alt="GitHub Sponsors" />
<figcaption aria-hidden="true">GitHub Sponsors</figcaption>
</figure>
<p><a href="https://github.com/sponsors/thomasbnt"><img
src="https://img.shields.io/badge/Sponsor%20me-%23EA54AE.svg?&amp;style=for-the-badge&amp;logo=github-sponsors&amp;logoColor=white"
alt="GitHub Sponsors" /></a> <a
href="https://www.buymeacoffee.com/thomasbnt?via=thomasbnt"><img
src="https://img.shields.io/badge/Support%20me-on%20Buy%20Me%20a%20Coffee-white?style=for-the-badge&amp;logo=buy-me-a-coffee&amp;logoColor=black&amp;labelColor=%23FFDD00"
alt="Support me on Buy Me a Coffee" /></a></p>
<p><a
href="https://github.com/thomasbnt/awesome-web-monetization">webmonetization.md
Github</a></p>