Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 21, 2020 11:33 pm GMT

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 a list of pointers.
  • Supports probabilistic cycle-through a list of pointers.
  • Calculates 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 along side a set of different examples for some usage scenarios.

The following are some examples on how you could use 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>

Then in your code you can listen to the different event using

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

The provided API is Promise-like but it does not necessarily behave like it. 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.    });});

Amount API

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

Note: to use Amount API you must use one of the dynamic pointer settings methods like pointer or pluck (it's shown below)

const pointer = '$example';monetize.pointer(pointer);// Get the Raw amount sent.const amount = monetize.amount.getPointerTotal(pointer);// => output: 5258// Or get the Formatted amountconst amount = monetize.amount.getPointerTotal(pointer, true);// => output: 0.035// Get the currencyconst currency = monetize.amount.getPointerCurrency(pointer);

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(...);

Passing an object to pluck method will make it switch to probabilty 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(...);

Cycle-through

Sometimes picking a single pointer on page load isn't enough. For thing 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(...);

Using probabilistic approach

    // Signature    probabilisticCycle(pointers [, timeout])    const pointers = [      '$wallet',      '$wallet2',      '$wallet3',    ];    monetize.probabilisticCycle(pointers, 5000).then(...);

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 installed or to be executed inside an iframe.

An example for 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

VersionReleaseCoverage Statusnpm bundle sizeSoftware 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 a list of pointers.
  • Supports probabilistic cycle-through a list of pointers.
  • Calculates the total amount grouped by currency.
  • Powerful simulator that works without iframe or installed extension.

Installing Monetize.js

Using npm

npm install monetize// Using itconst monetize = require('monetize')

Using unpkg CDN:

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

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
View on GitHub

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!


Original Link: https://dev.to/mazentouati/monetize-js-event-driven-library-to-manage-and-simulate-web-monetization-16nc

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To