Hi Folks 👍 👏 👋, Below is my Grant For The Web Hackathon submission.
Web Monetization API is a win for all Bloggers or Content Creators. You get paid for writing. 😄
FYI, DEV is also now Web Monetized.
Let's start with some introduction on Web Monetization API ...
The Idea
Creators - Get paid from Users for the content they share on the Web. Example for Creator : dev.to
User - Pays to Creators and in return gets a better experience, for example by removing advertisements or by unlocking additional or premium content. Example for User : You a member of dev.to
Its a win win for both Creators and Users. Creators get paid. Users get better experience by unlocking premium content.
The Tech Solution
All this is made possible with a new Web API developed at W3C, the Web Monetization API.
This API is intended to be implemented natively in browsers but is already available today via a Web extension for popular desktop browsers and Puma Browser on mobile.
How this works ?
Creators - Sets up Web Monetization in their websites like blog, news etc.
User - Sets up a account with a Web Monetization provider.
What should Creators do ?
Creators To get benefits of Web Monetization, they should implement it in their websites as follows:
1. Set up a “wallet” for receiving payments. - A few options for wallets that can receive payments from Users.
2. Get your wallet’s “payment pointer URL”
3. Add a special meta tag to your page with your payment pointer URL like below:
<html>
<head>
<title>Web Monetized Site</title>
<meta name="monetization" content="$wallet.example.com/sloan">
</head>
</html>
What should Users do ?
Users To get benefits of Web Monetization, they should follow below steps:
1. Sets up a membership account in Coil, Coil is first Web Monetization provider for sending payments to Creators. (More provider will come soon as community grows.)
2. Install the Coil Chrome Extension to know if any Creators website is Web monetized. - (More browser options will come soon as community grows.)
3. Log in to Coil and enjoy web monetized content and features across the internet.
4. Visits a monetized Web page, their browser (if it supports Web Monetization) may send micropayments to creator of the web page.
Implemetation for GFW Hackathon
1. Sign up a account in uphold.com as wallet for receiving payments. Use the payment pointer in the web app. ( I skipped this step and used the payment pointer of dev.to). :)
2. Signed up a membership account in Coil and Apply free Promo Code.
3. Created a Blazor WebAssembly Web App for implementing Web Monetization API.
Note:
You can also Test your Web Monetization API code without Coil membership. I did this, Check testwebmonetization.com
Blazor WebAssembly Web App
Monetizor is a WebAssembly Component for a Web App made using BlazorFramework.
What is Blazor ?
Build client web apps with C#.
Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.
Blazor Component Code :
Enables Web Monetization
<WebMonetization PaymentPointer="$ilp.uphold.com/24HhrUGG7ekn" />
Sample Component Code:
@inject IJSRuntime JSRuntime
@code {
protected override async Task OnInitializedAsync()
{
await JSRuntime.InvokeVoidAsync("enableWebMonetization", PaymentPointer);
await JSRuntime.InvokeVoidAsync("startWebMonetization");
}
[Parameter]
public string PaymentPointer { get; set; }
}
My Submission Category is Foundational Technology.
Link to Code:
shaijut
/
Web-Monetization-Blazor
A Blazor WebAssembly Component for Web Monetization
Web-Monetization-Blazor
A Blazor WebAssembly Component for Web Monetization
Blazor Component:
<WebMonetization PaymentPointer="your payment Pointer URL" />
How to run the Web App ?
1. Download .NET Core 3.1 SDK
2. Clone or Download the project.
3. Open Terminal and Move to Project Directory and type dotnet run and hit enter.
Demo:
https://dev-to-uploads.s3.amazonaws.com/i/ayele5gvdtr8auc5tkl2.gif
Future Ideas:
- Add Backend to Add Articles for bloggers.
- Add more features and Dashboard to see received payments.
References:
1. https://dev.to/philnash/web-components-for-the-web-monetization-api-4ed9
2. https://dev.to/jasmin/web-monetization-in-vue-app-using-plugin-4092
3. https://getbootstrap.com/docs/4.5/examples/blog/
It was a great learning experience. Thanks to all.
Hope it helps. 😄.
Top comments (0)