Use web monetization probabilistic revenue sharing in the backend together with a smart contract.
Also able to include receipt verification.
This module uses as default smart contract connection settings for Infura.
npm install web-monetization-revenue-share
You can find an example of a working Smart Contract here.
-
Get the ABI of your smart contract (make sure there is at least one payment pointer in the smart contract)
-
Store ABI in your project (eg: smartContractInfo.json)
{ "address": "yourSmartContractAddress", "ABI": [ // your smart contract ABI ] }
-
Create a list of payment pointers in case you don't want to use a smart contract (eg: paymentPointers.js)
const pointers = { '$alice.example': 50, '$bob.example': 40, '$connie.example': 9, '$dave.example': 1 } module.exports = pointers
-
Create a config file to store all the parameters required (eg: config.js)
const config = { server: { port: 1337 }, useSmartContract: 'true', useReceiptVerification: 'false', paymentPointersPath: './paymentPointers', receiptVerification:{ service: 'https://webmonetization.org/api/receipts/', verifier: 'https://webmonetization.org/api/receipts/verify' }, smartContract: { provider: 'rinkeby', // use the network of your choice key: yourKeyForRinkeby, // eg: If using Infura to access rinkeby use your Infura Project Key here smartContractInfoFilePath: './smartContractInfo.json' } }; module.exports = config;
const wmRevenueShare = require('web-monetization-revenue-share')
wmRevenueShare.setUp('/config')
const paymentPointerUrl = await wmRevenueShare.getPointerUrl()
var express = require('express');
var app = express();
const fetch = require("node-fetch");
var cors = require('cors')
const config = require('./config')
const wmRevenueShare = require('web-monetization-revenue-share')
app.use(express.json());
app.use(express.urlencoded({ extended: true }))
app.use(cors())
const PORT = config.server.port;
app.listen(PORT, () => {
console.log(`App is running on port ${PORT}`);
});
wmRevenueShare.setUp('./config')
// Your endpoint that you will reach from the frontend.
app.post('/verifyReceipt', async (req, res) => {
const resp = await fetch(config.receiptVerification.verifier, {
method: 'POST',
body: req.body.receipt
})
const { amount } = await resp.json()
console.log('Received ' + amount)
// backend logic for new paid amount
res.send({ message: 'ok', data: { received: amount } })
})
app.get('/', async function (req, res, next) {
// is this request meant for Web Monetization?
if (req.header('accept').includes('application/spsp4+json')) {
console.log('Revenue sharing active')
const paymentPointerUrl = await wmRevenueShare.getPointerUrl()
console.log(`Payment pointer: ${paymentPointerUrl}`)
// redirect to our chosen payment pointer so they get paid
res.redirect(302, paymentPointerUrl)
} else {
// if the request is not for Web Monetization, do nothing
console.log('Revenue sharing not active')
next()
}
})
Your frontend could be hosted on a different server, if desired
<head>
<meta name="monetization" content="https://your-deployed-server-instance-url/">
<!-- Use this script for receipt verification -->
<script>
if (document.monetization) {
document.monetization.addEventListener('monetizationprogress', async event => {
// A payment has been received.
console.log('A payment has been received.')
console.log(event.detail.receipt)
// Connect to your site’s backend to validate the payment. This does NOT connect directly to the receipt verifier.
const res = await fetch('https://your-deployed-server-instance-url/verifyReceipt', {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
receipt: event.detail.receipt
})
})
})
}
</script>
</head>
You may find a full working example here.
-
Download repository
git clone https://github.com/Vivid-IOV-Labs/web-monetization-revenue-share.git -
Install
npm install -
Run tests
npm test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent