Need help with this page
-As a website owner, you anticipate losing a few visitors due to paywalled content. Even if you offer weekly subscriptions, the price may be more than a visitor is willing to pay. But instead of subscriptions, what if you could generate revenue per piece of content, or even based on the amount of time a visitor spends on the content? +People already think they know what WM is when they see the words. Ads, affiliate marketing, etc. -These are just two ways in which Web Monetization can make payments easier. With Web Monetization, website visitors can send payments directly to websites using a browser extension or any browser that natively implements the Web Monetization specification. +Need an overview to WM that's appropriate for users and developers. -## Current payments infrastructure +## Support web monetized content -It can take a bit of work to implement payments on a website. If your site already accepts payments, you may be familiar with what it takes to accept multiple payment methods and currencies. The process typically looks something like this: +Just playing around with Starlight components here
-1. You sign up with one or more payment providers, depending on the payment methods and currencies you want to accept. -2. You integrate their service(s) into your site. For example, you may create and host your own payment form that is connected to the service, or you use a form supplied by the payment provider. -3. Depending on the payment method your visitor wants to use, they may need to create an account with you or the payment provider. -4. Your visitor fills out the payment form. Ideally, they remain on your site to complete the transaction but may be required to access the provider’s site instead. +- Thanks to you, I've made - 0.00 USD - -
- -``` - -## How it works - -First, we'll bind the `monetization` event if the visitor is web monetized (`window.MonetizationEvent` is defined). - -The `monetization` event contains details about the payments that occur. The `amountSent` attribute of the event returns the amount (`value`) and currency code of the sent payment. A currency code is a three-letter code, like USD, EUR, or GBP. - -```js - if (window.MonetizationEvent) { - const link = document.querySelector('link[rel="monetization"]'); - - link.addEventListener("monetization", (event) => { - const { - amountSent: { value, currency }, - } = event; - console.log(`Browser sent ${currency} ${value}.`); -``` - -The `currency` is set on the first payment and doesn't change. Remember, it represents the sent payment's currency, which may be different from the currency you receive (depending on how your receiving account is set up with your WM receiver). - -```js -// initialize currency on first progress event -if (total === 0) { - document.getElementById('currency').innerText = currency -} -``` - -The amount in `value` is an integer, which we add to our total. - -```js -total += Number(value) -``` - -Finally, we update the text on the page with the new total. We want the total to be in a readable format, so we convert the number to a string and round it to a specified number of decimals, which is `9` in this example. This formatted version of the amount gets written to the `total` span on the page. - -```js -document.getElementById('total').innerText = total.toFixed(9) -``` - -## Interactive example - -This example simulates showing a visitor how much they are sending you based off how long they remain on your web monetized page. - -Content will appear below here if you are Web monetized.
--
Here's some exclusive content!
-
-```
-
-### How it works
-
-First, we want to check whether Web Monetization is supported. We do this by calling `supports()` on a link element's `relList` and passing `"monetization"` as a parameter. If this check doesn't exist, we can't listen for the `monetization` event to tell us when Web Monetization initializes.
-
-```jsx
-const link = document.querySelector('link[rel="monetization"]')
-if (link.relList.supports('monetization')) {
-```
-
-Next, we add an event listener to the `link` element. The `monetization` event is emitted when Web Monetization initializes.
-
-```jsx
-link.addEventListener('monetization', (ev) => {
-```
-
-Finally, we select the exclusive content element we want to make available to web monetized visitors. Since we defined a CSS class to hide the content, removing the class will make the content appear.
-
-```js
-document.getElementById('exclusive').classList.remove('hidden')
-```
-
-### Interactive example
-
-This example simulates hiding and showing exclusive content based on a visitor's Web Monetization state.
-
-Loading exclusive content...
- Here's some exclusive content!
-
- Please install a Web Monetization extension to support me!
-
-
-```
-
-### How it works
-
-There are three functions to activate the three states:
-
-- `showLoading` displays the loader
-- `showCTA` displays the call-to-action to non-web monetized users
-- `showExclusiveContent` displays the exclusive content to web monetized users
-
-These functions work just like the [simple example](#example-1---simple) where we turn the `hidden` class on/off for our `div`s.
-
-When the page loads, we'll check whether the visitor is web monetized.
-
-```js
-window.addEventListener('load', () => {
- if (!window.MonetizationEvent) {
-```
-
-The loader will appear to web monetized visitors and the CTA will appear to everyone else.
-
-```js
-if (!window.MonetizationEvent) {
- showCTA()
-} else {
- showLoading()
-}
-```
-
-If the visitor is web monetized, we'll listen for the `monetization` event that occurs when an outgoing payment request is successfully created. When this event fires, the exclusive content will appear and the other `div`s will be hidden.
-
-```js
-if (window.MonetizationEvent) {
- const link = document.querySelector('link[rel="monetization"]')
- link.addEventListener('monetization', (ev) => {
- showExclusiveContent()
-```
-
-### Interactive example
-
-This example simulates hiding and showing exclusive content based on a visitor's Web Monetization state. Web monetized visitors will see exclusive content while non-web monetized users will not. Conversely, non-web monetized users will see the message, "Please install a Web Monetization extension to support me!".
-
-Ad! Buy product A! Ad!
'
-function showAds() {
- document.getElementById('ad').innerHTML = adCode
-}
-```
-
-We want to bind the `monetization` event to its respective event handler if the visitor is web monetized. This prevents the ad from loading on the page once Web Monetization initializes. Assuming it initializes within the grace period, the ad isn't added to the page at all. This means any related images and trackers aren't loaded either.
-
-The `hasPaid` variable in the timer is for when/if Web Monetization starts after the grace period.
-
-```jsx
-let hasPaid = false
-if (window.MonetizationEvent) {
- const link = document.querySelector('link[rel="monetization"]')
- link.addEventListener('monetization', () => {
- hasPaid = true
- removeAds()
- })
-}
-```
-
-As soon as the page loads, the ad will immediately appear to any visitor who isn't web monetized. This is handled via `!window.MonetizationEvent`, shown below.
-
-If the visitor has Web Monetization in their browser, then the `monetization` event must fire within 3 seconds (3000ms) to indicate that Web Monetization has initialized. If it doesn't initialize by the timeout, the ad is shown to the visitor.
-
-```jsx
-window.addEventListener('load', () => {
- if (!window.MonetizationEvent) {
- showAds()
- } else {
- setTimeout(() => {
- if (!hasPaid) {
- showAds()
- }
- }, 3000)
- }
-})
-```
-
-## Interactive example
-
-This example simulates showing and hiding an ad based on a visitor's Web Monetization state.
-
-receiving account - participant AS as Auth server - end - note over AS,OPR: The auth server can be
located outside of the
WM receiver's domain - WMA->>page: Detects monetization element,
extracts wallet address - WMA->>OPR: Requests the public info for the wallet address - OPR->>WMA: Returns info, including auth server URL - WMA->>AS: Requests access rights - AS->>WMA: Returns access token - WMA->>OPR: Requests creation of an incoming payment resource - OPR->>WMA: Responds with unique payment details for addressing the payment to the account - WMA->>+OPS: Requests an outgoing payment be
created against the sending account - note left of OPS: Connection persists until
request moves from 'pending'
state to 'sending' state - OPS->>-WMA: Responds with details about the
'receive', 'send', and 'sent' amounts - WMA->>WMA: Fires monetization event - note over OPS,OPR: Payment processing and settlement occurs between the WM provider and WM receiver, outside of the WM flow -`} -/> - -
| - CSP version - | -3 | -
| - Directive type - | -
- |
-
| Bubbles | -Yes | -
|---|---|
| Cancelable | -No | -
| Interface | -MonetizationEvent | -
| Event handler property | -- onmonetization - | -
- -### Account - -The definition of account depends on its context. When we refer to an account, we typically mean an Open Payments-enabled payment account. A payment account is an arrangement by which an entity sends, receives, holds, and keeps records of a user's credit or debit transactions. An Open Payments-enabled account is an account that supports the
- -### Digital wallet - -The term _digital wallet_ means different things to different people, services, and technologies. We try to avoid over-using the term for this reason. However, in cases where we do reference digital wallets, it's within the context of
- -### Open Payments (OP) - -
- -### Payment pointer - -A payment pointer is a type of Open Payments-enabled [wallet address](#wallet-address). Payment pointers usually begin with a `$`. For example: `$wallet.example.com/alice`. Visit
- -### User agent - -A user agent is any software that retrieves, renders and facilitates end user interaction with Web content, or whose user interface is implemented using Web technologies. (
- -### Wallet address - -Every
| CSP Version | +3 | +
|---|---|
| Directive | +`monetization-src` | +
| Directive type | +
+ Thanks for contributing + 0.00 USD + +
+ +``` + +### How it works + +We’ll bind the `monetization` event if the visitor is web monetized (`window.MonetizationEvent` is defined). + +The `monetization` event contains details about the payments that occur. The `amountSent` attribute of the event returns the amount (`value`) and `currency` code of the sent payment. A currency code is a three-letter code, like USD, EUR, or GBP. + +```javascript {1,6} + if (window.MonetizationEvent) { + const link = document.querySelector('link[rel="monetization"]'); + + link.addEventListener("monetization", (event) => { + const { + amountSent: { value, currency }, + } = event; + console.log(`Browser sent ${currency} ${value}.`); +``` + +The `currency` code is set on the visitor's first payment and doesn’t change. The code represents the sender's currency which may be different from the currency you receive (depending on the currency you chose when setting up your wallet account). + +```javascript +// initialize currency on first progress event +if (total === 0) { + document.getElementById('currency').innerText = currency +} +``` + +The amount in `value` is an integer, which we add to the total. + +```javascript +total += Number(value) +``` + +Lastly, we tell the text on your page to update with the new total. The total should be in a human-readable format, so we need to convert the number to a string and round it to a specified number of decimals. This example uses `9`. + +```javascript +document.getElementById('total').innerText = total.toFixed(9) +``` + +The formatted version of the amount gets written to the `total` span on the page. + +```html {4} + ++ Thanks for contributing + 0.00 USD + +
+ +``` + +### Interactive example + +This example simulates showing a visitor how much they've sent you based off how long they remain on your web monetized page. + +Ad! Buy product A! Ad!
'
+function showAds() {
+ document.getElementById('ad').innerHTML = adCode
+}
+```
+
+We'll bind the `monetization` event to its respective event handler if the visitor is web monetized. This prevents the ad from loading on the page once Web Monetization initializes. Assuming it initializes within the grace period, the ad isn’t added to the page at all. This means any related images and trackers aren’t loaded either.
+
+The `hasPaid` variable in the timer is for when/if Web Monetization starts after the grace period.
+
+```javascript {1}
+let hasPaid = false
+if (window.MonetizationEvent) {
+ const link = document.querySelector('link[rel="monetization"]')
+ link.addEventListener('monetization', () => {
+ hasPaid = true
+ removeAds()
+ })
+}
+```
+
+As soon as the page loads, the ad will immediately appear to any visitor who isn’t web monetized. This is handled via `!window.MonetizationEvent`, shown below.
+
+```javascript {2}
+window.addEventListener('load', () => {
+ if (!window.MonetizationEvent) {
+ showAds()
+ } else {
+ setTimeout(() => {
+ if (!hasPaid) {
+ showAds()
+ }
+ }, 3000)
+ }
+})
+```
+
+If the visitor has Web Monetization in their browser, then the `monetization` event must fire within 3 seconds (3000ms) to indicate that Web Monetization has initialized. If it doesn’t initialize by the timeout, the ad is shown to the visitor.
+
+### Interactive example
+
+This example simulates showing and hiding an ad based on a visitor’s Web Monetization state.
+
+Content will appear below here for web monetized visitors.
++
Here's some exclusive content!
+
+```
+
+### How it works
+
+First, we'll check whether Web Monetization is supported. We do this by calling `supports()` on a link element’s `relList` and passing `"monetization"` as a parameter. If this check doesn’t exist, we can’t listen for the `monetization` event to tell us when Web Monetization initializes.
+
+```javascript
+const link = document.querySelector('link[rel="monetization"]')
+if (link.relList.supports('monetization')) {
+```
+
+Next, we'll add an event listener to the `link` element. The `monetization` event emits when Web Monetization initializes.
+
+```javascript
+link.addEventListener('monetization', (ev) => {
+```
+
+Finally, we'll select the exclusive content element we want to make available to web monetized visitors. Since we defined a CSS class to hide the content, removing the class will make the content appear.
+
+```javascript
+document.getElementById('exclusive').classList.remove('hidden')
+```
+
+### Interactive example
+
+This example simulates showing and hiding exclusive content based on a visitor’s Web Monetization state.
+
+Loading exclusive content...
+ Here's some exclusive content!
+
+ Install a Web Monetization extension to support me!
+
+ This is content that everyone can see.
+ +``` + +### How it works + +There are three functions to activate the three states: + +* `showLoading` displays the loading message +* `showCTA` displays the call-to-action for non-web monetized users +* `showExclusiveContent` displays exclusive content to web monetized users + +When the page loads, we’ll check whether the visitor is web monetized. + +```javascript +window.addEventListener('load', () => { + if (!window.MonetizationEvent) { +``` + +The loading message will appear to web monetized visitors and the CTA will appear to everyone else. + +```javascript +if (!window.MonetizationEvent) { + showCTA() +} else { + showLoading() +} +``` + +If the visitor is web monetized, we’ll listen for the `monetization` event that occurs when an outgoing payment request is successfully created. If the event fires, the exclusive content will appear (``) and the other divs will be hidden (`
` and `
`)
+
+```javascript
+if (window.MonetizationEvent) {
+ const link = document.querySelector('link[rel="monetization"]')
+ link.addEventListener('monetization', (ev) => {
+ showExclusiveContent()
+```
+
+### Interactive example
+
+This example simulates hiding and showing exclusive content based on a visitor’s Web Monetization state. Web monetized visitors will see exclusive content while non-web monetized users will not. Conversely, non-web monetized users will see the message, “Please install a Web Monetization extension to support me!“.
+
+Open Payments standard . When implemented, a set of APIs become available for third-party applications, such as your visitor's [Web Monetization extension](/support/use-extension), to communicate with the wallet provider.
+
+#### Web Monetization extension
+
+A component within the extension--called the [Web Monetization agent](/experiment/link-element#web-monetization-agent)--is responsible for communicating with a wallet provider via the Open Payments APIs. The next section describes the series of API calls required to initiate a payment.
+
+#### Web Monetization payment sequence
+
+:::note
+The examples below are simplified representations of the Open Payments API calls and may not show every required parameter.
+:::
+
+
+1. The Web Monetization agent locates your [monetization link](/experiment/link-element) and extracts your payment URL (the `href` value).
+
+ ```html
+
+ ```
+
+2. The agent issues a
+ ```http
+ GET /alice HTTP/1.1
+ Accept: application/json
+ Host: wallet.example
+ ```
+
+3. The response to the agent contains information such as the currency your account is denominated in and the URLs for your wallet provider's authorization and resource servers.
+
+ ```http
+ HTTP/1.1 200 Success
+ Content-Type: application/json
+
+ {
+ "assetCode": "USD",
+ "assetScale": 2,
+ "authServer": "https://wallet.example/auth",
+ "resourceServer": "https://wallet.example/resource"
+ }
+ ```
+
+4. The agent issues a
+ ```http
+ POST /auth/ HTTP/1.1
+ Accept: application/json
+ Content-Type: application/json
+ Host: wallet.example
+
+ {
+ "access_token": {
+ "access": [
+ {
+ "type": "incoming-payment",
+ "actions": ["create", "read"],
+ "identifier": "https://wallet.example/alice"
+ }
+ ]
+ },
+ "client": "https://cloudninewallet.example/visitor"
+ }
+ ```
+ :::note
+ The `client` in the response above is your visitor's wallet address/payment pointer. This URL is only used by the agent and is not available to you.
+ :::
+
+5. The response to the agent contains an access token that the agent needs to make its next request.
+
+ ```http wrap
+ {
+ "access_token": {
+ "value": "OS9M2PMHKUR64TB8N6BW7OZB8CDFONP219RP1LT0",
+ "manage": "https://wallet.example/auth/token/dd17a202-9982-4ed9-ae31-564947fb6379",
+ "access": [
+ {
+ "type": "incoming-payment",
+ "actions": ["create", "read"],
+ "identifier": "https://wallet.example/alice"
+ }
+ ]
+ }
+ }
+ ```
+
+6. The agent issues a
+ ```http
+ POST /alice/incoming-payments HTTP/1.1
+ Accept: application/json
+ Content-Type: application/json
+ Authorization: OS9M2PMHKUR64TB8N6BW7OZB8CDFONP219RP1LT0
+ Host: wallet.example
+ ```
+
+7. The response to the agent contains unique payment details that will be used to address the payment to your payment account.
+
+ ```http wrap
+ {
+ "id": "https://wallet.example/alice/incoming-payments/08394f02-7b7b-45e2-b645-51d04e7c330c",
+ "walletAddress": "https://wallet.example/alice",
+ "receivedAmount": {
+ "value": "0",
+ "assetCode": "USD",
+ "assetScale": 2
+ },
+ "completed": false,
+ "createdAt": "2022-03-12T23:20:50.52Z"
+ }
+ ```
+
+8. At this point, the agent has finished communicating with your wallet provider. Now, the agent issues a
+ ```http wrap
+ POST /visitor/outgoing-payment HTTP/1.1
+ Accept: application/json
+ Content-Type: application/json
+ Authorization: {{ GNAP outgoingPaymentGrant.accessToken.value }}
+ Host: cloudninewallet.example
+
+ {
+ "walletAddress": "https://wallet.example/alice",
+ "quoteId": "https://wallet.example/quotes/ab03296b-0c8b-4776-b94e-7ee27d868d4d",
+ }
+ ```
+
+9. The response from your visitor's wallet provider indicates whether the outgoing payment was created on their side. A payment could fail if the visitor has insufficient funds, for example. The following example indicates the outgoing payment was successfully created.
+
+
+ ```http wrap
+ {
+ "id": "https://cloudninewallet.example/visitor/outgoing-payments/8c68d3cc-0a0f-4216-98b4-4fa44a6c88cf",
+ "walletAddress": "https://cloudninewallet.example/visitor/",
+ "receiver": "https://wallet.example/alice/incoming-payments/08394f02-7b7b-45e2-b645-51d04e7c330c",
+ "receiveAmount": {
+ "value": "2",
+ "assetCode": "USD",
+ "assetScale": 2
+ },
+ "debitAmount": {
+ "value": "2",
+ "assetCode": "USD",
+ "assetScale": 2
+ },
+ "sentAmount": {
+ "value": "0",
+ "assetCode": "USD",
+ "assetScale": 2
+ },
+ "createdAt": "2022-03-12T23:20:55.52Z",
+ "updatedAt": "2022-03-12T23:20:55.52Z"
+ }
+ ```
+
+
\ No newline at end of file
diff --git a/src/content/docs/docs/resources/libraries.mdx b/src/content/docs/experiment/libraries.mdx
similarity index 100%
rename from src/content/docs/docs/resources/libraries.mdx
rename to src/content/docs/experiment/libraries.mdx
diff --git a/src/content/docs/experiment/link-element.mdx b/src/content/docs/experiment/link-element.mdx
new file mode 100644
index 00000000..b7134ee0
--- /dev/null
+++ b/src/content/docs/experiment/link-element.mdx
@@ -0,0 +1,136 @@
+---
+title: Monetization element
+tableOfContents:
+ maxHeadingLevel: 4
+---
+
+import { LinkOut, Hidden } from "@interledger/docs-design-system";
+import Specification from '/src/components/docs/Specification.astro'
+import BrowserCompat from '/src/components/docs/BrowserCompat.astro'
+import data from '/src/data/browser-compat-data/link.json'
+import { Steps, Tabs, TabItem, Badge } from '@astrojs/starlight/components';
+
+URL format , from your wallet provider
+* Your document must be served over HTTPS
+
+## Monetization `` element
+
+The monetization `` element is what indicates your HTML page supports Web Monetization.
+
+### Syntax
+
+```html
+
+```
+
+* The `rel` attribute is always `monetization`
+* The `href` attribute equals your wallet address or your payment pointer in URL format
+
+For example:
+
+```html
+
+```
+
+### Placement
+
+A monetization `` is `body-ok`, meaning it's allowed in your page's `` and/or ``.
+
+### Multiple monetization links
+
+An HTML page can contain multiple monetization `` elements; however, your site visitor’s [Web Monetization agent](#web-monetization-agent) could be designed to handle multiple links in a particular way. For example, an agent might:
+* Split payments evenly between all links
+* Split payments between the first few links it finds
+* Send the amount only to the first link it finds and ignore all others
+
+:::tip[Recommendation]
+The Web Monetization agent built into the Interledger Foundation's extension splits payments evenly between all links. We recommend other extension developers follow this approach.
+:::
+
+### Iframes
+
+Nested browsing contexts (iframes) can contain monetization `` elements; however, your site visitor's [Web Monetization agent](#web-monetization-agent) determines how iframes are monetized. A few examples of how a Web Monetization agent can monetize iframes include:
+
+* Splitting payments evenly between all monetization links within both the parent and the iframe
+* Splitting payments evenly between all monetization links in the parent and the first monetization link it finds in the iframe's ``, while ignoring any other monetization links in the iframe
+ :::note
+ This is the approach used in the Interledger Foundation's extension .
+ :::
+* Sending payments to the first monetization link it finds in the parent browsing context and ignoring all other monetization links in the parent and the iframe
+
+### Audio, video, and picture elements
+
+The following HTML elements can be web monetized by adding the `` element between the open and close tags.
+
+
+
+ ```html
+
+ ```
+
+
+ ```html
+
+ ```
+
+
+ ```html
+
+
+
+ ```
+
+
+
+## How it works
+
+### HTMLLinkElement
+
+The HTML DOM API's `HTMLLinkElement` interface defines how the `` element functions. The `` element is what allows you to link your HTML page to a resource.
+
+The two most recognizable `HTMLLinkElement` properties are `href` and `rel`. The `href` property defines the URL to the resource. The `rel` property indicates the type of link, or relationship, the resource has to the current page.
+
+### rel="monetization" link type
+
+Browsers already know how to interpret certain `rel` values because of web standards. One such standard is `stylesheet`. When a browser loads a page that contains ``, the browser automatically knows to import a style sheet from the given URL.
+
+The `monetization` link type, however, is not yet a standard. Major web browsers don't automatically know what to do when encountering this link type in a page. Until `monetization` becomes a standard, browsers must rely on a Web Monetization agent.
+
+### Web Monetization agent
+
+A Web Monetization agent is a non-user facing component of the Interledger Foundation's extension .
+
+The purpose of the Web Monetization agent is to recognize when a page is web monetized and automatically carry out certain tasks. These tasks include:
+
+* Extending the HTML DOM API so that `monetization` is a valid link type
+* Processing the monetization link or links within an HTML page
+* Instrumenting payments by calling the [Open Payments APIs](/experiment/how-payments-work#a-deeper-dive-into-payments), which are APIs implemented by wallet providers
+* Firing [`monetization`](/experiment/events) events after an outgoing payment is created
+* Processing `monetization` events sent to the browser window via the `onmonetization` event handler
+* Enabling the CSP [`monetization-src`](/experiment/csp) and Permissions Policy [`monetization`](/experiment/permissions-policy) directives
+
+Until Web Monetization agents are natively built in to web browsers, an agent must be added to browsers in some other way. That's why the agent is included as part of the Interledger Foundation's extension.
+
+
+
+// ## Browser compatibility
+
+
+
+## Specifications
+
+Permissions Policy provides a mechanism for you to explicitly declare what functionality can and cannot be used on your website.
+
+The `monetization` policy directive allows you to enable and disable the Web Monetization API within a document and within any of the document's nested browsing contexts (iframes).
+
+## Syntax
+
+```http
+Permissions-Policy: monetization=(allowlist)
+```
+
+Where `(allowlist)` is a list of origins permitted to use the Web Monetization API.
+
+The default allowlist is `self`.
+
+```http
+Permissions-Policy: monetization=(self)
+```
+
+:::note
+The `allow` attribute determines the container policy that will be used when the permissions policy for a `Document` in the iframe's content navigable is initialized. Adding or removing the `monetization` attribute has no effect on an already-loaded `Document`.
+:::
+
+## Example
+
+You want to allow Web Monetization on your website and in all nested browsing contexts (iframes) in the same origin.
+
+You configure your web server to return the `Permissions-Policy` HTTP header on each of your pages.
+
+```http
+Permissions-Policy: monetization=(self)
+```
+
+
+
+// ## Browser compatibility
+
+
+
+## Specifications
+
+paymentpointers.org . Enter your payment pointer into the _Payment Pointer_ field. Take note of the URL that automatically generates in the adjacent field. This is your payment URL. You'll need it in the next step.
+
+```http
+$wallet.example.com/alice
+```
+
+### Wallet address
+
+If you have a wallet address that starts with `https://`, then you have your payment URL. Proceed to the next step.
+
+```http
+https://wallet.example.com/alice
+```
+
+
+
+## Step 2 - Web monetize your page
+
+
+
+1. Create your Web Monetization link tag using the format below. Add your payment URL as the `href` value.
+
+ ```http
+
+ ```
+
+ For example:
+
+ ```http
+
+ ```
+
+2. Add the `` to the `` section of your page.
+ ```html title="Example"
+
+
+ My Site
+
+
+
+ ```
+
+
+Congratulations! Your page is now web monetized. Add the `` to any page of your site you want to monetize.
+
+For more information, visit the [Monetization link element](/experiment/link-element) page.
\ No newline at end of file
diff --git a/src/content/docs/experiment/wmapi-interfaces.mdx b/src/content/docs/experiment/wmapi-interfaces.mdx
new file mode 100644
index 00000000..155dbb33
--- /dev/null
+++ b/src/content/docs/experiment/wmapi-interfaces.mdx
@@ -0,0 +1,65 @@
+---
+title: Monetization interfaces
+---
+
+import { LinkOut, Hidden } from "@interledger/docs-design-system";
+import { Badge } from '@astrojs/starlight/components';
+import Specification from '/src/components/docs/Specification.astro'
+import BrowserCompat from '/src/components/docs/BrowserCompat.astro'
+import data from '/src/data/browser-compat-data/monetizationevent.json'
+
+
+
+
+By listening for `monetization` events, you can use the information returned in the following properties to verify payments.
+
+* [amountSent](/experiment/events#amountsent) - The currency amount and code of the sent payment. Contains two variables, `value` and `currency`, constructed by the [`MonetizationCurrencyAmount`](#monetizationcurrencyamount) interface.
+* [incomingPayment](/experiment/events#incomingpayment) - A URL you can use to determine if a payment was received and, if so, the amount received.
+* [paymentPointer](/experiment/events#paymentpointer) - The URL of the payment pointer or wallet address that the incoming payment request was sent to.
+
+Visit the [Monetization Events](/experiment/events) page for more information.
+
+
+
+// ## Browser compatibility
+
+
+
+### Specifications
+
+`PaymentCurrencyAmount` dictionary.
+
+### Specifications
+
+l'adresse du portefeuille pour Alice, propriétaire du site.
-3. Le navigateur de Bob ou l'extension, envoie des demandes à l'adresse du portefeuille d'Alice pour obtenir l'autorisation et les instructions nécessaires à l'envoi d'un paiement.
-4. Une fois l'autorisation accordée et les instructions de paiement reçues, le navigateur/extension envoie des demandes à l'adresse du portefeuille de Bob pour initier le paiement sortant.
-5. Le flux de la Web Monetization se fini. Le traitement des paiements, l'échange de devises et le règlement ont lieu entre les deux comptes par l'intermédiaire d'un rail de paiement commun.
-
-### Spécification des montants et des devises de paiement
-
-La Web Monetization ne permet pas à un site web de spécifier un montant ou une devise de paiement. Elle permet seulement au site d'indiquer au navigateur qu'il peut accepter des paiements.
-
-Avec l'aide d'un fournisseur WM , votre visiteur décide s'il doit effectuer un paiement, combien et à quelle fréquence, et dans quelle devise. Votre récepteur WM peut alors échanger la devise des paiements entrants en fonction de ce que vous souhaitez recevoir. Cette flexibilité vous permet, ainsi qu'à vos visiteurs, de choisir les méthodes de monétisation qui répondent le mieux à vos besoins.
-
-### Traitement et règlement des paiements
-
-Le rôle de la Web Monetization est d'aider à coordonner les paiements. Elle ne traite ni ne règle les paiements.
-
-À chaque extrémité de la Web Monetization se trouve un compte qui prend en charge les Paiements ouverts . Le fournisseur WM fournit à votre visiteur un compte d'envoi financé. Dans certains cas, le visiteur peut même agir comme son propre fournisseur WM. Le destinataire WM vous fournit un compte de réception.
-
-La Web Monetization communique avec les comptes émetteur et récepteur afin d'obtenir les autorisations et instructions nécessaires à l'envoi et à la réception d'un paiement. Le traitement et le règlement du paiement s'effectuent ensuite entre les comptes émetteur et récepteur, en dehors du flux de la Web Monetisation.
-
-## Version antérieure de la spécification
-
-Une nouvelle version de la spécification relative à la Web Monetization a été publiée en juin 2023. Les utilisateurs de la version précédente doivent tenir compte des éléments suivants :
-
-- La version précédente n'utilisait que le Simple Payment Setup Protocol (SPSP) d'Interledger. La nouvelle version utilise Open Payments .
-- L'élément `` est obsolète en faveur de l'élément [``](/fr/docs/references/html-link-rel-monetization/).
-- L'élément `` ne supporte pas la forme abrégée d'un pointeur de paiement (par exemple, `$wallet.example/alice`). Vous devez utiliser l'URL du point de terminaison auquel le pointeur de paiement se réfère (par exemple, `https://wallet.example/alice`). Si vous avez besoin d'aide pour convertir un pointeur de paiement en son URL équivalent, entrez votre pointeur de paiement dans le champ de saisie sur paymentpointers.org . Dans la plupart des cas, vous pouvez simplement remplacer le `$` par `https://`.
diff --git a/src/content/docs/resources/get-involved.mdx b/src/content/docs/resources/get-involved.mdx
new file mode 100644
index 00000000..0e84adad
--- /dev/null
+++ b/src/content/docs/resources/get-involved.mdx
@@ -0,0 +1,45 @@
+---
+title: Get involved
+---
+
+import { LinkOut } from "@interledger/docs-design-system";
+
+## Participation
+
+* Join our Web Monetization Community calls .
+* Begin a new discussion or contribute to existing discussions in the WICG Web Monetization GitHub repo.
+* Contribute something you’ve built, open a new issue, or contribute to existing issues in the WICG Web Monetization GitHub repo.
+* Suggest changes to the specification by submitting a pull request. For more details about spec contributions and development, visit contributing.md .
+
+## Coding
+
+* Update the existing Web Monetization v1 [tools/libraries](/experiment/libraries/) to the latest spec.
+* Create new Web Monetization tools/plugins for frameworks and libraries.
+* Build applications with new and varied use cases around Web Monetization. For example, you could:
+ * Add Web Monetization to your favorite open source project.
+ * Create tools to allow websites to interact with web monetized visitors. Visual indicators, like celebration confetti, thank you notes, or payment counters are just a few ways to promote interaction.
+* Contribute to the ILF’s Web Monetization extension by coding or testing.
+
+## Community events and hackathons
+
+* Join us at the Interledger Summit and participate in our annual hackathon.
+* Organize your own hackathons, coding sprints, and installa-thons, both online and offline. Run campaigns and encourage participants to develop, collaborate on, and test projects.
+
+## Localization
+
+* Translate and localize the [Intro to Web Monetization page](/docs/) into one of the following languages:
+ * Arabic
+ * Chinese
+ * French
+ * German
+ * Japanese
+ * Portuguese
+ * Spanish
+* Review translated and localized content.
+
+## Documentation
+
+* Contribute to the docs by suggesting additions and improvements.
+* Create tutorials and guides to help others in the community work with Web Monetization.
+
+Review our contribution guide for details.
\ No newline at end of file
diff --git a/src/content/docs/resources/glossary.mdx b/src/content/docs/resources/glossary.mdx
new file mode 100644
index 00000000..994a57cb
--- /dev/null
+++ b/src/content/docs/resources/glossary.mdx
@@ -0,0 +1,92 @@
+---
+title: Glossary
+---
+
+import { LinkOut } from "@interledger/docs-design-system";
+
+## I
+
+
+ +### Interledger Foundation (ILF) + +TheInterledger Foundation (ILF) is a global nonprofit foundation and steward of the Interledger Protocol, the Open Payments standard, and Web Monetization.
+
+The ILF offers an open source [Web Monetization browser extension](/support/use-extension) that showcases a pay-as-you-browse model, allowing you to define how often and how much to pay to web monetized websites.
+
+## O
+
+
+ +### Open Payments + +Open Payments is an open standard for implementation by wallet providers. When implemented, third-party applications, like the Web Monetization extension, can set up payments to and from payment accounts.
+
+Wallet providers who support Open Payments will issue each of their customers' accounts with a unique ID that's either called a wallet address or a payment pointer.
+
+## P
+
+
+ +### Payment pointer + +A payment pointer is a secure, unique identifier that's assigned to payment accounts that use Interledger's Simple Payment Setup Protocol (SPSP) to exchange payment information. The shorthand for a payment pointer starts with `$`. For example, `$wallet.example.com/alice`. + +As a supporter of web monetized content, you'll enter your payment pointer into your Web Monetization extension to link the extension to your account. + +To web monetize your own content, you must convert your payment pointer to its URL equivalent because the monetization `` element does not support the `$` in the `href` value. Enter your payment pointer into the field provided onpaymentpointers.org to get your URL.
+
+## T
+
+
+ +### Test network + +
+ +### Wallet address + +A wallet address is a secure, unique identifier that's assigned to payment accounts that use Open Payments to exchange payment information. All wallet addresses are URLs (e.g., `https://wallet.example.com/alice`); however, not all URLs are wallet addresses. + +As a supporter of web monetized content, you'll enter your wallet address into your Web Monetization extension to link the extension to your account. + +To web monetize your own content, you'll add your wallet address as the `href` value within the monetization `` element. + +### Wallet provider + +A digital wallet provider, such as Fynbos or GateHub, that can assign your payment account a payment pointer or a wallet address to enable you to send and/or receive payments using Web Monetization. + +Wallet providers are regulated entities within the countries they operate. + +### Web Monetization agent + +A non-user facing component of a Web Monetization extension or web browser. The purpose of the Web Monetization agent is to: + +* Recognize when an HTML page contains one or more monetization `` elements +* Parse the payment pointer or wallet address in a monetization `` +* Extend the HTML DOM API so that `monetization` is a valid link type +* Instrument payments by calling the Open Payments APIs +* Fire `monetization` events after an outgoing payment request is created +* Process `monetization` events sent to the browser window via the `onmonetization` event handler +* Enable CSP `monetization-src` and Permissions Policy `monetization` directives + +### Web Monetization service provider + +An entity that has: +* Full control over the financial account from which payments will be made +* Ownership of the financial account's associated payment pointer or wallet address +* The ability to grant authorization for payments to be sent from the account + +If you, as an individual, meet the criteria above, then you are acting as your own Web Monetization service provider. + +In some jurisdictions, it may be impossible to obtain your own Web Monetization payment account. If you're unable to obtain your own account for this or any other reason, you may be able to sign up with a third-party Web Monetization service provider. + +A third-party Web Monetization service provider is an entity that meets the above criteria and with whom you enter into a service agreement. In return, the service provider authorizes you to send payments from their account. The service provider retains full control over the account and can grant/revoke your authorization to send from the account at any time. \ No newline at end of file diff --git a/src/content/docs/resources/wallets.mdx b/src/content/docs/resources/wallets.mdx new file mode 100644 index 00000000..3ba4e9ab --- /dev/null +++ b/src/content/docs/resources/wallets.mdx @@ -0,0 +1,23 @@ +--- +title: Compatible digital wallets +tableOfContents: false +--- + +import { LinkOut } from "@interledger/docs-design-system"; + +The following providers offer Web Monetization-compatible digital wallets. You must have a wallet address or payment pointer from a compatible wallet to send and receive payments. + +Be sure to select a wallet that's available in your region and supports your preferred currency. + +## Wallet providers + +| Provider | Payment Address Label | +| --------------- | --------------- | +|Fynbos | Wallet address |
+| GateHub | Payment pointer |
+
+## Interledger test wallet
+
+The Interledger test wallet provides a great way to test Web Monetization without using real money. The test wallet is an open-source application developed and maintained by the [Interledger Foundation](https://interledger.org).
+
+The [Test Web Monetization](/experiment/guides/test-web-monetization) page gives step-by-step directions for creating an account on the Interledger test network and setting up your test wallet.
\ No newline at end of file
diff --git a/src/content/docs/support/how-payments-work.mdx b/src/content/docs/support/how-payments-work.mdx
new file mode 100644
index 00000000..fe9fa1cb
--- /dev/null
+++ b/src/content/docs/support/how-payments-work.mdx
@@ -0,0 +1,52 @@
+---
+title: How payments work
+---
+
+import { CodeBlock,Tooltip,LinkOut } from "@interledger/docs-design-system";
+
+## Digital wallets
+
+To send (and receive) payments, you must have an account with a compatible digital wallet, discussed more in the next section. Not all digital wallets support sending payments with Web Monetization.
+
+A digital wallet is the entity that supplies you with the financial account you'll use to make payments. Funding your account typically requires you to link a card or bank account to your wallet or make a deposit into your wallet account.
+
+Since wallet providers are a type of financial entity, they are regulated within the countries they operate. One type of regulation, known as KYC (Know Your Customer), requires such entities to collect personal information and verify your identity before allowing you to open an account.
+
+## Web Monetization-compatible digital wallets
+
+You must have an account with a [compatible digital wallet](/resources/wallets) to send payments. For a wallet to be compatible with Web Monetization, the provider must implement the Open Payments standard.
+
+Be sure to select a wallet that's available in your region and supports your preferred currency.
+
+Your wallet provider will assign your account a unique identifier called either a *payment pointer* or a *wallet address*. This identifier is kind of like an email address. It is publicly shareable and you will need it when linking your Web Monetization extension to your wallet.
+
+The format of the identifier depends on whether your wallet provider assigned you a payment pointer or a wallet address.
+
+| Identifier name | Example format |
+| ------- | -------------- |
+| Payment pointer | `$wallet.example.com/alice` |
+| Wallet address | `https://wallet.example.com/alice` |
+
+## Web Monetization extension
+
+The [Web Monetization extension](/support/use-extension) allows you to send payments. It links to your digital wallet account so that it can initiate payments from your wallet on your behalf.
+
+When you set up the extension, you set your budget. Your budget is the max amount that the extension has access to. You can also set the amount that the extension will send per hour. The default is $0.60.
+
+As you browse, the extension checks each page for Web Monetization. When found, the extension grabs the information it needs from the page's code to set up a payment based on your settings.
+
+You can also choose to send a web monetized page a one-time payment. The amount will be deducted from your budget.
+
+## Payments
+
+Your Web Monetization extension acts like a messaging service. It requests information from the recipient's wallet provider, then passes the information, along with your payment instructions, to your wallet provider. It's now up to your wallet provider to deduct the payment from your account and send it to the recipient.
+
+### Micropayments
+
+If you're already somewhat familiar with Web Monetization, you may have heard about how it supports micropayments.
+
+In general, a micropayment is a very small payment. Each wallet provider is responsible for a few things:
+* Deciding whether to support sending and/or receiving micropayments
+* Defining what a micropayment is in the context of their business
+
+Let's say your wallet provider allows you to send micropayments and defines a micropayment as any payment under $0.05 USD. This means that you could send a single payment of, for example, one US cent. Web Monetization is designed to facilitate payments of even a fraction of a cent; however, you can only send that amount if your wallet provider allows it.
\ No newline at end of file
diff --git a/src/content/docs/support/overview.mdx b/src/content/docs/support/overview.mdx
new file mode 100644
index 00000000..f648055b
--- /dev/null
+++ b/src/content/docs/support/overview.mdx
@@ -0,0 +1,55 @@
+---
+title: Overview
+tableOfContents:
+ maxHeadingLevel: 2
+---
+
+import { LinkOut } from '@interledger/docs-design-system'
+
+
+1. Download and install the Web Monetization extension.
+ * Google Chrome and Chromium-based browsers
+ * Firefox
+ * Microsoft Edge
+2. Sign up for a [Web Monetization-compatible wallet](/resources/wallets) that's available in your region and supports your preferred currency.
+3. Get your wallet address or payment pointer from your wallet provider.
+ * Example wallet address - `https://wallet.example.com/alice`
+ * Example payment pointer - `$wallet.example.com/alice`
+4. [Configure](/support/use-extension) the extension.
+5. Visit a web monetized site.
+
\ No newline at end of file
diff --git a/src/content/docs/support/use-extension.mdx b/src/content/docs/support/use-extension.mdx
new file mode 100644
index 00000000..ec700890
--- /dev/null
+++ b/src/content/docs/support/use-extension.mdx
@@ -0,0 +1,214 @@
+---
+title: Use the extension
+---
+
+import { Steps } from '@astrojs/starlight/components';
+import { LinkOut, StylishHeader } from "@interledger/docs-design-system";
+
+The Interledger Foundation's Web Monetization [browser extension](#1-download-and-install-the-extension) allows you to support your favorite web monetized sites directly from your web browser in a quick, non-intrusive, and privacy-preserving way.
+
+Web monetized sites
+
+To use the extension to make Web Monetization payments, the site you visit must be web monetized. Since Web Monetization is fairly new, we encourage content owners and publishers tell their audience they're web monetized via a banner or some other method.
+
+If you're interested in web monetizing your own content, the [quick start guide](/experiment/quick-start) is a good place to start.
+
+Web Monetization payments
+
+To make Web Monetization payments, you only need a digital wallet from a Web Monetization-compatible [wallet provider](/resources/wallets). There's no site-by-site account or subscription required for each individual site you want to support.
+
+A web monetized site cannot initiate payments from your digital wallet. When you link the browser extension to your digital wallet, you're giving the extension permission to send payments on your behalf. These payments are automatically and continuously sent to each web monetized site you visit. You can also globally [disable continuous payments](#change-your-continuous-payment-settings).
+
+The sites you pay are not provided with any of your personally identifiable information, such as your name, email address, or IP address.
+
+:::note
+Sending a payment to a web monetized site does not guarantee an ad-free experience. The decision to show or hide ads in response to a Web Monetization payment is entirely up to each content owner or publisher.
+:::
+
+## Set up the extension
+
+### 1. Download and install the extension
+
+The extension is currently supported in the following browsers. We plan to support more browsers in the future.
+
+* Google Chrome and Chromium-based browsers
+* Mozilla Firefox
+* Microsoft Edge
+
+:::note[Permissions]
+The extension will ask for permission to access your browser tabs and your data for all websites. The extension requires these permissions to check each page you visit for the Web Monetization [``](/experiment/link-element) element.
+:::
+
+### 2. Sign up with a compatible digital wallet
+
+Sign up with a Web Monetization-compatible [wallet provider](/resources/wallets).
+
+After you've created your digital wallet, you'll be provided with a type of URL called a *wallet address*. You need this address in the next step.
+
+```html title="Example wallet address"
+https://wallet.example.com/alice
+```
+
+### 3. Configure the extension
+
+
+1. Open the extension and enter your wallet address in the given field.
+ 
+2. Enter the amount to make available to spend.
+3. Optionally select the **Renew monthly** toggle. If you choose to not renew monthly, you'll need to manually [add more funds](#adjust-your-budget) when your remaining balance is zero.
+4. Click **Connect**.
+5. Click **Agree** to allow the extension to connect to your wallet and add a key to your account.
If your wallet provider's website opens in your browser, proceed to the next step. If you receive a connection error, review the instructions for [resolving the error](#resolve-a-key-addition-failure). +6. Sign in to your wallet account if you haven't already, then confirm the connection and budget amount. Below is an example confirmation screen.
A success screen appears when the connection is successful.
+
+
+## Change your continuous payment settings
+
+A continuous payment is a payment that recurs at your set rate for as long as you are active on a web monetized page. When you leave the page, the payments stop.
+
+Continuous payments are enabled by default and sent at a rate of $0.60 USD per hour. Use the instructions below to change the rate or disable continuous payments.
+
+
+1. Click the **Settings** icon in the upper-right of the extension.
+
+2. Select the *Rate* tab.
+
+3. Enter the amount the extension will send, per hour, to web monetized sites.
+4. Select the **Continuous payment** toggle to enable/disable continuous payments. This is a global setting that applies to all web monetized pages you visit.
+
+
+## Make a one-time payment
+
+You can make a one-time payment to a page instead of -- or in addition to -- continuous payments. The amount of the one-time payment is deducted from your budget.
+
+
+1. Ensure the URL shown above the amount field is the page you intend to pay.
+
+2. Enter an amount. Be sure your balance can cover the amount, otherwise the payment will fail. Click **Send now**.
+
+
+
+## Adjust your budget
+
+
+1. Click the **Settings** icon in the upper-right of the extension.
+
+2. Select the *Budget* tab.
+
+3. Enter the new amount in the **Budget amount** field.
+4. Select the **Monthly** toggle to enable/disable monthly renewals of your budget.
+5. Click **Submit changes**. A new tab opens to your wallet provider.
+6. Sign in to your wallet account if you haven't already, then confirm the new budget.
+
+
+## Disconnect the extension from your wallet
+
+When you disconnect the extension from your wallet, the extension can no longer make payments. You can always reconnect your wallet later.
+
+:::tip[Remaining balance]
+You won't lose your remaining balance if you disconnect the extension from your wallet. Your remaining balance will remain in your wallet account.
+:::
+
+The extension only supports one wallet connection at a time. If, for example, you have two wallet accounts from which you want to make payments, you must disconnect from the first wallet before you can connect the extension to your second wallet.
+
+
+1. Click the **Settings** icon in the upper-right of the extension.
+
+2. Click **Disconnect**.
+
+ The extension's setup screen appears with your previously used wallet address and budget settings prefilled.
+ 
+
+
+## Resolve a key addition failure
+
+When you try to connect the extension to your digital wallet, the extension attempts to automatically connect with your wallet provider to add a key to your wallet account.
+
+You'll receive an error if the extension is unable to add the key.
+
+
+
+When this happens, you must copy the key that appears in the extension and manually add it to your wallet account. The steps for adding the key to your account will vary between wallet providers.
+
+Interledger Wallet
+
+Follow these steps if your wallet provider is Interledger wallet .
+
+
+1. Sign in to your Interledger Wallet.
+2. Select **Settings** from the left menu.
+3. Select **Keys**.
+4. Click **Add a public key**.
+5. Enter a nickname for the key, then paste the key into the public key field.
+6. Click **Save**.
+7. Go back to your extension and try connecting again.
+
+
+Contact Interledger Wallet at support@interledger.app if you need additional help.
+
+## Extension states
+
+When the **Continuous payment** toggle is on, the extension icon appears in color. When the toggle is off, the icon appears in gray. Whether a page is web monetized does not affect the color of the icon.
+
+#### Continuous payment toggled on
+
+| Icon | State |
+| :----: | ----- |
+|
diff --git a/src/pages/specification/index.html b/src/pages/specification/index.html
index 0e4a4519..3d6a6c6e 100644
--- a/src/pages/specification/index.html
+++ b/src/pages/specification/index.html
@@ -1012,7 +1012,7 @@
This section is non-normative.
| Bubbles | +Yes | +
|---|---|
| Cancelable | +No | +
| Event handler property | +`onmonetization` | +
+ +### Interledger Foundation (ILF) + +The
+ +### Open Payments + +
+ +### Payment pointer + +A payment pointer is a secure, unique identifier that's assigned to payment accounts that use Interledger's Simple Payment Setup Protocol (SPSP) to exchange payment information. The shorthand for a payment pointer starts with `$`. For example, `$wallet.example.com/alice`. + +As a supporter of web monetized content, you'll enter your payment pointer into your Web Monetization extension to link the extension to your account. + +To web monetize your own content, you must convert your payment pointer to its URL equivalent because the monetization `` element does not support the `$` in the `href` value. Enter your payment pointer into the field provided on
+ +### Test network + +
The ILF provides...
+ +### Test wallet + +The ILF provides...
+ +## W + ++ +### Wallet address + +A wallet address is a secure, unique identifier that's assigned to payment accounts that use Open Payments to exchange payment information. All wallet addresses are URLs (e.g., `https://wallet.example.com/alice`); however, not all URLs are wallet addresses. + +As a supporter of web monetized content, you'll enter your wallet address into your Web Monetization extension to link the extension to your account. + +To web monetize your own content, you'll add your wallet address as the `href` value within the monetization `` element. + +### Wallet provider + +A digital wallet provider, such as Fynbos or GateHub, that can assign your payment account a payment pointer or a wallet address to enable you to send and/or receive payments using Web Monetization. + +Wallet providers are regulated entities within the countries they operate. + +### Web Monetization agent + +A non-user facing component of a Web Monetization extension or web browser. The purpose of the Web Monetization agent is to: + +* Recognize when an HTML page contains one or more monetization `` elements +* Parse the payment pointer or wallet address in a monetization `` +* Extend the HTML DOM API so that `monetization` is a valid link type +* Instrument payments by calling the Open Payments APIs +* Fire `monetization` events after an outgoing payment request is created +* Process `monetization` events sent to the browser window via the `onmonetization` event handler +* Enable CSP `monetization-src` and Permissions Policy `monetization` directives + +### Web Monetization service provider + +An entity that has: +* Full control over the financial account from which payments will be made +* Ownership of the financial account's associated payment pointer or wallet address +* The ability to grant authorization for payments to be sent from the account + +If you, as an individual, meet the criteria above, then you are acting as your own Web Monetization service provider. + +In some jurisdictions, it may be impossible to obtain your own Web Monetization payment account. If you're unable to obtain your own account for this or any other reason, you may be able to sign up with a third-party Web Monetization service provider. + +A third-party Web Monetization service provider is an entity that meets the above criteria and with whom you enter into a service agreement. In return, the service provider authorizes you to send payments from their account. The service provider retains full control over the account and can grant/revoke your authorization to send from the account at any time. \ No newline at end of file diff --git a/src/content/docs/resources/wallets.mdx b/src/content/docs/resources/wallets.mdx new file mode 100644 index 00000000..3ba4e9ab --- /dev/null +++ b/src/content/docs/resources/wallets.mdx @@ -0,0 +1,23 @@ +--- +title: Compatible digital wallets +tableOfContents: false +--- + +import { LinkOut } from "@interledger/docs-design-system"; + +The following providers offer Web Monetization-compatible digital wallets. You must have a wallet address or payment pointer from a compatible wallet to send and receive payments. + +Be sure to select a wallet that's available in your region and supports your preferred currency. + +## Wallet providers + +| Provider | Payment Address Label | +| --------------- | --------------- | +|
Need overview specific to users
+ +* support web monetized content owners and publishers +* support/contribute/give/say thank you/token or sign of appreciation/express your gratitude +* privacy preserving, non-intrusive; no sharing with the platform/owners/publishers +* no site by site subscriptions + +"Why not just use Venmo?" + +## Benefits + +### Control who, when, and how much to pay. + +All payments to web monetized sites must be explicitly authorized or pre-authorized by you. Sites cannot pull payments from your payment account under any circumstance. + +### Your payments are private. + +Web Monetization does not provide the recipient with personally identifiable information such as your name, wallet address/payment pointer, IP address, or anything else the recipient could use to correlate a payment with you. + +### You choose your wallet provider. + +Some solutions require you to sign up for a particular application, platform, or service provider to support your favorite content. As long as your chosen wallet provider is compatible with Web Monetization, you can send payments to any web monetized sites. + +### Your payment details are stored with your wallet. + +Part of setting up the Web Monetization extension involves linking the extension to your wallet. This link allows the extension to communicate with your wallet without storing sensitive payment details in the extension or in the browser itself. + +### Web Monetization is not tied to a specific currency. + +Part of choosing a compatible digital wallet is selecting one that allows you to pay in your preferred currency. When you send a payment, the recipient will receive it in the currency they selected when signing up with their compatible wallet provider. + +### There's no separate Web Monetization account(s). + +The only account you need is the one you create with your wallet provider. You don't have to create separate accounts for each website you want to pay. + +## Constraints + +### Web Monetization is not an ad blocker. + +Sending a payment to a web monetized site does not guarantee an ad-free experience. Web Monetization provides publishers an alternative +revenue model to ads, but the decision to not load ads in response to a payment is entirely theirs. + +### The network of Web Monetization-enabled wallet providers is nascent, but growing. + +Sending and receiving payments via Web Monetization requires the sender and the recipient to have an account with a Web Monetization-enabled wallet provider. + +In general, wallet providers are regulated entities within the countries they operate. Obtaining the proper licensing and registration to become a wallet provider can be an expensive, complex, and time consuming process. In addition, there are technical integrations required to support Web Monetization. All of this means a compatible wallet provider may not yet be available in your area. \ No newline at end of file diff --git a/src/content/docs/support/quick-start.mdx b/src/content/docs/support/quick-start.mdx new file mode 100644 index 00000000..4b21a497 --- /dev/null +++ b/src/content/docs/support/quick-start.mdx @@ -0,0 +1,20 @@ +--- +title: Quick start guide +tableOfContents: false +--- + +import { Steps } from '@astrojs/starlight/components'; +import { LinkOut } from "@interledger/docs-design-system"; + +
+2. Enter the amount to make available to spend.
+3. Optionally select the **Renew monthly** toggle. If you choose to not renew monthly, you'll need to manually [add more funds](#adjust-your-budget) when your remaining balance is zero.
+4. Click **Connect**.
+5. Click **Agree** to allow the extension to connect to your wallet and add a key to your account.If your wallet provider's website opens in your browser, proceed to the next step. If you receive a connection error, review the instructions for [resolving the error](#resolve-a-key-addition-failure). +6. Sign in to your wallet account if you haven't already, then confirm the connection and budget amount. Below is an example confirmation screen.
A success screen appears when the connection is successful.
+
+2. Select the *Rate* tab.
+
+3. Enter the amount the extension will send, per hour, to web monetized sites.
+4. Select the **Continuous payment** toggle to enable/disable continuous payments. This is a global setting that applies to all web monetized pages you visit.
+
+2. Enter an amount. Be sure your balance can cover the amount, otherwise the payment will fail. Click **Send now**.
+
+
+2. Select the *Budget* tab.
+
+3. Enter the new amount in the **Budget amount** field.
+4. Select the **Monthly** toggle to enable/disable monthly renewals of your budget.
+5. Click **Submit changes**. A new tab opens to your wallet provider.
+6. Sign in to your wallet account if you haven't already, then confirm the new budget.
+
+2. Click **Disconnect**.
+
+ The extension's setup screen appears with your previously used wallet address and budget settings prefilled.
+
+
+
+When this happens, you must copy the key that appears in the extension and manually add it to your wallet account. The steps for adding the key to your account will vary between wallet providers.
+
+
| Page is web monetized and the extension is continuously paying |
+| 
| Page is web monetized, but the extension needs user attention and is **not** continuously paying |
+| 
| Page is **not** web monetized, the extension is **not** continuously paying |
+
+#### Continuous payment toggled off
+
+| Icon | State |
+| :----: | ----- |
+| 
| Page is web monetized, but the extension is **not** continuously paying |
+| 
| Page is web monetized, but the extension needs user attention and is **not** continuously paying |
+| 
| Page is **not** web monetized, so the extension is **not** continuously paying |
+
+## FAQ
+
+
+
+
+I get an error from my wallet provider when linking the extension to my wallet. Why?
+It's hard to say without a specific error message. Two likely scenarios are: +* You waited too long to accept the connection. Your wallet provider might only give you a short window to accept the connection to keep your account safe. +* You accepted the connection too quickly--within seconds. Your wallet provider may do this as a security measure against bots or to ensure you've read the contents of the screen. Interledger Wallet, for example, enforces a minimum five second wait. + +Click **Connect** and try linking your extension again. +
+
diff --git a/src/pages/link-tag.astro b/src/pages/link-tag.astro
index 0d2ec6bc..1cba5baf 100644
--- a/src/pages/link-tag.astro
+++ b/src/pages/link-tag.astro
@@ -13,7 +13,7 @@ const description = t("site.description");
I know the page I'm visiting is web monetized, but the extension says its not. Why?
+The most likely reason is that your wallet provider and the content owner or publisher's wallet provider are not yet able to transact with one another. Your extension will display an exclamation mark within an orange circle. Open the extension to read the messaging. + +Visit the [Web Monetization-enabled wallets](/resources/wallets) page for a list of compatible wallet providers. +Link Element Generator
- Use the Link Element Generator to generate a monetization <link> element for your HTML documents. Just enter your payment pointer into the field and click Generate.
+ Use the Link Element Generator to generate a monetization <link> element for your HTML pages. Just enter your payment pointer or wallet address into the field and click Generate.
Probabilistic Revshare Generator
-Probabilistic revenue sharing (revshare) is one way to share a portion of a web monetized page’s earnings between multiple payment pointers.
-Use this tool to define a list of payment pointers and their weights. Then, add the generated monetization link element to your site. The link will contain a unique URL hosted on https://webmonetization.org/api/revshare/pay/. If you'd prefer to not use a hosted URL, you can set up revshare by adding a script to your site.
Probabilistic revenue sharing (revshare) is one way to share a portion of a web monetized page’s earnings between multiple wallet addresses and payment pointers.
+Use this tool to define a list of wallet addresses, payment pointers, and their weights. Then, add the generated monetization link element to your site. The link will contain a unique URL hosted on https://webmonetization.org/api/revshare/pay/. If you'd prefer to not use a hosted URL, you can set up revshare by adding a script to your site.
Define a new revshare
-Enter each payment pointer that will receive a split of the revenue into the table below. Names are optional. Click Add Share to add more rows.
-You can adjust by percent after two payment pointers are added to the table. Updating one field will update the remaining fields automatically.
-As you adjust weights and percentages, the link element generated below will change. Don’t copy the link until you’re finished. Then, add the link to your site.
Enter each wallet address and/or payment pointer that will receive a split of the revenue into the table below. Names are optional. Click Add Share to add more rows.
+You can adjust by percent after two wallet addresses/payment pointers are added to the table. Updating one field will update the remaining fields automatically.
+As you adjust weights and percentages, the link element generated below will change. Don’t copy the link until you’re finished. Then, add the link to your site.