Skip to main content

​
FundButton

The <FundButton /> component provides a way for users to fund their wallet without leaving your app. It automatically detects the user’s wallet type (EOA vs Smart Wallet) and directs them to the appropriate funding URL. If your user connects a Coinbase Smart Wallet, it provides an easy way to access the Coinbase Smart Wallet Fund flow. Users will be able to buy and receive crypto, or use their Coinbase balances onchain with Magic Spend. If your user connects any other EOA wallet, it provides an easy way to access Coinbase Onramp where your users will also be able to buy crypto using a fiat payment method, or transfer existing crypto from their Coinbase account.

​
Walkthrough

1

Get your Project ID

  1. Get your Project ID from the Coinbase Developer Platform Dashboard.
OnchainKit copy Project Id
  1. Add your Project ID to your .env file.
.env
NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_PUBLIC_API_KEY
NEXT_PUBLIC_CDP_PROJECT_ID=YOUR_CDP_PROJECT_ID
2

Add Project ID to OnchainKitProvider

<OnchainKitProvider
  apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
  projectId={process.env.NEXT_PUBLIC_CDP_PROJECT_ID}
  chain={base}
>
  {props.children}
</OnchainKitProvider>
3

Get a session token

Getting session token
4

Drop in the <FundButton /> component

import { FundButton } from '@coinbase/onchainkit/fund';

const sessionToken = "YOUR_SESSION_TOKEN";

// can use EITHER sessionToken or fundingUrl
<FundButton sessionToken={sessionToken} />

​
Customizing the funding experience

You can customize the Coinbase Onramp experience by bringing your own Onramp URL and passing it to the <FundButton /> component. We provide the getOnrampBuyUrl utility to help you generate a Coinbase Onramp URL tailored to your use case. 
import { FundButton, getOnrampBuyUrl } from "@coinbase/onchainkit/fund";
import { useAccount } from "wagmi";

const projectId = "YOUR_CDP_PROJECT_ID";
const { address } = useAccount();

const onrampBuyUrl = getOnrampBuyUrl({
  sessionToken: "YOUR_SESSION_TOKEN",
  presetFiatAmount: 20,
  fiatCurrency: "USD",
});

<FundButton fundingUrl={onrampBuyUrl} />;
You can choose to have the funding URL open in a popup or a new tab using the openIn prop. 
<FundButton openIn={"tab"} sessionToken={sessionToken} />

​
Customizing the fund button

You can override the text on the fund button using the text prop, and hide the icon with the hideIcon prop. 
<FundButton text={"Onramp"} hideIcon={true} sessionToken={sessionToken} />
You can hide the text with the hideText prop. 
<FundButton hideText={true} sessionToken={sessionToken} />
See FundButtonReact for the full list of customization options.

​
Props

FundButtonProps 
export type FundButtonProps = FundButtonBaseProps &
  FundButtonSourceProps &
  FundButtonRenderProps;

type FundButtonBaseProps = {
  /* An optional CSS class name for styling the button component */
  className?: string;
  /* A optional prop to disable the fund button */
  disabled?: boolean;
  /* The state of the button component */
  state?: FundButtonState;
  /* Whether to open the funding flow in a tab or a popup window */
  openIn?: "popup" | "tab";
  /**
   * Size of the popup window if `openIn` is set to `popup`
   * Note: popupSize will be ignored when using a Coinbase Onramp URL (i.e. https://pay.coinbase.com/*) as it requires
   * a fixed popup size.
   */
  popupSize?: "sm" | "md" | "lg";
  /* Where to open the target if `openIn` is set to tab */
  target?: string;
  /* The currency code of the fiat amount provided in the presetFiatAmount param e.g. USD, CAD, EUR. */
  fiatCurrency?: string;
  /* A callback function that will be called when the popup window is closed */
  onPopupClose?: () => void;
  /* A callback function that will be called when the button is clicked */
  onClick?: () => void;
};

// Require exactly one funding source for FundButton (not both)
type FundButtonSourceProps =
  | { fundingUrl: string; sessionToken?: string }
  | { sessionToken: string; fundingUrl?: string };

type FundButtonRenderProps =
  | {
      render?: (props: FundButtonRenderParams) => React.ReactNode;
      /* An optional React node to be displayed in the button component */
      children?: never;
    }
  | {
      render?: never;
      /* An optional React node to be displayed in the button component */
      children?: ReactNode;
    };

export type FundButtonRenderParams = {
  /* The state of the button component, only relevant when using FundCardSubmitButton */
  status: FundButtonState;
  /* A callback function that will be called when the button is clicked */
  onClick: (e: React.MouseEvent) => void;
  /* Whether the button is disabled */
  isDisabled: boolean;
};
Note: FundButton requires either sessionToken or fundingUrl to be provided. If neither is provided, the component will throw an error before compiling.