Web Monetization Plugin for Gridsome

UPDATE: This plugin is now featured on the homepage of the WICG's Web Monetization website under "Web Monetization Tools". So excited! 😄

---

Here's my entry for the Grant For The Web x DEV Community hackathon. I hope you find it useful!

Link to repository
NPM

---

What I built

A web monetization plugin for the Gridsome static site generator.

Submission Category:

Foundational Technology

Plugins and integrations initiate acceptance for new web technologies. This plugin helps developers using the Vue-based Gridsome static site generator to avoid interacting directly with the DOM and easily attach events, modify monetization tags, and get monetization state with just a few lines.

Demo (CodeSandbox)

Open the demo in a separate tab. Monetization is disabled in <iframe> by default.

Link to Code

Sergix / gridsome-plugin-monetization

Web monetization for Gridsome.

gridsome-plugin-monetization

Web monetization plugin for Gridsome.

📖 Release Notes

Setup

1. Add gridsome-plugin-monetization dependency to your project

yarn add gridsome-plugin-monetization # or npm install gridsome-plugin-monetization

2. Add gridsome-plugin-monetization to the plugins section of gridsome.config.js

{
  plugins: [
    {
      use: "gridsome-plugin-monetization",
      options: {
        paymentPointer: "$wallet.example.com/alice", // your payment pointer
        global: true, // add monetization to every page; default: true
      },
    },
  ],
}

Usage

For gridsome-plugin-monetization to work properly, you must specify your payment pointer (paymentPointer) in the gridsome plugin options as shown above.

NOTE: As of now, any of the following methods are unable to be accessed at build time through component data or templates due to SSR constraints.

Methods

$monetization.enable()

Enables web monetization for the current page if not already enabled.

Returns: HTMLElement | false

$monetization.disable()

Disables web monetization for the current page if not already disabled.

…

View on GitHub

How I built it

Gridsome plugins are fairly simple to write. For client plugins (such as this), all you have to do is make a gridsome.client.js, and you export a function such as the following:

export default function (Vue, options, context) {
  const $monetization = {}

  // server code
  // ...

  if (!process.isClient) return

  // client-only code
  // ...

  Vue.prototype.$monetization = $monetization
}

Then, you link your plugin to a Gridsome project via npm link gridsome-plugin-monetization for plugin development and testing.

I used the context to interact with Gridsome's build step when the global option in the plugin configuration is enabled.

I attempted to keep the code as composable and clean as possible, but when interacting with the DOM it can be a challenge. 😆

Example/Usage

Full setup instructions and documentation are in the repository's README.

Install via npm or yarn —

yarn add gridsome-plugin-monetization # or npm install gridsome-plugin-monetization

Add the plugin to Gridsome, and set your paymentPointer —

// gridsome.config.js

module.exports = {
  // ...
  plugins: [
    {
      use: "gridsome-plugin-monetization",
      options: {
        paymentPointer: "$wallet.example.com/alice",
        global: false, // enabled on every page (default: true)
      },
    },
  ],
}

Use in your components, pages, and layouts by accessing Vue.prototype.$monetization —

// component.vue

export default {
  methods: {
    enableExtraContent() {
      // ...
    }
  },
  mounted() {
    this.$monetization.enable()
    this.$monetization.onStart(() => this.enableExtraContent)
  }
}

Additional Resources/Info

Due to the nature of server-side rendering and static sites, and the state of the monetization API (as well as Gridsome's plugin API), the plugin's methods are only accessible via the client and cannot be used in a component's data, computed, and <template>.

For now, the best way to use the API is to declare defaults within your component's data and add event hooks within your component's mounted() hook. This way, the DOM has time to load before attempting to access the monetization API.

Thank you for reading! God bless!

---

You can find me at sergix.dev.
Reach out at [e-mail] for anything that's on your mind!

Comments

[Thomas Bnt]

Oh great for the main page of webmonetization.org ! 🎉🎉🎉

[Peyton McGinnis]

Thanks!!

[Gift Egwuenu]

Dropped by to say thanks for creating this. I'm currently using it on my website and it was fairly easy to set up.