Skip to content

Commit 4894081

Browse files
author
Jon M
committed
fix: more mdx formatting issues
1 parent c66444f commit 4894081

5 files changed

Lines changed: 259 additions & 227 deletions

File tree

‎src/content/docs/developers/about-receiving.mdx‎

Lines changed: 88 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -77,21 +77,29 @@ The examples below are simplified representations of the Open Payments API calls
7777

7878
<Steps>
7979
1. The Web Monetization agent locates your [monetization link](/developers/link-element) and extracts your wallet address (the `href` value).
80-
<Disclosure toggleText="Example monetization link" client:load>
80+
81+
<Disclosure toggleText="Example monetization link" >
82+
8183
```html
8284
<link rel="monetization" href="https://wallet.example/alice">
8385
```
86+
8487
</Disclosure>
8588
2. The agent issues a <LinkOut href="https://openpayments.dev/apis/wallet-address-server/operations/get-wallet-address/"><Badge text="GET" variant="note" size="small" /></LinkOut> request to the URL.
86-
<Disclosure toggleText="Example request" client:load>
89+
90+
<Disclosure toggleText="Example request" >
91+
8792
```http
8893
GET /alice HTTP/1.1
8994
Accept: application/json
9095
Host: wallet.example
9196
```
97+
9298
</Disclosure>
9399
3. The response from your wallet provider to the agent contains information such as the currency your account is denominated in and the URLs of your wallet provider's authorization and resource servers.
94-
<Disclosure toggleText="Example response" client:load>
100+
101+
<Disclosure toggleText="Example response" >
102+
95103
```http
96104
HTTP/1.1 200 Success
97105
Content-Type: application/json
@@ -103,11 +111,12 @@ The examples below are simplified representations of the Open Payments API calls
103111
"resourceServer": "https://wallet.example/resource"
104112
}
105113
```
114+
106115
</Disclosure>
107116

108117
4. The agent issues a <LinkOut href="https://openpayments.dev/apis/auth-server/operations/post-request/"><Badge text="POST" variant="success" size="small" /></LinkOut> request to your wallet provider's `authServer` URL. The request contains the access permissions the agent is requesting.
109118

110-
<Disclosure toggleText="Example request" client:load>
119+
<Disclosure toggleText="Example request" >
111120

