Skip to content

Commit

Permalink
feat: Add Web Monetization JSON-LD namespace
Browse files Browse the repository at this point in the history
  • Loading branch information
jeremiahlee committed Jan 30, 2025
1 parent 9d155de commit 31a3d3b
Show file tree
Hide file tree
Showing 9 changed files with 64 additions and 27 deletions.
9 changes: 9 additions & 0 deletions public/ns.jsonld
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"@context": {
"wm": "https://webmonetization.org/ns#",
"monetization": {
"@id": "wm:monetization",
"@type": "@id"
}
}
}
2 changes: 1 addition & 1 deletion src/content/docs/docs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,5 @@ Web Monetization communicates with the sending and receiving accounts to obtain
A new version of the Web Monetization specification was published in June 2023. Users of the previous version should be aware of the following:

- The previous version only used Interledger's Simple Payment Setup Protocol (SPSP). The new version uses <LinkOut href="https://openpayments.guide/">Open Payments</LinkOut>.
- The `<meta>` element is deprecated in favor of the [`<link>`](/docs/references/html-link-rel-monetization/) element.
- The `<meta>` element is deprecated in favor of the [`<link>`](/docs/references/html/) element.
- The `<link>` element does not support the shorthand form of a payment pointer (e.g., `$wallet.example/alice`). You must use the endpoint URL that the payment pointer resolves to (e.g., `https://wallet.example/alice`). If you need help converting a payment pointer from shorthand to its equivalent URL, enter your payment pointer into the input field on <LinkOut href="https://paymentpointers.org">paymentpointers.org</LinkOut>. In most cases, you can simply replace the `$` with `https://`.
38 changes: 19 additions & 19 deletions src/content/docs/docs/intro/web-monetization-extension.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ To make Web Monetization payments, you only need a digital wallet from a Web Mon

A web monetized site cannot initiate payments from your digital wallet. When you link the browser extension to your digital wallet, you're giving the extension permission to send payments on your behalf. These payments are automatically and continuously sent to each web monetized site you visit. You can also globally [disable continuous payments](#change-your-continuous-payment-settings).

The sites you pay are not provided with any of your personally identifiable information, such as your name, email address, or IP address.
The sites you pay are not provided with any of your personally identifiable information, such as your name, email address, or IP address.

:::note
Sending a payment to a web monetized site does not guarantee an ad-free experience. The decision to show or hide ads in response to a Web Monetization payment is entirely up to each content owner or publisher.
Expand All @@ -29,21 +29,21 @@ Sending a payment to a web monetized site does not guarantee an ad-free experien

### 1. Download and install the extension

The extension is currently supported in the following browsers. We plan to support more browsers in the future.
The extension is currently supported in the following browsers. We plan to support more browsers in the future.

* <LinkOut href="https://chromewebstore.google.com/detail/web-monetization-extensio/oiabcfomehhigdepbbclppomkhlknpii">Google Chrome and Chromium-based browsers</LinkOut>
* <LinkOut href="https://addons.mozilla.org/en-US/firefox/addon/web-monetization-extension/">Mozilla Firefox</LinkOut>
* <LinkOut href="https://microsoftedge.microsoft.com/addons/detail/web-monetization-extensio/imjgemgmeoioefpmfefmffbboogighjl">Microsoft Edge</LinkOut>

:::note[Permissions]
The extension will ask for permission to access your browser tabs and your data for all websites. The extension requires these permissions to check each page you visit for the Web Monetization [`<link>`](/docs/references/html-link-rel-monetization) element.
The extension will ask for permission to access your browser tabs and your data for all websites. The extension requires these permissions to check each page you visit for the Web Monetization [`<link>`](/docs/references/html) element.
:::

### 2. Sign up with a compatible digital wallet

Sign up with a Web Monetization-compatible [wallet provider](/docs/resources/op-wallets).

After you've created your digital wallet, you'll be provided with a type of URL called a *wallet address*. You need this address in the next step.
After you've created your digital wallet, you'll be provided with a type of URL called a *wallet address*. You need this address in the next step.

