Skip to content

Commit bcce45f

Browse files
melissahendersonmelissahenderson
authored
docs: add csp info to pub tools and other updates (#627)
* docs: add csp info to pub tools and other updates * docs: fix * docs: update realized the banner and widget tool buttons on their respective pages were in the wrong place
1 parent 01b3695 commit bcce45f

File tree

11 files changed

+473
-684
lines changed

11 files changed

+473
-684
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Monetization events
44

55
import { LinkOut, Hidden, Tooltip } from '@interledger/docs-design-system'
66
import Specification from '/src/components/docs/Specification.astro'
7-
import { Tabs, TabItem, Steps, Badge } from '@astrojs/starlight/components'
7+
import { Tabs, TabItem, Badge } from '@astrojs/starlight/components'
88
import BrowserCompat from '/src/components/docs/BrowserCompat.astro'
99
import amountSent from '/src/data/browser-compat-data/amountSent.json'
1010
import incomingPayment from '/src/data/browser-compat-data/incomingPayment.json'
@@ -40,14 +40,12 @@ By adding an event listener to the relevant monetization `<link>` element (or on
4040

4141
### High-level flow
4242

43-
<Steps>
4443
1. You add an event listener to a monetization `<link>`.
4544
2. The site visitor accesses your page.
4645
3. The site visitor's Web Monetization agent calls the Open Payments APIs to begin setting up the payment. More information about these API calls can be found [here](/publishers/about-receiving#a-deeper-dive-into-payments).
4746
4. The Web Monetization agent receives a `201 (outgoing payment created)` response from the site visitor's wallet provider.
4847
5. The Web Monetization agent fires a `monetization` event.
4948
6. Your event listener calls its defined function.
50-
</Steps>
5149

5250
## Event properties
5351

‎src/content/docs/guides/receive-test-payments.mdx‎

Lines changed: 33 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Receive test payments
33
---
44

5-
import { Steps, Icon, Card } from '@astrojs/starlight/components'
5+
import { Icon, Card } from '@astrojs/starlight/components'
66
import { LinkOut, StylishHeader } from '@interledger/docs-design-system'
77

88
Use Interledger Foundation's Web Monetization browser extension and Playground to receive payments without using real money.
@@ -19,55 +19,50 @@ The <LinkOut href="https://webmonetization.org/play/">Web Monetization Playgroun
1919

2020
Your browser extension will send payments to the address you enter if your wallet provider and the address's wallet provider can transact with one another.
2121

22-
If your browser extension is connected to a wallet that uses real money and you enter an address that your wallet provider can transact with, you will be making real payments. For the tutorials on this page, we're using fake money.
22+
If your browser extension is connected to a wallet that uses real money and you enter an address that your wallet provider can transact with, you'll make real payments. For the tutorials on this page, we're using fake money.
2323

2424
## Receive continuous payments
2525

26-
{/* prettier-ignore */}
27-
<Steps>
28-
1. Enable continuous payments within the extension if they aren't already. Check your settings by selecting the cog icon, then the **Rate** tab.
26+
1. Enable continuous payments in the extension if they aren't already. Check your settings by selecting the cog icon, then the **Rate** tab.
2927
2. Go to the <LinkOut href="https://webmonetization.org/play/">Web Monetization Playground</LinkOut>.
3028
3. Enter your wallet account's payment pointer into the field and select **Add monetization link**.
31-
:::note[Forgot your payment pointer?]
32-
Open the extension and select the cog icon. Then, select the **Wallet** tab and copy your payment pointer from the **Connected wallet address** field.
33-
:::
29+
:::note[Forgot your payment pointer?]
30+
Open the extension and select the cog icon. Then, select the **Wallet** tab and copy your payment pointer from the **Connected wallet address** field.
31+
:::
3432
4. Remain on the Playground page, with the window active, long enough for a few events to appear on the page. The time it takes for events to appear depends on the rate you have set up in the extension.
35-
<Card title="Example">
36-
If your rate is €0.60 <abbr title="euros">EUR</abbr> an hour, then it will
37-
take 5-6 minutes for three events to appear.
38-
</Card>
33+
<Card title="Example">
34+
If your rate is €0.60 <abbr title="euros">EUR</abbr> an hour, then it will
35+
take 5-6 minutes for three events to appear.
36+
</Card>
3937
5. Select **Disable** to stop the payments.
4038
6. Sign in to your <LinkOut href="https://wallet.interledger-test.dev/">Interledger test wallet</LinkOut> and select **Transactions** from the left menu. A completed outgoing payment appears for each event, as well as a single pending incoming payment with a zero amount.
41-
<Card title="Outgoing payment amounts">
42-
To mimic how a real wallet provider could act, the Interledger test network
43-
deducts a 0.01 fee from each outgoing payment. If your rate is €0.60{' '}
44-
<abbr title="euros">EUR</abbr> an hour, each Playground event will show €0.01
45-
EUR while each outgoing payment in your transaction list will show a debit of
46-
€0.02.
47-
</Card>
39+
<Card title="Outgoing payment amounts">
40+
To mimic how a real wallet provider could act, the Interledger test network
41+
deducts a 0.01 fee from each outgoing payment. If your rate is €0.60{' '}
42+
<abbr title="euros">EUR</abbr> an hour, each Playground event will show
43+
€0.01 EUR while each outgoing payment in your transaction list will show a
44+
debit of €0.02.
45+
</Card>
4846
7. Wait 10 minutes, then refresh the page. The pending incoming transaction will show as completed and reflect the amount deposited into your wallet.
49-
<Card title="Example">
50-
If your rate is €0.60 <abbr title="euros">EUR</abbr> an hour and you waited
51-
for three Playground events, your incoming payment will be approximately
52-
€0.03.
53-
</Card>
54-
</Steps>
47+
<Card title="Example">
48+
If your rate is €0.60 <abbr title="euros">EUR</abbr> an hour and you waited
49+
for three Playground events, your incoming payment will be approximately
50+
€0.03.
51+
</Card>
5552

5653
## Receive a one-time payment
5754

58-
{/* prettier-ignore */}
59-
<Steps>
60-
1. Go to the <LinkOut href="https://webmonetization.org/play/">Web Monetization Playground</LinkOut>.
55+
1. Go to the <LinkOut href="https://webmonetization.org/play/">
56+
Web Monetization Playground</LinkOut>.
6157
2. Enter your wallet account's payment pointer into the field and select **Add monetization link**.
62-
:::note[Forgot your payment pointer?]
63-
Open the extension and select the cog icon. Then, select the **Wallet** tab and copy your payment pointer from the **Connected wallet address** field.
64-
:::
58+
:::note[Forgot your payment pointer?]
59+
Open the extension and select the cog icon. Then, select the **Wallet** tab and copy your payment pointer from the **Connected wallet address** field.
60+
:::
6561
3. Open the extension, enter a one-time payment amount, then click **Send now**. A new event will appear in the Playground almost immediately.
6662
4. Sign in to your <LinkOut href="https://wallet.interledger-test.dev/">Interledger test wallet</LinkOut> and select **Transactions** from the left menu. A completed outgoing and incoming payment will appear.
67-
<Card title="Incoming payment amount">
68-
To mimic how a real wallet provider could act, the Interledger test network
69-
might show a 0.01 fee deducted from each outgoing payment. If you made a
70-
one-time payment of €1.00 <abbr title="euros">EUR</abbr>, for example, the
71-
completed incoming payment might be for €0.99.
72-
</Card>
73-
</Steps>
63+
<Card title="Incoming payment amount">
64+
To mimic how a real wallet provider could act, the Interledger test network
65+
might show a 0.01 fee deducted from each outgoing payment. If you made a
66+
one-time payment of €1.00 <abbr title="euros">EUR</abbr>, for example, the
67+
completed incoming payment might be for €0.99.
68+
</Card>

‎src/content/docs/guides/send-test-payments.mdx‎

Lines changed: 47 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Send test payments
33
---
44

5-
import { Steps, Icon } from '@astrojs/starlight/components'
5+
import { Icon } from '@astrojs/starlight/components'
66
import { LinkOut, StylishHeader } from '@interledger/docs-design-system'
77

88
Use Interledger Foundation's Web Monetization browser extension to send payments to a web monetized site without using real money.
@@ -13,47 +13,32 @@ You must have a [funded test wallet account](/guides/test-wallet-sign-up) on Int
1313

1414
## Install the extension
1515

16-
{/* prettier-ignore */}
17-
<Steps>
18-
<ol>
19-
<li>Sign in to your <LinkOut href="https://wallet.interledger-test.dev/">wallet account</LinkOut>.</li>
20-
<li>Download and install Interledger Foundation's [Web Monetization browser extension](/supporters/get-started#install-the-extension).</li>
21-
<li>
22-
Enter the payment pointer associated with your test wallet. For example, `$ilp.interledger-test.dev/mytestwallet`. Then, enter a budget amount and click **Connect**.
23-
<img
24-
src="/img/docs/extension/connection-setup.png"
25-
alt="Extension setup screen with wallet address and amount fields, renew monthly toggle, and connect button"
26-
style="max-width:300px"
27-
class="img-outline"
28-
/>
29-
</li>
30-
<li>Click **Agree** to allow the extension to connect to your wallet.</li>
31-
<li>Click **Accept** on the Interledger request screen.</li>
32-
</ol>
33-
</Steps>
16+
1. Sign in to your <LinkOut href="https://wallet.interledger-test.dev/">wallet account</LinkOut>.
17+
2. Download and install Interledger Foundation's [Web Monetization browser extension](/supporters/get-started#install-the-extension).
18+
3. Enter the payment pointer associated with your test wallet. For example, `$ilp.interledger-test.dev/mytestwallet`. Then, enter a budget amount and click **Connect**.
19+
<img
20+
src="/img/docs/extension/connection-setup.png"
21+
alt="Extension setup screen with wallet address and amount fields, renew monthly toggle, and connect button"
22+
style="max-width:300px"
23+
class="img-outline"
24+
/>
25+
4. Click **Agree** to allow the extension to connect to your wallet.
26+
5. Click **Accept** on the Interledger request screen.
3427

3528
## Configure continuous payments (optional)
3629

3730
By default, the extension sends continuous payments at a rate of $0.60 <abbr title="US dollars">USD</abbr> an hour ($0.01 a minute), or the equivalent in your chosen currency based on the exchange rate.
3831

3932
To change the rate of pay:
4033

41-
{/* prettier-ignore */}
42-
<Steps>
43-
<ol>
44-
<li>Click the **Settings** icon in the upper-right of the extension.</li>
45-
<li>
46-
Select the *Rate* tab, then enter the amount to send, per hour, to web
47-
monetized sites. Your changes are automatically saved.
48-
<img
49-
src="/img/docs/extension/rate-tab.png"
50-
alt="Rate tab with rate of pay per hour field and continuous payment toggle"
51-
style="max-width:300px"
52-
class="img-outline"
53-
/>
54-
</li>
55-
</ol>
56-
</Steps>
34+
1. Click the **Settings** icon in the upper-right of the extension.
35+
2. Select the _Rate_ tab, then enter the amount to send, per hour, to web monetized sites. Your changes are automatically saved.
36+
<img
37+
src="/img/docs/extension/rate-tab.png"
38+
alt="Rate tab with rate of pay per hour field and continuous payment toggle"
39+
style="max-width:300px"
40+
class="img-outline"
41+
/>
5742

5843
## Send continuous payments
5944

@@ -63,49 +48,36 @@ This page's test wallet receives all payments in Mexican pesos (MX$) regardless
6348

6449
Check the status of the extension.
6550

66-
| Icon | Status |
67-
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
68-
| ![Active extension with green circle](/img/docs/extension/enabled-monetized.png) | The extension is sending continuous payments. |
69-
| ![Active extension with red circle](/img/docs/extension/enabled-unmonetized.png) | The extension is not sending continuous payments. Refresh the page. |
51+
| Icon | Status |
52+
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
53+
| ![Active extension with green circle](/img/docs/extension/enabled-monetized.png) | The extension is sending continuous payments. |
54+
| ![Active extension with red circle](/img/docs/extension/enabled-unmonetized.png) | The extension isn't sending continuous payments. Refresh the page. |
7055

71-
Each payment appears within the _Monetization events_ section on the test site.<br /><img src='/img/docs/testwallet/testwallet-sid-continuous-events.png' alt='Monetization events section showing two payments of MXN 0.21' style='max-width:250px' class='img-outline'/>
56+
Each payment appears in the _Monetization events_ section on the test site.<br /><img src='/img/docs/testwallet/testwallet-sid-continuous-events.png' alt='Monetization events section showing two payments of MXN 0.21' style='max-width:250px' class='img-outline'/>
7257

7358
If your extension is using <abbr title="US dollars">USD</abbr> with the default rate of $0.60 an hour, a new event appears on the site about every two minutes as long as the window is active. Continuous payments stop when the window is inactive. Keep the window active until a few payment events appear. Then, sign in to your <LinkOut href="https://wallet.interledger-test.dev/">wallet account</LinkOut> and select **Transactions** to see the payments you've sent.
7459

7560
## Send a one-time payment
7661

77-
{/* prettier-ignore */}
78-
<Steps>
79-
<ol>
80-
<li>Visit <LinkOut href="https://sidvishnoi.com/test/wm/" withIcon={false}>https://sidvishnoi.com/test/wm/</LinkOut>.</li>
81-
<li>
82-
Check that the extension shows a green circle. If not, try refreshing the
83-
page.
84-
<img
85-
src="/img/docs/extension/enabled-monetized.png"
86-
style="float:left;padding-right:20px"
87-
/>
88-
<img src="/img/docs/extension/disabled-monetized.png" />
89-
</li>
90-
<li>
91-
Open the extension and enter an amount to send.
92-
<img
93-
src="/img/docs/extension/otp-send-now.png"
94-
alt="Extension showing an available balance of five dollars, with one dollar in the amount field and send now button active"
95-
style="max-width:250px"
96-
class="img-outline"
97-
/>
98-
</li>
99-
<li>
100-
Click **Send now**. Your payment will appear immediately on the test site,
101-
within the *Monetization events* section.
102-
<img
103-
src="/img/docs/testwallet/testwallet-sid-otp-event.png"
104-
alt="Monetization events section showing two payments of MXN 0.21 and a one-time payment of 19.92"
105-
style="max-width:250px"
106-
class="img-outline"
107-
/>
108-
</li>
109-
<li>Sign in to your{' '}<LinkOut href="https://wallet.interledger-test.dev/">wallet account</LinkOut>{' '}and select **Transactions** to see the payment you just sent.</li>
110-
</ol>
111-
</Steps>
62+
1. Visit <LinkOut href="https://sidvishnoi.com/test/wm/" withIcon={false}>https://sidvishnoi.com/test/wm/</LinkOut>.
63+
2. Check that the extension shows a green circle. If not, try refreshing the page.
64+
<img
65+
src="/img/docs/extension/enabled-monetized.png"
66+
style="float:left;padding-right:20px"
67+
/>
68+
<img src="/img/docs/extension/disabled-monetized.png" />
69+
3. Open the extension and enter an amount to send.
70+
<img
71+
src="/img/docs/extension/otp-send-now.png"
72+
alt="Extension showing an available balance of five dollars, with one dollar in the amount field and send now button active"
73+
style="max-width:250px"
74+
class="img-outline"
75+
/>
76+
4. Click **Send now**. Your payment will appear immediately on the test site, in the _Monetization events_ section.
77+
<img
78+
src="/img/docs/testwallet/testwallet-sid-otp-event.png"
79+
alt="Monetization events section showing two payments of MXN 0.21 and a one-time payment of 19.92"
80+
style="max-width:250px"
81+
class="img-outline"
82+
/>
83+
5. Sign in to your <LinkOut href="https://wallet.interledger-test.dev/">wallet account</LinkOut> and select **Transactions** to see the payment you just sent.

0 commit comments

Comments
 (0)