[Portal] Universal Bridge Docs (#6421)

saminacodes · saminacodes · commit 6046d4510dd7 · 2025-03-05T18:28:34.000Z
CORE-0000

&lt;!-- start pr-codex --&gt;

---

## PR-Codex overview
This PR focuses on renaming and updating the documentation related to `thirdweb Pay`, transitioning to the `Universal Bridge` terminology. It enhances clarity and alignment with the new features and guides for web3 payments.

### Detailed summary
- Updated titles and descriptions in various `.mdx` files to reflect `Universal Bridge`.
- Changed sidebar navigation names and links to align with `Universal Bridge`.
- Revised content in `page.mdx` files to include new functionalities and guides.
- Added sections on fee sharing and supported chains in the `Overview` documentation.
- Modified FAQ entries to clarify `Universal Bridge` specifics.

&gt; ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

&lt;!-- end pr-codex --&gt;
diff --git a/apps/portal/src/app/connect/pay/faqs/page.mdx b/apps/portal/src/app/connect/pay/faqs/page.mdx
@@ -1,40 +1,39 @@
-import { createMetadata } from "@doc";
+import { createMetadata, Details } from "@doc";
 
 export const metadata = createMetadata({
 	image: {
-		title: "thirdweb Pay - FAQs",
+		title: "thirdweb Universal Bridge - FAQs",
 		icon: "thirdweb",
 	},
-	title: "thirdweb Pay - FAQs - thirdweb",
-	description: "thirdweb Pay - Frequently Asked Questions",
+	title: "thirdweb Universal Bridge - FAQs - thirdweb",
+	description: "thirdweb Universal Bridge - Frequently Asked Questions",
 });
 
 # FAQs
 
-### What are the fees for Buy With Fiat?
-
+<Details summary="What are the fees for Buy With Fiat?"> 
 thirdweb takes a 1% fee on all Buy With Fiat transactions. Additional processing fees will depend on the selected onramp vendor.
+</Details>
 
-### What are the fees for Buy With Crypto?
-
+<Details summary="What are the fees for Buy With Crypto?"> 
 thirdweb takes a 1% fee on all Buy With Crypto transactions.
+</Details>
 
-### How does fee sharing work for Buy With Crypto?
-
+<Details summary="How does fee sharing work for Buy With Crypto?"> 
 thirdweb shares 70% of all fees collected through Buy With Crypto with our developers. Fee sharing is not currently available for Buy With Fiat transactions.
+</Details>
 
-### What does the term “network fees” refer to?
-
+<Details summary="What does the term “network fees” refer to?"> 
 Network fees, also referred to as miner fees, are paid to the miner for processing crypto transactions and securing the respective network. These fees do not go to thirdweb.
+</Details>
 
-### What are your transaction limits for Buy With Fiat?
-
+<Details summary="What are your transaction limits for Buy With Fiat?"> 
 We currently require a $1 minimum purchase for both stablecoin and non-stablecoin purchases through Buy With Fiat.
 
 Our transaction maximum starts from $1500 per week for new users and can increase over time to $10,000 per week.
+</Details>
 
-### What countries does Buy With Fiat support?
-
+<Details summary="What countries does Buy With Fiat support?"> 
 **Buy With Fiat** is available 130+ countries. The following countries are _UNSUPPORTED_:
 
 - Afghanistan
@@ -60,9 +59,9 @@ Our transaction maximum starts from $1500 per week for new users and can increas
 - Yemen
 
 All United States are supported, excluding Hawaii.
+</Details>
 
-### Does thirdweb offer direct onramping to tokens through Buy With Fiat?
-
+<Details summary="Does thirdweb offer direct onramping to tokens through Buy With Fiat?"> 
 We offer direct onramping **internationally** to the following tokens:
 
 - Mainnet (Ethereum)
@@ -80,19 +79,22 @@ We offer direct onramping to the following tokens in the **US only**:
 All other tokens will require an additional Buy With Crypto step.
 
 \* Not available in New York or the EU.
+</Details>
 
-### How does KYC work with Buy With Fiat
-
+<Details summary="How does KYC work with Buy With Fiat"> 
 Users will be required to complete KYC verification for their first purchase using 'Buy with Fiat.' After that, no further KYC will be needed for future purchases on the same platform.
+</Details>
 
-### What cryptocurrencies does Pay support?
-
+<Details summary="What cryptocurrencies does Pay support?"> 
 Pay can support any currency on our [supported chains](/connect/pay/supported-chains).
+</Details>
 
-### How are cryptocurrency prices set in thirdweb Pay?
-
+<Details summary="How are cryptocurrency prices set in thirdweb Pay?"> 
 Prices are set depending on the liquidity provider used to route your transaction.
+</Details>
 
-### Does thirdweb Pay offer fiat payouts?
-
+<Details summary="Does thirdweb Pay offer fiat payouts?"> 
 Fiat payouts are not currently available.
+</Details>
+
+
diff --git a/apps/portal/src/app/connect/pay/get-started/page.mdx b/apps/portal/src/app/connect/pay/get-started/page.mdx
@@ -10,12 +10,12 @@ import GetStartedSend from "../assets/get-started-send.png";
 import GetStartedEmbed from "../assets/get-started-embed.png";
 export const metadata = createMetadata({
 	image: {
-		title: "thirdweb Pay - Get Started",
+		title: "thirdweb Universal Bridge - Get Started",
 		icon: "thirdweb",
 	},
-	title: "thirdweb Pay - Buy With Fiat - thirdweb",
+	title: "Universal Bridge Implementation Guide — thirdweb docs",
 	description:
-		"Get Started with Pay -  Onchain Purchases Directly From Credit or Debit Card",
+		"Learn how to implement all-in-one web3 payment solution, Universal bridge: the technical step-by-step process",
 });
 
 # Get Started
diff --git a/apps/portal/src/app/connect/pay/overview/page.mdx b/apps/portal/src/app/connect/pay/overview/page.mdx
@@ -1,19 +1,20 @@
 import { createMetadata, DocImage, Grid, SDKCard, FeatureCard } from "@doc";
 import PayOverviewImage from "../assets/pay-overview.png";
+import SupportedChains from "../../../_images/supported-chains.png";
 
 export const metadata = createMetadata({
 	image: {
-		title: "thirdweb Pay",
+		title: "thirdweb Universal Bridge",
 		icon: "thirdweb",
 	},
-	title: "thirdweb Pay - thirdweb",
+	title: "thirdweb Universal Bridge Docs: Web3 Payments, On-ramping, bridging & swapping",
 	description:
-		"thirdweb Pay - Fast, flexible credit card and crypto point of sale",
+		"Learn everything about thirdweb’s web3 payments solution, Universal Bridge. Technical docs on onramping, bridging + swapping.",
 });
 
 # Overview
 
-Pay allows your users to purchase cryptocurrencies and execute transactions with their credit card or debit card, or with any token via cross-chain routing.
+Universal Bridge allows your users to bridge, swap, and purchase cryptocurrencies and execute transactions with any fiat options or tokens via cross-chain routing.
 
 <DocImage src={PayOverviewImage} />
 
@@ -67,14 +68,30 @@ Pay allows your users to purchase cryptocurrencies and execute transactions with
 
 </div>
 
-### Use Cases
+## Supported Chains
 
-- **Onramp funds directly into any transaction,** perfect for any of the following use cases:
-  - **Games** selling in-game assets onchain.
-  - **DEXes** looking to help users deposit funds.
-  - **Staking apps** onboarding new users to their pools.
-  - **Social apps** looking to add tipping or other paid functionality to their application.
-  - **Non-profits** accepting donations in crypto.
+Universal Bridge is supported on select EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=pay).
+
+<DocImage src={SupportedChains} />
+
+## Fee Sharing
+
+Thirdweb collects a 1% fee per end-user transaction and shares 70% of that fee with you. For example, on a $100 Polygon purchase, a $1.00 fee is charged—of which $0.30 is retained by thirdweb and $0.70 is remitted to you.
+
+Note: Fee sharing applies only to fees from swaps and bridges; fiat purchases are excluded.
+
+To enable fee sharing, simply set a recipient address in your dashboard under Team > Project > Connect > Pay in the thirdweb dashboard.
+
+## Onramp providers
+
+| Provider | Supported Countries                                                                                     |
+| -------- | ------------------------------------------------------------------------------------------------------- |
+| Transak  | https://transak.notion.site/On-Ramp-Payment-Methods-Fees-Other-Details-b0761634feed4b338a69f4f186d906a5 |
+| Kado     | https://www.kado.money/supported-countries                                                              |
+| Stripe   | https://docs.stripe.com/crypto/onramp                                                                   |
+
+Specify a preferred onramp provider by setting the preferredProvider parameter in ConnectButton, PayEmbed, or Headless Integration. For details, refer to 
+[customization](../pay/customization/connectbutton#preferredProvider) or the [API Reference for preferredProvider](/references/typescript/v5/GetBuyWithFiatQuoteParams).
 
 ## Integration Options
 
diff --git a/apps/portal/src/app/connect/pay/testing-pay/page.mdx b/apps/portal/src/app/connect/pay/testing-pay/page.mdx
@@ -6,8 +6,8 @@ export const metadata = createMetadata({
 		title: "thirdweb Pay - Test Mode",
 		icon: "thirdweb",
 	},
-	title: "thirdweb Pay - Test Mode - thirdweb",
-	description: "thirdweb Pay - Test Mode",
+	title: "Enable Test Mode for Universal bridge — thirdweb docs",
+	description: "Learn how to enable test mode for web3 payments with the thirdweb Universal bridge feature in our technical docs",
 });
 
 # Enable Test Mode