```html title="Example wallet address"
https://wallet.example.com/alice
Expand All @@ -54,18 +54,18 @@ https://wallet.example.com/alice
<Steps>
1. Open the extension and enter your wallet address in the given field.
<img src="/img/docs/extension/connection-setup.png" alt="Extension setup screen with wallet address and amount fields, renew monthly toggle, and connect button" style="max-width:300px" class="img-outline"/>
2. Enter the amount to make available to spend.
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.<br /><img src="/img/docs/extension/connection-wallet.png" alt="Consent screen to allow the extension to connect to your wallet provider with agree and decline buttons" style="max-width:300px" class="img-outline"/><br />If your wallet provider's website opens in your browser, proceed to the next step. If you receive a connection error, review the instructions for [resolving the error](#resolve-a-key-addition-failure).
6. Sign in to your wallet account if you haven't already, then confirm the connection and budget amount. Below is an example confirmation screen.<br /><img src="/img/docs/extension/example-grant.png" alt="Example budget confirmation screen with accept and decline buttons" style="max-width:400px" class="img-outline" />A success screen appears when the connection is successful.<br /><img src="/img/docs/extension/connection-success.png" alt="Web page displaying a connection successful screen" style="max-width:400px" class="img-outline"/>
</Steps>
</Steps>

## Change your continuous payment settings

A continuous payment is a payment that recurs at your set rate for as long as you are active on a web monetized page. When you leave the page, the payments stop.

Continuous payments are enabled by default and sent at a rate of $0.60 USD per hour. Use the instructions below to change the rate or disable continuous payments.
Continuous payments are enabled by default and sent at a rate of $0.60 USD per hour. Use the instructions below to change the rate or disable continuous payments.

<Steps>
1. Click the **Settings** icon in the upper-right of the extension.
Expand All @@ -81,12 +81,12 @@ Continuous payments are enabled by default and sent at a rate of $0.60 USD per h
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.
</Steps>

## Make a one-time payment
## Make a one-time payment

You can make a one-time payment to a page instead of -- or in addition to -- continuous payments. The amount of the one-time payment is deducted from your budget.
You can make a one-time payment to a page instead of -- or in addition to -- continuous payments. The amount of the one-time payment is deducted from your budget.

<Steps>
1. Ensure the URL shown above the amount field is the page you intend to pay.
1. Ensure the URL shown above the amount field is the page you intend to pay.
<br /><img
src="/img/docs/extension/otp-send-now.png"
alt="Extension showing an available balance of five dollars, with one dollar in the amount field and send now button active"
Expand All @@ -102,7 +102,7 @@ You can make a one-time payment to a page instead of -- or in addition to -- con
/>
</Steps>

## Adjust your budget
## Adjust your budget

<Steps>
1. Click the **Settings** icon in the upper-right of the extension.
Expand All @@ -111,7 +111,7 @@ You can make a one-time payment to a page instead of -- or in addition to -- con
<br /><img src="/img/docs/extension/budget-tab-full-budget.png" alt="Budget tab showing your remaining balance and options to change budget amount and renewal" style="max-width:300px" class="img-outline"/>
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.
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.
</Steps>

Expand All @@ -120,10 +120,10 @@ You can make a one-time payment to a page instead of -- or in addition to -- con
When you disconnect the extension from your wallet, the extension can no longer make payments. You can always reconnect your wallet later.

:::tip[Remaining balance]
You won't lose your remaining balance if you disconnect the extension from your wallet. Your remaining balance will remain in your wallet account.
You won't lose your remaining balance if you disconnect the extension from your wallet. Your remaining balance will remain in your wallet account.
:::

The extension only supports one wallet connection at a time. If, for example, you have two wallet accounts from which you want to make payments, you must disconnect from the first wallet before you can connect the extension to your second wallet.
The extension only supports one wallet connection at a time. If, for example, you have two wallet accounts from which you want to make payments, you must disconnect from the first wallet before you can connect the extension to your second wallet.

<Steps>
1. Click the **Settings** icon in the upper-right of the extension.
Expand All @@ -146,9 +146,9 @@ The extension only supports one wallet connection at a time. If, for example, yo

## Resolve a key addition failure <a id="manually-add-key"></a>

When you try to connect the extension to your digital wallet, the extension attempts to automatically connect with your wallet provider to add a key to your wallet account.
When you try to connect the extension to your digital wallet, the extension attempts to automatically connect with your wallet provider to add a key to your wallet account.

You'll receive an error if the extension is unable to add the key.
You'll receive an error if the extension is unable to add the key.

<img
src="/img/docs/extension/connection-failed.png"
Expand All @@ -161,7 +161,7 @@ When this happens, you must copy the key that appears in the extension and manua

<StylishHeader>Interledger Wallet</StylishHeader>

Follow these steps if your wallet provider is [Interledger wallet](https://interledger.app).
Follow these steps if your wallet provider is [Interledger wallet](https://interledger.app).

<Steps>
1. Sign in to your Interledger Wallet.
Expand Down Expand Up @@ -200,7 +200,7 @@ When the **Continuous payment** toggle is on, the extension icon appears in colo
<details>
<summary>I get an error from my wallet provider when linking the extension to my wallet. Why?</summary>
It's hard to say without a specific error message. Two likely scenarios are:
* You waited too long to accept the connection. Your wallet provider might only give you a short window to accept the connection to keep your account safe.
* You waited too long to accept the connection. Your wallet provider might only give you a short window to accept the connection to keep your account safe.
* You accepted the connection too quickly--within seconds. Your wallet provider may do this as a security measure against bots or to ensure you've read the contents of the screen. Interledger Wallet, for example, enforces a minimum five second wait.

Click **Connect** and try linking your extension again.
Expand All @@ -211,4 +211,4 @@ Click **Connect** and try linking your extension again.
The most likely reason is that your wallet provider and the content owner or publisher's wallet provider are not yet able to transact with one another. Your extension will display an exclamation mark within an orange circle. Open the extension to read the messaging.

Visit the [Web Monetization-enabled wallets](/docs/resources/op-wallets) page for a list of compatible wallet providers.
</details>
</details>
6 changes: 3 additions & 3 deletions src/content/docs/docs/references/activitystreams.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: 'Activity Streams JSON-LD'

Social web community servers and apps can expose the wallet address of a user’s profile or post to a Web Monetization client, such as the Web Monetization browser extension or embedded SDK.

Web Monetization links are represented in [Activity Streams 2.0](https://www.w3.org/TR/activitystreams-core/) [Object Types](https://www.w3.org/TR/activitystreams-vocabulary/#dfn-object) using the `monetization` property from the Open Payments namespace (`https://interledger.org/ns/openpayments`).
Web Monetization links are represented in [Activity Streams 2.0](https://www.w3.org/TR/activitystreams-core/) [Object Types](https://www.w3.org/TR/activitystreams-vocabulary/#dfn-object) using the `monetization` property from the Web Monetization namespace (`https://webmonetization.org/ns.jsonld`).

### User `Profile` example

Expand All @@ -15,7 +15,7 @@ Web Monetization links are represented in [Activity Streams 2.0](https://www.w3.
"https://w3id.org/security/v1",

// Add the Open Payments namespace
"https://interledger.org/ns/openpayments",
"https://webmonetization.org/ns.jsonld",

{
"Hashtag": "as:Hashtag"
Expand Down Expand Up @@ -55,7 +55,7 @@ Web Monetization links are represented in [Activity Streams 2.0](https://www.w3.
"https://www.w3.org/ns/activitystreams",

// Add the Open Payments namespace
"https://interledger.org/ns/openpayments",
"https://webmonetization.org/ns.jsonld",

{
"ostatus": "http://ostatus.org#",
Expand Down
28 changes: 28 additions & 0 deletions src/content/docs/docs/references/html.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
title: 'HTML <link rel="monetization">'
---

import Specification from '/src/components/docs/Specification.astro'
import BrowserCompat from '/src/components/docs/BrowserCompat.astro'
import data from '/src/data/browser-compat-data/link.json'
import { LinkOut } from '@interledger/docs-design-system'

Web Monetization wallet addresses are represented in HTML documents using the `<link>` element with the `rel="monetization"` attribute. The `rel` value must be `monetization`. The `href` value must be a URL of an Open Payments-enabled wallet address.

```html
<link rel="monetization" href="https://wallet.example/alice">
```

A single HTML document can contain multiple monetization `<link>` elements; however, it's up to each Web Monetization provider to decide how they want to handle this scenario. We recommend Web Monetization providers split the payments evenly between the links.

## Specifications

<Specification anchor='link-type-monetization' />

## Related

- [Guide: Add Web Monetization to a webpage](/docs/guides/monetize-page)

{/* ## Browser compatibility */}

{/* <BrowserCompat json={data} /> */}
2 changes: 1 addition & 1 deletion src/content/docs/es/docs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,5 @@ La monetización web se comunica con las cuentas emisoras y receptoras para obte
En junio de 2023 se publicó una nueva versión de la especificación de Monetización web. Los usuarios de la versión anterior deben tener en cuenta lo siguiente:

- La versión anterior solo utilizaba el Protocolo de configuración de pago simple (SPSP) de Interledger. La nueva versión utiliza <LinkOut href="https://openpayments.guide/">Open Payments</LinkOut>.
- El elemento `<meta>` está obsoleto en favor del elemento [`<link>`](/es/docs/references/html-link-rel-monetization/).
- El elemento `<meta>` está obsoleto en favor del elemento [`<link>`](/es/docs/references/html/).
- El elemento `<link>` no admite la forma abreviada de un puntero de pago (por ejemplo, `$wallet.example/alice`). Debes utilizar la URL completa a la que se resuelve el puntero de pago (por ejemplo, `https://wallet.example/alice`). Si necesitas ayuda para convertir un indicador de pago de una abreviatura a su URL equivalente, ingresa su indicador de pago en el campo de entrada en <LinkOut href="https://paymentpointers.org">paymentpointers.org</LinkOut>. En la mayoría de los casos, puedes simplemente reemplazar `$` por `https://`.
2 changes: 1 addition & 1 deletion src/content/docs/fr/docs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,5 @@ La Web Monetization communique avec les comptes émetteur et récepteur afin d'o
Une nouvelle version de la spécification relative à la Web Monetization a été publiée en juin 2023. Les utilisateurs de la version précédente doivent tenir compte des éléments suivants :

- La version précédente n'utilisait que le Simple Payment Setup Protocol (SPSP) d'Interledger. La nouvelle version utilise <LinkOut href="https://openpayments.guide/">Open Payments</LinkOut>.
- L'élément `<meta>` est obsolète en faveur de l'élément [`<link>`](/fr/docs/references/html-link-rel-monetization/).
- L'élément `<meta>` est obsolète en faveur de l'élément [`<link>`](/fr/docs/references/html/).
- L'élément `<link>` ne supporte pas la forme abrégée d'un pointeur de paiement (par exemple, `$wallet.example/alice`). Vous devez utiliser l'URL du point de terminaison auquel le pointeur de paiement se réfère (par exemple, `https://wallet.example/alice`). Si vous avez besoin d'aide pour convertir un pointeur de paiement en son URL équivalent, entrez votre pointeur de paiement dans le champ de saisie sur <LinkOut href="https://paymentpointers.org">paymentpointers.org</LinkOut>. Dans la plupart des cas, vous pouvez simplement remplacer le `$` par `https://`.
2 changes: 1 addition & 1 deletion src/pages/specification/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,7 @@ <h2>
<p>
For the most accurate reflection of the APIs that have been
implemented by providers see the <a href=
"https://webmonetization.org/docs/references/html-link-rel-monetization/">
"https://webmonetization.org/docs/references/html/">
API documentation</a>.
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/specification/specification-respec.html
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
<p>
For the most accurate reflection of the APIs that have been
implemented by providers see the <a href=
"https://webmonetization.org/docs/references/html-link-rel-monetization/">
"https://webmonetization.org/docs/references/html/">
API documentation</a>.
</p>
</div>
Expand Down

0 comments on commit 31a3d3b

Please sign in to comment.