Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: adding extension doc #488

Merged
merged 5 commits into from
Dec 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ export default defineConfig({
components: {
Header: './src/components/docs/Header.astro',
PageSidebar: './src/components/docs/PageSidebar.astro',
PageTitle: './src/components/docs/PageTitle.astro',
},
social: {
github: 'https://github.com/WICG/webmonetization',
Expand All @@ -82,6 +81,10 @@ export default defineConfig({
label: 'Web Monetization flow',
link: '/docs/intro/web-monetization-flow',
},
{
label: 'Web Monetization extension',
link: '/docs/intro/web-monetization-extension',
},
],
},
{
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/docs/extension/connection-failed.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/docs/extension/connection-setup.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/docs/extension/connection-success.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/docs/extension/connection-wallet.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/docs/extension/default-gray.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/docs/extension/example-grant.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/img/docs/extension/extension-configure.png
Binary file not shown.
Binary file not shown.
Binary file removed public/img/docs/extension/extension-disconnect.png
Binary file not shown.
Binary file removed public/img/docs/extension/extension-grant.png
Binary file not shown.
Binary file removed public/img/docs/extension/extension-pay.png
Binary file not shown.
Binary file added public/img/docs/extension/otp-send-now.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/docs/extension/otp-success.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/docs/extension/rate-tab.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/docs/extension/settings-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/docs/extension/wallet-tab.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 0 additions & 24 deletions src/components/docs/PageTitle.astro

This file was deleted.

8 changes: 4 additions & 4 deletions src/content/docs/docs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ It can take a bit of work to implement payments on a website. If your site alrea

## Introducing Web Monetization

Web Monetization (WM) aims to simplify the payment experience for you and your website visitors. It’s an open technology that allows websites to automatically receive payments from visitors, facilitated by the visitor’s browser and their preferred WM provider.
Web Monetization aims to simplify the payment experience for you and your website visitors. It’s an open technology that allows websites to automatically receive payments from visitors.

It’s a proposed standard that allows your visitors to pay an amount of their choosing with little to no user interaction. It enables a website to automatically signal to web browsers that it can accept payments and enables web browsers to facilitate a payment by:
It’s a proposed standard that allows your visitors to pay an amount of their choosing with little to no user interaction. It enables a website to automatically signal to web browsers that it can accept payments. With this signal, web browsers facilitate a payment from the visitor to the site by:

- Obtaining authorization to initiate the payment.
- Gathering details and issuing instructions to start the money movement process.
Expand All @@ -49,13 +49,13 @@ The following image shows the Web Monetization flow at a high level. Some steps

Web Monetization doesn’t allow a website to specify a payment amount or currency. It only allows the site to tell the browser it can accept payments.

With the help of a <Tooltip content='The entity sending a payment' client:load><a href="./resources/glossary#web-monetization-provider">WM provider</a></Tooltip>, your visitor decides whether to make a payment, how much and how often to pay, and in which currency. Your <Tooltip content='The entity receiving a payment' client:load><a href="./resources/glossary#web-monetization-receiver">WM receiver</a></Tooltip> can then exchange the currency of incoming payments based on what you want to receive. This flexibility allows you and your visitors to choose the monetization methods that best suit your needs.
With the help of a <Tooltip content='The entity sending a payment' client:load><a href="./resources/glossary#web-monetization-provider">Web Monetization provider</a></Tooltip>, your visitor decides whether to make a payment, how much and how often to pay, and in which currency. Your <Tooltip content='The entity receiving a payment' client:load><a href="./resources/glossary#web-monetization-receiver">Web Monetization receiver</a></Tooltip> can then exchange the currency of incoming payments based on what you want to receive. This flexibility allows you and your visitors to choose the monetization methods that best suit you both.

### Processing and settling payments

Web Monetization’s role is to help coordinate payments. It does not process or settle payments.

At each end of Web Monetization is an account that supports <LinkOut href="https://openpayments.guide">Open Payments</LinkOut>. The WM provider supplies your visitor with a funded sending account. In some cases, the visitor could even act as their own WM provider. The WM receiver supplies you with a receiving account.
At each end of Web Monetization is an account that supports <LinkOut href="https://openpayments.guide">Open Payments</LinkOut>. The Web Monetization provider supplies your visitor with a funded sending account. In some cases, the visitor could even act as their own Web Monetization provider. The Web Monetization receiver supplies you with a receiving account.

Web Monetization communicates with the sending and receiving accounts to obtain the necessary authorizations and instructions for a payment to be sent and received. Payment processing and settlement then occurs between the sending and receiving accounts, outside of the Web Monetization flow.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ The `monetization` event contains details about the payments that occur. The `am
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 WM receiver).
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
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/docs/guides/monetize-page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ This page provides basic instructions for adding Web Monetization to a web page.
## Prerequisites

- Web monetized pages must be secure and served over HTTPS.
- You must have the wallet address assigned to you by your WM receiver.
- You must have the wallet address assigned to you by your Web Monetization-enabled [wallet provider](/docs/resources/op-wallets).

## Monetize a page

Expand All @@ -30,7 +30,7 @@ For example:

### Multiple monetization links

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

## Next steps

Expand Down
22 changes: 11 additions & 11 deletions src/content/docs/docs/intro/receiving-payments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,29 @@ title: Receiving payments

import { LinkOut } from '@interledger/docs-design-system'

Two key components of receiving a Web Monetization (WM) payment are WM receivers and Open Payments-enabled accounts.
Two key components of receiving a Web Monetization payment are Web Monetization receivers and Open Payments-enabled accounts.

:::note
This page describes the role of WM receivers within the Web Monetization ecosystem. It does not explain how to become a receiver.
This page describes the role of Web Monetization receivers within the Web Monetization ecosystem. It does not explain how to become a receiver.
:::

## WM receivers
## Web Monetization receivers

A WM receiver is an entity that provides an Open Payments-enabled account into which payments can be received. Individuals interested in receiving Web Monetization payments can establish a relationship with a WM receiver of their choice by signing up for an account.
A Web Monetization receiver is an entity that provides an Open Payments-enabled account into which payments can be received. Individuals interested in receiving Web Monetization payments can establish a relationship with a Web Monetization receiver of their choice by signing up for an account.

We anticipate most WM receivers to offer some form of digital wallet to their users. Many digital wallet providers, not just WM receivers, are often required to verify their users’ identities before allowing funds to be withdrawn.
We anticipate most Web Monetization receivers to offer some form of digital wallet to their users. Many digital wallet providers, not just Web Monetization receivers, are often required to verify their users’ identities before allowing funds to be withdrawn.

## Open Payments and wallet addresses

Open Payments enables open and interoperable payments between WM providers and WM receivers. As such, accounts supplied by both WM providers and WM receivers must implement the <LinkOut href="https://openpayments.guide">Open Payments (OP) specification</LinkOut>.
Open Payments enables open and interoperable payments between Web Monetization providers and Web Monetization receivers. As such, accounts supplied by both Web Monetization providers and Web Monetization receivers must implement the <LinkOut href="https://openpayments.guide">Open Payments (OP) specification</LinkOut>.

The OP specification defines standards for **_access_** to accounts. When granted access, applications and other entities can integrate payments into their feature sets by connecting to their users’ accounts. The ability to then **_execute_** payments between OP-enabled accounts relies on the availability of a common payment rail between the accounts.

### Wallet addresses

Access to an OP-enabled account, whether for sending or receiving, always starts with a wallet address. In this context, a wallet address is a unique URL that identifies an OP account and provides an entry point for the Open Payments API.

When an individual establishes an account with a WM receiver, the receiver assigns the account one or more wallet addresses. Wallet addresses allow certain account details to be safely shared with third-parties. Third-parties use the details to initiate payments to or from the account. A WM agent is an example of a third-party.
When an individual establishes an account with a Web Monetization receiver, the receiver assigns the account one or more wallet addresses. Wallet addresses allow certain account details to be safely shared with third-parties. Third-parties use the details to initiate payments to or from the account. A Web Monetization agent is an example of a third-party.

A wallet address is required to web monetize a page and must be added as the `href` value within the monetization `<link>` element.

Expand All @@ -36,23 +36,23 @@ For example:
<link rel="monetization" href="https://wallet.example/alice" />
```

The WM agent uses the wallet address to begin the money movement process.
The Web Monetization agent uses the wallet address to begin the money movement process.

## Receiving a payment

When an individual visits a web monetized page, their WM agent detects the monetization `<link>` element and associated wallet address. The WM agent sends a request to the wallet address, which is the beginning of a series of API calls needed to:
When an individual visits a web monetized page, their Web Monetization agent detects the monetization `<link>` element and associated wallet address. The Web Monetization agent sends a request to the wallet address, which is the beginning of a series of API calls needed to:

1. Get the details about the underlying receiving account
2. Receive permission to send a payment to the account
3. Create a monetization session within the site visitor's browser tab/window
4. Create the outgoing payment request

When the payment is successful, the funds are deducted from the WM provider’s account and deposited into the WM receiver’s account.
When the payment is successful, the funds are deducted from the Web Monetization provider’s account and deposited into the Web Monetization receiver’s account.

For more information, visit the [Web Monetization flow](/docs/intro/web-monetization-flow) page.

## Specifying a payment amount

Web Monetization does not enable a site to specify the amount it wants to receive. The amount, frequency, and other payment parameters are controlled by the web monetized visitor, through their relationship with their WM provider.
Web Monetization does not enable a site to specify the amount it wants to receive. The amount, frequency, and other payment parameters are controlled by the web monetized visitor, through their relationship with their Web Monetization provider.

If a site should specify a price, then integration with the W3C’s <LinkOut href="https://www.w3.org/TR/payment-request">Payment Request API</LinkOut> may be a better alternative to Web Monetization. The Payment Request API allows sites to ask to be paid a certain amount, then the browser (typically with the user’s approval) pays that amount.
Loading
Loading