112121
```http
113122
POST /auth/ HTTP/1.1
@@ -135,7 +144,7 @@ The examples below are simplified representations of the Open Payments API calls
135144
</Disclosure>
136145
5. The response to the agent contains an access token that the agent needs to make its next request.
137146

138-
<Disclosure toggleText="Example response" client:load>
147+
<Disclosure toggleText="Example response" >
139148

140149
```http wrap
141150
{
@@ -155,68 +164,83 @@ The examples below are simplified representations of the Open Payments API calls
155164

156165
</Disclosure>
157166
6. The agent issues a <LinkOut href="https://openpayments.dev/apis/resource-server/operations/create-incoming-payment/"><Badge text="POST" variant="success" size="small" /></LinkOut> request to your wallet provider's `resourceServer` URL. The purpose of this call is to request the information needed by your visitor's wallet provider so their provider correctly addresses the payment to you.
158-
<Disclosure toggleText='Example request' client:load>
159-
```http wrap POST /alice/incoming-payments HTTP/1.1 Accept:
160-
application/json Content-Type: application/json Authorization:
161-
OS9M2PMHKUR64TB8N6BW7OZB8CDFONP219RP1LT0 Host: wallet.example ```
167+
168+
<Disclosure toggleText='Example request' >
169+
170+
```http wrap
171+
POST /alice/incoming-payments HTTP/1.1
172+
Accept: application/json
173+
Content-Type: application/json
174+
Authorization: OS9M2PMHKUR64TB8N6BW7OZB8CDFONP219RP1LT0
175+
Host: wallet.example
176+
```
177+
162178
</Disclosure>
163179
7. The response to the agent contains unique payment details that will be used to address the payment to your payment account.
164-
<Disclosure toggleText="Example response" client:load>
165-
```http wrap
166-
{
167-
"id": "https://wallet.example/alice/incoming-payments/08394f02-7b7b-45e2-b645-51d04e7c330c",
168-
"walletAddress": "https://wallet.example/alice",
169-
"receivedAmount": {
170-
"value": "0",
171-
"assetCode": "USD",
172-
"assetScale": 2
173-
},
174-
"completed": false,
175-
"createdAt": "2022-03-12T23:20:50.52Z"
176-
}
177-
```
178-
</Disclosure>
180+
181+
<Disclosure toggleText="Example response" >
182+
183+
```http wrap
184+
{
185+
"id": "https://wallet.example/alice/incoming-payments/08394f02-7b7b-45e2-b645-51d04e7c330c",
186+
"walletAddress": "https://wallet.example/alice",
187+
"receivedAmount": {
188+
"value": "0",
189+
"assetCode": "USD",
190+
"assetScale": 2
191+
},
192+
"completed": false,
193+
"createdAt": "2022-03-12T23:20:50.52Z"
194+
}
195+
```
196+
197+
</Disclosure>
179198
8. At this point, the agent has finished communicating with your wallet provider. Now, the agent issues a <LinkOut href="https://openpayments.dev/apis/resource-server/operations/create-outgoing-payment/"><Badge text="POST" variant="success" size="small" /></LinkOut> request to your visitor's wallet provider. The purpose of this call is to give your visitor's wallet provider what it needs to send the payment.
180-
<Disclosure toggleText="Example request" client:load>
181-
```http wrap
182-
POST /visitor/outgoing-payment HTTP/1.1
183-
Accept: application/json
184-
Content-Type: application/json
185-
Authorization: {{ GNAP outgoingPaymentGrant.accessToken.value }}
186-
Host: cloudninewallet.example
187-
{
188-
"walletAddress": "https://wallet.example/alice",
189-
"quoteId": "https://wallet.example/quotes/ab03296b-0c8b-4776-b94e-7ee27d868d4d",
190-
}
191-
```
192-
</Disclosure>
199+
200+
<Disclosure toggleText="Example request" >
201+
202+
```http wrap
203+
POST /visitor/outgoing-payment HTTP/1.1
204+
Accept: application/json
205+
Content-Type: application/json
206+
Authorization: {{ GNAP outgoingPaymentGrant.accessToken.value }}
207+
Host: cloudninewallet.example
208+
{
209+
"walletAddress": "https://wallet.example/alice",
210+
"quoteId": "https://wallet.example/quotes/ab03296b-0c8b-4776-b94e-7ee27d868d4d",
211+
}
212+
```
213+
214+
</Disclosure>
193215
9. The <LinkOut href="https://openpayments.dev/apis/resource-server/operations/create-outgoing-payment/#responses">response</LinkOut> 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.
194216

195-
<Disclosure toggleText="Example response" client:load>
196-
```http wrap
197-
{
198-
"id": "https://cloudninewallet.example/visitor/outgoing-payments/8c68d3cc-0a0f-4216-98b4-4fa44a6c88cf",
199-
"walletAddress": "https://cloudninewallet.example/visitor/",
200-
"receiver": "https://wallet.example/alice/incoming-payments/08394f02-7b7b-45e2-b645-51d04e7c330c",
201-
"receiveAmount": {
202-
"value": "2",
203-
"assetCode": "USD",
204-
"assetScale": 2
205-
},
206-
"debitAmount": {
207-
"value": "2",
208-
"assetCode": "USD",
209-
"assetScale": 2
210-
},
211-
"sentAmount": {
212-
"value": "0",
213-
"assetCode": "USD",
214-
"assetScale": 2
215-
},
216-
"createdAt": "2022-03-12T23:20:55.52Z",
217-
"updatedAt": "2022-03-12T23:20:55.52Z"
218-
}
219-
```
220-
</Disclosure>
217+
<Disclosure toggleText="Example response" >
218+
219+
```http wrap
220+
{
221+
"id": "https://cloudninewallet.example/visitor/outgoing-payments/8c68d3cc-0a0f-4216-98b4-4fa44a6c88cf",
222+
"walletAddress": "https://cloudninewallet.example/visitor/",
223+
"receiver": "https://wallet.example/alice/incoming-payments/08394f02-7b7b-45e2-b645-51d04e7c330c",
224+
"receiveAmount": {
225+
"value": "2",
226+
"assetCode": "USD",
227+
"assetScale": 2
228+
},
229+
"debitAmount": {
230+
"value": "2",
231+
"assetCode": "USD",
232+
"assetScale": 2
233+
},
234+
"sentAmount": {
235+
"value": "0",
236+
"assetCode": "USD",
237+
"assetScale": 2
238+
},
239+
"createdAt": "2022-03-12T23:20:55.52Z",
240+
"updatedAt": "2022-03-12T23:20:55.52Z"
241+
}
242+
```
243+
244+
</Disclosure>
221245

222-
</Steps>
246+
</Steps>

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

Lines changed: 54 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,22 @@ You must have a [funded test wallet account](/guides/test-wallet-sign-up) on Int
1414
## Install the extension
1515

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

3535
## Configure continuous payments (optional)
@@ -39,16 +39,16 @@ By default, the extension sends continuous payments at a rate of $0.60 <abbr tit
3939
To change the rate of pay:
4040

4141
<Steps>
42-
1. Click the **Settings** icon in the upper-right of the extension. 2. Select
43-
the *Rate* tab, then enter the amount to send, per hour, to web monetized
44-
sites. Your changes are automatically saved.
45-
<br />
46-
<img
47-
src='/img/docs/extension/rate-tab.png'
48-
alt='Rate tab with rate of pay per hour field and continuous payment toggle'
49-
style='max-width:300px'
50-
class='img-outline'
51-
/>
42+
1. Click the **Settings** icon in the upper-right of the extension.
43+
44+
2. Select the *Rate* tab, then enter the amount to send, per hour, to web monetized sites. Your changes are automatically saved.
45+
46+
<img
47+
src='/img/docs/extension/rate-tab.png'
48+
alt='Rate tab with rate of pay per hour field and continuous payment toggle'
49+
style='max-width:300px'
50+
class='img-outline'
51+
/>
5252
</Steps>
5353

5454
## Send continuous payments
@@ -71,36 +71,33 @@ If your extension is using <abbr title="US dollars">USD</abbr> with the default
7171
## Send a one-time payment
7272

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

‎src/content/docs/guides/test-wallet-sign-up.mdx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,13 @@ Sign up for a <LinkOut href="https://wallet.interledger-test.dev">test wallet</L
1010
## Step 1 - Create an account
1111

1212
<Steps>
13-
1. Go to{' '}
14-
<LinkOut href='https://wallet.interledger-test.dev'>
15-
wallet.interledger-test.dev
16-
</LinkOut>{' '}
17-
and click **Create account**. 2. Enter your email address and a password, then
18-
click the arrowhead. A verification email will be sent to you. 3. Click
19-
**Confirm my email address** in the verification email. 4. Log in to your
20-
newly created account and complete the Know Your Customer (KYC) steps.
13+
1. Go to <LinkOut href='https://wallet.interledger-test.dev'>wallet.interledger-test.dev</LinkOut> and click **Create account**.
14+
15+
2. Enter your email address and a password, then click the arrowhead. A verification email will be sent to you.
16+
17+
3. Click **Confirm my email address** in the verification email.
18+
19+
4. Log in to your newly created account and complete the Know Your Customer (KYC) steps.
2120
</Steps>
2221

2322
## Step 2 - Complete KYC

0 commit comments

Comments
 (0)