docs: restructure Payments sidebar into audience-first groups

docs.json

@@ -35,92 +35,71 @@
         "icon": "credit-card",
         "groups": [
           {
-            "group": "WalletConnect Pay",
+            "group": "Get Started",
             "pages": [
               "payments/overview",
               "payments/for-users",
-              "payments/token-and-chain-coverage",
-              "payments/fiat-coverage",
-              "payments/wallet-coverage",
-              "payments/cex-coverage",
               "payments/test-mode",
-              "payments/webhooks"
+              "payments/webhooks",
+              {
+                "group": "Coverage & Reference",
+                "pages": [
+                  "payments/token-and-chain-coverage",
+                  "payments/fiat-coverage",
+                  "payments/wallet-coverage",
+                  "payments/cex-coverage"
+                ]
+              }
             ]
           },
           {
-            "group": "WalletConnect Pay for Merchants",
+            "group": "For PSPs",
             "pages": [
-              "payments/merchant/quickstart"
+              "payments/psps/overview",
+              {
+                "group": "Headless SDK",
+                "pages": [
+                  "payments/psps/headless-sdk/overview",
+                  "payments/psps/headless-sdk/how-it-works",
+                  "payments/psps/headless-sdk/implementation",
+                  "payments/psps/headless-sdk/packages-reference"
+                ]
+              }
             ]
           },
           {
-            "group": "Merchant API",
+            "group": "For Merchants",
             "pages": [
+              "payments/merchant/quickstart",
               "payments/merchant-api/logo-specification"
             ]
           },
           {
-            "group": "WalletConnect Pay for Wallets",
+            "group": "For Wallets",
             "pages": [
               "payments/wallets/overview",
-              {
-                "group": "Standalone integration",
-                "pages": [
-                  "payments/wallets/standalone/kotlin",
-                  "payments/wallets/standalone/swift",
-                  "payments/wallets/standalone/react-native",
-                  "payments/wallets/standalone/flutter",
-                  "payments/wallets/standalone/web"
-                ]
-              },
-              {
-                "group": "Integrate using the Wallet SDK",
-                "pages": [
-                  "payments/wallets/walletkit/kotlin",
-                  "payments/wallets/walletkit/swift",
-                  "payments/wallets/walletkit/react-native",
-                  "payments/wallets/walletkit/flutter",
-                  "payments/wallets/walletkit/web"
-                ]
-              },
-              "payments/wallets/api-first",
-              "payments/wallets/webview",
+              "payments/wallets/integration-options",
+              "payments/wallets/tap-to-pay",
               {
                 "group": "Token & Chain Support",
                 "pages": [
                   "payments/wallets/token-chain-support",
                   "payments/wallets/token-chain-support/usdt-support",
                   "payments/wallets/token-chain-support/solana-support"
                 ]
-              },
-              "payments/wallets/tap-to-pay"
-            ]
-          },
-          {
-            "group": "WalletConnect Pay for PSPs",
-            "pages": [
-              "payments/psps/overview",
-              {
-                "group": "Headless SDK",
-                "pages": [
-                  "payments/psps/headless-sdk/overview",
-                  "payments/psps/headless-sdk/how-it-works",
-                  "payments/psps/headless-sdk/implementation",
-                  "payments/psps/headless-sdk/packages-reference"
-                ]
               }
             ]
           },
           {
-            "group": "Ecommerce and Online Checkout",
+            "group": "For Checkout",
             "pages": [
               "payments/ecommerce/overview",
               "payments/ecommerce/integration",
               "payments/ecommerce/api-reference"
             ]
           },
           {
-            "group": "WalletConnect AI Agent SDK",
+            "group": "AI Agents",
             "pages": [
               "agents/overview"
             ]

index.mdx

@@ -14,49 +14,16 @@ import { ProductCard } from '/snippets/home/product-cards.mdx';
   <Container>
     <div className="w-full flex flex-col">
       <div className="flex flex-col items-start justify-center w-full max-w-4xl text-left">
-        <div
-          className="text-gray-900 dark:text-gray-200 text-4xl tracking-tight"
-        >
+        <div className="text-gray-900 dark:text-gray-200 text-4xl tracking-tight">
           WalletConnect Pay
         </div>
-        <p
-          className="text-md text-gray-600 dark:text-gray-400 text-left mt-3 mb-4"
-        >
-        The easiest way to enable crypto payments from any wallet, any asset, anywhere.
-        </p>
-        <div className="flex flex-row gap-4 mt-5">
-        <a href="/payments/overview">
-          <button
-            type="button"
-            className="px-5 flex items-center font-medium text-sm rounded-full py-2 shadow-sm text-white dark:text-gray-900 bg-primary-dark dark:bg-primary-light hover:opacity-[0.9] hover:bg-primary justify-center"
-          >
-            Get started
-            <svg
-              className="size-3 ml-2 bg-white dark:bg-gray-900"
-              style={{
-                maskImage: 'url("https://mintlify.b-cdn.net/solid/arrow-right-long.svg")',
-                maskRepeat: 'no-repeat',
-                maskPosition: 'center center'
-              }}
-            />
-          </button>
-          </a>
-        </div>
       </div>
     </div>
-
-  </Container>
-   <Container>
     <div className="flex flex-col w-full mb-8">
-      <div className="flex items-center justify-between w-full">
-        <Title>
-          Introducing WalletConnect Pay
-        </Title>
-      </div>
       <p
         className="text-[#5B616E] dark:text-gray-300 text-md mb-1 mt-3"
       >
-      **[WalletConnect Pay](/payments/overview)** is a complete, end-to-end crypto payment solution that allows PSPs and merchants to enable crypto payments from any wallet and any asset through a single, familiar integration.
+      A complete, end-to-end crypto payment solution that allows PSPs and merchants to enable crypto payments from any wallet and any asset through a single, familiar integration.
       </p>
     </div>
     <div className="dark:hidden block">

payments/wallets/integration-options.mdx

@@ -0,0 +1,71 @@
+---
+title: "Integration Options"
+sidebarTitle: "Integration Options"
+description: "The four ways to enable WalletConnect Pay in your wallet — Wallet SDK, standalone SDK, API-first, and WebView."
+---
+
+WalletConnect provides four integration approaches for enabling WalletConnect Pay in your wallet. Pick the one that matches how your wallet is built today.
+
+## Integrate using the Wallet SDK (Recommended)
+
+If your wallet already uses the WalletConnect Wallet SDK (WalletKit), WalletConnect Pay is automatically available when you initialize WalletKit. This is the recommended approach as it provides a unified API and automatic configuration.
+
+<CardGroup cols={2}>
+  <Card title="Kotlin" icon="android" href="/payments/wallets/walletkit/kotlin">
+    WalletKit integration for Android wallets.
+  </Card>
+  <Card title="Swift" icon="apple" href="/payments/wallets/walletkit/swift">
+    WalletKit integration for iOS wallets.
+  </Card>
+  <Card title="React Native" icon="react" href="/payments/wallets/walletkit/react-native">
+    WalletKit integration for React Native wallets.
+  </Card>
+  <Card title="Flutter" icon="flutter" href="/payments/wallets/walletkit/flutter">
+    WalletKit integration for Flutter wallets.
+  </Card>
+  <Card title="Web/Node.js" icon="js" href="/payments/wallets/walletkit/web">
+    WalletKit integration for Web/Node.js wallets.
+  </Card>
+</CardGroup>
+
+## Standalone Integration
+
+For wallets that don't currently use the WalletConnect Wallet SDK, you can integrate the standalone Pay SDK directly. This approach requires configuring the SDK with your WalletConnect Project ID.
+
+<CardGroup cols={2}>
+  <Card title="Kotlin" icon="android" href="/payments/wallets/standalone/kotlin">
+    Standalone Pay SDK for Android wallets.
+  </Card>
+  <Card title="Swift" icon="apple" href="/payments/wallets/standalone/swift">
+    Standalone Pay SDK for iOS wallets.
+  </Card>
+  <Card title="React Native" icon="react" href="/payments/wallets/standalone/react-native">
+    Standalone Pay SDK for React Native wallets.
+  </Card>
+  <Card title="Flutter" icon="flutter" href="/payments/wallets/standalone/flutter">
+    Standalone Pay SDK for Flutter wallets.
+  </Card>
+  <Card title="Web/Node.js" icon="js" href="/payments/wallets/standalone/web">
+    Standalone Pay SDK for Web/Node.js wallets.
+  </Card>
+</CardGroup>
+
+## API-First Integration
+
+For wallets that prefer direct API integration without using an SDK, you can use the Gateway API directly.
+
+<CardGroup cols={2}>
+  <Card title="API-first integration" icon="code" href="/payments/wallets/api-first">
+    Integrate WalletConnect Pay using the Gateway API.
+  </Card>
+</CardGroup>
+
+## WebView Integration
+
+For apps that want to embed the full WalletConnect Pay checkout UI inside a native WebView — without redirecting to an external browser. The hosted checkout handles everything; your app supplies two query parameters and listens for bridge messages.
+
+<CardGroup cols={2}>
+  <Card title="WebView integration" icon="window" href="/payments/wallets/webview">
+    Embed the checkout portal in a native WebView (iOS, Android, React Native, Flutter).
+  </Card>
+</CardGroup>

payments/wallets/overview.mdx

@@ -1,6 +1,6 @@
 ---
 title: "WalletConnect Pay - Wallet Integration"
-sidebarTitle: "Wallet Integration"
+sidebarTitle: "Quickstart"
 ---
 
 Your users hold crypto and stablecoins. WalletConnect Pay gives them somewhere to spend it.
@@ -13,71 +13,11 @@ What's included
 - Cashback in $WCT for your users on every purchase
 - Check [Token and Chain coverage](/payments/token-and-chain-coverage) for supported tokens and chains
 
-WalletConnect provides three integration approaches for enabling WalletConnect Pay in your wallet:
+WalletConnect provides four integration approaches for enabling WalletConnect Pay in your wallet: the Wallet SDK (WalletKit), the standalone Pay SDK, an API-first integration, and an embedded WebView checkout.
 
-## Integration Options
-
-### Integrate using the Wallet SDK (Recommended)
-
-If your wallet already uses the WalletConnect Wallet SDK (WalletKit), WalletConnect Pay is automatically available when you initialize WalletKit. This is the recommended approach as it provides a unified API and automatic configuration.
-
-<CardGroup cols={2}>
-  <Card title="Kotlin" icon="android" href="/payments/wallets/walletkit/kotlin">
-    WalletKit integration for Android wallets.
-  </Card>
-  <Card title="Swift" icon="apple" href="/payments/wallets/walletkit/swift">
-    WalletKit integration for iOS wallets.
-  </Card>
-  <Card title="React Native" icon="react" href="/payments/wallets/walletkit/react-native">
-    WalletKit integration for React Native wallets.
-  </Card>
-  <Card title="Flutter" icon="flutter" href="/payments/wallets/walletkit/flutter">
-    WalletKit integration for Flutter wallets.
-  </Card>
-  <Card title="Web/Node.js" icon="js" href="/payments/wallets/walletkit/web">
-    WalletKit integration for Web/Node.js wallets.
-  </Card>
-</CardGroup>
-
-### Standalone Integration
-
-For wallets that don't currently use the WalletConnect Wallet SDK, you can integrate the standalone Pay SDK directly. This approach requires configuring the SDK with your WalletConnect Project ID.
-
-<CardGroup cols={2}>
-  <Card title="Kotlin" icon="android" href="/payments/wallets/standalone/kotlin">
-    Standalone Pay SDK for Android wallets.
-  </Card>
-  <Card title="Swift" icon="apple" href="/payments/wallets/standalone/swift">
-    Standalone Pay SDK for iOS wallets.
-  </Card>
-  <Card title="React Native" icon="react" href="/payments/wallets/standalone/react-native">
-    Standalone Pay SDK for React Native wallets.
-  </Card>
-  <Card title="Flutter" icon="flutter" href="/payments/wallets/standalone/flutter">
-    Standalone Pay SDK for Flutter wallets.
-  </Card>
-  <Card title="Web/Node.js" icon="js" href="/payments/wallets/standalone/web">
-    Standalone Pay SDK for Web/Node.js wallets.
-  </Card>
-</CardGroup>
-
-### API-First Integration
-
-For wallets that prefer direct API integration without using an SDK, you can use the Gateway API directly.
-
-<CardGroup cols={2}>
-  <Card title="API-first integration" icon="code" href="/payments/wallets/api-first">
-    Integrate WalletConnect Pay using the Gateway API.
-  </Card>
-</CardGroup>
-
-### WebView Integration
-
-For apps that want to embed the full WalletConnect Pay checkout UI inside a native WebView — without redirecting to an external browser. The hosted checkout handles everything; your app supplies two query parameters and listens for bridge messages.
-
-<CardGroup cols={2}>
-  <Card title="WebView integration" icon="window" href="/payments/wallets/webview">
-    Embed the checkout portal in a native WebView (iOS, Android, React Native, Flutter).
+<CardGroup cols={1}>
+  <Card title="Integration Options" icon="list-checks" href="/payments/wallets/integration-options">
+    Compare the four approaches and jump to the guide for your platform.
   </Card>
 </CardGroup>
 

payments/wallets/token-chain-support.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Token & Chain Support"
-sidebarTitle: "Token & Chain Support"
+sidebarTitle: "Overview"
 description: "Guides for implementing specific token and blockchain support in your WalletConnect Pay wallet integration."
 ---
 

payments/webhooks.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Webhooks"
-sidebarTitle: "Webhooks"
+sidebarTitle: "Webhooks Notifications"
 description: "Get notified in real time as payments move through their lifecycle."
 ---