+
+ );
+ }
+
+ return (
+ ✅ Wallet Connected
++ {account.address.slice(0, 6)}...{account.address.slice(-4)} +
+
+
+ );
+}
+```
+
++ New to crypto? No worries! Sign in with your existing account. +
+
+
+
+Build the payment options component that shows provider choices:
+
+```typescript
+interface PaymentOptionsProps {
+ onSelect: (provider: "stripe" | "coinbase" | "transak") => void;
+}
+
+function PaymentOptions({ onSelect }: PaymentOptionsProps) {
+ const paymentMethods = [
+ {
+ provider: "stripe" as const,
+ name: "Stripe",
+ description: "Credit Card, Apple Pay, Google Pay",
+ logo: "💳",
+ fees: "3.5% + $0.30",
+ popular: true,
+ },
+ {
+ provider: "coinbase" as const,
+ name: "Coinbase Pay",
+ description: "Bank Transfer, Debit Card",
+ logo: "🟦",
+ fees: "1% (Bank) / 3.9% (Card)",
+ popular: false,
+ },
+ {
+ provider: "transak" as const,
+ name: "Transak",
+ description: "Multiple Payment Options",
+ logo: "🌐",
+ fees: "0.99% - 5.5%",
+ popular: false,
+ },
+ ];
+
+ return (
+
+
+
+Implement the final steps of the user journey:
+
+```typescript
+import { sepolia } from "thirdweb/chains";
+
+function SuccessStep({
+ txHash,
+ nftMetadata
+}: {
+ txHash: string;
+ nftMetadata: typeof NFT_METADATA;
+}) {
+ const explorerUrl = `${sepolia.blockExplorers?.[0]?.url}/tx/${txHash}`;
+
+ return (
+
+
+
+Put it all together in your main application:
+
+```typescript
+import { ThirdwebProvider } from "thirdweb/react";
+// Import all the components we defined earlier
+import { NFTCheckout, WalletAuth, PaymentOptions, ProcessingStep, SuccessStep, ErrorStep } from "./nft-checkout-components";
+
+function App() {
+ return (
+
+
+ );
+}
+
+export default App;
+```
+
+
\ No newline at end of file
diff --git a/apps/portal/src/app/pay/guides/onramp-integration/page.mdx b/apps/portal/src/app/pay/guides/onramp-integration/page.mdx
new file mode 100644
index 00000000000..a3fe549ea0f
--- /dev/null
+++ b/apps/portal/src/app/pay/guides/onramp-integration/page.mdx
@@ -0,0 +1,199 @@
+import {
+ createMetadata,
+ Callout,
+ DocImage,
+ InstallTabs,
+ Steps,
+ Step,
+ Tabs,
+ TabsList,
+ TabsTrigger,
+ TabsContent,
+} from "@doc";
+
+export const metadata = createMetadata({
+ image: {
+ title: "thirdweb Universal Bridge - Onramp Integration",
+ icon: "thirdweb",
+ },
+ title: "thirdweb Universal Bridge - Onramp Integration | thirdweb",
+ description:
+ "Learn how to integrate fiat-to-crypto onramps using Stripe, Coinbase, and Transak with Universal Bridge.",
+});
+
+# Fiat-to-Crypto Onramp Integration
+
+Learn how to integrate seamless fiat-to-crypto onramps using Universal Bridge. This guide covers integration with Stripe, Coinbase, and Transak providers, enabling your users to purchase crypto directly with fiat currency.
+
+Universal Bridge's onramp functionality provides a unified interface across multiple providers, automatic routing to the best rates, and comprehensive status tracking.
+
+---
+
+
+
+
+
+
+Configure your client and understand the available onramp providers:
+
+```typescript
+import { createThirdwebClient } from "thirdweb";
+import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+
+const client = createThirdwebClient({
+ clientId: "your_client_id"
+});
+```
+
+
+
+
+Create a basic onramp experience for your users:
+
+
+
+Stripe
+Coinbase
+Transak
+
+
+
+
+```typescript
+import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
+
+ const onrampSession = await Bridge.Onramp.prepare({
+ client,
+ onramp: "stripe",
+ chainId: 1, // Ethereum
+ tokenAddress: NATIVE_TOKEN_ADDRESS, // ETH
+ receiver: userAddress,
+ amount: toWei("0.1"), // 0.1 ETH
+ currency: "USD",
+ country: "US", // User's country - important for compliance
+ });
+
+ window.open(onrampSession.link);
+```
+
+
+
+
+
+```typescript
+import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
+
+async function createCoinbaseOnramp(userAddress: string) {
+ try {
+ const onrampSession = await Bridge.Onramp.prepare({
+ client,
+ onramp: "coinbase",
+ chainId: 8453, // Base (Coinbase's L2)
+ tokenAddress: NATIVE_TOKEN_ADDRESS, // ETH on Base
+ receiver: userAddress,
+ amount: toWei("0.05"), // 0.05 ETH
+ currency: "USD",
+ country: "US",
+ });
+
+ console.log("Coinbase onramp session:", onrampSession.id);
+ console.log("Estimated cost:", `$${onrampSession.currencyAmount}`);
+
+ // Redirect to Coinbase onramp
+ window.location.href = onrampSession.link;
+
+ return onrampSession;
+ } catch (error) {
+ console.error("Failed to create Coinbase onramp:", error);
+ throw error;
+ }
+}
+```
+
+
+
+
+```typescript
+import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
+
+async function createTransakOnramp(userAddress: string) {
+ try {
+ const onrampSession = await Bridge.Onramp.prepare({
+ client,
+ onramp: "transak",
+ chainId: 137, // Polygon
+ tokenAddress: NATIVE_TOKEN_ADDRESS, // MATIC
+ receiver: userAddress,
+ amount: toWei("10"), // 10 MATIC
+ currency: "USD",
+ country: "US",
+ });
+
+ // Redirect to Transak
+ window.open(onrampSession.link);
+
+ return onrampSession;
+ } catch (error) {
+ console.error("Failed to create Transak onramp:", error);
+ throw error;
+ }
+}
+```
+
+
+
+
+
+Monitor onramp transactions and handle completion:
+
+```typescript
+import { Bridge } from "thirdweb";
+
+// Monitor onramp status
+ const status = await Bridge.Onramp.status({
+ sessionId,
+ client,
+ });
+
+ switch (status.status) {
+ case "COMPLETED":
+ console.log("Onramp completed successfully!");
+ console.log("Transaction hash:", status.transactionHash);
+ console.log("Amount received:", status.destinationAmount);
+ // Update your UI to show success
+ break;
+
+ case "PENDING":
+ console.log("Onramp in progress...");
+ // Show loading state to user
+ setTimeout(() => monitorOnrampStatus(sessionId), 10000); // Check again in 10s
+ break;
+
+ case "FAILED":
+ console.log("Onramp failed:", status.error);
+ // Show error message to user
+ break;
+
+ case "CANCELLED":
+ console.log("Onramp was cancelled by user");
+ // Handle cancellation
+ break;
+
+ default:
+ console.log("Unknown status:", status.status);
+ }
+```
+
+
+
+## Next Steps
+
+- **[Onramp Providers](/pay/onramp-providers)** - Detailed provider comparison and features
+- **[Webhooks](/pay/webhooks)** - Set up real-time onramp status notifications
+- **[Testing](/pay/testing-pay)** - Test onramp flows in development mode
+- **[Universal Bridge API](https://bridge.thirdweb.com/reference)** - Complete API reference
diff --git a/apps/portal/src/app/pay/guides/smart-accounts/page.mdx b/apps/portal/src/app/pay/guides/smart-accounts/page.mdx
new file mode 100644
index 00000000000..7319b7c19c3
--- /dev/null
+++ b/apps/portal/src/app/pay/guides/smart-accounts/page.mdx
@@ -0,0 +1,154 @@
+import {
+ createMetadata,
+ Callout,
+ DocImage,
+ InstallTabs,
+ Steps,
+ Step,
+} from "@doc";
+
+export const metadata = createMetadata({
+ image: {
+ title: "thirdweb Universal Bridge - Smart Accounts",
+ icon: "thirdweb",
+ },
+ title: "thirdweb Universal Bridge - Smart Accounts | thirdweb",
+ description:
+ "Learn how to use EIP7702 smart accounts with batched transactions for seamless Universal Bridge experiences.",
+});
+
+# Smart Accounts with Universal Bridge
+
+Learn how to leverage EIP7702 smart accounts to batch Universal Bridge transactions for optimal user experience. This approach enables gasless transactions, batched execution, and seamless cross-chain operations.
+
+Smart accounts with EIP7702 allow you to upgrade any EOA (Externally Owned Account) into a smart account without code changes, enabling advanced features like transaction batching and gas sponsorship.
+
+---
+
+
+
+
+
+
+Configure an in-app wallet with EIP7702 execution mode to enable smart account features:
+
+```typescript
+import { createThirdwebClient } from "thirdweb";
+import { inAppWallet } from "thirdweb/wallets/in-app";
+
+const client = createThirdwebClient({
+ clientId: "your_client_id"
+});
+
+// Create in-app wallet with EIP7702 smart account features
+const wallet = inAppWallet({
+ executionMode: {
+ mode: "EIP7702",
+ sponsorGas: true, // Enable gas sponsorship
+ },
+});
+
+// Connect the wallet
+const account = await wallet.connect({
+ client,
+ strategy: "google", // or other auth strategies
+});
+```
+
+
+ EIP7702 execution mode upgrades your EOA into a smart account, enabling batched transactions, gas sponsorship, and other advanced features without requiring contract deployment.
+
+
+
+
+
+Use Universal Bridge to prepare transactions, then batch them per step (since each step may be on a different chain):
+
+```typescript
+import { Bridge, NATIVE_TOKEN_ADDRESS, toWei } from "thirdweb";
+import { sendBatchTransaction } from "thirdweb";
+
+const bridgePreparation = await Bridge.Buy.prepare({
+ originChainId: 1, // Ethereum
+ originTokenAddress: NATIVE_TOKEN_ADDRESS,
+ destinationChainId: 137, // Polygon
+ destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
+ amount: toWei("0.1"), // 0.1 MATIC
+ sender: account.address,
+ receiver: account.address,
+ client,
+});
+```
+
+
+ **Key Rule**: You can only batch transactions that are on the same chain. Since Universal Bridge steps may span multiple chains, you must batch transactions within each step separately, not across steps.
+
+
+
+
+
+Execute transactions in batches per step (same chain), proceeding through steps sequentially:
+
+```typescript
+import { sendBatchTransaction, waitForReceipt } from "thirdweb";
+// Execute each step's transactions as a batch (same chain)
+for (let i = 0; i < bridgePreparation.steps.length; i++) {
+ const step = bridgePreparation.steps[i];
+
+ // Batch all transactions within this step (they're all on the same chain)
+ const stepBatchResult = await sendBatchTransaction({
+ transactions: step.transactions,
+ account,
+ });
+
+ console.log(`Step ${i + 1} batch sent:`, stepBatchResult.transactionHash);
+
+ const receipt = await waitForReceipt({
+ client,
+ chain: step.transactions[0].chain,
+ transactionHash: stepBatchResult.transactionHash,
+ });
+
+ console.log(`Step ${i + 1} completed:`, receipt.status);
+
+ // Monitor bridge completion status for this step
+ let bridgeStatus;
+ do {
+ bridgeStatus = await Bridge.status({
+ transactionHash: stepBatchResult.transactionHash,
+ chainId: step.transactions[0].chainId,
+ client,
+ });
+
+ if (bridgeStatus.status === "PENDING") {
+ console.log(`Bridge step ${i + 1} still pending...`);
+ await new Promise((resolve) => setTimeout(resolve, 5000));
+ }
+ } while (bridgeStatus.status === "PENDING");
+
+ if (bridgeStatus.status === "COMPLETED") {
+ console.log(`Bridge step ${i + 1} completed!`);
+ } else if (bridgeStatus.status === "FAILED") {
+ throw new Error(`Bridge step ${i + 1} failed`);
+ }
+}
+```
+
+
+ With EIP7702 smart accounts, transactions within each step execute atomically. Steps execute sequentially, ensuring proper cross-chain coordination. Gas sponsorship applies to all batched transactions.
+
+
+
+
+
+## Next Steps
+
+- **[EIP7702 Documentation](/connect/account-abstraction/overview)** - Learn more about smart account features
+- **[Batching Transactions](/typescript/v5/account-abstraction/batching-transactions)** - Explore advanced batching patterns
+- **[Gas Sponsorship](/connect/account-abstraction/sponsoring-gas)** - Set up custom gas sponsorship rules
+- **[Universal Bridge API](/pay/webhooks)** - Monitor cross-chain operations with webhooks
diff --git a/apps/portal/src/app/pay/page.mdx b/apps/portal/src/app/pay/page.mdx
index c3235322a96..fb35102c83a 100644
--- a/apps/portal/src/app/pay/page.mdx
+++ b/apps/portal/src/app/pay/page.mdx
@@ -1,7 +1,7 @@
import { createMetadata, DocImage, Grid, SDKCard, FeatureCard } from "@doc";
import PayOverviewImage from "./assets/pay-overview.png";
import SupportedChains from "../_images/supported-chains.png";
-import {RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon} from "lucide-react";
+import {RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon} from "lucide-react";
export const metadata = createMetadata({
image: {
@@ -10,7 +10,7 @@ export const metadata = createMetadata({
},
title: "thirdweb Universal Bridge Docs: Web3 Payments, On-ramping, bridging & swapping",
description:
- "Learn everything about thirdweb’s web3 payments solution, Universal Bridge. Technical docs on onramping, bridging + swapping.",
+ "Learn everything about thirdweb's web3 payments solution, Universal Bridge. Technical docs on onramping, bridging + swapping.",
});
# Universal Bridge
@@ -25,50 +25,56 @@ Universal Bridge allows you to create both simple and advanced payment flows for
className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-2 "
>
+## SDK Modules
+
+The Universal Bridge SDK is organized into several modules, each handling specific functionality:
+
+| Module | Purpose | Key Functions |
+|--------|---------|---------------|
+| **Buy** | Cross-chain token purchasing | `quote()`, `prepare()` |
+| **Sell** | Token selling and swapping | `quote()`, `prepare()` |
+| **Transfer** | Same-chain and cross-chain transfers | `prepare()` |
+| **Onramp** | Fiat-to-crypto conversion | `prepare()`, `status()` |
+| **Routes** | Route discovery and filtering | `routes()` |
+| **Status** | Transaction status tracking | `status()` |
+
## Supported Chains
Universal Bridge is supported on select EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=pay).
@@ -83,12 +89,71 @@ Universal Bridge is supported on select EVM compatible chains. To view the full
| Stripe | https://docs.stripe.com/crypto/onramp |
| Coinbase | https://docs.cdp.coinbase.com/onramp/docs/payment-methods/ |
-## Integration Options
+## Implementation Approaches
+
+| APPROACH | DESCRIPTION | BEST FOR |
+| -------- | ----------- | -------- |
+| **[TypeScript SDK](https://portal.thirdweb.com/typescript/v5/buy/quote)** | Full-featured SDK with quote, prepare, and status functions | Developers building custom applications with complete control |
+| **[REST API](https://bridge.thirdweb.com/reference)** | Direct API access for any programming language | Backend services, mobile apps, or non-JavaScript environments |
+| **[Webhooks](https://portal.thirdweb.com/pay/webhooks)** | Real-time transaction status notifications | Applications requiring instant completion updates |
+| **[Playground](https://playground.thirdweb.com/connect/pay)** | Interactive testing environment | Testing and prototyping bridge functionality |
+
+## Quick Start Examples
+
+### Basic Cross-Chain Purchase
+```typescript
+import { Bridge, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+
+// Get a quote for purchasing ETH on Optimism using ETH on Mainnet
+const quote = await Bridge.Buy.quote({
+ originChainId: 1, // Ethereum Mainnet
+ originTokenAddress: NATIVE_TOKEN_ADDRESS,
+ destinationChainId: 10, // Optimism
+ destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
+ amount: toWei("0.01"),
+ client: thirdwebClient,
+});
+
+// Prepare finalized transactions
+const prepared = await Bridge.Buy.prepare({
+ originChainId: 1,
+ originTokenAddress: NATIVE_TOKEN_ADDRESS,
+ destinationChainId: 10,
+ destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
+ amount: toWei("0.01"),
+ sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+ receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+ client: thirdwebClient,
+});
+```
+
+### Fiat Onramp
+```typescript
+// Prepare a Stripe onramp to purchase ETH
+const onramp = await Bridge.Onramp.prepare({
+ client: thirdwebClient,
+ onramp: "stripe",
+ chainId: 1,
+ tokenAddress: NATIVE_TOKEN_ADDRESS,
+ receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+ amount: toWei("10"),
+ country: "US",
+});
+
+// Redirect user to onramp.link to complete purchase
+```
+
+### Status Tracking
+```typescript
+// Check transaction status
+const status = await Bridge.status({
+ transactionHash: "0x5959b9321ec581640db531b80bac53cbd968f3d34fc6cb1d5f4ea75f26df2ad7",
+ chainId: 137,
+ client: thirdwebClient,
+});
-| OPTION | BEST FOR |
-| --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| [Buy Crypto](https://playground.thirdweb.com/connect/pay/) | Developers who want onramp and crypto purchase experiences directly in their application. |
-| [Transactions](https://playground.thirdweb.com/connect/pay/transactions) | Developers who want users to onramp or purchase crypto directly into a transaction. Great for minting and NFT purchase flows. |
-| [In-App Purchases](https://playground.thirdweb.com/connect/pay/commerce) | Developers who want to take payments from Fiat or Crypto directly to a seller wallet |
-| [SDK](https://portal.thirdweb.com/typescript/v5/buy/quote) | Build your own UI with the SDK. |
-| [API](https://playground.thirdweb.com/connect/pay/backend) | Control the full experience with the API. |
+if (status.status === "COMPLETED") {
+ console.log("Bridge completed!");
+ console.log("Final amount:", status.destinationAmount);
+}
+```
diff --git a/apps/portal/src/app/pay/sidebar.tsx b/apps/portal/src/app/pay/sidebar.tsx
index bb0163ff0e0..c6d13bf074c 100644
--- a/apps/portal/src/app/pay/sidebar.tsx
+++ b/apps/portal/src/app/pay/sidebar.tsx
@@ -5,7 +5,6 @@ import {
BracesIcon,
CircleDollarSignIcon,
CodeIcon,
- FlaskConicalIcon,
MessageCircleQuestionIcon,
PaletteIcon,
RocketIcon,
@@ -45,16 +44,12 @@ export const sidebar: SideBar = {
icon:
+ 
+
+
+ {/* Step Progress Indicator */}
+ {NFT_METADATA.name}
+{NFT_METADATA.description}
+
+ {NFT_PRICE_ETH} ETH (~$30 USD)
+
+
+ {["connect", "payment", "processing", "success"].map((step, index) => (
+ setState({ step: "payment" })}
+ />
+ )}
+
+ );
+}
+```
+
+
+= index
+ ? "bg-blue-500"
+ : "bg-gray-200"
+ }`}
+ />
+ ))}
+
+
+ {/* Step Content */}
+ {state.step === "connect" && (
+
+
+ );
+}
+
+function ProcessingStep({ provider }: { provider: "stripe" | "coinbase" | "transak" }) {
+ const [currentStep, setCurrentStep] = useState<"payment" | "confirmation" | "minting">("payment");
+
+ // Auto-progress through steps for demo purposes
+ useEffect(() => {
+ const timer1 = setTimeout(() => setCurrentStep("confirmation"), 5000);
+ const timer2 = setTimeout(() => setCurrentStep("minting"), 10000);
+
+ return () => {
+ clearTimeout(timer1);
+ clearTimeout(timer2);
+ };
+ }, []);
+
+ const providerInfo = {
+ stripe: { name: "Stripe", logo: "💳", color: "blue" },
+ coinbase: { name: "Coinbase Pay", logo: "🟦", color: "blue" },
+ transak: { name: "Transak", logo: "🌐", color: "green" },
+ };
+
+ const info = providerInfo[provider];
+
+ return (
+
+
+
+ Choose Payment Method
++ Select how you'd like to pay for your NFT +
+
+ {paymentMethods.map((method) => (
+
+ ))}
+
+
+
+
+
+ 🔒
+ Secure Payment Processing
+
+ + All payments are processed securely through industry-leading providers. + Your payment information is never stored on our servers. +
+
+
+ );
+}
+```
+
+
+
+ {/* Progress Steps */}
+ {info.logo}
+ Processing with {info.name}
+
+
+
+ {currentStep === "payment" && (
+
+
+
+
+ {currentStep === "payment" ? "1" : "✓"}
+
+
+
+ Complete Payment
+
+ {currentStep === "payment" ? "Finish your purchase in the payment window" : "Payment completed successfully"}
+
+
+
+
+
+ {currentStep === "confirmation" ? "2" : currentStep === "minting" ? "✓" : "2"}
+
+
+
+ Confirming Transaction
+
+ {currentStep === "confirmation" ? "Verifying your payment on the blockchain" :
+ currentStep === "minting" ? "Transaction confirmed" : "Waiting for payment completion"}
+
+
+
+
+ 3
+
+
+
+ Minting Your NFT
+
+ {currentStep === "minting" ? "Creating your unique NFT on the blockchain" : "Preparing to mint your NFT"}
+
+
+
+ )}
+
+ {currentStep === "minting" && (
+ + Complete your payment in the {info.name} window to continue. + This page will automatically update when payment is confirmed. +
+
+
+
+ )}
+ + Almost done! Your NFT is being created on the blockchain. + This usually takes 30-60 seconds. +
+
+
+ );
+}
+
+function ErrorStep({
+ error,
+ onRetry
+}: {
+ error: string;
+ onRetry: () => void;
+}) {
+ return (
+ 🎉
+
+
+
+
+
+ NFT Minted Successfully!
++ Congratulations! Your NFT has been minted and is now in your wallet. +
+
+
+
+
+
+
+ );
+}
+```
+
+❌
+
+
+
+ Something went wrong
++ We couldn't complete your NFT purchase. Please try again. +
+
+
+ + Error details +
++ {error} +
+
+
+
+
+
+
+
+
+
+
+
+ + NFT Marketplace +
++ Buy NFTs seamlessly with fiat currency +
+