diff --git a/apps/portal/src/app/connect/pay/webhooks/page.mdx b/apps/portal/src/app/connect/pay/webhooks/page.mdx
@@ -2,9 +2,9 @@ import { createMetadata, DocImage } from "@doc";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 
 export const metadata = createMetadata({
-	title: "Webhooks | thirdweb Pay",
+	title: "Universal Bridge Webhooks Implementation Guide — thirdweb Docs",
 	description:
-		"Configure Pay webhooks to get notified at any point during a transaction's lifecycle.",
+		"Learn how to set up webhooks for web3 payments with thirdweb’s Universal bridge feature: the technical docs",
 });
 
 # Webhooks
diff --git a/apps/portal/src/app/connect/sidebar.tsx b/apps/portal/src/app/connect/sidebar.tsx
@@ -270,99 +270,78 @@ export const sidebar: SideBar = {
     // Blockchain API
     // TODO Overview page?
     {
-      name: "Onchain Interactions",
+      name: "Universal Bridge",
       isCollapsible: false,
       links: [
-        // Pay
         {
-          name: "Bridge & Swap",
+          name: "Overview",
+          href: `${paySlug}/overview`,
+        },
+        {
+          name: "Get Started",
+          href: `${paySlug}/get-started`,
+          expanded: true,
           links: [
             {
-              name: "Overview",
-              href: `${paySlug}/overview`,
+              name: "ConnectButton",
+              href: `${paySlug}/get-started#option-1-connectbutton`,
             },
             {
-              name: "Get Started",
-              href: `${paySlug}/get-started`,
-              expanded: true,
-              links: [
-                {
-                  name: "ConnectButton",
-                  href: `${paySlug}/get-started#option-1-connectbutton`,
-                },
-                {
-                  name: "Embed Pay",
-                  href: `${paySlug}/get-started#option-2-embed-pay`,
-                },
-                {
-                  name: "Send a Transaction",
-                  href: `${paySlug}/get-started#option-3-send-a-transaction-with-pay`,
-                },
-              ],
+              name: "Embed Pay",
+              href: `${paySlug}/get-started#option-2-embed-pay`,
             },
             {
-              name: "Supported Chains",
-              href: `${paySlug}/supported-chains`,
-            },
-            {
-              name: "Onramp Providers",
-              href: `${paySlug}/onramp-providers`,
-            },
-
-            {
-              name: "Fee Sharing",
-              href: `${paySlug}/fee-sharing`,
+              name: "Send a Transaction",
+              href: `${paySlug}/get-started#option-3-send-a-transaction-with-pay`,
             },
+          ],
+        },
+        {
+          name: "Webhooks",
+          href: `${paySlug}/webhooks`,
+        },
+        {
+          name: "Testing Pay",
+          href: `${paySlug}/testing-pay`,
+        },
+        {
+          name: "Guides",
+          isCollapsible: true,
 
+          links: [
             {
-              name: "Webhooks",
-              href: `${paySlug}/webhooks`,
+              name: "Accept Direct Payments",
+              href: `${paySlug}/guides/accept-direct-payments`,
             },
             {
-              name: "Testing Pay",
-              href: `${paySlug}/testing-pay`,
+              name: "Build a Custom Experience",
+              href: `${paySlug}/guides/build-a-custom-experience`,
             },
-            {
-              name: "Guides",
-              isCollapsible: true,
+          ],
+        },
+        {
+          name: "Customization",
+          isCollapsible: true,
 
-              links: [
-                {
-                  name: "Accept Direct Payments",
-                  href: `${paySlug}/guides/accept-direct-payments`,
-                },
-                {
-                  name: "Build a Custom Experience",
-                  href: `${paySlug}/guides/build-a-custom-experience`,
-                },
-              ],
+          links: [
+            {
+              name: "ConnectButton",
+              href: `${paySlug}/customization/connectbutton`,
             },
-
             {
-              name: "Customization",
-              isCollapsible: true,
-
-              links: [
-                {
-                  name: "ConnectButton",
-                  href: `${paySlug}/customization/connectbutton`,
-                },
-                {
-                  name: "PayEmbed",
-                  href: `${paySlug}/customization/payembed`,
-                },
-                {
-                  name: "useSendTransaction",
-                  href: `${paySlug}/customization/send-transaction`,
-                },
-              ],
+              name: "PayEmbed",
+              href: `${paySlug}/customization/payembed`,
             },
             {
-              name: "FAQs",
-              href: `${paySlug}/faqs`,
+              name: "useSendTransaction",
+              href: `${paySlug}/customization/send-transaction`,
             },
           ],
         },
+        {
+          name: "FAQs",
+          href: `${paySlug}/faqs`,
+        },
       ],
     },
     { separator: true },
