@vanilla-lab/web-monetization
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

Vanilla Plugins

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

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

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 norbert@cinnamon.video

License

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

Package Sidebar

Install

npm i @vanilla-lab/web-monetization

Weekly Downloads

14

Version

0.0.3

License

MIT

Unpacked Size

11.7 kB

Total Files

12

Last publish

Collaborators

  • norbertdurcansk