Skip to content

Sergix/gridsome-plugin-monetization

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

gridsome-plugin-monetization

npm version npm downloads Github Actions CI Codecov License

Gridsome + Web 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
  1. 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 hello@sergix.dev

About

Web monetization for Gridsome.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published