diff --git a/astro.config.mjs b/astro.config.mjs index 70e5a325..634afdcb 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -56,7 +56,6 @@ export default defineConfig({ components: { Header: './src/components/docs/Header.astro', PageSidebar: './src/components/docs/PageSidebar.astro', - PageTitle: './src/components/docs/PageTitle.astro', }, social: { github: 'https://github.com/WICG/webmonetization', @@ -82,6 +81,10 @@ export default defineConfig({ label: 'Web Monetization flow', link: '/docs/intro/web-monetization-flow', }, + { + label: 'Web Monetization extension', + link: '/docs/intro/web-monetization-extension', + }, ], }, { diff --git a/public/img/docs/extension/budget-tab-full-budget.png b/public/img/docs/extension/budget-tab-full-budget.png new file mode 100644 index 00000000..a7dac3ac Binary files /dev/null and b/public/img/docs/extension/budget-tab-full-budget.png differ diff --git a/public/img/docs/extension/connection-failed.png b/public/img/docs/extension/connection-failed.png new file mode 100644 index 00000000..a3a271a3 Binary files /dev/null and b/public/img/docs/extension/connection-failed.png differ diff --git a/public/img/docs/extension/connection-setup-filled.png b/public/img/docs/extension/connection-setup-filled.png new file mode 100644 index 00000000..025ace77 Binary files /dev/null and b/public/img/docs/extension/connection-setup-filled.png differ diff --git a/public/img/docs/extension/connection-setup.png b/public/img/docs/extension/connection-setup.png new file mode 100644 index 00000000..3efd700c Binary files /dev/null and b/public/img/docs/extension/connection-setup.png differ diff --git a/public/img/docs/extension/connection-success.png b/public/img/docs/extension/connection-success.png new file mode 100644 index 00000000..339c0ad6 Binary files /dev/null and b/public/img/docs/extension/connection-success.png differ diff --git a/public/img/docs/extension/connection-wallet.png b/public/img/docs/extension/connection-wallet.png new file mode 100644 index 00000000..7285ef83 Binary files /dev/null and b/public/img/docs/extension/connection-wallet.png differ diff --git a/public/img/docs/extension/default-gray.png b/public/img/docs/extension/default-gray.png new file mode 100644 index 00000000..5c26598a Binary files /dev/null and b/public/img/docs/extension/default-gray.png differ diff --git a/public/img/docs/extension/disabled-warn.png b/public/img/docs/extension/disabled-attention.png similarity index 100% rename from public/img/docs/extension/disabled-warn.png rename to public/img/docs/extension/disabled-attention.png diff --git a/public/img/docs/extension/disabled-has-links.png b/public/img/docs/extension/disabled-monetized.png similarity index 100% rename from public/img/docs/extension/disabled-has-links.png rename to public/img/docs/extension/disabled-monetized.png diff --git a/public/img/docs/extension/disabled-no-links.png b/public/img/docs/extension/disabled-unmonetized.png similarity index 100% rename from public/img/docs/extension/disabled-no-links.png rename to public/img/docs/extension/disabled-unmonetized.png diff --git a/public/img/docs/extension/enabled-warn.png b/public/img/docs/extension/enabled-attention.png similarity index 100% rename from public/img/docs/extension/enabled-warn.png rename to public/img/docs/extension/enabled-attention.png diff --git a/public/img/docs/extension/enabled-has-links.png b/public/img/docs/extension/enabled-monetized.png similarity index 100% rename from public/img/docs/extension/enabled-has-links.png rename to public/img/docs/extension/enabled-monetized.png diff --git a/public/img/docs/extension/enabled-no-links.png b/public/img/docs/extension/enabled-unmonetized.png similarity index 100% rename from public/img/docs/extension/enabled-no-links.png rename to public/img/docs/extension/enabled-unmonetized.png diff --git a/public/img/docs/extension/example-grant.png b/public/img/docs/extension/example-grant.png new file mode 100644 index 00000000..838c6617 Binary files /dev/null and b/public/img/docs/extension/example-grant.png differ diff --git a/public/img/docs/extension/extension-configure.png b/public/img/docs/extension/extension-configure.png deleted file mode 100644 index e88ef322..00000000 Binary files a/public/img/docs/extension/extension-configure.png and /dev/null differ diff --git a/public/img/docs/extension/extension-connection-success.png b/public/img/docs/extension/extension-connection-success.png deleted file mode 100644 index 902729f7..00000000 Binary files a/public/img/docs/extension/extension-connection-success.png and /dev/null differ diff --git a/public/img/docs/extension/extension-disconnect.png b/public/img/docs/extension/extension-disconnect.png deleted file mode 100644 index 3b639b62..00000000 Binary files a/public/img/docs/extension/extension-disconnect.png and /dev/null differ diff --git a/public/img/docs/extension/extension-grant.png b/public/img/docs/extension/extension-grant.png deleted file mode 100644 index 7b7eddfa..00000000 Binary files a/public/img/docs/extension/extension-grant.png and /dev/null differ diff --git a/public/img/docs/extension/extension-pay.png b/public/img/docs/extension/extension-pay.png deleted file mode 100644 index 62b357ec..00000000 Binary files a/public/img/docs/extension/extension-pay.png and /dev/null differ diff --git a/public/img/docs/extension/otp-send-now.png b/public/img/docs/extension/otp-send-now.png new file mode 100644 index 00000000..2b710cb8 Binary files /dev/null and b/public/img/docs/extension/otp-send-now.png differ diff --git a/public/img/docs/extension/otp-success.png b/public/img/docs/extension/otp-success.png new file mode 100644 index 00000000..b0f1bbf3 Binary files /dev/null and b/public/img/docs/extension/otp-success.png differ diff --git a/public/img/docs/extension/rate-tab.png b/public/img/docs/extension/rate-tab.png new file mode 100644 index 00000000..fd0a6687 Binary files /dev/null and b/public/img/docs/extension/rate-tab.png differ diff --git a/public/img/docs/extension/settings-icon.png b/public/img/docs/extension/settings-icon.png new file mode 100644 index 00000000..2abaa3f7 Binary files /dev/null and b/public/img/docs/extension/settings-icon.png differ diff --git a/public/img/docs/extension/wallet-tab.png b/public/img/docs/extension/wallet-tab.png new file mode 100644 index 00000000..0767104e Binary files /dev/null and b/public/img/docs/extension/wallet-tab.png differ diff --git a/src/components/docs/PageTitle.astro b/src/components/docs/PageTitle.astro deleted file mode 100644 index ab1980d6..00000000 --- a/src/components/docs/PageTitle.astro +++ /dev/null @@ -1,24 +0,0 @@ ---- -import type { Props } from '@astrojs/starlight/props'; -import Default from '@astrojs/starlight/components/PageTitle.astro'; -const { labels, lang, lastUpdated } = Astro.props; ---- - - -{ - lastUpdated && ( -

- {labels['page.lastUpdated']}{' '} - -

- ) -} - - diff --git a/src/content/docs/docs.mdx b/src/content/docs/docs.mdx index fb2a83f3..5d58896c 100644 --- a/src/content/docs/docs.mdx +++ b/src/content/docs/docs.mdx @@ -21,9 +21,9 @@ It can take a bit of work to implement payments on a website. If your site alrea ## Introducing Web Monetization -Web Monetization (WM) aims to simplify the payment experience for you and your website visitors. It’s an open technology that allows websites to automatically receive payments from visitors, facilitated by the visitor’s browser and their preferred WM provider. +Web Monetization aims to simplify the payment experience for you and your website visitors. It’s an open technology that allows websites to automatically receive payments from visitors. -It’s a proposed standard that allows your visitors to pay an amount of their choosing with little to no user interaction. It enables a website to automatically signal to web browsers that it can accept payments and enables web browsers to facilitate a payment by: +It’s a proposed standard that allows your visitors to pay an amount of their choosing with little to no user interaction. It enables a website to automatically signal to web browsers that it can accept payments. With this signal, web browsers facilitate a payment from the visitor to the site by: - Obtaining authorization to initiate the payment. - Gathering details and issuing instructions to start the money movement process. @@ -49,13 +49,13 @@ The following image shows the Web Monetization flow at a high level. Some steps Web Monetization doesn’t allow a website to specify a payment amount or currency. It only allows the site to tell the browser it can accept payments. -With the help of a WM provider, your visitor decides whether to make a payment, how much and how often to pay, and in which currency. Your WM receiver can then exchange the currency of incoming payments based on what you want to receive. This flexibility allows you and your visitors to choose the monetization methods that best suit your needs. +With the help of a Web Monetization provider, your visitor decides whether to make a payment, how much and how often to pay, and in which currency. Your Web Monetization receiver can then exchange the currency of incoming payments based on what you want to receive. This flexibility allows you and your visitors to choose the monetization methods that best suit you both. ### Processing and settling payments Web Monetization’s role is to help coordinate payments. It does not process or settle payments. -At each end of Web Monetization is an account that supports Open Payments. The WM provider supplies your visitor with a funded sending account. In some cases, the visitor could even act as their own WM provider. The WM receiver supplies you with a receiving account. +At each end of Web Monetization is an account that supports Open Payments. The Web Monetization provider supplies your visitor with a funded sending account. In some cases, the visitor could even act as their own Web Monetization provider. The Web Monetization receiver supplies you with a receiving account. Web Monetization communicates with the sending and receiving accounts to obtain the necessary authorizations and instructions for a payment to be sent and received. Payment processing and settlement then occurs between the sending and receiving accounts, outside of the Web Monetization flow. diff --git a/src/content/docs/docs/guides/add-a-streaming-payments-counter.mdx b/src/content/docs/docs/guides/add-a-streaming-payments-counter.mdx index a25b4c61..f9ca2847 100644 --- a/src/content/docs/docs/guides/add-a-streaming-payments-counter.mdx +++ b/src/content/docs/docs/guides/add-a-streaming-payments-counter.mdx @@ -66,7 +66,7 @@ The `monetization` event contains details about the payments that occur. The `am 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). +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 Web Monetization receiver). ```js // initialize currency on first progress event diff --git a/src/content/docs/docs/guides/monetize-page.mdx b/src/content/docs/docs/guides/monetize-page.mdx index bd79b5c5..53eacd2e 100644 --- a/src/content/docs/docs/guides/monetize-page.mdx +++ b/src/content/docs/docs/guides/monetize-page.mdx @@ -9,7 +9,7 @@ This page provides basic instructions for adding Web Monetization to a web page. ## Prerequisites - Web monetized pages must be secure and served over HTTPS. -- You must have the wallet address assigned to you by your WM receiver. +- You must have the wallet address assigned to you by your Web Monetization-enabled [wallet provider](/docs/resources/op-wallets). ## Monetize a page @@ -30,7 +30,7 @@ For example: ### Multiple monetization links -A single HTML document can contain multiple monetization `` elements; however, it's up to each WM provider to decide how they want to handle this scenario. We recommend WM providers split the payments evenly between the links. +A single HTML document can contain multiple monetization `` elements; however, it's up to each Web Monetization provider to decide how they want to handle this scenario. We recommend Web Monetization providers split the payments evenly between the links. ## Next steps diff --git a/src/content/docs/docs/intro/receiving-payments.mdx b/src/content/docs/docs/intro/receiving-payments.mdx index ba326c36..b8ff48f5 100644 --- a/src/content/docs/docs/intro/receiving-payments.mdx +++ b/src/content/docs/docs/intro/receiving-payments.mdx @@ -4,21 +4,21 @@ title: Receiving payments import { LinkOut } from '@interledger/docs-design-system' -Two key components of receiving a Web Monetization (WM) payment are WM receivers and Open Payments-enabled accounts. +Two key components of receiving a Web Monetization payment are Web Monetization receivers and Open Payments-enabled accounts. :::note -This page describes the role of WM receivers within the Web Monetization ecosystem. It does not explain how to become a receiver. +This page describes the role of Web Monetization receivers within the Web Monetization ecosystem. It does not explain how to become a receiver. ::: -## WM receivers +## Web Monetization receivers -A WM receiver is an entity that provides an Open Payments-enabled account into which payments can be received. Individuals interested in receiving Web Monetization payments can establish a relationship with a WM receiver of their choice by signing up for an account. +A Web Monetization receiver is an entity that provides an Open Payments-enabled account into which payments can be received. Individuals interested in receiving Web Monetization payments can establish a relationship with a Web Monetization receiver of their choice by signing up for an account. -We anticipate most WM receivers to offer some form of digital wallet to their users. Many digital wallet providers, not just WM receivers, are often required to verify their users’ identities before allowing funds to be withdrawn. +We anticipate most Web Monetization receivers to offer some form of digital wallet to their users. Many digital wallet providers, not just Web Monetization receivers, are often required to verify their users’ identities before allowing funds to be withdrawn. ## Open Payments and wallet addresses -Open Payments enables open and interoperable payments between WM providers and WM receivers. As such, accounts supplied by both WM providers and WM receivers must implement the Open Payments (OP) specification. +Open Payments enables open and interoperable payments between Web Monetization providers and Web Monetization receivers. As such, accounts supplied by both Web Monetization providers and Web Monetization receivers must implement the Open Payments (OP) specification. The OP specification defines standards for **_access_** to accounts. When granted access, applications and other entities can integrate payments into their feature sets by connecting to their users’ accounts. The ability to then **_execute_** payments between OP-enabled accounts relies on the availability of a common payment rail between the accounts. @@ -26,7 +26,7 @@ The OP specification defines standards for **_access_** to accounts. When grante Access to an OP-enabled account, whether for sending or receiving, always starts with a wallet address. In this context, a wallet address is a unique URL that identifies an OP account and provides an entry point for the Open Payments API. -When an individual establishes an account with a WM receiver, the receiver assigns the account one or more wallet addresses. Wallet addresses allow certain account details to be safely shared with third-parties. Third-parties use the details to initiate payments to or from the account. A WM agent is an example of a third-party. +When an individual establishes an account with a Web Monetization receiver, the receiver assigns the account one or more wallet addresses. Wallet addresses allow certain account details to be safely shared with third-parties. Third-parties use the details to initiate payments to or from the account. A Web Monetization agent is an example of a third-party. A wallet address is required to web monetize a page and must be added as the `href` value within the monetization `` element. @@ -36,23 +36,23 @@ For example: ``` -The WM agent uses the wallet address to begin the money movement process. +The Web Monetization agent uses the wallet address to begin the money movement process. ## Receiving a payment -When an individual visits a web monetized page, their WM agent detects the monetization `` element and associated wallet address. The WM agent sends a request to the wallet address, which is the beginning of a series of API calls needed to: +When an individual visits a web monetized page, their Web Monetization agent detects the monetization `` element and associated wallet address. The Web Monetization agent sends a request to the wallet address, which is the beginning of a series of API calls needed to: 1. Get the details about the underlying receiving account 2. Receive permission to send a payment to the account 3. Create a monetization session within the site visitor's browser tab/window 4. Create the outgoing payment request -When the payment is successful, the funds are deducted from the WM provider’s account and deposited into the WM receiver’s account. +When the payment is successful, the funds are deducted from the Web Monetization provider’s account and deposited into the Web Monetization receiver’s account. For more information, visit the [Web Monetization flow](/docs/intro/web-monetization-flow) page. ## Specifying a payment amount -Web Monetization does not enable a site to specify the amount it wants to receive. The amount, frequency, and other payment parameters are controlled by the web monetized visitor, through their relationship with their WM provider. +Web Monetization does not enable a site to specify the amount it wants to receive. The amount, frequency, and other payment parameters are controlled by the web monetized visitor, through their relationship with their Web Monetization provider. If a site should specify a price, then integration with the W3C’s Payment Request API may be a better alternative to Web Monetization. The Payment Request API allows sites to ask to be paid a certain amount, then the browser (typically with the user’s approval) pays that amount. diff --git a/src/content/docs/docs/intro/sending-payments.mdx b/src/content/docs/docs/intro/sending-payments.mdx index 634f1379..126bfc3a 100644 --- a/src/content/docs/docs/intro/sending-payments.mdx +++ b/src/content/docs/docs/intro/sending-payments.mdx @@ -4,25 +4,25 @@ title: Sending payments import { LinkOut, Tooltip } from '@interledger/docs-design-system' -Three key components of sending a Web Monetization (WM) payment are: +Three key components of sending a Web Monetization payment are: -- WM providers +- Web Monetization providers - Open Payments-enabled accounts -- WM agents +- Web Monetization agents :::note -This page describes the roles of WM providers and WM agents within the Web Monetization ecosystem. It does not explain how to become a provider or develop an agent. +This page describes the roles of Web Monetization providers and Web Monetization agents within the Web Monetization ecosystem. It does not explain how to become a provider or develop an agent. ::: -## WM providers +## Web Monetization providers -For a site visitor to send a Web Monetization payment, the visitor must have some kind of relationship with a WM provider. A WM provider is an entity that provides a funded Open Payments-enabled account from which payments can be sent. A provider can take a number of different forms, such as: +For a site visitor to send a Web Monetization payment, the visitor must have some kind of relationship with a Web Monetization provider. A Web Monetization provider is an entity that provides a funded Open Payments-enabled account from which payments can be sent. A provider can take a number of different forms, such as: - A company that uses its own account to make payments on behalf of its customers - An app that’s authorized to hook directly into a user’s personal account -- An individual that hooks their personal account up to a WM agent +- An individual that hooks their personal account up to a Web Monetization agent -In addition to providing funded accounts, WM providers are responsible for defining the payment models they support and implementing business logic and rules. For example, a WM provider might: +In addition to providing funded accounts, Web Monetization providers are responsible for defining the payment models they support and implementing business logic and rules. For example, a Web Monetization provider might: - Only send payments in fiat currencies - Support one-time payments and micropayments, but not real-time streaming payments @@ -33,7 +33,7 @@ For a provider to send a Web Monetization payment on behalf of an individual, th ## Open Payments and wallet addresses -Open Payments enables open and interoperable payments between WM providers and WM receivers. As such, accounts supplied by both WM providers and WM receivers must implement the Open Payments (OP) specification. +Open Payments enables open and interoperable payments between Web Monetization providers and Web Monetization receivers. As such, accounts supplied by both Web Monetization providers and Web Monetization receivers must implement the Open Payments (OP) specification. The OP specification defines standards for **_access_** to accounts. When granted access, applications and other entities can integrate payments into their feature sets by connecting to their users’ accounts. The ability to then **_execute_** payments between OP-enabled accounts relies on the availability of a common payment rail between the accounts. @@ -41,25 +41,25 @@ The OP specification defines standards for **_access_** to accounts. When grante Access to an OP-enabled account, whether for sending or receiving, always starts with a wallet address. In this context, a wallet address is a unique URL that identifies an OP account and provides an entry point for the Open Payments API. -A wallet address allows certain account details to be safely shared with third-parties. Third-parties use the details to initiate payments to or from the account. A WM agent is an example of a third-party. +A wallet address allows certain account details to be safely shared with third-parties. Third-parties use the details to initiate payments to or from the account. A Web Monetization agent is an example of a third-party. -Depending on the form a WM provider takes, the provider's user may not know, nor have a need to know, any details about the sending account's wallet address. +Depending on the form a Web Monetization provider takes, the provider's user may not know, nor have a need to know, any details about the sending account's wallet address. -## WM agents +## Web Monetization agents -One goal of Web Monetization is for vendors to natively build the standard into web browsers. But we aren’t there yet. For now, users must install a separate WM agent, such as an extension, into their browsers. +One goal of Web Monetization is for vendors to natively build the standard into web browsers. But we aren’t there yet. For now, users must install a separate Web Monetization agent, such as an extension, into their browsers. -The WM agent is code that discovers web monetized pages, exposes the Web Monetization API, and communicates via the Open Payments APIs to obtain authorization and issue instructions for making a payment. +The Web Monetization agent is code that discovers web monetized pages, exposes the Web Monetization API, and communicates via the Open Payments APIs to obtain authorization and issue instructions for making a payment. ### How it works -The WM agent checks each page an individual visits for a monetization `` element. A monetization `` element must contain a valid Open Payments wallet address. For example: +The Web Monetization agent checks each page an individual visits for a monetization `` element. A monetization `` element must contain a valid Open Payments wallet address. For example: ```html ``` -When detected, the WM agent begins a series of API calls to: +When detected, the Web Monetization agent begins a series of API calls to: 1. Get the details about the underlying account 2. Receive permission to send a payment to the account @@ -68,8 +68,8 @@ When detected, the WM agent begins a series of API calls to: Visit the [Add Web Monetization to a page](/docs/guides/monetize-page) and [Web Monetization flow](/docs/intro/web-monetization-flow) pages for more information. -### Link a WM agent to a WM provider +### Link a Web Monetization agent to a Web Monetization provider -The Interledger Foundation is currently developing an open-source WM agent for users (release date TBD). WM providers could also choose to develop their own WM agents. Regardless of who supplies the WM agent, the agent must have a way to link to a provider. For example, a browser extension could allow individuals to select and sign in to their provider from within the extension UI. By signing in, the individual authorizes the extension to obtain settings from the provider and send payments on their behalf. +The Interledger Foundation has developed an open-source Web Monetization [browser extension](/docs/intro/web-monetization-extension) (agent) for users. Web Monetization providers could also choose to develop their own Web Monetization agents. Regardless of who supplies the Web Monetization agent, the agent must have a way to link to a provider. For example, a browser extension could allow individuals to select and sign in to their provider from within the extension UI. By signing in, the individual authorizes the extension to obtain settings from the provider and send payments on their behalf. -Note that the Web Monetization specification itself doesn’t define the interface between the browser and the WM provider. This is intentional. How a browser ultimately chooses to allow WM providers to integrate is up to the browser. We feel that a browser’s extension system is the ideal way to support integration. +Note that the Web Monetization specification itself doesn’t define the interface between the browser and the Web Monetization provider. This is intentional. How a browser ultimately chooses to allow Web Monetization providers to integrate is up to the browser. We feel that a browser’s extension system is the ideal way to support integration. diff --git a/src/content/docs/docs/intro/web-monetization-extension.mdx b/src/content/docs/docs/intro/web-monetization-extension.mdx new file mode 100644 index 00000000..9458b19b --- /dev/null +++ b/src/content/docs/docs/intro/web-monetization-extension.mdx @@ -0,0 +1,214 @@ +--- +title: Web Monetization 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 [Add Web Monetization to a page](/docs/guides/monetize-page) guide 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](/docs/resources/op-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 [``](/docs/references/html-link-rel-monetization) element. +::: + +### 2. Sign up with a compatible digital wallet + +Sign up with a Web Monetization-compatible [wallet provider](/docs/resources/op-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. + Extension setup screen with wallet address and amount fields, renew monthly toggle, and connect button +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.
Consent screen to allow the extension to connect to your wallet provider with agree and decline buttons
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.
Example budget confirmation screen with accept and decline buttonsA success screen appears when the connection is successful.
Web page displaying a connection successful screen + + +## 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. +
Extension showing a cog icon in the upper-right +2. Select the *Rate* tab. +
Rate tab with rate of pay per hour field and continuous payment toggle +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. +
Extension showing an available balance of five dollars, with one dollar in the amount field and send now button active +2. Enter an amount. Be sure your balance can cover the amount, otherwise the payment will fail. Click **Send now**. +
Extension showing an available balance of four dollars, with a success message indicating one dollar was sent + + +## Adjust your budget + + +1. Click the **Settings** icon in the upper-right of the extension. +
Extension showing a cog icon in the upper-right +2. Select the *Budget* tab. +
Budget tab showing your remaining balance and options to change budget amount and renewal +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. +
Extension showing a cog icon in the upper-right +2. Click **Disconnect**. +
Extension's wallet tab showing the disconnect button + The extension's setup screen appears with your previously used wallet address and budget settings prefilled. + Extension's setup screen with previously used wallet address, budget amount, and recurrence setting saved + + +## 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. + +Extension showing an automatic connection error, the key you must copy, and a copy button for 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](https://interledger.app). + + +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 | +| :----: | ----- | +|
![Continuous payments turned on in extension, extension is paying](/img/docs/extension/enabled-monetized.png "Active icon state with green circle and checkmark")
| Page is web monetized and the extension is continuously paying | +|
![Continuous payments turned on in extension, extension is not paying and needs user attention](/img/docs/extension/enabled-attention.png "Active icon state with orange circle and exclamation mark")
| Page is web monetized, but the extension needs user attention and is **not** continuously paying | +|
![Continuous payments turned on in extension, page is not web monetized](/img/docs/extension/enabled-unmonetized.png "Active icon state with red circle and x")
| Page is **not** web monetized, the extension is **not** continuously paying | + +#### Continuous payment toggled off + +| Icon | State | +| :----: | ----- | +|
![Continuous payments turned off in extension](/img/docs/extension/disabled-monetized.png "Inactive icon state with green circle and checkmark")
| Page is web monetized, but the extension is **not** continuously paying | +|
![Continuous payments turned off in extension, needs user attention](/img/docs/extension/disabled-attention.png "Inactive icon state with orange circle and exclamation mark")
| Page is web monetized, but the extension needs user attention and is **not** continuously paying | +|
![Continuous payments turned off in extension, page is not web monetized](/img/docs/extension/disabled-unmonetized.png "Inactive icon state with red circle and x")
| 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. +
+ +
+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](/docs/resources/op-wallets) page for a list of compatible wallet providers. +
\ No newline at end of file diff --git a/src/content/docs/docs/intro/web-monetization-flow.mdx b/src/content/docs/docs/intro/web-monetization-flow.mdx index 4eb7faa8..09b8e758 100644 --- a/src/content/docs/docs/intro/web-monetization-flow.mdx +++ b/src/content/docs/docs/intro/web-monetization-flow.mdx @@ -11,9 +11,9 @@ import { Tooltip, } from '@interledger/docs-design-system' -Web Monetization (WM) relies on Open Payments (OP) and OP-enabled accounts to coordinate payments. +Web Monetization relies on Open Payments (OP) and OP-enabled accounts to coordinate payments. -The WM agent first issues a series of API calls to the receiving account's wallet address, then to the sending account's wallet address, to obtain the necessary authorization and instructions for sending a payment. +The Web Monetization agent first issues a series of API calls to the receiving account's wallet address, then to the sending account's wallet address, to obtain the necessary authorization and instructions for sending a payment. ## Sequence diagram @@ -60,17 +60,17 @@ There's a few points to keep in mind as you review the example. ### Scenario -Alice adds the monetization `` element to her website. Included within the `` is her wallet address, `https://wallet.example/alice`, assigned to her by her WM receiver. +Alice adds the monetization `` element to her website. Included within the `` is her wallet address, `https://wallet.example/alice`, assigned to her by her Web Monetization receiver. -Bob signs up with a WM provider who supplies him with a funded sending account. The sending account's wallet address is `https://anotherwallet.example/bob`. After installing a WM agent in his browser and linking the WM agent to his WM provider, his WM agent now has permission to request payments be sent from his account. +Bob signs up with a Web Monetization provider who supplies him with a funded sending account. The sending account's wallet address is `https://anotherwallet.example/bob`. After installing a Web Monetization agent in his browser and linking the Web Monetization agent to his Web Monetization provider, his Web Monetization agent now has permission to request payments be sent from his account. :::note -This example assumes the WM provider and WM receiver have already peered with each other and share a common payment rail over which transactions can be processed and settled. +This example assumes the Web Monetization provider and Web Monetization receiver have already peered with each other and share a common payment rail over which transactions can be processed and settled. ::: ### 1 - Check for Web Monetization -As Bob browses Alice's site, his WM agent detects a monetization `` element. +As Bob browses Alice's site, his Web Monetization agent detects a monetization `` element. ```html @@ -80,7 +80,7 @@ As Bob browses Alice's site, his WM agent detects a monetization `` elemen - The WM agent issues a request to Alice's wallet address to discover the Open Payments service endpoint. + The Web Monetization agent issues a request to Alice's wallet address to discover the Open Payments service endpoint. ```http @@ -91,7 +91,7 @@ As Bob browses Alice's site, his WM agent detects a monetization `` elemen - The response includes, among other details, the URL for her WM receiver's grant request endpoint (authorization server). + The response includes, among other details, the URL for her Web Monetization receiver's grant request endpoint (authorization server). ```http @@ -110,13 +110,13 @@ As Bob browses Alice's site, his WM agent detects a monetization `` elemen -### 3 - Send grant request to WM receiver's auth server +### 3 - Send grant request to Web Monetization receiver's auth server - The WM agent issues a request to the WM receiver's grant request endpoint (authorization server) to get an access token. + The Web Monetization agent issues a request to the Web Monetization receiver's grant request endpoint (authorization server) to get an access token. - In this example, the WM agent requests access to create and read incoming payments (i.e., payments coming in to Alice's WM receiver). + In this example, the Web Monetization agent requests access to create and read incoming payments (i.e., payments coming in to Alice's Web Monetization receiver). ```http @@ -150,7 +150,7 @@ As Bob browses Alice's site, his WM agent detects a monetization `` elemen - The grant request is non-interactive, so the WM receiver grants the request and issues an access token. + The grant request is non-interactive, so the Web Monetization receiver grants the request and issues an access token. ```http @@ -179,10 +179,10 @@ As Bob browses Alice's site, his WM agent detects a monetization `` elemen - The WM agent creates an incoming payment for the session (e.g., the open browser tab) by issuing an incoming payment request to Alice's wallet address. The request uses details obtained from the previous API calls. + The Web Monetization agent creates an incoming payment for the session (e.g., the open browser tab) by issuing an incoming payment request to Alice's wallet address. The request uses details obtained from the previous API calls. :::note -The request is for an _incoming_ payment because the WM agent is requesting that Alice's account accept an incoming payment. The payment itself has not been sent yet. +The request is for an _incoming_ payment because the Web Monetization agent is requesting that Alice's account accept an incoming payment. The payment itself has not been sent yet. ::: @@ -197,7 +197,7 @@ The request is for an _incoming_ payment because the WM agent is requesting that - Alice's WM receiver (who hosts her account and wallet address) approves the request by supplying unique payment details for the WM agent to use to address the payment to Alice's account. + Alice's Web Monetization receiver (who hosts her account and wallet address) approves the request by supplying unique payment details for the Web Monetization agent to use to address the payment to Alice's account. ```http @@ -222,7 +222,7 @@ The request is for an _incoming_ payment because the WM agent is requesting that - The WM agent uses the details obtained thus far to create an outgoing payment request against Bob's account (via his wallet address). Note that this is just a request to send a payment. The payment itself has not been sent and the request is in a pending state. + The Web Monetization agent uses the details obtained thus far to create an outgoing payment request against Bob's account (via his wallet address). Note that this is just a request to send a payment. The payment itself has not been sent and the request is in a pending state. ```http @@ -264,7 +264,7 @@ The request is for an _incoming_ payment because the WM agent is requesting that ``` - The Web Monetization flow is complete. It's now up to the WM provider to process the payment and settle with the WM receiver. + The Web Monetization flow is complete. It's now up to the Web Monetization provider to process the payment and settle with the Web Monetization receiver. diff --git a/src/content/docs/docs/references/attributes/incomingpayment.mdx b/src/content/docs/docs/references/attributes/incomingpayment.mdx index 06645da7..c163c231 100644 --- a/src/content/docs/docs/references/attributes/incomingpayment.mdx +++ b/src/content/docs/docs/references/attributes/incomingpayment.mdx @@ -11,9 +11,9 @@ import { LinkOut, Hidden } from '@interledger/docs-design-system' `incomingPayment` is an experimental technology. ::: -The `monetization` event's `incomingPayment` attribute can be used to verify the receipt of a payment. Today, the `monetization` event fires when the WM agent successfully creates an outgoing payment request at the WM provider. Since it's only a request to send an outgoing payment, there's no guarantee at this point that a payment has been received. +The `monetization` event's `incomingPayment` attribute can be used to verify the receipt of a payment. Today, the `monetization` event fires when the Web Monetization agent successfully creates an outgoing payment request at the Web Monetization provider. Since it's only a request to send an outgoing payment, there's no guarantee at this point that a payment has been received. -The `incomingPayment` attribute returns the URL that represents the incoming payment at the WM receiver. The returned value is the value it was initialized with. By querying the URL, you can get the `receivedAmount`. +The `incomingPayment` attribute returns the URL that represents the incoming payment at the Web Monetization receiver. The returned value is the value it was initialized with. By querying the URL, you can get the `receivedAmount`. ## Example diff --git a/src/content/docs/docs/references/html-link-rel-monetization.mdx b/src/content/docs/docs/references/html-link-rel-monetization.mdx index ac789416..9bc31d57 100644 --- a/src/content/docs/docs/references/html-link-rel-monetization.mdx +++ b/src/content/docs/docs/references/html-link-rel-monetization.mdx @@ -13,7 +13,7 @@ The `` element enables you to [add Web Monetization to an HTML document](/ ``` -A single HTML document can contain multiple monetization `` elements; however, it's up to each WM provider to decide how they want to handle this scenario. We recommend WM providers split the payments evenly between the links. +A single HTML document can contain multiple monetization `` elements; however, it's up to each Web Monetization provider to decide how they want to handle this scenario. We recommend Web Monetization providers split the payments evenly between the links. ## Payment pointers and meta elements diff --git a/src/content/docs/docs/references/monetizationevent.mdx b/src/content/docs/docs/references/monetizationevent.mdx index a6460781..b0872202 100644 --- a/src/content/docs/docs/references/monetizationevent.mdx +++ b/src/content/docs/docs/references/monetizationevent.mdx @@ -6,9 +6,9 @@ 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' -The `MonetizationEvent` DOM events provide information about payments sent to WM receivers. +The `MonetizationEvent` DOM events provide information about payments sent to Web Monetization receivers. -The `monetization` event fires when a WM agent successfully creates an outgoing payment request at the WM provider. There’s no guarantee that any payments will follow or, if they do, how often or how large the payments will be. +The `monetization` event fires when a Web Monetization agent successfully creates an outgoing payment request at the Web Monetization provider. There’s no guarantee that any payments will follow or, if they do, how often or how large the payments will be. By listening for `monetization` events, you can use the returned details to verify the receipt of a payment. You can then choose to have the page programmatically respond to successful payments. For example, you could [remove ads](/docs/guides/remove-ads) or provide access to [exclusive content](/docs/guides/provide-exclusive-content). diff --git a/src/content/docs/docs/references/onmonetization.mdx b/src/content/docs/docs/references/onmonetization.mdx index ac22915b..2cf5a3e3 100644 --- a/src/content/docs/docs/references/onmonetization.mdx +++ b/src/content/docs/docs/references/onmonetization.mdx @@ -9,7 +9,7 @@ import { Tooltip } from '@interledger/docs-design-system' The `onmonetization` attribute of the `GlobalEventHandlers` mixin is used to process `monetization` events sent to the `Window`. -`onmonetization` can be applied to any element and is used by the user agent (such as a web browser or WM agent) to notify that some `` element is monetized. +`onmonetization` can be applied to any element and is used by the user agent (such as a web browser or Web Monetization agent) to notify that some `` element is monetized. ## Syntax diff --git a/src/content/docs/docs/resources/get-involved.mdx b/src/content/docs/docs/resources/get-involved.mdx index 42567c41..a24f3dfd 100644 --- a/src/content/docs/docs/resources/get-involved.mdx +++ b/src/content/docs/docs/resources/get-involved.mdx @@ -6,7 +6,7 @@ import { LinkOut } from '@interledger/docs-design-system' ## Participation -- Join our WM Community calls. +- 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. diff --git a/src/content/docs/docs/resources/glossary.mdx b/src/content/docs/docs/resources/glossary.mdx index 83754662..e2cf53ac 100644 --- a/src/content/docs/docs/resources/glossary.mdx +++ b/src/content/docs/docs/resources/glossary.mdx @@ -83,7 +83,7 @@ Conceptually, a wallet address is like an email address for an account or wallet The `` value within the monetization `` element must be an Open Payments-enabled wallet address. -### Web Monetization (WM) +### Web Monetization A specification for allowing websites to automatically receive payments from users, facilitated by a user agent or Web Monetization agent, and the site visitor's preferred Web Monetization provider. @@ -93,7 +93,7 @@ Code within a web browser that discovers web monetized pages, exposes the Web Mo When a vendor natively builds Web Monetization into their browser, the browser (user agent) acts as the Web Monetization agent. Until then, a separate Web Monetization agent, such as a browser extension, is required. -Visit the [Sending Payments](/docs/intro/sending-payments/#wm-agents) page for additional information. +Visit the [Sending Payments](/docs/intro/sending-payments/#web-monetization-agents) page for additional information. ### Web Monetization payment @@ -105,13 +105,13 @@ Visit the [Web Monetization flow](/docs/intro/web-monetization-flow) page for ad An entity or collection of entities that together enable Web Monetization payments to be sent on behalf of an individual when the individual visits a web monetized page. At minimum, a Web Monetization provider is an account servicing entity that supplies a funded Open Payments-enabled account from which to send payments. -Visit the [Sending Payments](/docs/intro/sending-payments/#wm-providers) page for additional information. +Visit the [Sending Payments](/docs/intro/sending-payments/#web-monetization-providers) page for additional information. ### Web Monetization receiver An entity or collection of entities that together enable Web Monetization payments to be received and held on behalf of an individual. At minimum, a Web Monetization receiver is an account servicing entity that supplies an Open Payments-enabled account capable of receiving payments. -Visit the [Receiving Payments](/docs/intro/receiving-payments/#wm-receivers) page for additional information. +Visit the [Receiving Payments](/docs/intro/receiving-payments/#web-monetization-receivers) page for additional information. ### Web Monetization session diff --git a/src/content/docs/docs/resources/op-wallets.mdx b/src/content/docs/docs/resources/op-wallets.mdx index d991245c..39609283 100644 --- a/src/content/docs/docs/resources/op-wallets.mdx +++ b/src/content/docs/docs/resources/op-wallets.mdx @@ -1,20 +1,17 @@ --- title: Web Monetization-enabled wallets -next: false --- -import { Tabs, TabItem } from '@astrojs/starlight/components' import { LinkOut } from '@interledger/docs-design-system' A Web Monetization-enabled wallet is required to send and/or receive payments. The wallet providers on this page are set up to support Web Monetization. Be sure to select a provider that is available in your **region** and supports your preferred **currency**. -Your provider will assign you a payment address, called either a wallet address or a payment pointer. +Your provider will assign you a wallet address. You'll need this address when setting up the [extension](/docs/intro/web-monetization-extension) and/or web monetizing your [content](/docs/guides/monetize-page). ## Wallet providers -| Provider | Payment Address Label | -| --------------- | --------------- | -| Fynbos | Wallet address | -| GateHub | Payment pointer | \ No newline at end of file +|   Provider | +| - | +|   Interledger Wallet | diff --git a/src/pages/index-beta.astro b/src/pages/index-beta.astro index d0e8fbd6..2846591a 100644 --- a/src/pages/index-beta.astro +++ b/src/pages/index-beta.astro @@ -24,7 +24,7 @@ const description = t("site.description");

Web Monetization is a web technology that enables websites to receive small payments from users/supporters as they interact with the website and its content. It provides a way for creators and website owners to be compensated for their work without relying solely on ads or subscriptions.

-

Notably, WM offers two unique features, small payments and no user interaction, which address several important scenarios currently unmet on the web.

+

Notably, Web Monetization offers two unique features, small payments and no user interaction, which address several important scenarios currently unmet on the web.

Web Monetization is for consumers of web content who would like to support the creators they value, in other words, folks who would like to pay and be paid on the web.

@@ -33,7 +33,7 @@ const description = t("site.description");

Key Concepts

Web Monetization gives users more options and control over who to pay, if and when to pay, as well as how much to pay.

-

Being a web technology, folks who build on the web would be able to implement Web Monetization on websites via Javascript APIs. And since Web Monetization is an open standard, any interested party can also become a WM provider if they wish to.

+

Being a web technology, folks who build on the web would be able to implement Web Monetization on websites via Javascript APIs. And since Web Monetization is an open standard, any interested party can also become a Web Monetization provider if they wish to.

@@ -54,7 +54,7 @@ const description = t("site.description");
-

What do you want to do with WM?

+

What do you want to do with Web Monetization?