{"id":13702419,"url":"https://github.com/interledgerjs/web-monetization-scripts","last_synced_at":"2025-05-05T20:44:48.104Z","repository":{"id":72491035,"uuid":"146483853","full_name":"interledgerjs/web-monetization-scripts","owner":"interledgerjs","description":"Scripts to help you web monetize your site and/or API","archived":false,"fork":false,"pushed_at":"2019-03-06T19:13:08.000Z","size":201,"stargazers_count":17,"open_issues_count":2,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-15T15:37:48.299Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/interledgerjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-08-28T17:39:01.000Z","updated_at":"2023-03-17T15:31:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"449cc92a-b0eb-4366-bee5-01f576454c8a","html_url":"https://github.com/interledgerjs/web-monetization-scripts","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/interledgerjs%2Fweb-monetization-scripts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledgerjs%2Fweb-monetization-scripts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledgerjs%2Fweb-monetization-scripts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interledgerjs%2Fweb-monetization-scripts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/interledgerjs","download_url":"https://codeload.github.com/interledgerjs/web-monetization-scripts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252574059,"owners_count":21770329,"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-02T21:00:35.539Z","updated_at":"2025-05-05T20:44:48.081Z","avatar_url":"https://github.com/interledgerjs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Web Monetization Scripts\n\u003e Client-side scripts to Web Monetize sites\n\n## Conditionals\n\n### Description\n\nSometimes you want to show/hide your content based on whether the viewer is\nWeb-Monetized. These scripts provide a really simple way to do that on the\nclient side.\n\nThe idea is that everyone should be able to do this on their site/blog!\n\n**Keep in mind that all of your html is still sent to the client, so a tricky\nuser could bypass this without actually having Web Monetization!** In the\nfuture, there will be better support for secure Web Monetized content.\n\nThese conditional scripts will work anywhere that HTML with script tags can be used!\n\nIf you're using react for your site, it is _highly_ recommended that you use\n[React Web Monetization](https://github.com/sharafian/react-web-monetization)\ninstead.\n\n### Including the Script\n\nFor all of these snippets, make sure you have included the Web Monetization\n`\u003cmeta\u003e` tag in your page.\n\n#### Show an Element if the User is Web Monetized\n\nPut this code where you want your element to appear. It will be invisible\n(`visibility: hidden`) until Web Monetization starts. It will never appear is\nWeb Monetization is not enabled.\n\nIt's important to keep the `\u003cdiv\u003e` wrapped around the code in exactly the way\nit's done below (including style)! The `\u003cscript\u003e` MUST be the first thing\ninside of the div for this to work. Everything after the `\u003cscript\u003e` inside of\nthe `\u003cdiv\u003e` is displayed conditionally.\n\n```html\n\u003cdiv style=\"display:none;\"\u003e\n  \u003cscript src=\"https://cdn.coil.com/if-monetized.js\"\u003e\u003c/script\u003e\n  \u003c!-- you can put whatever code you want after the script tag --\u003e\n  \u003cp\u003eMonetization is enabled!\u003c/p\u003e\n\u003c/div\u003e\n```\n\n#### Show an Element if the User is Not Web Monetized\n\nPut this code where you want your element to appear. If the browser does not\nsupport Web Monetization, it will appear immediately. If the browser supports\nWeb Monetization but is not paying, it will appear after a couple of seconds.\n\nIt's important to keep the `\u003cdiv\u003e` wrapped around the code in exactly the way\nit's done below (including style)! The `\u003cscript\u003e` MUST be the first thing\ninside of the div for this to work. Everything after the `\u003cscript\u003e` inside of\nthe `\u003cdiv\u003e` is displayed conditionally.\n\n```html\n  \u003cdiv style=\"display:none;\"\u003e\n    \u003cscript src=\"https://cdn.coil.com/if-not-monetized.js\"\u003e\u003c/script\u003e\n    \u003c!-- you can put whatever code you want after the script tag --\u003e\n    \u003cp\u003eMonetization is not enabled!\u003c/p\u003e\n  \u003c/div\u003e\n```\n\n#### Show Many Elements Depending on Monetization\n\nThe scripts above can be inefficient if you have a lot of elements that depend on\nmonetization. In the situation where you want to show/hide lots of elements,\nyou can use the `monetized-classes` script.\n\nPut the following code **in the `\u003chead\u003e` of your page.**\n\n```html\n  \u003cscript defer src=\"cdn.coil.com/monetized-classes.js\"\u003e\u003c/script\u003e\n  \u003cstyle id=\"wm-stylesheet\"\u003e\n    .wm-if-monetized { display: none; }\n    .wm-if-not-monetized { display: none; }\n  \u003c/style\u003e\n```\n\nNow, wherever you want to use Web Monetization conditionals you can just\nuse the `wm-if-monetized` and `wm-if-not-monetized` classes.\n\nExample:\n\n```html\n  \u003cp class=\"wm-if-monetized\"\u003eMonetization is enabled!\u003c/p\u003e\n  \u003cp class=\"wm-if-not-monetized\"\u003eMonetization is not enabled!\u003c/p\u003e\n```\n\n## Counter\n\n### Description\n\nShows a counter of how much has been donated to the page. This is compatible\nwith the new `\u003cmeta\u003e` tag based version of Web Monetization.\n\n### Including the Script\n\nMake sure you have included the Web Monetization `\u003cmeta\u003e` tag in your page.\nPasting the following code into your page will add a counter to the bottom left\nof the page:\n\n```html\n\u003cscript src=\"https://cdn.coil.com/counter.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  window.WebMonetizationScripts.createCounter()\n\u003c/script\u003e\n```\n\n### Usage\n\nThis will hook into the existing web monetization events, so there are no\nparameters required.\n\n```\nwindow.WebMonetizationScripts.createCounter()\n```\n\n#### Parameters\n\nNone.\n\n#### Return Value\n\nNone.\n\n## Donate (DEPRECATED)\n\n### Description\n\n**This script has been deprecated, because it uses the old polyfill-based\nversion of Web Monetization.  If you want to send money to a payment pointer,\nyou can use the new `\u003cmeta\u003e` tag flow [described\nhere](https://medium.com/interledger-blog/simplifying-web-monetization-871aee326170)**\n\nThe donate script is used for a page that's supported through donations in the\nbackground. It shows the user a coil logo when payment is being sent, and if\nthe Interledger connection drops it will re-establish it.\n\nThis is useful for Web Monetizing static sites (i.e. replacing advertising). For cases where you want to replace a paywall, you'll want something that can securely detect when payment occurs (scripts for that use case will be added soon).\n\n### Including the Script\n\n```html\n\u003cscript src=\"https://cdn.coil.com/donate.js\"\u003e\u003c/script\u003e\n```\n\nThe script also exists at `https://interledgerjs.github.io/web-monetization-scripts/dist/donate.js`, or can be built locally and served from your site.\n\n### Usage\n\nExample of usage at [`examples/donate.html`](https://github.com/interledgerjs/web-monetization-scripts/blob/master/examples/donate.html), source code at [`src/donate.js`](https://github.com/interledgerjs/web-monetization-scripts/blob/master/src/donate.js).\n\n```\nwindow.WebMonetizationScripts.donate({\n  paymentPointer: '$twitter.xrptipbot.com/sharafian_',\n  noRetry: false,\n  noWidget: false,\n  addCoilAdvert: true\n})\n```\n\n#### Parameters\n\n- `opts: Object` - Required. Options for donation.\n- `opts.paymentPointer: String` - Required. [Payment pointer](https://github.com/interledger/rfcs/blob/master/0026-payment-pointers/0026-payment-pointers.md) to receive donations.\n- `opts.noRetry: Boolean` - Optional, default `false`. If `noRetry` is set then the ILP connection will not be re-established when it goes down. You can manually re-establish it by calling `donate` again.\n- `opts.noWidget: Boolean` - Optional, default `false`. If `noWidget` is set then no Coil logo will appear in the bottom left of the screen when payment occurs.\n- `opts.addCoilAdvert` - Optional, default `false`. If `addCoilAdvert` is set to `true` then a Coil advert logo will appear in the bottom left of the screen if no payment handler is detected.\n\n#### Return Value\n\n- `ret: EventTarget` - Listen for `money` to get a notification when a packet of money has been sent (`ev.detail.amount` has the exact amount). Listen for `close` to get a notification whenever the connection drops.\n- `ret.connection: WebConnection` - [Web Monetization Connection](https://github.com/interledger/rfcs/blob/master/0028-web-monetization/0028-web-monetization.md#ilp-connection-class) currently used by the donation.\n- `ret.stream: WebStream` - [Web Monetization Stream](https://github.com/interledger/rfcs/blob/master/0028-web-monetization/0028-web-monetization.md#ilp-stream-class) currently used by the donation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finterledgerjs%2Fweb-monetization-scripts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finterledgerjs%2Fweb-monetization-scripts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finterledgerjs%2Fweb-monetization-scripts/lists"}