diff --git a/apps/portal/redirects.mjs b/apps/portal/redirects.mjs index fa6bd0d9490..ac62178ca3c 100644 --- 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 index 9cd129ceb1f..5799322e43a 100644 --- 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/payments/custom-data/page.mdx b/apps/portal/src/app/bridge/custom-data/page.mdx similarity index 98% rename from apps/portal/src/app/payments/custom-data/page.mdx rename to apps/portal/src/app/bridge/custom-data/page.mdx index 400f086a845..5e907fa3bc5 100644 --- a/apps/portal/src/app/payments/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/payments/fund/page.mdx b/apps/portal/src/app/bridge/fund/page.mdx similarity index 91% rename from apps/portal/src/app/payments/fund/page.mdx rename to apps/portal/src/app/bridge/fund/page.mdx index f7c5bfa8f28..10318bf3d25 100644 --- a/apps/portal/src/app/payments/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 index 5ce9195eb9b..a8016ee3794 100644 --- 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. diff --git a/apps/portal/src/app/payments/products/page.mdx b/apps/portal/src/app/bridge/products/page.mdx similarity index 92% rename from apps/portal/src/app/payments/products/page.mdx rename to apps/portal/src/app/bridge/products/page.mdx index be2aab3389f..f17b279564e 100644 --- a/apps/portal/src/app/payments/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 index 12153aad623..1ea3fd7bdba 100644 --- 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/payments/send/page.mdx b/apps/portal/src/app/bridge/send/page.mdx similarity index 99% rename from apps/portal/src/app/payments/send/page.mdx rename to apps/portal/src/app/bridge/send/page.mdx index 850ebdc3262..748be81e05e 100644 --- a/apps/portal/src/app/payments/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 index cbfc3ed4562..e863f3aa788 100644 --- 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 index b069558301e..43f30106c98 100644 --- 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 index dcdc18d5675..db3192d1633 100644 --- 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/payments/transactions/page.mdx b/apps/portal/src/app/bridge/transactions/page.mdx similarity index 94% rename from apps/portal/src/app/payments/transactions/page.mdx rename to apps/portal/src/app/bridge/transactions/page.mdx index 8c8a96190da..e5c41d89b2e 100644 --- a/apps/portal/src/app/payments/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/payments/webhooks/page.mdx b/apps/portal/src/app/bridge/webhooks/page.mdx similarity index 98% rename from apps/portal/src/app/payments/webhooks/page.mdx rename to apps/portal/src/app/bridge/webhooks/page.mdx index e494966e005..c4e4933333d 100644 --- a/apps/portal/src/app/payments/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 index f914b43e2ee..7f3bcda131e 100644 --- a/apps/portal/src/app/page.tsx +++ b/apps/portal/src/app/page.tsx @@ -178,10 +178,10 @@ function LearningResourcesSection() { title="Wallets" /> - ## 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/payments/x402/facilitator/page.mdx b/apps/portal/src/app/x402/facilitator/page.mdx similarity index 98% rename from apps/portal/src/app/payments/x402/facilitator/page.mdx rename to apps/portal/src/app/x402/facilitator/page.mdx index 0a90586b1c4..c8d53e540b4 100644 --- a/apps/portal/src/app/payments/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 new file mode 100644 index 00000000000..bc3178148d1 --- /dev/null +++ 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 ( + + {props.children} + + ); +} + +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/payments/x402/page.mdx b/apps/portal/src/app/x402/page.mdx similarity index 79% rename from apps/portal/src/app/payments/x402/page.mdx rename to apps/portal/src/app/x402/page.mdx index b7c21ddb569..7e24855aea5 100644 --- a/apps/portal/src/app/payments/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). +## 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" /> \ No newline at end of file diff --git a/apps/portal/src/app/payments/x402/server/page.mdx b/apps/portal/src/app/x402/server/page.mdx similarity index 96% rename from apps/portal/src/app/payments/x402/server/page.mdx rename to apps/portal/src/app/x402/server/page.mdx index e1c74e77c06..efa3f42109d 100644 --- a/apps/portal/src/app/payments/x402/server/page.mdx +++ b/apps/portal/src/app/x402/server/page.mdx @@ -421,23 +421,31 @@ Protect multiple endpoints with a shared middleware: -## 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 } } ``` diff --git a/apps/portal/src/app/payments/x402/server/x402-protocol-flow.png b/apps/portal/src/app/x402/server/x402-protocol-flow.png similarity index 100% rename from apps/portal/src/app/payments/x402/server/x402-protocol-flow.png rename to 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 new file mode 100644 index 00000000000..fb79145c367 --- /dev/null +++ b/apps/portal/src/app/x402/sidebar.tsx @@ -0,0 +1,77 @@ +import { ExternalLinkIcon, ZapIcon } from "lucide-react"; +import type { SideBar } from "@/components/Layouts/DocLayout"; +import { EngineIcon, ReactIcon, TypeScriptIcon, UnityIcon } from "@/icons"; +import { UnrealEngineIcon } from "../../icons/sdks/UnrealEngineIcon"; + +const x402Slug = "/x402"; + +export const sidebar: SideBar = { + links: [ + { + href: x402Slug, + name: "Get Started", + icon: , + }, + { + href: "https://playground.thirdweb.com/payments/x402", + icon: , + name: "Playground", + }, + { separator: true }, + { + isCollapsible: false, + links: [ + { + href: `${x402Slug}/client`, + name: "Client Side", + }, + { + href: `${x402Slug}/server`, + name: "Server Side", + }, + { + href: `${x402Slug}/agents`, + name: "Agents", + }, + { + href: `${x402Slug}/facilitator`, + name: "Facilitator", + }, + ], + name: "Guides", + }, + { separator: true }, + { + isCollapsible: false, + links: [ + { + href: `https://payments.thirdweb.com/reference`, + icon: , + name: "REST API", + }, + { + href: "/references/typescript/v5", + icon: , + name: "TypeScript", + }, + { + href: "/references/typescript/v5", + icon: , + name: "React", + }, + { + href: "/unity", + icon: , + name: "Unity", + }, + { + href: "/unreal-engine", + icon: , + name: "Unreal Engine", + }, + ], + name: "API References", + }, + ], + name: "x402", +};