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';
Vanilla Service
Add a Web Monetization meta tag pointing to the address generated by<meta name="monetization" content="<paymentPointer>" />
Initialize Vanilla monetization
- Get your
clientId
andclientSecret
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 norbert@cinnamon.video
License
This project is licensed under the MIT License - see the LICENSE file for details