Building a Universal Bridge Marketplace: Accept Payments in Any Token on Any Chain

Vasiliy Kirochka

Apr 1, 2025 • 6 min read

Ever built a great NFT marketplace only to lose sales because buyers don't have the right token on the right chain? This common problem creates an invisible barrier between your product and potential customers.

In this guide, I'll show you how to build an NFT marketplace that can accept payments in any token from virtually any EVM-compatible blockchain - all thanks to thirdweb's Universal Bridge.

Follow along with this video:

The Payment Problem in Web3

Picture this: A potential buyer finds the perfect NFT on your marketplace and gets excited to make a purchase. But when they click "Buy Now," they hit a roadblock - they don't have the specific token on the specific blockchain required to complete the purchase.

This happens constantly because there are numerous blockchains with thousands of tokens. If each dApp accepts payments using different tokens, tracking them all becomes a nightmare for users.

For example, if your application accepts payments on Optimism, but the user has ETH on Mainnet or MATIC on Polygon, they can't complete the purchase easily. They'd need to:

Find a DEX on Polygon
Swap MATIC for USDC on Polygon
Find a bridge to send that USDC to Arbitrum
Return to your marketplace to finally complete the purchase

Each step adds friction that can lead to abandoned purchases. What if instead, your marketplace could say: "You have MATIC? Great, we'll handle the rest!"

Or better yet - what if users without crypto could simply pay with a credit card?

What is Universal Bridge?

Universal Bridge is thirdweb's solution that lets customers pay with any token they already have, regardless of which chain it's on. It handles all the complex cross-chain operations behind the scenes.

For example, on the Treasure Marketplace, traditionally onboarding users would require them to understand swapping, bridging, and token selection. With Universal Bridge, getting MAGIC tokens on the Treasure chain becomes simple:

The user specifies they want 100 MAGIC tokens (about $20)
The component shows their connected wallet (even social logins like Google)
If they choose to pay with a credit card, Universal Bridge automatically:
- Onramps them to Arbitrum ETH
- Swaps ETH for MAGIC on Arbitrum
- Bridges that MAGIC to Treasure chain

All this happens automatically with a single click, with no need for the user to understand swapping, bridging, or token intermediaries.

Integration Options for Universal Bridge

You have three ways to integrate Universal Bridge into your application:

Connect Button: Most developers already use thirdweb's Connect Button in their applications. Simply add the ConnectButton hook from the SDK, and users can click on "Buy" within their in-app wallet to purchase tokens. All bridging and swapping happens automatically.
Embed: This is useful for selling real-world assets like merchandise. You can customize it to show the number of items, set the recipient address, and display prices. If receiving payments in USDC, the bridging process from fiat to USDC happens automatically.
Send Transaction: Universal Bridge is enabled by default for any contract call sent with the sendTransaction hook. Define the transaction parameters, and when users click your button, they'll be able to pay using their preferred method.

Building Our NFT Marketplace

Let's build a complete NFT marketplace with Universal Bridge integration. Our marketplace will feature gaming items like swords, staffs, and magic potions - perfect for an on-chain MMO game.

The Project Structure

We'll use Next.js for the frontend and thirdweb for the blockchain integration. Our marketplace will allow users to:

Browse collections of gaming NFTs
Connect their wallet via thirdweb's Connect Button
Purchase NFTs using any token from any chain
View item details including attributes, price, and history

Here's how we'll approach this:

Create the frontend UI
Deploy NFT and marketplace contracts
Integrate thirdweb services
Add Universal Bridge for payments

Step 1: Creating the UI with Web AI Tools

To speed up development, we'll use Bzero AI (from Bento) to generate our base UI. This approach can dramatically reduce development time.

For example, with a prompt like:

Create an NFT marketplace for gaming items like swords, staffs, and magic potions. Use pixel art and make it feel like an in-game shop. Use accents in purple and green.

The AI will generate a complete marketplace interface with React components, styling, and structure. You can then modify this base to fit your specific needs.

Step 2: Generating Game Assets

We'll use AI tools like ChatGPT to create pixel art assets for our marketplace. This includes swords, staffs, and potions, along with their descriptions and attributes.

Step 3: Deploying NFT and Marketplace Contracts

We'll use thirdweb's dashboard to deploy two contracts:

NFT Collection Contract (ERC-1155): This will store our gaming items
Marketplace Contract: This will handle listings and sales

Here's the process:

