DEV Community

Cover image for Monetize.js: Event-driven library to manage and simulate Web Monetization
Mazen Touati
Mazen Touati

Posted on

Monetize.js: Event-driven library to manage and simulate Web Monetization

My submission for Grant For The Web Hackathon

What I built

An event driven library that serves as a wrapper around Web Monetization API. Also, a monetization simulator has been built to support the library and make testing the monetization process extremely easy.

Features

  • Flexible pointers management (Static and Dynamic).
  • Promise-like syntax to watch events.
  • Customizable cycle-through list of pointers.
  • Support probabilistic cycle-through list of pointers.
  • Calculate the total amount grouped by currency.
  • Powerful simulator that works without iframe or installed extension.

Submission Category:

Foundational Technology

Demo

I've prepared a detailed README file on how to use the library alongside a set of handy examples for some common scenarios.

The following is a selection of some features provided by the library.

Watcher API

You can simply start using static mode by manually adding the payment pointer to the head tag:

<head>
...
<meta
    name="monetization"
    content="$wallet.example.com/alice"
>
...
</head>
Enter fullscreen mode Exit fullscreen mode

Then in your code you can listen to different events using

monetize.when('start').then((event) => {
    // Your event listener logic here.
});

monetize.when('progress').then((event) => {
    // Your event listener logic here.
});
Enter fullscreen mode Exit fullscreen mode

The provided API is Promise-like but it doesn't necessarily behave like a Promise. For instance then here will be called as long as the event is fired, unlike Promises.

Use a dynamic pointer

By default, monetize.js will auto-detect the pointer already added to the page. Additionally, it provides a set of handy methods to work with dynamic pointers.

const p = '$example/bob';

monetize.pointer(p).then((watcher) => {
    // monetizationstart event has been fired.

    watcher.when('progress').then((event) => {
        // Your event listener logic.
    });
});
Enter fullscreen mode Exit fullscreen mode

Amount API

The following is a basic example on how to work with the total streamed amount and currency for a given pointer.

Note: to use Amount API you must use one of the dynamic pointer methods like pointer or pluck etc.

const pointer = '$example';

monetize.pointer(pointer);

// Get the Raw amount sent.
const amount = monetize.amount.getPointerTotal(pointer);
// => output: 5258

// Or get the Formatted amount
const amount = monetize.amount.getPointerTotal(pointer, true);
// => output: 0.035

// Get the currency
const currency = monetize.amount.getPointerCurrency(pointer);
Enter fullscreen mode Exit fullscreen mode

Select pointer from list

You can randomly select a pointer from a given Array by calling the pluck method.

const pointers = [
    '$alice.example',
    '$connie.example',
    '$bob.example'
];

// Randomly pick a pointer.
monetize.pluck(pointers).then(...);

Enter fullscreen mode Exit fullscreen mode

Passing an object to pluck method will make it switch to probability based mode.

const pointers = {
  '$alice.example': 0.6,
  '$bob.example': 0.05,
  '$connie.example': 0.30,
};

// Randomly pick a pointer based on it's probability.
monetize.pluck(pointers).then(...);
Enter fullscreen mode Exit fullscreen mode

Cycle-through

Sometimes picking a single pointer on page load isn't enough. For this case, you may consider using cycle and probabilisticCycle to cycle through a list of pointers for a given timeout.

    // Signature
    cycle(pointers [, timeout [, callback]])

    const pointers = [
      '$wallet',
      '$wallet2',
      '$wallet3',
    ];

    monetize.cycle(pointers, 5000).then(...);
Enter fullscreen mode Exit fullscreen mode

Using probabilistic approach

    // Signature
    probabilisticCycle(pointers [, timeout])

    const pointers = [
      '$wallet',
      '$wallet2',
      '$wallet3',
    ];

    monetize.probabilisticCycle(pointers, 5000).then(...);
Enter fullscreen mode Exit fullscreen mode

This example is available in the examples directory.

Cycle through example

Simulator

Beside the core library, a powerful Web Monetization simulator is shipped. It does not require any extension or to be executed inside an iframe.

An example for the simulator in action.

Simulator example

More details and documentation can be found in the repository.

Link to Code

Library code is hosted on Github with detailed description on how to setup and use.

GitHub logo sunchayn / monetize.js

An event-driven library to manage and simulate Web Monetization.

Monetize.js

Version Release Coverage Status npm bundle size Software License

Monetize.js is an Event-driven library that serves as a wrapper and simulator for Web Monetization API.

Features

  • Flexible pointers management (Static and Dynamic).
  • Promise-like syntax to watch events.
  • Customizable cycle-through list of pointers.
  • Support probabilistic cycle-through list of pointers.
  • Calculate the total amount grouped by currency.
  • Powerful simulator that works without iframe or installed extension.

Installing Monetize.js

Using npm

npm install monetize
// Using it
const monetize = require('monetize')

Using unpkg CDN:

<script src="https://unpkg.com/monetize@latest/dist/monetize.js"></script>
Enter fullscreen mode Exit fullscreen mode

Examples

Multiple examples has been created using monetize.js you can find them in this examples folder.

Monetize.js API

As soon as you import Monetize.js it will start observing the head tag to see if there's a pointer to pick.

Watching Monetization events

You can simply start using static mode by manually adding the payment pointer to the head tag:

<head>
<meta
    name="
Enter fullscreen mode Exit fullscreen mode

Additional Resources/Info

I've created a glitch project that hosts some example for the library.


Thank you for passing by, feel free to leave your feedback or suggestion. Good luck everyone!

Top comments (4)

Collapse
 
ben profile image
Ben Halpern

Looks really slick

Collapse
 
elliot profile image
Elliot

Sweet work @mazentouati ! I really like the examples. They not only show off your framework, but also illustrate how Web Monetization works!

Suggestion: I wish your embedded glitch example pages had a back button leading to the list of examples so I could try them all out inside the embed!

Collapse
 
mazentouati profile image
Mazen Touati

Thanks Elliot, I'm glad it helps. You're right about the embed button, I've added it now.

Collapse
 
pvcodes profile image
Pranjal Verma

Hey guys, I have been working on my very first APIs project and in that project I'm making a "QUIZ APP", where from an API. I have been taking 10 question and giving them multiple choices and at end they will be getting scored. I'm using NODE.JS, EXPRESS, REQUEST, EJS for the app.

The problem comes here when i get a string from API. I change it to an object using JSON.parse() and sending it to EJS files and then displayed. but when their are symbols in question like ", ' , and more they are displayed as &139; , " like that.

                      HOW DO I FIX THAT.