TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

Solid WMP Client

This is a client side typescript/javascript library for interfacing with a component that follows the Web Monetization Provider draft specification.


Install with npm:

npm install solid-wmp-client

Install with yarn:

yarn add solid-wmp-client

Instantiate the WmpClient class:

import { WmpClient } from 'solid-wmp-client';

val wmpClient = new WmpClient();

Get a utility class to interface with the document.monetization object:

import { WmpClient } from 'solid-wmp-client';

val wmpClient = new WmpClient();
val monetizationHelper = wmpClient.getMonetizationHandler();


Full api docs at


Construct a WmpClient instance:

val wmpClient = new WmpClient();

You can now freely use this wmpClient instance.

setupPayment(wmpUri: string, fetchFunction?: (url: RequestInfo, init?: RequestInit | undefined) => Promise): void

argument description
wmpUrl The URL of the Web Monetization Provider
fetchFunction Optional fetch function (that has authentication headers preconfigures for instance)

Instruct Web Monetization Provider to initiate a payment.

This will first check if the document.monetization.state property is 'pending' or 'stopped'.

Next it will request the payment pointer as found in the meta tag and do a POST to the Web Monetization Provider Uri (wmpUri) with query path /api/me/sessions. On creation of a session, the sessionId will be returned.

That ID will then be used to open an WebSocket channel (using SockJS) to start the micropayments and receive events on the progress.

Event listeners are set up, to broadcast the proper events on the document.monetization EventSource object.


Close the current monetization stream, if one is open.

getMonetizationHandler(): MonetizationHandler

Returns the current MonetizationHandler of this client. This instance acts as a utility class for the document.monetization object.


Get a MonetizaionHandler instance from an existing WmpClient instance:

val wmpClient = new WmpClient();
val monetizationHandler = wmpClient.getMonetizationHandler();

You can now freely use this monetizationHandler instance.

isMonetizationSupported(): boolean

Is Web Monetization supported (document.monetization != undefined)?

isReadyForPayment(): boolean

Checks the document.monetization.state property for a 'pending' or 'stopped' state.

  • Returns true if state property is defined and not 'started'
  • Throws error if state is not one of 'pending', 'stopped' or 'started'

isStarted(): boolean

Returns wether the document.monetization.state equals 'started'.

isStopped(): boolean

Returns wether the document.monetization.state equals 'stopped'.

isPending(): boolean

Returns wether the document.monetization.state equals 'pending'.

firePaymentStarted(): void (internal use)

Payment stream started, first payment sent. Fires proper events.

firePaymentStopped(finalized: boolean): void (internal use)

argument description
finalized True when meta tag was removed or payment pointer changed

Payment stream stopped. Fires proper events.

firePaymentProgress(evt: MessageEvent): void (internal use)

argument description
evt The event to parse the data property from

Payment busy, report progress. Fires proper events.




Package Sidebar


npm i solid-wmp-client

Weekly Downloads






Unpacked Size

22.6 kB

Total Files


Last publish


  • tdupont