> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Funding flows

> Let users buy crypto with fiat by generating a hosted on-ramp URL for their wallet.

## Prerequisites

Before this page: a connected wallet (see [Connecting external wallets](https://docs.dynamic.xyz/docs/javascript/building-ui/connecting-external-wallets.md)) or an embedded wallet. On-ramp providers must be enabled for your environment in the Dynamic Console.

## What you'll build

A **funding** flow lets a user top up their wallet with crypto bought using fiat. Dynamic generates a hosted on-ramp URL for a provider — you open it, and the provider handles KYC, payment, and delivery straight to the user's wallet address.

This page covers two providers: **MoonPay** and **Coinbase**. Both follow the same shape — build a request from the user's wallet, get a URL, open it.

## Funding with MoonPay

`getMoonPayUrl` returns a hosted widget URL for the wallet's address and chain. Optionally list supported tokens first with `getMoonPayCurrencies`.

> [tab] TypeScript
>
> ```typescript theme={"system"}
> import { getMoonPayUrl, type WalletAccount } from '@dynamic-labs-sdk/client';
>
> async function fundWithMoonPay(walletAccount: WalletAccount) {
>   const url = await getMoonPayUrl({
>     chain: walletAccount.chain,
>     walletAddress: walletAccount.address,
>     token: 'USDC',
>   });
>
>   window.open(url, '_blank', 'noopener');
> }
> ```

> [tab] React
>
> ```tsx theme={"system"}
> import { type WalletAccount } from '@dynamic-labs-sdk/client';
> import { useGetMoonPayUrl } from '@dynamic-labs-sdk/react-hooks';
>
> function FundWithMoonPay({ walletAccount }: { walletAccount: WalletAccount }) {
>   // useGetMoonPayUrl is a query hook -- it fetches as soon as the params are
>   // available, not on click. Open the already-fetched URL when clicked.
>   const { data: url, isLoading } = useGetMoonPayUrl({
>     chain: walletAccount.chain,
>     walletAddress: walletAccount.address,
>     token: 'USDC',
>   });
>
>   return (
>     <button
>       type="button"
>       onClick={() => url && window.open(url, '_blank', 'noopener')}
>       disabled={isLoading || !url}
>     >
>       Add funds
>     </button>
>   );
> }
> ```

## Funding with Coinbase

`getCoinbaseBuyUrl` returns `{ url }` for the hosted Coinbase Onramp widget. Pass the destination address and the networks you support.

> [tab] TypeScript
>
> ```typescript theme={"system"}
> import { getCoinbaseBuyUrl, type WalletAccount } from '@dynamic-labs-sdk/client';
>
> async function fundWithCoinbase(walletAccount: WalletAccount) {
>   const { url } = await getCoinbaseBuyUrl({
>     destinationAddress: walletAccount.address,
>     networks: ['ethereum'],
>     assets: ['USDC'],
>   });
>
>   window.open(url, '_blank', 'noopener');
> }
> ```

> [tab] React
>
> ```tsx theme={"system"}
> import { type WalletAccount } from '@dynamic-labs-sdk/client';
> import { useGetCoinbaseBuyUrl } from '@dynamic-labs-sdk/react-hooks';
>
> function FundWithCoinbase({ walletAccount }: { walletAccount: WalletAccount }) {
>   // useGetCoinbaseBuyUrl is a query hook too -- same pattern as MoonPay above.
>   const { data, isLoading } = useGetCoinbaseBuyUrl({
>     destinationAddress: walletAccount.address,
>     networks: ['ethereum'],
>     assets: ['USDC'],
>   });
>
>   return (
>     <button
>       type="button"
>       onClick={() => data?.url && window.open(data.url, '_blank', 'noopener')}
>       disabled={isLoading || !data?.url}
>     >
>       Buy with Coinbase
>     </button>
>   );
> }
> ```

> [!NOTE]
>
> Delivery is asynchronous — the provider credits the wallet after the user finishes payment and KYC in the hosted widget. Poll [token balances](https://docs.dynamic.xyz/docs/javascript/building-ui/token-balances-display.md) or refresh on return to reflect the new funds.

## Handling errors

| Situation | What to do |
| - | - |
| No connected wallet | Prompt the user to connect a wallet before funding. |
| Provider not enabled | Enable the on-ramp provider for your environment in the console; the request fails until then. |
| User closed the widget | No funds were moved — leave the "add funds" entry point available to retry. |

## See also

* [Token balances & display](https://docs.dynamic.xyz/docs/javascript/building-ui/token-balances-display.md) — reflect newly funded balances
* [Connecting external wallets](https://docs.dynamic.xyz/docs/javascript/building-ui/connecting-external-wallets.md) — get a wallet to fund
* [Building a swap UI](https://docs.dynamic.xyz/docs/javascript/building-ui/swap-ui.md) — convert funds once they arrive
* [Building an exchange transfer UI](https://docs.dynamic.xyz/docs/javascript/building-ui/exchange-transfers.md): withdraw from a connected Kraken or Coinbase account instead of buying with fiat


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.