| Bubbles | +Yes | +
|---|---|
| Cancelable | +No | +
| Event handler property | +`onmonetization` | +
Need help with this page
\ No newline at end of file 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 deleted file mode 100644 index f9ca2847..00000000 --- a/src/content/docs/docs/guides/add-a-streaming-payments-counter.mdx +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Add a streaming payments counter ---- - -import NoPay from '/src/partials/glitchNoPay.mdx' -import ViewAs from '/src/partials/glitchViewAs.mdx' - -Web Monetization allows you to know exactly how much a web monetized visitor has sent to you. In cases where a web monetized visitor has chosen to pay you in time-based increments (such as per second or per minute), a streaming payments counter can be a helpful tool to show your visitor how much they've sent. The amount updates in real time as more payments come in during the session. - -## Example - -The example below illustrates how to use the `monetization` event to show a web monetized visitor how much they've sent you during their current browsing session. - -```html - - - - - - - - -- 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 Web Monetization 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
+ +### 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 wallet. + +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/supporters/about-sending.mdx b/src/content/docs/supporters/about-sending.mdx new file mode 100644 index 00000000..e601b938 --- /dev/null +++ b/src/content/docs/supporters/about-sending.mdx @@ -0,0 +1,58 @@ +--- +title: About sending payments +next: Developer overview +--- + +import { CodeBlock,Tooltip,LinkOut } from "@interledger/docs-design-system"; + +Sending Web Monetization payments requires you to have an account with a compatible digital wallet provider. Not all wallet providers support sending Web Monetization payments. + +Your digital wallet provider will supply you with the financial account you'll use to send payments. Funding your wallet typically requires you to link a card or bank account to your wallet or make a deposit into your wallet. + +Since wallet providers are financial entities, they are regulated within the countries they operate. One regulation, known as KYC (Know Your Customer), requires financial entities to collect your personal information and verify your identity before allowing you to open an account. + +## Web Monetization-compatible digital wallets + +Be sure to sign up with a compatible [digital wallet provider](/wallets) that's available in your region and supports your preferred currency. + +:::tip[Tech tip] +For a wallet to be compatible with Web Monetization, the provider must implement the
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/tutorials/contribution-counter.mdx b/src/content/docs/tutorials/contribution-counter.mdx new file mode 100644 index 00000000..4df52313 --- /dev/null +++ b/src/content/docs/tutorials/contribution-counter.mdx @@ -0,0 +1,128 @@ +--- +title: Show visitors how much they've contributed +--- + +import Wallet from "/src/partials/wallet-prereq.mdx"; +import Disclaimer from "/src/partials/glitch.mdx"; + +This guide describes how to display a counter on your page to show your visitors how much they've contributed while on the page during their current browsing session. The counter updates in real time and reflects both time-based payments (e.g., X amount per minute) and one-time payments. + +### Before you begin + ++ 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!“.
+
+Interledger Wallet | Wallet address | USA, EU, Canada, South Africa |
+| Fynbos | Wallet address | USA, EU, Canada, South Africa |
+| GateHub | Payment pointer | x |
+
+## 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](/tutorials/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/pages/prob-revshare.astro b/src/pages/prob-revshare.astro
index 4a626ed6..9bed476f 100644
--- a/src/pages/prob-revshare.astro
+++ b/src/pages/prob-revshare.astro
@@ -13,11 +13,11 @@ const description = t("site.description");
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.
+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 users' wallet 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.
@@ -32,21 +32,19 @@ Wallet providers who support Open Payments will issue each of their customers' a
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 wallet.
+As a consumer of web monetized content, you'll enter your payment pointer into your Web Monetization extension to link the extension to your wallet.
-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 paymentpointers.org to get your URL.
+To web monetize your own content, you must convert your payment pointer to its URL equivalent as the monetization `` element does not support the `$` in the `href` value. Enter your payment pointer into the field provided on paymentpointers.org to get your URL.
## T
-### Test network - -wallet.interledger-test.dev to sign up for an account.
## W
@@ -56,19 +54,21 @@ To web monetize your own content, you must convert your payment pointer to its U
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.
+As a consumer 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.
+A digital wallet provider is an entity that supplies you with the financial account you'll use to send or receive payments.
+
+Not all wallet providers support Web Monetization payments. A provider must implement the Open Payments standard and be able to assign your account a payment pointer or wallet address for you to use the account for Web Monetization.
-Wallet providers are regulated entities within the countries they operate.
+Wallet providers are regulated within the countries they operate and are often required by law to collect certain personal information and verify your identity before allowing you to open an account.
### 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:
+A Web Monetization agent is 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 ``
@@ -80,13 +80,13 @@ A non-user facing component of a Web Monetization extension or web browser. The
### Web Monetization service provider
-An entity that has:
+A Web Monetization service provider is 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.
+In some jurisdictions, it may be impossible to get an account with a Web Monetization-compatible wallet provider. If you're unable to get a wallet 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
+A third-party Web Monetization service provider is an entity that meets the criteria above 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/tutorials/test-web-monetization.mdx b/src/content/docs/tutorials/test-web-monetization.mdx
index 5ed80bf1..6b91c967 100644
--- a/src/content/docs/tutorials/test-web-monetization.mdx
+++ b/src/content/docs/tutorials/test-web-monetization.mdx
@@ -2,6 +2,54 @@
title: Test Web Monetization
---
-To do
+import { Steps } from '@astrojs/starlight/components';
+import { LinkOut } from "@interledger/docs-design-system";
+
+By signing up for the ILF's test wallet , you can send and receive Web Monetization payments without using real money.
+
+The test wallet allows you to go through a mock Know Your Customer (KYC) sign up flow, create a payment account, add a payment pointer, and fund the account.
+
+## Sign up for a test wallet account
+
+### Create an account
+
+
+1. Go to wallet.interledger-test.dev and click **Create account**.
+2. Enter your email address and a password, then click the arrowhead. A verification email will be sent to you.
+3. Click **Confirm my email address** within the verification email.
+4. Log in to your newly created account and complete the KYC and liveness checks.
+
+
+### Complete KYC and liveness checks
+
+As you go through KYC, the only real information you need to share is your email address and phone number. We ask for your phone number in case we need to send you a verification code.
+
+All other information, including identity documentation, can be fake. If you're asked to upload a photo, it can be of anything as long as it's not blank. A face scan may also be required but is not used by the test wallet in any way.
+
+:::note[Why are there so many steps?]
+The Interledger test wallet runs on a GateHub pre-production environment. This environment mimics their live production environment, including the KYC steps .
+:::
+
+## Set up your account for Web Monetization
+
+
+1. Select **New Account** on the Test Wallet dashboard.
+2. Enter any account name, select any asset (currency), then click **Create account**.
+3. Click **Close**, then select your new account from the dashboard.
+4. Select **Add payment pointer**, then enter a payment pointer name and public name of your choosing.
+5. Click **Create**. Your payment pointer should show within the _Payment Pointers_ section.
+6. Click **Deposit**. Enter an amount of **1,000 or less**.
+ :::caution
+ Deposit amounts greater than 1,000 require manual approval, which may take up to 24 hours.
+ :::
+
+
+You're ready to start testing Web Monetization after your deposit appears in your account.
+
+## Test sending payments
+
+
+
+## Test receiving payments
+
-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
From 6f0c20f8cdf549555af400516bca06c736962a7c Mon Sep 17 00:00:00 2001
From: Melissa Henderson <57110301+melissahenderson@users.noreply.github.com>
Date: Thu, 30 Jan 2025 10:51:37 -0500
Subject: [PATCH 4/5] added jeremiah's docs
Also ran prettier which was a huge mistake. Still need to work out the sidenav order and change the collapse values.
---
astro.config.mjs | 116 ++++++-----
public/ns.jsonld | 9 +
src/content.config.ts | 2 +-
.../docs/developers/about-receiving.mdx | 128 ++++++------
.../docs/developers/activity-streams.mdx | 117 +++++++++++
src/content/docs/developers/csp.mdx | 22 +-
src/content/docs/developers/events.mdx | 44 ++--
src/content/docs/developers/get-started.mdx | 28 ++-
src/content/docs/developers/interfaces.mdx | 26 ++-
src/content/docs/developers/link-element.mdx | 60 +++---
src/content/docs/developers/overview.mdx | 8 +-
.../docs/developers/permissions-policy.mdx | 16 +-
.../docs/developers/rss-atom-jsonfeed.mdx | 193 ++++++++++++++++++
src/content/docs/docs.mdx | 4 +-
src/content/docs/resources/get-involved.mdx | 48 ++---
src/content/docs/resources/glossary.mdx | 50 ++---
src/content/docs/supporters/about-sending.mdx | 31 +--
src/content/docs/supporters/get-started.mdx | 178 +++++++---------
src/content/docs/supporters/overview.mdx | 16 +-
.../docs/tutorials/contribution-counter.mdx | 20 +-
src/content/docs/tutorials/remove-content.mdx | 14 +-
.../docs/tutorials/revenue-sharing.mdx | 14 +-
src/content/docs/tutorials/show-content.mdx | 26 +--
.../docs/tutorials/test-web-monetization.mdx | 44 ++--
src/content/docs/wallets.mdx | 19 +-
.../specification/specification-respec.html | 6 +-
src/partials/glitch.mdx | 2 +-
src/partials/wallet-prereq.mdx | 4 +-
28 files changed, 779 insertions(+), 466 deletions(-)
create mode 100644 public/ns.jsonld
create mode 100644 src/content/docs/developers/activity-streams.mdx
create mode 100644 src/content/docs/developers/rss-atom-jsonfeed.mdx
diff --git a/astro.config.mjs b/astro.config.mjs
index 100a3dbb..d07d6444 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -19,9 +19,9 @@ export default defineConfig({
defer: true,
'data-website-id': '3b8cb97a-2a94-43c2-85e7-277c92c9cf48',
src: 'https://ilf-site-analytics.netlify.app/script.js',
- 'data-domains': 'webmonetization.org'
- }
- }
+ 'data-domains': 'webmonetization.org',
+ },
+ },
],
customCss: [
'./node_modules/@interledger/docs-design-system/src/styles/teal-theme.css',
@@ -76,22 +76,28 @@ export default defineConfig({
},
],
},
+ {
+ label: 'For content owners',
+ collapsed: false,
+ items: [
+ {
+ label: 'Overview',
+ link: '/developers/overview',
+ },
+ {
+ label: 'Get started',
+ link: '/developers/get-started',
+ },
+ {
+ label: 'Learn about receiving payments',
+ link: '/developers/about-receiving',
+ },
+ ],
+ },
{
label: 'For developers',
collapsed: false,
items: [
- {
- label: 'Overview',
- link: '/developers/overview',
- },
- {
- label: 'Get started',
- link: '/developers/get-started',
- },
- {
- label: 'Learn about receiving payments',
- link: '/developers/about-receiving',
- },
{
label: 'Tutorials',
collapsed: true,
@@ -105,7 +111,7 @@ export default defineConfig({
link: '/tutorials/remove-content',
},
{
- label: 'Show visitors how much they\'ve contributed',
+ label: "Show visitors how much they've contributed",
link: '/tutorials/contribution-counter',
},
{
@@ -126,51 +132,59 @@ export default defineConfig({
label: 'API docs',
collapsed: true,
items: [
+ {
+ label: 'HTML DOM API',
+ collapsed: false,
+ items: [
{
- label: 'HTML DOM API',
- collapsed: false,
- items: [
- {
- label: 'Monetization element',
- link: '/developers/link-element',
- },
- ],
+ label: 'Monetization element',
+ link: '/developers/link-element',
},
+ ],
+ },
+ {
+ label: 'Web Monetization API',
+ collapsed: false,
+ items: [
{
- label: 'Web Monetization API',
- collapsed: false,
- items: [
- {
- label: 'Monetization interfaces',
- link: '/developers/interfaces',
- },
- {
- label: 'Monetization events',
- link: '/developers/events',
- },
- ],
+ label: 'Monetization interfaces',
+ link: '/developers/interfaces',
},
{
- label: 'HTTP Headers',
- collapsed: true,
- items: [
- {
- label: 'Content Security Policy (CSP)',
- link: '/developers/csp',
- },
- {
- label: 'Permissions Policy',
- link: '/developers/permissions-policy',
- },
- ],
+ label: 'Monetization events',
+ link: '/developers/events',
+ },
+ ],
+ },
+ {
+ label: 'HTTP Headers',
+ collapsed: true,
+ items: [
+ {
+ label: 'Content Security Policy (CSP)',
+ link: '/developers/csp',
},
{
- label: 'Web Monetization Specification',
- link: 'https://webmonetization.org/specification/',
- attrs: { target: '_blank', },
+ label: 'Permissions Policy',
+ link: '/developers/permissions-policy',
},
+ ],
+ },
],
},
+ {
+ label: 'Feed (RSS, Atom, JSON Feed)',
+ link: '/developers/rss-atom-jsonfeed',
+ },
+ {
+ label: 'Social (Activity Streams)',
+ link: '/developers/activity-streams',
+ },
+ {
+ label: 'Web Monetization Specification',
+ link: 'https://webmonetization.org/specification/',
+ attrs: { target: '_blank' },
+ },
],
},
{
diff --git a/public/ns.jsonld b/public/ns.jsonld
new file mode 100644
index 00000000..215e6fb0
--- /dev/null
+++ b/public/ns.jsonld
@@ -0,0 +1,9 @@
+{
+ "@context": {
+ "wm": "https://webmonetization.org/ns#",
+ "monetization": {
+ "@id": "wm:monetization",
+ "@type": "@id"
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/content.config.ts b/src/content.config.ts
index 76002a67..5ef6dfdf 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -4,5 +4,5 @@ import { docsSchema, i18nSchema } from '@astrojs/starlight/schema'
export const collections = {
docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
- i18n: defineCollection({ type: 'data', schema: i18nSchema() })
+ i18n: defineCollection({ type: 'data', schema: i18nSchema() }),
}
diff --git a/src/content/docs/developers/about-receiving.mdx b/src/content/docs/developers/about-receiving.mdx
index 8a1faa6c..bafa5736 100644
--- a/src/content/docs/developers/about-receiving.mdx
+++ b/src/content/docs/developers/about-receiving.mdx
@@ -2,8 +2,8 @@
title: About receiving payments
---
-import { LinkOut, CodeBlock, Disclosure } from "@interledger/docs-design-system";
-import { Badge, Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+import { LinkOut, CodeBlock, Disclosure } from '@interledger/docs-design-system'
+import { Badge, Tabs, TabItem, Steps } from '@astrojs/starlight/components'
Receiving Web Monetization payments requires you to have an account with a compatible digital wallet provider. Not all wallet providers support receiving Web Monetization payments.
@@ -15,16 +15,16 @@ Since wallet providers are financial entities, they are regulated within the cou
You must have an account with a compatible [digital wallet provider](/wallets) to receive payments. Be sure to select a provider that:
-* Is available in your region
-* Supports your preferred currency
-* Allows you to withdraw your funds if you choose to transact in fiat
+- Is available in your region
+- Supports your preferred currency
+- Allows you to withdraw your funds if you choose to transact in fiat
Your wallet provider will assign your wallet a unique identifier called a _wallet address_ or a _payment pointer_. You’ll need this identifier to web monetize your content.
-| Identifier | Example format |
-| ------- | -------------- |
-| Payment pointer | `$wallet.example.com/alice` |
-| Wallet address | `https://wallet.example.com/alice` |
+| Identifier | Example format |
+| --------------- | ---------------------------------- |
+| Payment pointer | `$wallet.example.com/alice` |
+| Wallet address | `https://wallet.example.com/alice` |
## Web monetized content
@@ -41,21 +41,22 @@ Your visitors' Web Monetization extension acts like a messaging service. When th
If you're already 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 receiving and/or sending micropayments
-* Defining what a micropayment is in the context of their business
-* Determining the minimum amount for a micropayment
+
+- Deciding whether to support receiving and/or sending micropayments
+- Defining what a micropayment is in the context of their business
+- Determining the minimum amount for a micropayment
Let's say your wallet provider allows you to receive micropayments. Your provider defines a micropayment as any payment under $0.05 USD. This means you could, for example, receive a payment of one US cent--as long as the sender's wallet provider allows them to send that amount.
-Your wallet provider may also have business rules set up such that micropayments accumulate on your account but aren't deposited until you reach a minimum (e.g., $1.00 USD).
+Your wallet provider may also have business rules set up such that micropayments accumulate on your account but aren't deposited until you reach a minimum (e.g., $1.00 USD).
-Web Monetization can even support payments of a fraction of a cent (e.g., $0.00001); however, sending and receiving fractional amounts must be supported by the respective wallet providers.
+Web Monetization can even support payments of a fraction of a cent (e.g., $0.00001); however, sending and receiving fractional amounts must be supported by the respective wallet providers.
### A deeper dive into payments
#### Open Payments
-For a wallet to be compatible with Web Monetization, the provider must implement the Open Payments standard . When implemented, a set of APIs becomes available for third-party applications, such as your visitor's Web Monetization extension, to communicate with the wallet providers.
+For a wallet to be compatible with Web Monetization, the provider must implement the Open Payments standard . When implemented, a set of APIs becomes available for third-party applications, such as your visitor's Web Monetization extension, to communicate with the wallet providers.
#### Web Monetization extension
@@ -64,7 +65,7 @@ A component within the extension--called the [Web Monetization agent](/developer
#### Web Monetization payment sequence
:::note
-The examples below are simplified representations of the Open Payments API calls.
+The examples below are simplified representations of the Open Payments API calls.
:::
@@ -96,14 +97,13 @@ The examples below are simplified representations of the Open Payments API calls
}
```
-4. The agent issues a
```http
POST /auth/ HTTP/1.1
Accept: application/json
Content-Type: application/json
- Host: wallet.example
-
+ Host: wallet.example
{
"access_token": {
"access": [
@@ -126,27 +126,24 @@ The examples below are simplified representations of the Open Payments API calls
```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"
- }
- ]
+ "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
+
+ ```http wrap
+ 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.
@@ -173,39 +170,38 @@ The examples below are simplified representations of the Open Payments API calls
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"
+ "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/developers/activity-streams.mdx b/src/content/docs/developers/activity-streams.mdx
new file mode 100644
index 00000000..c0ac1039
--- /dev/null
+++ b/src/content/docs/developers/activity-streams.mdx
@@ -0,0 +1,117 @@
+---
+title: Activity Streams JSON-LD
+---
+
+import { LinkOut } from '@interledger/docs-design-system'
+
+Social web community servers and apps can expose the wallet address or payment pointer of a user’s profile or post to a Web Monetization client, such as the ILF's [Web Monetization browser extension](/supporters/get-started#1-download-and-install-the-extension) or embedded SDK.
+
+Web Monetization links are represented in Activity Streams 2.0 Object Types using the `monetization` property from the Web Monetization namespace (`https://webmonetization.org/ns.jsonld`).
+
+### User `Profile` example
+
+```jsonc wrap
+{
+ "@context": [
+ "https://www.w3.org/ns/activitystreams",
+ "https://w3id.org/security/v1",
+
+ // Add the Web Monetization namespace
+ "https://webmonetization.org/ns.jsonld",
+
+ {
+ "Hashtag": "as:Hashtag",
+ },
+ ],
+ "id": "https://alpaca.gold/users/Jeremiah",
+ "type": "Person",
+ "following": "https://alpaca.gold/users/Jeremiah/following",
+ "followers": "https://alpaca.gold/users/Jeremiah/followers",
+ "inbox": "https://alpaca.gold/users/Jeremiah/inbox",
+ "outbox": "https://alpaca.gold/users/Jeremiah/outbox",
+ "preferredUsername": "Jeremiah",
+ "name": "Jeremiah Lee",
+ "summary": "Content Security Policy (CSP) is an extra layer of security that allows you to control the resources a user agent, such as a web browser, is allowed to load for a given page. CSPs use directives to describe the policies for a certain resource type.
+A Content Security Policy (CSP) is an extra layer of security that allows you to control the resources a user agent, such as a web browser, is allowed to load for a given page. CSPs use directives to describe the policies for a certain resource type.
-The `monetization-src` fetch directive allows you to define the payment pointer and wallet address URLs that a browser can load. If an attempt is made to load an undefined URL, a network error will occur and the URL will not load.
+The `monetization-src` fetch directive allows you to define the payment pointer and wallet address URLs that a browser can load. If an attempt is made to load an undefined URL, a network error will occur and the URL will not load.
@@ -41,18 +45,18 @@ Content-Security-Policy: monetization-src https://example.com;
## Example
-Your wallet address is `https://wallet.example.com/alice`. You want to ensure that no other URLs can be loaded.
+Your wallet address is `https://wallet.example.com/alice`. You want to ensure that no other URLs can be loaded.
-You configure your web server to return the following `Content-Security-Policy` HTTP header on each applicable page of your website.
+You configure your web server to return the following `Content-Security-Policy` HTTP header on each applicable page of your website.
```http
Content-Security-Policy: monetization-src https://wallet.example.com/alice;
```
-A bad actor injects their wallet address into your site.
+A bad actor injects their wallet address into your site.
```html
-
+
```
However, fetches for the injected URL will return a network error and not load because the URL doesn't match what you've defined in your CSP.
@@ -67,4 +71,4 @@ However, fetches for the injected URL will return a network error and not load b
## Specifications
-`/incoming-payments` endpoint at your wallet provider and to the `/outgoing-payments` endpoint at your site visitor's wallet provider.
-Each time the agent receives a `201 outgoing payment created` response from the site visitor's wallet provider, the agent fires a `monetization` event on the browser window.
+Each time the agent receives a `201 outgoing payment created` response from the site visitor's wallet provider, the agent fires a `monetization` event on the browser window.
### Specifications
@@ -24,15 +28,15 @@ Each time the agent receives a `201 outgoing payment created` response from the
## Event listeners
-When a `monetization` event fires, there's no guarantee that payments will follow or, if they do, how often or how large the payments will be.
+When a `monetization` event fires, there's no guarantee that payments will follow or, if they do, how often or how large the payments will be.
-A `monetization` event indicates that the site visitor's wallet provider has created the resources needed for it to send a payment.
+A `monetization` event indicates that the site visitor's wallet provider has created the resources needed for it to send a payment.
By adding an event listener to the relevant monetization `` element (or one of its ancestors), you can use the `monetization` event properties to verify payments. These properties provide:
-* Information about the [amount and currency](#amountsent) of a sent (not received) payment
-* A URL representing an [incoming payment](#incomingpayment) that can be used to determine the amount received, similar to a receipt
-* The URL representing the [payment pointer or wallet address](#paymentpointer) that an incoming payment request was sent to
+- Information about the [amount and currency](#amountsent) of a sent (not received) payment
+- A URL representing an [incoming payment](#incomingpayment) that can be used to determine the amount received, similar to a receipt
+- The URL representing the [payment pointer or wallet address](#paymentpointer) that an incoming payment request was sent to
### High-level flow
@@ -49,10 +53,10 @@ By adding an event listener to the relevant monetization `` element (or on
### amountSent
-The `amountSent` property returns the `value` and `currency` of the sent payment.
+The `amountSent` property returns the `value` and `currency` of the sent payment.
-* `value` - The amount. A valid decimal monetary value containing the amount that was sent.
-* `currency` - The currency code. A well-formed 3-letter ISO4217 code that represents the currency that was sent, such as USD or GBP.
+- `value` - The amount. A valid decimal monetary value containing the amount that was sent.
+- `currency` - The currency code. A well-formed 3-letter ISO4217 code that represents the currency that was sent, such as USD or GBP.
```js title="Example"
"value": "1.23"
@@ -110,13 +114,13 @@ In this example, you have multiple link elements (not shown). You're listening f
`incomingPayment` is an experimental technology .
:::
-The `incomingPayment` property allows you to check whether a payment was received and, if so, the amount received.
+The `incomingPayment` property allows you to check whether a payment was received and, if so, the amount received.
The property returns a URL that represents the incoming payment at your wallet provider. By querying the URL, you can get the `receivedAmount`.
#### Example using `incomingPayment`
-This example shows a hypothetical verification method that makes a basic request to the `incomingPayment` URL and returns the results. For simplicity, it has no logic for authenticating the request.
+This example shows a hypothetical verification method that makes a basic request to the `incomingPayment` URL and returns the results. For simplicity, it has no logic for authenticating the request.
:::note[Authentication]
In many cases, requests to the `incomingPayment` URL must be authenticated because you're fetching sensitive details. The payment account owner should request these specifics from their wallet provider.
@@ -165,7 +169,7 @@ async function verifyPayment(event) {
The `paymentPointer` property returns the URL that represents the payment pointer or wallet address that the payment was sent to. In most cases, the value will be the same as the `href` URL in the monetization ``.
:::note[Property name]
-Earlier versions of the Web Monetization specification only used Interledger's Simple Payment Setup Protocol (SPSP), which calls for payment pointers. This is why the property was named `paymentPointer`.
+Earlier versions of the Web Monetization specification only used Interledger's Simple Payment Setup Protocol (SPSP), which calls for payment pointers. This is why the property was named `paymentPointer`.
As of v3, both payment pointers and Open Payments wallet addresses are returned by this property. GitHub issue 439 is created for discussing a change to the property name.
:::
@@ -197,11 +201,11 @@ As of v3, both payment pointers and Open Payments wallet addresses are returned
### amountSent
-Program your website to show a thank you message to your site visitor when the `amountSent` returns a non-zero amount. In this use case, you're only checking that an amount -- any amount -- was sent.
+Program your website to show a thank you message to your site visitor when the `amountSent` returns a non-zero amount. In this use case, you're only checking that an amount -- any amount -- was sent.
### incomingPayment
-Program your website to remove ads or provide access to exclusive content to your site visitor after receiving a specific amount.
+Program your website to remove ads or provide access to exclusive content to your site visitor after receiving a specific amount.
In this use case, you'll query the URL returned by `incomingPayment` to track the `receivedAmount`. If appropriate, you can ensure the amount is increasing after each `monetization` event to verify that a new payment was received.
@@ -223,7 +227,7 @@ That's hard to remember. Fortunately, your wallet provider offers vanity address
https://wallet.example.com/bob
```
-You add the vanity address as the `href` value in the monetization ``. Then, you set up an event listener for `paymentPointer`. The value that's returned will be:
+You add the vanity address as the `href` value in the monetization ``. Then, you set up an event listener for `paymentPointer`. The value that's returned will be:
```
https://wallet.example.com/GK9D420BL42M
@@ -241,4 +245,4 @@ For example, after entering five wallet addresses and weights, the generator cre
https://webmonetization.org/api/revshare/pay/W1siJGFsaWNlLndhbGxldC5jb20iLDUwLCIkYWxpY2"
```
-You add the generated URL as the `href` value in the monetization ``. Then, you set up an event listener for `paymentPointer`. The value that's returned will be which one of the five wallet addresses that the payment was sent to.
\ No newline at end of file
+You add the generated URL as the `href` value in the monetization ``. Then, you set up an event listener for `paymentPointer`. The value that's returned will be which one of the five wallet addresses that the payment was sent to.
diff --git a/src/content/docs/developers/get-started.mdx b/src/content/docs/developers/get-started.mdx
index 0aec83df..d7371415 100644
--- a/src/content/docs/developers/get-started.mdx
+++ b/src/content/docs/developers/get-started.mdx
@@ -3,14 +3,14 @@ title: Get started
---
import { LinkOut } from '@interledger/docs-design-system'
-import { Steps } from '@astrojs/starlight/components';
-import Wallet from "/src/partials/wallet-prereq.mdx";
+import { Steps } from '@astrojs/starlight/components'
+import Wallet from '/src/partials/wallet-prereq.mdx'
## Prerequisites
1. Create your Web Monetization link tag using the format below. Add your payment URL as the `href` value.
- ```http
-
- ```
+ ```http
+
+ ```
- For example:
+ For example:
- ```http
-
- ```
+ ```http
+
+ ```
2. Add the `` to the `` section of your page.
- ```html title="Example" wrap
+ ```html title="Example" wrap
My Site
@@ -57,6 +55,6 @@ https://wallet.example.com/alice
```
-Congratulations! Your page is now web monetized. Add the `` to any page of your site you want to monetize.
+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](/developers/link-element) page.
\ No newline at end of file
diff --git a/src/content/docs/developers/interfaces.mdx b/src/content/docs/developers/interfaces.mdx
index b3d53b29..a7801b1b 100644
--- a/src/content/docs/developers/interfaces.mdx
+++ b/src/content/docs/developers/interfaces.mdx
@@ -2,19 +2,23 @@
title: Monetization interfaces
---
-import { LinkOut, Hidden } from "@interledger/docs-design-system";
-import { Badge } from '@astrojs/starlight/components';
+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'
-
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.
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.
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.
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.
-### Test network - -
The ILF provides...
- ### Test wallet -The ILF provides...
+The test wallet is a wallet application provided by the ILF that lets you experiment with Web Monetization without using real money. You'll go through a typical Know Your Customer (KYC) sign-up flow, fund an account with play money, and get a payment pointer. + +Review the [Test Web Monetization](/tutorials/test-web-monetization) tutorial to learn more about sending and receiving payments through the test wallet. Go toI want you to get paid when you go viral. #WebMonetizationRocks
", + "url": "https://alpaca.gold/@Jeremiah", + "published": "2023-01-06T00:00:00Z", + "publicKey": {}, + "endpoints": { + "sharedInbox": "https://alpaca.gold/inbox", + }, + "tag": [ + { + "type": "Hashtag", + "href": "https://alpaca.gold/tags/WebMonetizationRocks", + "name": "#WebMonetizationRocks", + }, + ], + + // Wallet address when viewing this user’s profile + "monetization": "https://fynbos.me/jeremiah", +} +``` + +### User post (`Note`) example + +```jsonc wrap +{ + "@context": [ + "https://www.w3.org/ns/activitystreams", + + // Add the Web Monetization namespace + "https://webmonetization.org/ns.jsonld", + + { + "ostatus": "http://ostatus.org#", + "atomUri": "ostatus:atomUri", + "inReplyToAtomUri": "ostatus:inReplyToAtomUri", + "conversation": "ostatus:conversation", + "sensitive": "as:sensitive", + "Hashtag": "as:Hashtag", + }, + ], + "id": "https://alpaca.gold/users/Jeremiah/statuses/113677237228956618", + "type": "Note", + "published": "2024-12-19T02:56:24Z", + "url": "https://alpaca.gold/@Jeremiah/113677237228956618", + "attributedTo": "https://alpaca.gold/users/Jeremiah", + "to": ["https://www.w3.org/ns/activitystreams#Public"], + "cc": ["https://alpaca.gold/users/Jeremiah/followers"], + "sensitive": false, + "atomUri": "https://alpaca.gold/users/Jeremiah/statuses/113677237228956618", + "inReplyToAtomUri": null, + "conversation": "tag:alpaca.gold,2024-12-19:objectId=3727991:objectType=Conversation", + "content": "When you go viral, you should get paid. #WebMonetizationRocks
", + "attachment": [], + "tag": [ + { + "type": "Hashtag", + "href": "https://alpaca.gold/tags/webmonetizationrocks", + "name": "#webmonetizationrocks", + }, + ], + "replies": { + "id": "https://alpaca.gold/users/Jeremiah/statuses/113677237228956618/replies", + "type": "Collection", + "first": { + "type": "CollectionPage", + "next": "https://alpaca.gold/users/Jeremiah/statuses/113677237228956618/replies?only_other_accounts=true&page=true", + "partOf": "https://alpaca.gold/users/Jeremiah/statuses/113677237228956618/replies", + "items": [], + }, + }, + "likes": { + "id": "https://alpaca.gold/users/Jeremiah/statuses/113677237228956618/likes", + "type": "Collection", + "totalItems": 42, + }, + "shares": { + "id": "https://alpaca.gold/users/Jeremiah/statuses/113677237228956618/shares", + "type": "Collection", + "totalItems": 9, + }, + + // Wallet address when viewing this Note + "monetization": "https://fynbos.me/jeremiah", +} +``` diff --git a/src/content/docs/developers/csp.mdx b/src/content/docs/developers/csp.mdx index bf09ceee..f8edc995 100644 --- a/src/content/docs/developers/csp.mdx +++ b/src/content/docs/developers/csp.mdx @@ -2,14 +2,14 @@ title: Content Security Policy (CSP) --- -import { LinkOut, Hidden } from "@interledger/docs-design-system"; +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/csp-monetization-src.json' -A| Directive type | -
+ |
|---|
-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.
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.
+ 1. Click the **Settings** icon in the upper-right of the extension.
-2. Enter an amount. Be sure your balance can cover the amount, otherwise the payment will fail. Click **Send now**.
- 
+ 1. Ensure the URL shown above the amount field is the page you intend to pay.
-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.
+ 1. Click the **Settings** icon in the upper-right of the extension.
- The extension's setup screen appears with your previously used wallet address and budget settings prefilled.
- 
+ 1. Click the **Settings** icon in the upper-right of the extension.
+ src='/img/docs/extension/connection-failed.png'
+ alt='Extension showing an automatic connection error, the key you must copy, and a copy button for the key'
+ style='max-width:300px'
+ class='img-outline'
+/>
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.