Skip to content

[Portal] Move x402 from payments to top-level section #8386

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
Nov 10, 2025
+202 −71
Merged

[Portal] Move x402 from payments to top-level section #8386

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
8 changes: 8 additions & 0 deletions apps/portal/redirects.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -742,6 +742,14 @@ const paymentRedirects = {
"/payments/swap": "/bridge/swap",
"/payments/tokens": "/bridge/tokens",
"/payments/routes": "/bridge/routes",
"/payments/x402": "/x402",
"/payments/x402/:path*": "/x402/:path*",
"/payments/fund": "/bridge/fund",
"/payments/products": "/bridge/products",
"/payments/transactions": "/bridge/transactions",
"/payments/send": "/bridge/send",
"/payments/webhooks": "/bridge/webhooks",
"/payments/custom-data": "/bridge/custom-data",
};

const contractRedirects = {
Expand Down
4 changes: 2 additions & 2 deletions apps/portal/src/app/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ const links = [
name: "Contracts",
},
{
href: "/payments",
name: "Payments",
href: "/x402",
name: "x402",
},
{
href: "/bridge",
Expand Down
4 changes: 2 additions & 2 deletions ...tal/src/app/payments/custom-data/page.mdx → ...ortal/src/app/bridge/custom-data/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,8 +188,8 @@ Any purchase data you provide to a payment will be included on all webhooks, sta

To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:

- [Send a Payment](/payments/send)
- [Webhooks](/payments/webhooks)
- [Send a Payment](/bridge/send)
- [Webhooks](/bridge/webhooks)

## Explore Full API References

Expand Down
4 changes: 2 additions & 2 deletions apps/portal/src/app/payments/fund/page.mdx → apps/portal/src/app/bridge/fund/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ The BuyWidget handles the complete payment flow, supporting both crypto and fiat

## Going Further

- [Custom Payment Data](/payments/custom-data) - Attach metadata to payments
- [Webhooks](/payments/webhooks) - Get notified when payments complete
- [Custom Payment Data](/bridge/custom-data) - Attach metadata to payments
- [Webhooks](/bridge/webhooks) - Get notified when payments complete

## API Reference

Expand Down
2 changes: 1 addition & 1 deletion apps/portal/src/app/bridge/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const preparedQuote = await Bridge.Buy.prepare({

The prepared quote will contain details about the payment, including the transactions needed to execute it.

You can execute the included transactions using the wallet of your choice. To learn how to send it using thirdweb Wallets, checkout the [Send a Payment](/payments/send) guide.
You can execute the included transactions using the wallet of your choice. To learn how to send it using thirdweb Wallets, checkout the [Send a Payment](/bridge/send) guide.

</TabsContent>

Expand Down
4 changes: 2 additions & 2 deletions ...portal/src/app/payments/products/page.mdx → apps/portal/src/app/bridge/products/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ The CheckoutWidget handles the complete payment flow, supporting both crypto and

## Going Further

- [Custom Payment Data](/payments/custom-data) - Attach metadata to payments
- [Webhooks](/payments/webhooks) - Get notified when payments complete
- [Custom Payment Data](/bridge/custom-data) - Attach metadata to payments
- [Webhooks](/bridge/webhooks) - Get notified when payments complete

## API Reference

Expand Down
4 changes: 2 additions & 2 deletions apps/portal/src/app/bridge/sell/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,14 @@ client,
});
```

You can execute this quote exactly like a buy. See the [Send a Payment](/payments/send) guide for more details on this process.
You can execute this quote exactly like a buy. See the [Send a Payment](/bridge/send) guide for more details on this process.


## Going further

To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:

- [Send a Payment](/payments/send)
- [Send a Payment](/bridge/send)

## Explore Full API References

Expand Down
4 changes: 2 additions & 2 deletions apps/portal/src/app/payments/send/page.mdx → apps/portal/src/app/bridge/send/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,8 +262,8 @@ Once this code completes, your payment has been fully executed. Payments normall

## Going further

- [Sell a Product](/payments/products)
- [Token Prices](/payments/tokens)
- [Sell a Product](/bridge/products)
- [Token Prices](/bridge/tokens)

## Explore API References

Expand Down
36 changes: 30 additions & 6 deletions apps/portal/src/app/bridge/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,45 @@ export const sidebar: SideBar = {
{
isCollapsible: false,
links: [
{
href: `${bridgeSlug}/sell`,
name: "Sell Tokens",
},
{
href: `${bridgeSlug}/swap`,
name: "Swap Tokens",
},
{
href: `${bridgeSlug}/bridge-widget-script`,
name: "BridgeWidget Script",
},
{
href: `${bridgeSlug}/fund`,
name: "Fund Wallets",
},
{
href: `${bridgeSlug}/products`,
name: "Sell a Product",
},
{
href: `${bridgeSlug}/transactions`,
name: "Pay for Transactions",
},
{
href: `${bridgeSlug}/send`,
name: "Send a Payment",
},
{
href: `${bridgeSlug}/sell`,
name: "Sell Tokens",
},
{
href: `${bridgeSlug}/tokens`,
name: "Get Token Prices",
},
{
href: `${bridgeSlug}/bridge-widget-script`,
name: "BridgeWidget Script",
href: `${bridgeSlug}/webhooks`,
name: "Webhooks",
},
{
href: `${bridgeSlug}/custom-data`,
name: "Custom Data",
},
],
name: "Guides",
Expand Down
4 changes: 2 additions & 2 deletions apps/portal/src/app/bridge/swap/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,9 +317,9 @@ async function swapEthToMatic(amount: string, userAccount: Account) {

## Going Further

- [Send a Payment](/payments/send) - Learn about peer-to-peer transfers
- [Send a Payment](/bridge/send) - Learn about peer-to-peer transfers
- [Token Prices](/bridge/tokens) - Access real-time token pricing
- [Webhooks](/payments/webhooks) - Get notified when swaps complete
- [Webhooks](/bridge/webhooks) - Get notified when swaps complete

## API Reference

Expand Down
14 changes: 12 additions & 2 deletions apps/portal/src/app/bridge/tokens/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,17 @@ This returns token information with current price:
symbol: "USDC",
name: "USD Coin",
iconUri: "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
priceUsd: 1.00
prices: {
USD: 1.00,
EUR: 0.86,
GBP: 0.74,
JPY: 148.85,
KRW: 1393.14,
CNY: 7.18,
INR: 86.20,
NOK: 10.18,
SEK: 9.68,
}
}
]
```
Expand Down Expand Up @@ -118,7 +128,7 @@ const nextTokens = await Bridge.tokens({

To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:

- [Send a Payment](/payments/send)
- [Send a Payment](/bridge/send)

## Explore Full API References

Expand Down
4 changes: 2 additions & 2 deletions ...al/src/app/payments/transactions/page.mdx → ...rtal/src/app/bridge/transactions/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,8 @@ The TransactionWidget handles the complete payment flow, supporting both crypto

## Going Further

- [Custom Payment Data](/payments/custom-data) - Attach metadata to payments
- [Webhooks](/payments/webhooks) - Get notified when payments complete
- [Custom Payment Data](/bridge/custom-data) - Attach metadata to payments
- [Webhooks](/bridge/webhooks) - Get notified when payments complete

## API Reference

Expand Down
4 changes: 2 additions & 2 deletions ...portal/src/app/payments/webhooks/page.mdx → apps/portal/src/app/bridge/webhooks/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,8 +221,8 @@ async function verifyWebhook(

To connect with other auth strategies, use external wallets, or sponsor gas for users, check out the following guides:

- [Send a Payment](/payments/send)
- [Get Token Prices](/payments/tokens)
- [Send a Payment](/bridge/send)
- [Get Token Prices](/bridge/tokens)

## Explore Full API References

Expand Down
8 changes: 4 additions & 4 deletions apps/portal/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,10 +178,10 @@ function LearningResourcesSection() {
title="Wallets"
/>
<ArticleCardIndex
description="Create onchain payments and sell products"
href="/payments"
icon={PaymentsIcon}
title="Payments"
description="Instant payments for APIs, websites, and agents"
href="/x402"
icon={ZapIcon}
title="x402"
/>
<ArticleCardIndex
description="Bridge, swap, and onramp tokens on any chain"
Expand Down
27 changes: 0 additions & 27 deletions apps/portal/src/app/payments/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,33 +61,6 @@ export const sidebar: SideBar = {
name: "Guides",
},
{ separator: true },
{
isCollapsible: false,
links: [
{
href: `${paymentsSlug}/x402`,
name: "Get Started",
},
{
href: `${paymentsSlug}/x402/client`,
name: "Client Side",
},
{
href: `${paymentsSlug}/x402/server`,
name: "Server Side",
},
{
href: `${paymentsSlug}/x402/agents`,
name: "Agents",
},
{
href: `${paymentsSlug}/x402/facilitator`,
name: "Facilitator",
},
],
name: "x402",
},
{ separator: true },
{
isCollapsible: false,
links: [
Expand Down
0 ...tal/src/app/payments/x402/agents/page.mdx → apps/portal/src/app/x402/agents/page.mdx
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion ...tal/src/app/payments/x402/client/page.mdx → apps/portal/src/app/x402/client/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ The client library wraps the native `fetch` API and handles:
</TabsContent>

<TabsContent value="http">
## Prepare Payment
## Fetch with Payment

Fetch any x402-compatible API and automatically handle payment flows when APIs return a `402 Payment Required` response using the authenticated wallet.

Expand Down
4 changes: 3 additions & 1 deletion ...rc/app/payments/x402/facilitator/page.mdx → .../portal/src/app/x402/facilitator/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ You can view all transactions processed by your facilitator in your project dash

## Chain and token support

Our facilitator supports payments on any EVM chain, as long as the payment token supports either:
The thirdweb x402 client/server stack supports payments on [170+ EVM chains](https://thirdweb.com/chainlist?service=account-abstraction).

The payment token must support either:

- ERC-2612 permit (most ERC20 tokens)
- ERC-3009 sign with authorization (USDC on all chains)
Expand Down
21 changes: 21 additions & 0 deletions apps/portal/src/app/x402/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { createMetadata } from "@doc";
import { DocLayout } from "@/components/Layouts/DocLayout";
import { sidebar } from "./sidebar";

export default async function Layout(props: { children: React.ReactNode }) {
return (
<DocLayout editPageButton={true} sideBar={sidebar}>
{props.children}
</DocLayout>
);
}

export const metadata = createMetadata({
description:
"Instant payments for your APIs, websites, and autonomous agents. x402 is an open-source protocol that turns the HTTP 402 status code into a fully-featured, on-chain payment layer.",
image: {
icon: "payments",
title: "x402 Payments Docs",
},
title: "x402 Payments Documentation",
});
22 changes: 15 additions & 7 deletions apps/portal/src/app/payments/x402/page.mdx → apps/portal/src/app/x402/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ export const metadata = createMetadata({

# 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.
[x402](https://x402.org) 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.
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Fix hyphenation in compound adjectives and technical terms.

Static analysis flagged several hyphenation issues that should be corrected for consistency and proper English style:

  • Line 53: "x402 compatible" → "x402-compatible"
  • Line 53: "client side docs" → "client-side docs"
  • Line 99: "server side docs" → "server-side docs"
  • Line 99: "onchain" → "on-chain"

Apply this diff to fix the hyphenation:

-You can also use the thirdweb API to fetch any x402 compatible endpoint and pay for it with the authenticated wallet. See the [client side docs](/x402/client) for more details.
+You can also use the thirdweb API to fetch any x402-compatible endpoint and pay for it with the authenticated wallet. See the [client-side docs](/x402/client) for more details.
-You can also create middlewares to handle payment for multiple endpoints, see the [server side docs](/x402/server) for more details. The [facilitator](/x402/facilitator) handles settling the payment onchain using your own server wallet.
+You can also create middlewares to handle payment for multiple endpoints, see the [server-side docs](/x402/server) for more details. The [facilitator](/x402/facilitator) handles settling the payment on-chain using your own server wallet.

Also applies to: 25-32, 53-53, 99-99

🤖 Prompt for AI Agents 
In apps/portal/src/app/x402/page.mdx (apply changes at lines 25-32, 53, and 99),
fix hyphenation in compound adjectives and technical terms: replace "x402
compatible" with "x402-compatible", "client side docs" with "client-side docs",
"server side docs" with "server-side docs", and "onchain" with "on-chain";
update each occurrence in the specified lines so the phrases use correct
hyphenation and consistent styling throughout the file.


Learn more about the protocol at [x402.org](https://x402.org).

<ArticleIconCard
title="x402 Playground"
Expand All @@ -23,6 +22,15 @@ Learn more about the protocol at [x402.org](https://x402.org).
href="https://playground.thirdweb.com/payments/x402"
/>

## Chain and token support

The thirdweb x402 client/server stack supports payments on [170+ EVM chains](https://thirdweb.com/chainlist?service=account-abstraction).

The payment token must support either:

- ERC-2612 permit (most ERC20 tokens)
- ERC-3009 sign with authorization (USDC on all chains)

## Client Side

`wrapFetchWithPayment` wraps the native fetch API to automatically handle `402 Payment Required` responses from any x402-compatible API:
Expand All @@ -42,7 +50,7 @@ const fetchWithPay = wrapFetchWithPayment(fetch, client, wallet);
const response = await fetchWithPay('https://api.example.com/paid-endpoint');
```

You can also use the thirdweb API to fetch any x402 compatible endpoint and pay for it with the authenticated wallet. See the [client side docs](/payments/x402/client) for more details.
You can also use the thirdweb API to fetch any x402 compatible endpoint and pay for it with the authenticated wallet. See the [client side docs](/x402/client) for more details.

## Server Side

Expand Down Expand Up @@ -88,7 +96,7 @@ export async function GET(request: Request) {
}
```

You can also create middlewares to handle payment for multiple endpoints, see the [server side docs](/payments/x402/server) for more details. The [facilitator](/payments/x402/facilitator) handles settling the payment onchain using your own server wallet.
You can also create middlewares to handle payment for multiple endpoints, see the [server side docs](/x402/server) for more details. The [facilitator](/x402/facilitator) handles settling the payment onchain using your own server wallet.

## Going Further

Expand All @@ -97,18 +105,18 @@ You can also create middlewares to handle payment for multiple endpoints, see th
title="Client Side"
description="Learn how to interact with x402-compatible APIs from your client applications"
icon={TypeScriptIcon}
href="/payments/x402/client"
href="/x402/client"
/>
<ArticleIconCard
title="Server Side"
description="Accept x402 payments in your APIs with middleware or dedicated endpoints"
icon={EngineIcon}
href="/payments/x402/server"
href="/x402/server"
/>
<ArticleIconCard
title="Facilitator API"
description="Configure the facilitator service to verify and settle payments"
icon={EngineIcon}
href="/payments/x402/facilitator"
href="/x402/facilitator"
/>
</div>
Loading
Loading