Skip to content

[Docs] Add metadata to x402 documentation pages #8190

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Oct 6, 2025
Merged

[Docs] Add metadata to x402 documentation pages #8190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 11 additions & 2 deletions apps/portal/src/app/payments/x402/agents/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { OpenApiEndpoint } from "@doc";
import { OpenApiEndpoint, createMetadata } from "@doc";

export const metadata = createMetadata({
image: {
title: "x402 Agents",
icon: "payments",
},
title: "x402 Agents",
description: "Easily create AI agents that can pay for any x402-compatible API calls.",
});

# Agents
# x402 Agents

Easily create AI agents that can pay for any x402-compatible API calls.

Expand Down
13 changes: 11 additions & 2 deletions apps/portal/src/app/payments/x402/client/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
import { Tabs, TabsList, TabsTrigger, TabsContent, OpenApiEndpoint } from "@doc";
import { Tabs, TabsList, TabsTrigger, TabsContent, OpenApiEndpoint, createMetadata } from "@doc";
import { TypeScriptIcon, EngineIcon } from "@/icons";

export const metadata = createMetadata({
image: {
title: "x402 Client",
icon: "payments",
},
title: "x402 Client",
description: "Make requests to any x402-compatible backend and automatically handle payment flows when APIs return a `402 Payment Required` response.",
});

# Client Side

Make requests to any x402-compatible backend by automatically handling payment flows when APIs return a `402 Payment Required` response.
Make requests to any x402-compatible backend and automatically handle payment flows when APIs return a `402 Payment Required` response.

The client library wraps the native `fetch` API and handles:
1. Initial request to the API
Expand Down
11 changes: 10 additions & 1 deletion apps/portal/src/app/payments/x402/facilitator/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import { Tabs, TabsList, TabsTrigger, TabsContent, OpenApiEndpoint, Callout } from "@doc";
import { Tabs, TabsList, TabsTrigger, TabsContent, OpenApiEndpoint, Callout, createMetadata } from "@doc";
import { TypeScriptIcon, EngineIcon } from "@/icons";

export const metadata = createMetadata({
image: {
title: "x402 Facilitator",
icon: "payments",
},
title: "x402 Facilitator",
description: "Verify and submit x402 payments using your own server wallet.",
});

# Facilitator

The facilitator is a service that handles verifying and submitting x402 payments. It uses your own [server wallet](/wallets/server) and leverages EIP-7702 to submit transactions gaslessly.
Expand Down
11 changes: 10 additions & 1 deletion apps/portal/src/app/payments/x402/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import { ArticleIconCard } from "@doc";
import { ArticleIconCard, createMetadata } from "@doc";
import { ReactIcon, TypeScriptIcon, EngineIcon } from "@/icons";

export const metadata = createMetadata({
image: {
title: "x402 Payments",
icon: "payments",
},
title: "x402 Payments",
description: "Instant payments for your APIs, websites, and autonomous agents.",
});

# x402 Payments

x402 is an open-source protocol that turns the dormant HTTP 402 Payment Required status code into a fully-featured, on-chain payment layer for APIs, websites, and autonomous agents.
Expand Down
11 changes: 10 additions & 1 deletion apps/portal/src/app/payments/x402/server/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import { Tabs, TabsList, TabsTrigger, TabsContent, DocImage } from "@doc";
import { Tabs, TabsList, TabsTrigger, TabsContent, DocImage, createMetadata } from "@doc";
import { Steps, Step } from "@doc";
import PaymentFlow from "./x402-protocol-flow.png";

export const metadata = createMetadata({
image: {
title: "x402 Server",
icon: "payments",
},
title: "x402 Server",
description: "Accept x402 payments in your APIs from any x402-compatible client.",
});

# Server Side

Accept x402 payments in your APIs using any x402-compatible client. Your server can verify and settle payments using thirdweb's facilitator service or any custom facilitator.
Expand Down
Loading