!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
- 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

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

$3

`html

`

$3

* 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 |


`js
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). |

$3

#### Subscribe/Unsubscribe to the event
`js
//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

`js
verify: (requestId?:string)=> Promise<{total:number, rate: number, isPaying: boolean}>
`
`js
monetization.verify().then(({
total, rate, isPaying}) => {
// Verify if the user is paying
}).catch((error) => {
// Handle another API errors
})
}
`




Examples

$3


`
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({})
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 (


)
}

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