{"id":13714989,"url":"https://github.com/Sergix/gridsome-plugin-monetization","last_synced_at":"2025-05-07T03:31:06.102Z","repository":{"id":42266212,"uuid":"268649859","full_name":"Sergix/gridsome-plugin-monetization","owner":"Sergix","description":"Web monetization for Gridsome.","archived":true,"fork":false,"pushed_at":"2022-12-12T23:16:20.000Z","size":418,"stargazers_count":15,"open_issues_count":23,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-14T03:34:20.475Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sergix.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-01T22:52:37.000Z","updated_at":"2024-03-22T18:49:35.000Z","dependencies_parsed_at":"2023-01-28T02:45:58.000Z","dependency_job_id":null,"html_url":"https://github.com/Sergix/gridsome-plugin-monetization","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sergix%2Fgridsome-plugin-monetization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sergix%2Fgridsome-plugin-monetization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sergix%2Fgridsome-plugin-monetization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sergix%2Fgridsome-plugin-monetization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sergix","download_url":"https://codeload.github.com/Sergix/gridsome-plugin-monetization/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806418,"owners_count":21807199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T00:00:52.769Z","updated_at":"2025-05-07T03:31:05.053Z","avatar_url":"https://github.com/Sergix.png","language":"JavaScript","funding_links":[],"categories":["Resources"],"sub_categories":["Packages"],"readme":"# gridsome-plugin-monetization\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]\n[![Codecov][codecov-src]][codecov-href]\n[![License][license-src]][license-href]\n\n![Gridsome + Web Monetization](assets/gridsome_webmo_logo.svg)\n\n\u003e Web monetization plugin for Gridsome.\n\n[📖 **Release Notes**](./CHANGELOG.md)\n\n## Setup\n\n1. Add `gridsome-plugin-monetization` dependency to your project\n\n```bash\nyarn add gridsome-plugin-monetization # or npm install gridsome-plugin-monetization\n```\n\n2. Add `gridsome-plugin-monetization` to the `plugins` section of `gridsome.config.js`\n\n```js\n{\n  plugins: [\n    {\n      use: \"gridsome-plugin-monetization\",\n      options: {\n        paymentPointer: \"$wallet.example.com/alice\", // your payment pointer\n        global: true, // add monetization to every page; default: true\n      },\n    },\n  ],\n}\n```\n\n## Usage\n\nFor `gridsome-plugin-monetization` to work properly, you must [specify your payment pointer](https://paymentpointers.org/) (`paymentPointer`) in the gridsome plugin options as shown above.\n\n\u003e **NOTE:** As of now, any of the following methods are unable to be accessed at build time through component `data` or `template`s due to SSR constraints.\n\n### Methods\n\n#### `$monetization.enable()`\n\nEnables web monetization for the current page if not already enabled.\n\n_Returns: HTMLElement | false_\n\n#### `$monetization.disable()`\n\nDisables web monetization for the current page if not already disabled.\n\n_Returns: undefined | false_\n\n#### `$monetization.getObject()`\n\nGets the document's monetization DOM object if monetization is enabled.\n\n_Returns: HTMLElement | false_\n\n#### `$monetization.isSupported()`\n\nChecks if the browser has monetization capability within the document.\n\n_Returns: true | false_\n\n#### `$monetization.isEnabled()`\n\nChecks if the monetization is currently enabled within the document.\n\n_Returns: true | false_\n\n#### `$monetization.isDisabled()`\n\nChecks if the monetization is currently disabled within the document.\n\n_Returns: true | false_\n\n#### `$monetization.isStarted()`\n\nChecks if the browser is currently sending payments.\n\n_Returns: true | false_\n\n#### `$monetization.isPending()`\n\nChecks if the browser is currently preparing to send payments.\n\n_Returns: true | false_\n\n#### `$monetization.isStopped()`\n\nChecks if the browser is currently not sending payments.\n\n_Returns: true | false_\n\n#### `$monetization.getState()`\n\nGets the current state of the browser's monetization event if monetization is enabled.\n\n_Returns: (\"started\" || \"stopped\" || \"pending\") | false_\n\n#### `$monetization.getEventStateString()`\n\nConverts a monetization event to its corresponding state string.\n\n_Returns: (\"started\" || \"stopped\" || \"pending\") | false_\n\n### Event Attachments\n\n\u003e The specification for the `event` objects returned for each handler are specified on the [Web Monetization JavaScript API page](https://webmonetization.org/docs/api).\n\n#### `$monetization.onStart(function handler(event))`\n\nAttaches a listener for the `started` state on the monetization object using the specified handler.\n\n_Returns: undefined | false_\n\n#### `$monetization.onPending(function handler(event))`\n\nAttaches a listener for the `pending` state on the monetization object using the specified handler.\n\n_Returns: undefined | false_\n\n#### `$monetization.onStop(function handler(event))`\n\nAttaches a listener for the `stopped` state on the monetization object using the specified handler.\n\n_Returns: undefined | false_\n\n#### `$monetization.onProgressChange(function handler(event))`\n\nAttaches a listener for when the current amount of progress in sending funds changes on the monetization object using the specified handler.\n\n_Returns: undefined | false_\n\n#### `$monetization.onStateChange(function handler(event))`\n\nAttaches the `onStart`, `onPending`, and `onStop` listeners to the handler.\n\n_Returns: undefined | false_\n\n### Example\n\nThis example can also be found by launching the demo project in the `demo/` folder (see the **Development** section below).\n\n```vue\n\u003ctemplate\u003e\n  \u003cLayout\u003e\n    \u003cbutton @click=\"toggle\"\u003eToggle Monetization\u003c/button\u003e\n    \u003ch2\u003eCurrent state: {{ state }}\u003c/h2\u003e\n  \u003c/Layout\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  metaInfo: {\n    title: \"Web Monetization\",\n  },\n  data() {\n    return {\n      state: \"Waiting for monetization to load...\",\n    }\n  },\n  methods: {\n    toggle() {\n      this.$monetization.isEnabled()\n        ? this.$monetization.disable()\n        : this.$monetization.enable()\n    },\n  },\n  mounted() {\n    this.state = this.$monetization.getState()\n    this.$monetization.onStateChange(\n      (event) =\u003e (this.state = this.$monetization.getEventStateString(event))\n    )\n  },\n}\n\u003c/script\u003e\n```\n\n## Development\n\n1. Clone this repository\n2. Install dependencies using `yarn install` or `npm install`\n3. `yarn link` or `npm link` in the projects directory\n4. `cd demo/`\n5. `yarn link gridsome-plugin-monetization` or `npm link gridsome-plugin-monetization` in the `demo/` directory\n6. Start the development server with `yarn dev` or `npm run dev`\n\n## Demo\n\nA basic demo is hosted on [💻 **CodeSandbox**](https://codesandbox.io/embed/gridsome-plugin-monetization-3nf3w?fontsize=14\u0026hidenavigation=1\u0026theme=light).\n\n\u003e **NOTE:** By default, `\u003ciframe\u003e` 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](https://3nf3w.sse.codesandbox.io/) to see it in action.\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) sergix \u003chello@sergix.dev\u003e\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/gridsome-plugin-monetization/latest.svg\n[npm-version-href]: https://npmjs.com/package/gridsome-plugin-monetization\n[npm-downloads-src]: https://img.shields.io/npm/dt/gridsome-plugin-monetization.svg\n[npm-downloads-href]: https://npmjs.com/package/gridsome-plugin-monetization\n[github-actions-ci-src]: https://github.com//workflows/ci/badge.svg\n[github-actions-ci-href]: https://github.com//actions?query=workflow%3Aci\n[codecov-src]: https://img.shields.io/codecov/c/github/.svg\n[codecov-href]: https://codecov.io/gh/\n[license-src]: https://img.shields.io/npm/l/gridsome-plugin-monetization.svg\n[license-href]: https://npmjs.com/package/gridsome-plugin-monetization\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSergix%2Fgridsome-plugin-monetization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSergix%2Fgridsome-plugin-monetization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSergix%2Fgridsome-plugin-monetization/lists"}