gridsome-plugin-monetization

    1.0.1 • Public • Published

    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

    Install

    npm i gridsome-plugin-monetization

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    11.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • sergix