npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

web-monetization-revenue-share

v0.2.8

Published

Revenue sharing using smart contract in Web-monetization

Downloads

38

Readme

Web Monetization Revenue Sharing

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.

Install

npm install web-monetization-revenue-share

Setup

Smart Contract ABI

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
      ]
    }

Payment Pointers List

  • 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

Config File

  • 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;

Use

const wmRevenueShare = require('web-monetization-revenue-share')
wmRevenueShare.setUp('/config')
const paymentPointerUrl = await wmRevenueShare.getPointerUrl()

Express Example

How to include it into your expressJS server.

server.js (on the backend)
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()
  }
})
index.ejs (on the frontend)

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.

Test

Test the npm package

  • Download repository

    git clone https://github.com/Vivid-IOV-Labs/web-monetization-revenue-share.git
  • Install

    npm install
  • Run tests

    npm test