Skip to content

Commit 9aa5a53

Browse files
melissahendersonmelissahenderson
committed
updates
1 parent 1c564de commit 9aa5a53

13 files changed

+142
-22
lines changed

‎src/components/docs/PageSidebar.astro

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ import type { Props } from '@astrojs/starlight/props';
33
import Default from '@astrojs/starlight/components/PageSidebar.astro';
44
55
const removeOverview = [
6-
'docs/resources/glossary',
6+
'resources/glossary',
7+
'resources/community/get-involved',
8+
'experiment/quick-start',
9+
'experiment/how-payments-work',
10+
'support/how-payments-work',
711
]
812
const noOverview = removeOverview.includes(Astro.props.slug);
913
const toc = noOverview

‎src/content/docs/experiment/events.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import amountSent from '/src/data/browser-compat-data/amountSent.json'
1010
import incomingPayment from '/src/data/browser-compat-data/incomingPayment.json'
1111
import paymentPointer from '/src/data/browser-compat-data/paymentPointer.json'
1212

13-
One responsibility of the [Web Monetization agent](/resources/glossary/#web-monetization-agent) is to instrument payments. The agent does this by calling the <mark>Open Payments APIs</mark>.
13+
One responsibility of the [Web Monetization agent](/resources/glossary/#web-monetization-agent) is to instrument payments. The agent does this by calling the Open Payments APIs, which are APIs implemented by wallet providers.
1414

1515
Calls are made to the <LinkOut href="https://openpayments.dev/apis/resource-server/operations/create-incoming-payment/">`/incoming-payments`</LinkOut> endpoint at your wallet provider and to the <LinkOut href="https://openpayments.dev/apis/resource-server/operations/create-outgoing-payment/">`/outgoing-payments`</LinkOut> endpoint at your site visitor's wallet provider.
1616

‎src/content/docs/experiment/guides/contribution-counter.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,15 @@
22
title: Show visitors how much they've contributed
33
---
44

5+
import Wallet from "/src/partials/wallet-prereq.mdx";
56
import Disclaimer from "/src/partials/glitch.mdx";
67

78
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.
89

10+
### Before you begin
11+
12+
<Wallet />
13+
914
## User experience
1015

1116
For visitors without Web Monetization, the counter will show 0.00.

‎src/content/docs/experiment/guides/remove-content.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,15 @@
22
title: Remove content for paying visitors
33
---
44

5+
import Wallet from "/src/partials/wallet-prereq.mdx";
56
import Disclaimer from "/src/partials/glitch.mdx";
67

78
This guide describes one way you can remove content for paying visitors after the `monetization` event fires. The event only fires after an outgoing payment request is successfully created. If the event doesn't fire, then the content will remain visible on your page.
89

10+
### Before you begin
11+
12+
<Wallet />
13+
914
## User experience
1015

1116
For visitors without Web Monetization, your content appears as soon as your page loads.

‎src/content/docs/experiment/guides/revenue-sharing.mdx

+8-3
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,23 @@ title: Set up probabilistic revenue sharing
33
---
44

55
import { LinkOut } from "@interledger/docs-design-system";
6+
import Wallet from "/src/partials/wallet-prereq.mdx";
67
import Disclaimer from "/src/partials/glitch.mdx";
78

8-
Probabilistic revenue sharing is the sharing of revenue between multiple wallet addresses/payment pointers based on the probability of one of the addresses being chosen over the others on each page load.
9+
Probabilistic revenue sharing is a way for a monetized page's total revenue to be split between multiple wallet addresses/payment pointers based on the probability of one address being chosen over the others on each page load.
910

10-
Probabilistic revenue sharing is a way for a page's total revenue to be split between multiple addresses. The monetization `<link>` element itself only supports one URL as the `href` value. Your page can contain multiple link elements; however, there's no guarantee that your visitor's Web Monetization extension can process payments to multiple addresses at one time.
11+
Why take this approach? First, the monetization `<link>` element itself only supports one URL as the `href` value. Second, although your page can contain multiple monetization links, there are a [few reasons](/experiment/link-element#multiple-monetization-links) why some of the links might not be monetized.
1112

12-
It works by choosing from a list of predefined wallet addresses/payment pointers in URL format each time a web monetized visitor loads your page. Payments are sent to the chosen address until the visitor reloads or closes the page.
13+
Probabilistic revenue sharing works by choosing from a list of predefined wallet addresses/payment pointers in URL format each time a web monetized visitor loads your page. Payments are sent to the chosen address until the visitor reloads or closes the page.
1314

1415
The chance of and address being chosen is based on its assigned weight. For example, if Alice’s address has a weight of 50 (out of 100), then her address has a 50% chance of being chosen. The laws of probability state that Alice’s share of the page’s total revenue will approach 50% as more web monetized visitors access the page.
1516

1617
This guide presents two ways in which to set up probabilistic revenue sharing. The first is by adding a [script](#example-dev-scenario-use-a-script) to your page. If you'd prefer to not use a script, you can use our [generator](#example-dev-scenario-use-the-probabilistic-revshare-generator).
1718

19+
### Before you begin
20+
21+
<Wallet />
22+
1823
## User experience
1924

2025
Probabilistic revenue sharing does not affect the user experience for your web monetized visitors.

‎src/content/docs/experiment/guides/show-content.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,15 @@
22
title: Show content to paying visitors
33
---
44

5+
import Wallet from "/src/partials/wallet-prereq.mdx";
56
import Disclaimer from "/src/partials/glitch.mdx";
67

78
This guide describes one way you can show otherwise hidden content to paying visitors after the `monetization` event fires. The event only fires after an outgoing payment request is successfully created. If the event doesn't fire, then the content will remain hidden on your page.
89

10+
### Before you begin
11+
12+
<Wallet />
13+
914
## User experience
1015

1116
For visitors without Web Monetization, your content is always hidden.

‎src/content/docs/experiment/how-payments-work.mdx

+91-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
title: How payments work
33
---
44

5+
import { LinkOut, CodeBlock } from "@interledger/docs-design-system";
6+
import { Badge, Tabs, TabItem } from '@astrojs/starlight/components';
7+
58
## Digital wallets
69

710
To receive (and send) payments, you must have an account with a compatible digital wallet. Not all digital wallets support receiving payments with Web Monetization.
@@ -38,4 +41,91 @@ When you include the `<link>` element on a page, you're telling your visitors' b
3841

3942
Your visitors' Web Monetization extension acts like a messaging service. When they land on your page, their extension identifies the `<link>` element and parses your payment URL.
4043

41-
Then, a component within the extension--called the [Web Monetization agent](/experiment/link-element#web-monetization-agent)--issues a `GET` request to your payment URL. In return, it receives the information it needs to begin setting up a payment. The Web Monetization agent passes the information, along with the visitor's payment instructions, to the visitor's wallet provider. The visitor's wallet provider then sends the payment to your wallet provider who credits your account.
44+
Then, a component within the extension--called the [Web Monetization agent](/experiment/link-element#web-monetization-agent)--issues a <Badge text="GET" variant="success" size="small" /> request to your payment URL. In return, it receives the information it needs to begin setting up a payment. The Web Monetization agent passes the information, along with the visitor's payment instructions, to the visitor's wallet provider. The visitor's wallet provider then sends the payment to your wallet provider who credits your account.
45+
46+
### A deeper dive into payments
47+
48+
For a wallet to be compatible with Web Monetization, the provider must integrate with the <LinkOut href="https://openpayments.dev">Open Payments standard</LinkOut>.
49+
50+
The Web Monetization agent first issues a <Badge text="GET" variant="note" size="small" /> request to the URL in your monetization `<link>` tag. The response contains information the Web Monetization agent needs for its next request.
51+
52+
<Tabs>
53+
<TabItem label="Request">
54+
```http
55+
GET /alice HTTP/1.1
56+
Accept: application/json
57+
Host: wallet.example
58+
```
59+
</TabItem>
60+
<TabItem label="Response">
61+
```http
62+
HTTP/1.1 200 Success
63+
Content-Type: application/json
64+
65+
{
66+
"id":"https://wallet.example/alice",
67+
"assetCode":"USD",
68+
"assetScale":2,
69+
"authServer":"https://wallet.example/auth",
70+
"resourceServer":"https://wallet.example/resource"
71+
}
72+
```
73+
</TabItem>
74+
</Tabs>
75+
76+
Next, the Web Monetization agent issues a <Badge text="POST" variant="success" size="small" /> request to the `authServer` URL it received in the prior response. The purpose of this request is to get permission, in the form of an access token, for an incoming payment resource to be created on your payment account.
77+
78+
<Tabs>
79+
<TabItem label="Request">
80+
```http
81+
POST /auth/ HTTP/1.1
82+
Accept: application/json
83+
Content-Type: application/json
84+
Host: wallet.example
85+
Content-Length: 218
86+
87+
{
88+
"access_token":{
89+
"access":[
90+
{
91+
"type":"incoming-payment",
92+
"actions":[
93+
"create",
94+
"read"
95+
],
96+
"identifier":"https://wallet.example/alice"
97+
}
98+
]
99+
},
100+
"interact":{
101+
"finish":{
102+
"method":"redirect"
103+
}
104+
},
105+
"client":"https://anotherwallet.example/bob"
106+
}
107+
```
108+
</TabItem>
109+
<TabItem label="Response">
110+
```http
111+
{
112+
"access_token":{
113+
"value":"OS9M2PMHKUR64TB8N6BW7OZB8CDFONP219RP1LT0",
114+
"manage":"https://wallet.example/auth/token/dd17a202-9982-4ed9-ae31-564947fb6379",
115+
"access":[
116+
{
117+
"type":"incoming-payment",
118+
"actions":[
119+
"create",
120+
"read"
121+
],
122+
"identifier":"https://wallet.example/alice"
123+
}
124+
]
125+
}
126+
}
127+
```
128+
</TabItem>
129+
</Tabs>
130+
131+
Start at step 4: https://webmonetization.org/docs/intro/web-monetization-flow/#4---send-incoming-payment-request-to-wallet-address-receiving-account

‎src/content/docs/experiment/link-element.mdx

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import BrowserCompat from '/src/components/docs/BrowserCompat.astro'
1010
import data from '/src/data/browser-compat-data/link.json'
1111
import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';
1212

13+
From a creator/developer perspective, the monetization `<link>` element is one of the two key pieces to adding web monetization to a page. The second piece is your wallet address/payment pointer.
14+
1315
## Prerequisites
1416

1517
To web monetize an HTML document, such as a web page:
@@ -117,7 +119,7 @@ The purpose of the Web Monetization agent is to recognize when a page is web mon
117119

118120
* Extending the HTML DOM API so that `monetization` is a valid link type
119121
* Processing the monetization link or links within an HTML page
120-
* Instrumenting payments by calling the <mark>Open Payments APIs</mark>
122+
* Instrumenting payments by calling the Open Payments APIs, which are APIs implemented by wallet providers
121123
* Firing [`monetization`](/experiment/events) events after an outgoing payment is created
122124
* Processing `monetization` events sent to the browser window via the [`onmonetization`](/experiment/onmonetization) event handler
123125
* Enabling the CSP [`monetization-src`](/experiment/csp) and Permissions Policy [`monetization`](/experiment/permissions-policy) directives

‎src/content/docs/experiment/quick-start.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ title: Web monetize a page
44

55
import { LinkOut } from '@interledger/docs-design-system'
66
import { Steps } from '@astrojs/starlight/components';
7+
import Wallet from "/src/partials/wallet-prereq.mdx";
78

89
## Prerequisites
910

10-
- You must have a wallet address or payment pointer assigned to you by your [wallet provider](/resources/wallets).
11-
- Each page you want to monetize must served over HTTPS.
11+
<Wallet />
1212

1313
## Step 1 - Get your payment URL
1414

‎src/content/docs/resources/glossary.mdx

+13-13
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,19 @@ import { LinkOut } from "@interledger/docs-design-system";
1010

1111
### Interledger Foundation (ILF)
1212

13-
TBD
13+
The <LinkOut href="https://interledger.org">Interledger Foundation</LinkOut> (ILF) is a global nonprofit foundation and steward of the Interledger Protocol, the Open Payments standard, and Web Monetization.
1414

15-
### Interledger Protocol (ILP) stack
16-
17-
The Interledger Protocol stack is a collection of request/response protocols where the requests and responses are ILP packets.
15+
The ILF offers an open source [Web Monetization browser extension](/support/use-extension) that showcases a pay-as-you-browse model, allowing you to define how often and how much to pay to web monetized websites.
1816

1917
## O
2018

2119
<hr/>
2220

2321
### Open Payments
2422

25-
TBD
23+
<LinkOut href="https://openpayments.dev">Open Payments</LinkOut> 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.
24+
25+
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.
2626

2727
## P
2828

@@ -42,22 +42,16 @@ To web monetize your own content, you must convert your payment pointer to its U
4242

4343
### Test network
4444

45-
TBD
45+
<p><mark>The ILF provides...</mark></p>
4646

4747
### Test wallet
4848

49-
TBD
49+
<p><mark>The ILF provides...</mark></p>
5050

5151
## W
5252

5353
<hr/>
5454

55-
### Wallet provider
56-
57-
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.
58-
59-
Wallet providers are regulated entities within the countries they operate.
60-
6155
### Wallet address
6256

6357
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.
@@ -66,6 +60,12 @@ As a supporter of web monetized content, you'll enter your wallet address into y
6660

6761
To web monetize your own content, you'll add your wallet address as the `href` value within the monetization `<link>` element.
6862

63+
### Wallet provider
64+
65+
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.
66+
67+
Wallet providers are regulated entities within the countries they operate.
68+
6969
### Web Monetization agent
7070

7171
A non-user facing component of a Web Monetization extension or web browser. The purpose of the Web Monetization agent is to:

‎src/content/docs/resources/recommended-sites.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Recommended web monetized sites
3+
tableOfContents: false
34
---
45

56
import { LinkOut } from "@interledger/docs-design-system";

‎src/content/docs/resources/wallets.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Compatible digital wallets
33
lastUpdated: 2024-07-19
4+
tableOfContents: false
45
---
56

67
import { LinkOut } from "@interledger/docs-design-system";

‎src/partials/wallet-prereq.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
- You must have a wallet address or payment pointer assigned to you by your [wallet provider](/resources/wallets).
2+
- Each page you want to monetize must served over HTTPS.

0 commit comments

Comments
 (0)