getCoinbaseBuyUrl

getCoinbaseBuyUrl

Gets a Coinbase buy URL for initiating a fiat-to-crypto purchase flow. This is the simplest way to integrate Coinbase onramp - the URL opens in a new tab or popup window where the user completes the purchase on Coinbase’s site.

Use this when you want a simple redirect-based flow. For an embedded iframe experience with real-time event tracking, use createCoinbaseOnrampOrder instead.

Usage

import { getCoinbaseBuyUrl } from "@dynamic-labs-sdk/client";

const { url } = await getCoinbaseBuyUrl({
  destinationAddress: "0x1234...",
  defaultAsset: "ETH",
  networks: ["ethereum"],
  fiatCurrency: "USD",
  presetCryptoAmount: "0.1",
});

// Open in a new window
window.open(url, "_blank", "width=500,height=600");

Parameters

Parameter	Type	Description
destinationAddress	string	The wallet address to receive the purchased crypto.
defaultAsset	string	The default asset to purchase (e.g., ETH, USDC).
networks	string[]	The networks to show (e.g., ["ethereum", "polygon"]).
fiatCurrency	string	The fiat currency for payment (e.g., USD, EUR).
presetCryptoAmount	string (optional)	Pre-filled crypto amount to purchase.
client	DynamicClient (optional)	The Dynamic client instance. Only required when using multiple clients.

Returns

Promise<{ url: string }> - A promise that resolves to an object containing the Coinbase buy URL.

Examples

Open in popup window

import { getCoinbaseBuyUrl } from "@dynamic-labs-sdk/client";

const BuyWithCoinbaseButton = ({ walletAddress }) => {
  const handleBuy = async () => {
    const { url } = await getCoinbaseBuyUrl({
      destinationAddress: walletAddress,
      defaultAsset: "ETH",
      networks: ["ethereum"],
      fiatCurrency: "USD",
      presetCryptoAmount: "0.1",
    });

    // Open Coinbase in a popup window
    window.open(url, "_blank", "width=500,height=600");
  };

  return <button onClick={handleBuy}>Buy with Coinbase</button>;
};

Full page redirect

import { getCoinbaseBuyUrl } from "@dynamic-labs-sdk/client";

const redirectToCoinbase = async (walletAddress) => {
  const { url } = await getCoinbaseBuyUrl({
    destinationAddress: walletAddress,
    defaultAsset: "USDC",
    networks: ["polygon"],
    fiatCurrency: "USD",
  });

  // Redirect the entire page to Coinbase
  window.location.href = url;
};

When to use getCoinbaseBuyUrl vs createCoinbaseOnrampOrder

Feature	getCoinbaseBuyUrl	createCoinbaseOnrampOrder
User experience	Opens new tab/popup	Embedded iframe in your app
Event tracking	No	Yes, via addCoinbaseOnrampOrderEventListener
User verification	Not required	Email and phone verification required
Implementation complexity	Simple	More complex

React

useGetCoinbaseBuyUrl is a query hook:

import { useGetCoinbaseBuyUrl } from "@dynamic-labs-sdk/react-hooks";

function BuyWithCoinbase({ walletAddress }) {
  const { data: coinbaseBuyUrl, isLoading } = useGetCoinbaseBuyUrl({
    destinationAddress: walletAddress,
    defaultAsset: "ETH",
    networks: ["ethereum"],
    fiatCurrency: "USD",
  });

  return (
    <button
      disabled={isLoading || !coinbaseBuyUrl?.url}
      onClick={() => {
        const url = coinbaseBuyUrl?.url;
        if (url && new URL(url).protocol === "https:") {
          window.open(url, "_blank", "width=500,height=600");
        }
      }}
    >
      {isLoading ? "Loading..." : "Buy with Coinbase"}
    </button>
  );
}

Related functions

• createCoinbaseOnrampOrder - Create an embedded onramp order with event tracking
• createCryptoDotComPayment - Create a Crypto.com payment