loading...
Cover image for Web Monetization in Angular with ngx-monetization

Web Monetization in Angular with ngx-monetization

cddelta profile image CDDelta Updated on ・3 min read

What I built

I built an Angular library for the Web Monetization API.

Now Angular developers can use the API with the powerful RXJS observables that they are familiar with.

To get started simply run:

ng add ngx-monetization

And inject MonetizationService into your components to start working.

or simply install it via npm:

npm install ngx-monetization

Here is an example of how you can build a total paid counter (based on the official example here):

import { Component } from '@angular/core';
import {
  MonetizationService,
  MonetizationEvent,
  MonetizationProgressEvent,
} from 'ngx-monetization';
import { Observable } from 'rxjs';
import { scan, filter, startWith } from 'rxjs/operators';

export interface PaidTotal {
  amount: number;
  formattedAmount: string;
  currency: string;
}

@Component({
  selector: 'app-root',
  template: `
    <h3>Paid Total:</h3>
    <ng-container *ngIf="paidTotal$ | async as total">
      <p *ngIf="total.amount > 0">{{total.formattedAmount}} {{total.currency}}</p>
      <p *ngIf="total.amount === 0">No payment yet</p>
    </ng-container>
  `
})
export class AppComponent {
  public events$: Observable<MonetizationEvent[]>;
  public paidTotal$: Observable<PaidTotal>;

  constructor(public monetization: MonetizationService) {
    const startTotal = {
      amount: 0,
      formattedAmount: '',
      currency: '',
    };

    this.paidTotal$ = monetization.events.pipe(
      filter((e) => e.type === 'monetizationprogress'),
      scan((total, e: MonetizationProgressEvent) => {
        const scale = e.detail.assetScale;
        const amount = total.amount + Number(e.detail.amount);

        return {
          amount,
          formattedAmount: (amount * Math.pow(10, -scale)).toFixed(scale),
          currency: e.detail.assetCode,
        };
      }, startTotal),
      startWith(startTotal)
    );
  }
}

Submission Category:

Foundational Technology

Demo

A demo of the library can be found here.

Link to Code

GitHub logo CDDelta / ngx-monetization

Web Monetization API for Angular!

ngx-monetization

contributions welcome

https://nodei.co/npm/ngx-monetization.png?downloads=true&downloadRank=true&stars=true

Web Monetization API for Angular!

ngx-monetization helps you interact with the Web Monetization API with an observable-based API.

The Web Monetization API is a JavaScript browser API which allows the creation of a payment stream from the user agent to the website, read more about it here.

Check out the demo here.

Install

To use ngx-monetization in your project run:

ng add ngx-monetization

or install it via npm:

npm install ngx-monetization --save

and add your payment pointer to index.html, see here.

Example Use

import { Component } from "@angular/core";
import { MonetizationService } from "ngx-monetization";
@Component({
  selector: "app-root",
  template: `
    <p>State: {{ monetization.state | async }}</p>
    <ul>
      <li *ngFor="let event of monetization.events | async">
        {{ event | json }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  constructor(public monetization: MonetizationService)

How I built it

I first scaffolded the library with the Angular CLI by running ng new, doing this I was able to hit the ground running with everything I needed ready to go (build process, tests etc). Then it was just a matter of adding in the functionality to wrap the Web Monetization API.

I also added some utilities to make developers lives easier like setPaymentPointer for doing just that, isAvailable in case the browser does not support the API or the app is running on the server-side, and an ng add schematic to quickly add the library along with a payment pointer.

Along the way I scaffolded another application to serve as my demo and in-depth test app which is continuously deployed to GitHub Pages via GitHub Actions. A process that took so long I think this meme is rather apt here.

Once all of that was done it was time to publish to NPM. The actual publishing itself was extremely simple, all I had to do was make an account and run npm publish, however, trying to figure out a way to properly include dependencies along with the install took a huge amount of time due to how Angular enforces its recommendations.

Fortunately, I found this post which helped a lot. It only took me 6 tries to get it right, as evidenced by the fact that the package is on v0.9.6 already 😅.

Reflections

Building this library was a ton of fun even though it was frustrating at times. This was my first time building a library and the first time I built an API that wasn't for my lone use. I hope it helps you in your work with the Web Monetization API.

Posted on by:

cddelta profile

CDDelta

@cddelta

High school student in love with hacking together solutions and products for problems.

Discussion

markdown guide