@vanilla-lab/web-monetization NPM

License Version

Vanilla Web Monetization plugin

JavaScript API for Vanilla Web Monetization features
Securely enable your content for Web Monetization users without depending on ILP stack

Using Web Monetization, you often want to detect whether a visitor of your site is paying for the content. @vanilla-lab/web-monetization library uses Vanilla Service to validate payments by providing simple API described bellow.

Demo

React Application

Installation

npm install @vanilla-lab/web-monetization --save

yarn add @vanilla-lab/web-monetization

How to use

import monetization from '@vanilla-lab/web-monetization';

Add a Web Monetization meta tag pointing to the address generated by Vanilla Service

<meta name="monetization" content="<paymentPointer>" />

Initialize Vanilla monetization

Get your clientId and clientSecret at Vanilla Service

Name	Required	Type	Description
`clientId`	yes	string	Generated `clientId`
`clientSecret`	yes	string	Generated `clientSecret`
`verbose`	no	boolean	Log info about verification process to console

const monetization = vanillaWm({
  clientId: clientId,
  clientSecret: clientSecret,
  verbose: true
})

Events

Name	Type	Description
`start`	Client	Dispatched after the `monetizationprogress` event is dispatched on the client. The Web Monetization has started and the application is ready to verify the `requestId` (value extracted from `monetizationprogress` event).

Functions

Subscribe/Unsubscribe to the event

//Subscribe
monetization.on(eventName, listener);

//Unsubscribe
monetization.off(eventName, listener);

Verify payment

Verify payment for requestId.

On client call it in the listener of the start event
On server call it with the requestId received from the client

verify: (requestId?:string)=> Promise<{total:number, rate: number, isPaying: boolean}>

 monetization.verify().then(({
      total, rate, isPaying}) => {
        // Verify if the user is paying
    }).catch((error) => {
      // Handle another API errors
    })
  }

Examples

React

import React from 'react'
import vanillaWm from '@vanilla-lab/web-monetization'

// VanillaVW JavaScript plugin initialization
const monetization = vanillaWm({
  // Your client id
  clientId: '835e576c-600e-4348-bc91-9051150ddc4b',
  // Your client secret
  clientSecret: 'vuLQuc4Xtxy8va7EDspIXrIsErrevk4o3ZYupTYerpA=',
  verbose: true
})

function App() {
  const [proof,setProof]=React.useState<any>({})
  const [hasPayed,setHasPayed]=React.useState(false)
  const [isWMLoaded,setIsWmLoaded] = React.useState(false)

  const start = () => {
    /* Verify function is called after the 'start' event is dispatched when RequestId is received from the client */
    monetization.verify().then(({
      total, rate, isPaying}) => {
        setProof({total,rate,isPaying})
        setHasPayed(isPaying)
    }).catch((error) => {
      // Handle another API errors
      console.log(error)
    }).finally(()=>{
      setIsWmLoaded(true)
    })
  }

  React.useEffect(()=>{
    monetization.on('start', start)
  },[])

  const {total= null,rate = null} = proof

  return (
    <div className="App">
      {!isWMLoaded && <>Loading Web Monetization...</>}
      {isWMLoaded && !hasPayed &&  <>Could not verify payment!</>}
      {isWMLoaded && hasPayed && <>
        <h1>Monetization Proof received! 🥰</h1>
        <div>
          Total: {total}
        </div>
        <div>
          Rate: {rate}
        </div>
      </>
      }
    </div>
  )
}

export default App