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
• Installation
• How to use
• Examples
• Contributing
• License

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

Contributing

Contact me at [email protected]

License

This project is licensed under the MIT License - see the LICENSE file for details