Go to thirdweb.com
Log in with your wallet
Click "Deploy a Contract"
Select "Edition" from the NFT section
Fill in your collection details
Deploy to a test network (we'll use Arbitrum Sepolia)

Once deployed, we'll mint several NFTs with different attributes:

Swords with power, ability, and level stats
Staffs with unique magical properties
Potions with different effects

For the marketplace:

Deploy a Marketplace V3 contract
Create direct listings for each of your NFTs
Set prices in the desired token (we'll use test ETH)

Step 4: Integrating thirdweb Services

Now we'll connect our frontend to the blockchain:

Install thirdweb SDK:

npm install thirdweb

Create a client:

// app/client.ts
import { createThirdwebClient } from "thirdweb";

const clientId = "your-client-id";
export const client = createThirdwebClient({ clientId });

Wrap your application with ThirdwebProvider:

// app/layout.tsx
import { ThirdwebProvider } from "thirdweb/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <ThirdwebProvider>
        <body>{children}</body>
      </ThirdwebProvider>
    </html>
  );
}

Replace the Connect Button:

// components/pixel-header.tsx
import { ConnectButton } from "thirdweb/react";
import { darkTheme } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
import { client } from "@/app/client";

const wallets = [
  inAppWallet({
    auth: {
      options: [
        "google",
        "discord",
        "email",
        // other authentication options
      ],
    },
  }),
];

// In your header component:
<ConnectButton
  client={client}
  wallets={wallets}
  theme={darkTheme({
    colors: {
      primaryText: "hsl(142, 69%, 58%)",
      primaryButtonBg: "hsl(271, 81%, 56%)",
      // other color customizations
    },
  })}
/>

Fetch and display NFT listings:

// components/nft-grid.tsx
import { useState, useEffect } from "react";
import { getAllValidListings } from "thirdweb/extensions/marketplace";
import { defineChain, getContract } from "thirdweb";
import { arbitrumSepolia } from "thirdweb/chains";
import { MARKETPLACE_CONTRACT_ADDRESS } from "@/constants/addresses";
import { client } from "@/app/client";

export default function NFTGrid() {
  const [listings, setListings] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  
  const chain = defineChain(arbitrumSepolia);
  const market = getContract({
    address: MARKETPLACE_CONTRACT_ADDRESS,
    chain,
    client,
  });
  
  useEffect(() => {
    const fetchListings = async () => {
      setIsLoading(true);
      try {
        const lists = await getAllValidListings({
          contract: market,
          start: 0,
          count: BigInt(15),
        });
        setListings(lists);
      } catch (error) {
        console.error("Error fetching listings:", error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchListings();
  }, []);
  
  // Render listings...
}

Step 5: Implementing Universal Bridge for Payments

Now for the most important part - enabling payments with any token from any chain.

First, add the buy functionality:

// In your NFT detail page
import { buyFromListing } from "thirdweb/extensions/marketplace";
import { useSendTransaction } from "thirdweb/react";

export default function NFTDetailPage() {
  // Initialize transaction hooks
  const { mutate: sendTransaction } = useSendTransaction();
  
  // Buy function
  const buyNFT = async (listingId) => {
    try {
      const transaction = await buyFromListing({
        contract: market,
        listingId: BigInt(listingId),
        quantity: 1,
        buyForAddress: activeAccount?.address,
      });
      
      if (!activeAccount?.address) {
        console.log("No connected account");
        return;
      }
      
      // This is where Universal Bridge magic happens
      await sendTransaction(transaction);
    } catch (error) {
      console.error("Error buying NFT:", error);
    }
  };
  
  return (
    // ...
    <Button 
      className="pixel-button bg-purple-600 hover:bg-purple-700"
      onClick={() => buyNFT(listing.id)}
    >
      Buy Now
    </Button>
    // ...
  );
}

Alternatively, you can use the PayEmbed component for more customization:

import { PayEmbed } from "thirdweb/react";
import { getEthToken } from "thirdweb";
import { base } from "thirdweb/chains";

// Replace the Buy button with:
<PayEmbed
  client={client}
  theme="dark"
  payOptions={{
    amount: 35, // Amount in USD
    token: getEthToken(base),
    destinationAddress: "0xYourWalletAddress",
  }}
/>

This payment component will automatically handle the entire payment flow, including cross-chain operations.

The End Result

Our NFT Marketplace now allows users to:

Browse beautiful pixel art gaming items
Connect with their preferred wallet or social login
Purchase NFTs using any token they have on any chain
Pay with credit/debit cards if they don't have crypto

The Universal Bridge handles all the complex blockchain operations behind the scenes:

Cross-chain token swaps
Bridging between networks
Fiat on-ramping

This dramatically improves the user experience and removes barriers to purchase, helping you maximize sales and user satisfaction.

Conclusion

Building a marketplace that accepts payments across any chain doesn't have to be complex. With thirdweb's Universal Bridge, you can offer a seamless payment experience that meets users where they are, rather than forcing them to juggle tokens and chains.

The key benefits of this approach:

Increased conversion rates by removing payment barriers
Support for both crypto natives and newcomers
Simplified user experience without sacrificing functionality
Reduced abandonment during the checkout process

By implementing this solution, you're not just building a marketplace - you're creating a frictionless gateway to web3 that welcomes users regardless of which tokens they have or which chains they use.

Ready to transform your marketplace with Universal Bridge? Check out thirdweb's documentation to get started.