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.

Returns: undefined | false

$monetization.getObject()

Gets the document's monetization DOM object if monetization is enabled.

Returns: HTMLElement | false

$monetization.isSupported()

Checks if the browser has monetization capability within the document.

Returns: true | false

$monetization.isEnabled()

Checks if the monetization is currently enabled within the document.

Returns: true | false

$monetization.isDisabled()

Checks if the monetization is currently disabled within the document.

Returns: true | false

$monetization.isStarted()

Checks if the browser is currently sending payments.

Returns: true | false

$monetization.isPending()

Checks if the browser is currently preparing to send payments.

Returns: true | false

$monetization.isStopped()

Checks if the browser is currently not sending payments.

Returns: true | false

$monetization.getState()

Gets the current state of the browser's monetization event if monetization is enabled.

Returns: ("started" || "stopped" || "pending") | false

$monetization.getEventStateString()

Converts a monetization event to its corresponding state string.

Returns: ("started" || "stopped" || "pending") | false

Event Attachments

The specification for the event objects returned for each handler are specified on the Web Monetization JavaScript API page.

$monetization.onStart(function handler(event))

Attaches a listener for the started state on the monetization object using the specified handler.

Returns: undefined | false

$monetization.onPending(function handler(event))

Attaches a listener for the pending state on the monetization object using the specified handler.

Returns: undefined | false

$monetization.onStop(function handler(event))

Attaches a listener for the stopped state on the monetization object using the specified handler.

Returns: undefined | false

$monetization.onProgressChange(function handler(event))

Attaches a listener for when the current amount of progress in sending funds changes on the monetization object using the specified handler.

Returns: undefined | false

$monetization.onStateChange(function handler(event))

Attaches the onStart, onPending, and onStop listeners to the handler.

Returns: undefined | false

Example

This example can also be found by launching the demo project in the demo/ folder (see the Development section below).

<template>
  <Layout>
    <button @click="toggle">Toggle Monetization</button>
    <h2>Current state: {{ state }}</h2>
  </Layout>
</template>

<script>
export default {
  metaInfo: {
    title: "Web Monetization",
  },
  data() {
    return {
      state: "Waiting for monetization to load...",
    }
  },
  methods: {
    toggle() {
      this.$monetization.isEnabled()
        ? this.$monetization.disable()
        : this.$monetization.enable()
    },
  },
  mounted() {
    this.state = this.$monetization.getState()
    this.$monetization.onStateChange(
      (event) => (this.state = this.$monetization.getEventStateString(event))
    )
  },
}
</script>

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. yarn link or npm link in the projects directory
4. cd demo/
5. yarn link gridsome-plugin-monetization or npm link gridsome-plugin-monetization in the demo/ directory
6. Start the development server with yarn dev or npm run dev

Demo

A basic demo is hosted on 💻 CodeSandbox.

NOTE: By default, <iframe> components do not have monetization enabled, so the inline project browser in CodeSandbox will not work with monetization. However, you can open the browser in another tab or access the project here to see it in action.

License

MIT License

Copyright (c) sergix [email protected]