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

Author: joaquim-verges

apps/portal/redirects.mjs

@@ -742,6 +742,8 @@ const paymentRedirects = {
   "/payments/swap": "/bridge/swap",
   "/payments/tokens": "/bridge/tokens",
   "/payments/routes": "/bridge/routes",
+  "/payments/x402": "/x402",
+  "/payments/x402/:path*": "/x402/:path*",
 };
 
 const contractRedirects = {

apps/portal/src/app/Header.tsx

@@ -43,6 +43,10 @@ const links = [
     href: "/payments",
     name: "Payments",
   },
+  {
+    href: "/x402",
+    name: "x402",
+  },
   {
     href: "/bridge",
     name: "Bridge",

apps/portal/src/app/page.tsx

@@ -183,6 +183,12 @@ function LearningResourcesSection() {
           icon={PaymentsIcon}
           title="Payments"
         />
+        <ArticleCardIndex
+          description="Instant payments for APIs, websites, and agents"
+          href="/x402"
+          icon={ZapIcon}
+          title="x402"
+        />
         <ArticleCardIndex
           description="Bridge, swap, and onramp tokens on any chain"
           href="/bridge"

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: [

apps/portal/src/app/payments/x402/agents/page.mdx renamed to apps/portal/src/app/x402/agents/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.
 

apps/portal/src/app/payments/x402/client/page.mdx renamed to apps/portal/src/app/x402/client/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)

apps/portal/src/app/payments/x402/facilitator/page.mdx renamed to apps/portal/src/app/x402/facilitator/page.mdx

@@ -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",
+});

apps/portal/src/app/x402/layout.tsx

@@ -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>

apps/portal/src/app/payments/x402/page.mdx renamed to apps/portal/src/app/x402/page.mdx

@@ -421,23 +421,31 @@ Protect multiple endpoints with a shared middleware:
   </TabsContent>
 </Tabs>
 
-## Price Configuration
+## Price and Token Configuration
 
 You can specify prices in multiple ways:
 
 ### USD String
 
+This will default to using USDC on the specified network.
+
 ```typescript
-price: "$0.10" // 10 cents in USD
+network: polygon, // or any other EVM chain
+price: "$0.10" // 10 cents in USDC
 ```
 
 ### ERC20 Token
 
+You can use any ERC20 token that supports the ERC-2612 permit or ERC-3009 sign with authorization.
+
+Simply pass the amount in base units and the token address.
+
 ```typescript
+network: arbitrum,
 price: {
-  amount: "100000", // Amount in base units (100000 = 0.1 USDC with 6 decimals)
+  amount: "1000000000000000", // Amount in base units (0.001 tokens with 18 decimals)
   asset: {
-    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913", // Token address
+    address: "0xf01E52B0BAC3E147f6CAf956a64586865A0aA928", // Token address
   }
 }
 ```