Web Monetization

https://webmonetization.org/docs
Admin
Web Monetization is a technology enabling websites to receive direct payments from visitors as they...
Tokens:1,629
Snippets:5
Trust Score:9.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Web Monetization API Events

Source: https://webmonetization.org/docs/index

This section outlines the events dispatched by the Web Monetization API. These events signal changes in the monetization state, such as when monetization starts, stops, or is pending.

```APIDOC
Monetization Events:

- monetizationstart:
  - Description: Fired when a monetization stream has successfully started.
  - Event Object: MonetizationEvent
    - paymentPointer: The payment pointer that was used to start monetization.
    - requestId: A unique identifier for this monetization request.

- monetizationstop:
  - Description: Fired when a monetization stream has stopped.
  - Event Object: MonetizationEvent
    - paymentPointer: The payment pointer that was used to stop monetization.
    - requestId: A unique identifier for the monetization request that was stopped.

- monetizationpending:
  - Description: Fired when a monetization stream is pending.
  - Event Object: MonetizationEvent
    - paymentPointer: The payment pointer that is pending.
    - requestId: A unique identifier for this monetization request.

Example Usage:
```javascript
window.addEventListener('monetizationpending', (e) => {
  console.log(`Monetization pending for ${e.paymentPointer}`);
});

window.addEventListener('monetizationstart', (e) => {
  console.log(`Monetization started for ${e.paymentPointer}`);
});

window.addEventListener('monetizationstop', (e) => {
  console.log(`Monetization stopped for ${e.paymentPointer}`);
});
```
```

--------------------------------

### Content Security Policy (CSP) for Web Monetization

Source: https://webmonetization.org/docs/index

This documentation describes how to configure Content Security Policy (CSP) headers to allow Web Monetization. It specifies the necessary directives to permit connections to payment pointers and other related resources.

```APIDOC
Content Security Policy (CSP):

To enable Web Monetization, you need to configure your server to send a Content-Security-Policy HTTP header. The policy should include directives that allow connections to your payment pointer's domain and potentially other domains required for monetization.

Example CSP Header:

Header Name: Content-Security-Policy
Header Value:
connect-src 'self' https://*.example-payment-provider.com;

Explanation:
- connect-src: This directive controls which URLs the protected document can connect to using mechanisms such as fetch, XMLHttpRequest, WebSockets, and EventSource.
- 'self': Allows connections to the same origin as the document.
- https://*.example-payment-provider.com: Allows connections to any subdomain of 'example-payment-provider.com' over HTTPS. Replace 'example-payment-provider.com' with the actual domain of your payment pointer provider.

Important Considerations:
- Ensure that the domain specified in `connect-src` matches the domain of your payment pointer.
- If your payment pointer uses a different protocol or requires additional domains, update the `connect-src` directive accordingly.
- For more complex scenarios or multiple payment providers, you may need to include multiple domains in the `connect-src` directive.
```

--------------------------------

### Permissions Policy for Web Monetization

Source: https://webmonetization.org/docs/index

This documentation explains how to use the Permissions Policy header to control Web Monetization features. It allows fine-grained control over which origins can initiate or participate in monetization.

```APIDOC
Permissions Policy:

The Permissions Policy header (formerly known as Feature Policy) allows you to selectively enable or disable browser features and APIs. For Web Monetization, it can be used to control access to the monetization API.

Example Permissions Policy Header:

Header Name: Permissions-Policy
Header Value:
// Allow monetization from the same origin
monetization=(self)

// Allow monetization from a specific subdomain
// monetization=(self https://sub.example.com)

// Deny monetization from all origins
// monetization=()

Explanation:
- monetization: This is the feature identifier for Web Monetization.
- (self): This policy allows the feature to be used by the same origin as the document.
- (https://sub.example.com): This policy allows the feature to be used by the specified origin.
- (): This policy denies the feature from all origins.

Usage:
By default, the monetization API is available to the document's origin. You can use the Permissions Policy header to restrict this if necessary, for example, in embedded contexts like iframes.

Note: The `Permissions-Policy` header is a more modern approach. Older implementations might have used `Feature-Policy`.
```

--------------------------------

### Web Monetization API Interfaces

Source: https://webmonetization.org/docs/index

This section details the JavaScript interfaces provided by the Web Monetization API. These interfaces allow developers to interact with the monetization status and events within a web page.

```APIDOC
Monetization API:

Interfaces:
  - Monetization: Represents the Web Monetization service.
    - Properties:
      - monetization.state: String indicating the current state ('pending', 'started', 'stopped').
    - Events:
      - monetization.onstart: Fired when monetization starts.
      - monetization.onstop: Fired when monetization stops.
      - monetization.onpending: Fired when monetization is pending.

  - MonetizationEvent: Event object passed to event listeners.
    - Properties:
      - type: String, the type of event ('monetizationstart', 'monetizationstop', 'monetizationpending').
      - paymentPointer: String, the payment pointer associated with the event.
      - requestId: String, a unique identifier for the monetization request.

Usage Example:
```javascript
document.addEventListener('monetizationstart', (event) => {
  console.log('Monetization started:', event.paymentPointer);
});

document.addEventListener('monetizationstop', (event) => {
  console.log('Monetization stopped:', event.paymentPointer);
});

if (document.monetization) {
  console.log('Monetization state:', document.monetization.state);
} else {
  console.log('Web Monetization not supported.');
}
```
```

--------------------------------

### Monetization <link> element (HTML)

Source: https://webmonetization.org/docs/index

This snippet shows how to add the Web Monetization link element to an HTML page. It requires a payment pointer, which is a URL that points to a payment service.

```html
<link rel="monetization" href="https://example.com/your-payment-pointer">
```
Tokens:
Raw