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

joaquim-verges · web-flow · commit f6f138ccbcd3 · 2025-11-09T18:09:15.000-08:00
diff --git a/apps/portal/redirects.mjs b/apps/portal/redirects.mjs
@@ -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 = {
diff --git a/apps/portal/src/app/Header.tsx b/apps/portal/src/app/Header.tsx
@@ -40,8 +40,8 @@ const links = [
     name: "Contracts",
   },
   {
-    href: "/payments",
-    name: "Payments",
+    href: "/x402",
+    name: "x402",
   },
   {
     href: "/bridge",
diff --git a/apps/portal/src/app/bridge/custom-data/page.mdx b/apps/portal/src/app/bridge/custom-data/page.mdx
@@ -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
 
diff --git a/apps/portal/src/app/bridge/fund/page.mdx b/apps/portal/src/app/bridge/fund/page.mdx
@@ -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
 
diff --git a/apps/portal/src/app/bridge/page.mdx b/apps/portal/src/app/bridge/page.mdx
@@ -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>
 
diff --git a/apps/portal/src/app/bridge/products/page.mdx b/apps/portal/src/app/bridge/products/page.mdx
@@ -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
 
diff --git a/apps/portal/src/app/bridge/sell/page.mdx b/apps/portal/src/app/bridge/sell/page.mdx
@@ -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
 
diff --git a/apps/portal/src/app/bridge/send/page.mdx b/apps/portal/src/app/bridge/send/page.mdx
@@ -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
 
diff --git a/apps/portal/src/app/bridge/sidebar.tsx b/apps/portal/src/app/bridge/sidebar.tsx
@@ -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",
diff --git a/apps/portal/src/app/bridge/swap/page.mdx b/apps/portal/src/app/bridge/swap/page.mdx
@@ -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
 
diff --git a/apps/portal/src/app/bridge/tokens/page.mdx b/apps/portal/src/app/bridge/tokens/page.mdx
@@ -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,
+    }
   }
 ]
 ```
@@ -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
 
diff --git a/apps/portal/src/app/bridge/transactions/page.mdx b/apps/portal/src/app/bridge/transactions/page.mdx
@@ -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
 
diff --git a/apps/portal/src/app/bridge/webhooks/page.mdx b/apps/portal/src/app/bridge/webhooks/page.mdx
@@ -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
 
diff --git a/apps/portal/src/app/page.tsx b/apps/portal/src/app/page.tsx
@@ -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"
diff --git a/apps/portal/src/app/payments/sidebar.tsx b/apps/portal/src/app/payments/sidebar.tsx
@@ -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: [
diff --git a/apps/portal/src/app/x402/agents/page.mdx b/apps/portal/src/app/x402/agents/page.mdx
diff --git a/apps/portal/src/app/x402/client/page.mdx b/apps/portal/src/app/x402/client/page.mdx
@@ -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.
 
diff --git a/apps/portal/src/app/x402/facilitator/page.mdx b/apps/portal/src/app/x402/facilitator/page.mdx
@@ -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)
diff --git a/apps/portal/src/app/x402/layout.tsx b/apps/portal/src/app/x402/layout.tsx
@@ -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",
+});
diff --git a/apps/portal/src/app/x402/page.mdx b/apps/portal/src/app/x402/page.mdx
@@ -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.
 
-Learn more about the protocol at [x402.org](https://x402.org).
 
 <ArticleIconCard
   title="x402 Playground"
@@ -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:
@@ -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
 
@@ -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
 
@@ -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>
diff --git a/apps/portal/src/app/x402/server/page.mdx b/apps/portal/src/app/x402/server/page.mdx
diff --git a/apps/portal/src/app/x402/server/x402-protocol-flow.png b/apps/portal/src/app/x402/server/x402-protocol-flow.png
diff --git a/apps/portal/src/app/x402/sidebar.tsx b/apps/portal/src/app/x402/sidebar.tsx

Original file line number	Diff line number	Diff line change
`@@ -40,8 +40,8 @@ const links = [`
`40`	`40`	`name: "Contracts",`
`41`	`41`	`},`
`42`	`42`	`{`
`43`		`- href: "/payments",`
`44`		`- name: "Payments",`
	`43`	`+ href: "/x402",`
	`44`	`+ name: "x402",`
`45`	`45`	`},`
`46`	`46`	`{`
`47`	`47`	`href: "/bridge",`