Monetizor  - A Blazor WebAssembly Component for Web Monetization
Tags: gftwhackathon, dotnet, showdev, webdev
Published: 2020-06-14 23:42:50

Hi Folks :+1: :clap: :wave:,  Below is my [Grant For The Web Hackathon](https://dev.to/devteam/announcing-the-grant-for-the-web-hackathon-on-dev-3kd1) submission. 

**Web Monetization API is a win for all Bloggers or Content Creators. You get paid for writing.** :smile:

FYI, [DEV is also now Web Monetized.](https://dev.to/devteam/dev-is-now-web-monetized-21db)

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](https://webmonetization.org/docs/ilp-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](https://help.coil.com/using-coil/coil-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](https://uphold.com/signup) 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](https://testwebmonetization.com/)

**Blazor WebAssembly Web App**

`Monetizor` is a WebAssembly Component for a Web App made using `Blazor`Framework.

What is [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/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:**

{% github https://github.com/shaijut/Web-Monetization-Blazor %}

**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. :smile:.