FundCard

The <FundCard /> component provides a complete fiat onramp experience within your app. It includes:

  • Amount input with fiat/crypto switching
  • Payment method selection (Coinbase, Apple Pay, Debit Card)
  • Automatic exchange rate updates
  • Smart handling of payment method restrictions (based on country and subdivision)

The Apple Pay and Debit Card onramp options are only available for Coinbase supported assets.

​
Prerequisites

Before using the FundCard component, ensure you’ve completed the Getting Started steps.

To use the FundCard component, you’ll need to provide a Client API Key in OnchainKitProvider. You can get one following our Getting Started steps.

This component requires a projectId to be set in the OnchainKitProvider. You can find your projectId on Coinbase Developer Platform.

​
Usage

​
Drop in the <FundCard /> component

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

<FundCard
  assetSymbol="ETH"
  country="US"
  currency="USD"
/>;

​
Customization

​
Custom Header and Button Text

You can customize the header and button text:

<FundCard
  assetSymbol="ETH"
  country="US"
  currency="USD"
  headerText="Purchase Ethereum"
  buttonText="Purchase"
/>

​
Custom Currency

You can specify which fiat currency to use:

<FundCard
  assetSymbol="ETH"
  country="GB"
  currency="GBP"
/>

​
Preset Amount Inputs

You can specify preset amount buttons:

const presetAmountInputs = ['10', '20', '50'] as const;

<FundCard
  assetSymbol="ETH"
  country="US"
  currency="USD"
  presetAmountInputs={presetAmountInputs}
/>;

Note: 3 preset amount inputs are required in order to show the preset amount buttons.

​
Custom Content

You can provide custom children to completely customize the card content while keeping the fund button functionality:

<FundCard
  assetSymbol="ETH"
  country="US"
  currency="USD"
>
  <div className="space-y-4">
    <h2>Custom Header</h2>
    <input type="number" placeholder="Enter amount" />
    <select>
      <option>Payment Method 1</option>
      <option>Payment Method 2</option>
    </select>
  </div>
</FundCard>

You can also reuse the existing children from the default implementation and add your own custom content.

import {
  FundCardHeader,
  FundCardAmountInput,
  FundCardAmountInputTypeSwitch,
  FundCardPresetAmountInputList,
  FundCardPaymentMethodDropdown,
  FundCardSubmitButton,
 } from '@coinbase/onchainkit/fund';

<FundCard
  assetSymbol="ETH"
  country="US"
  currency="USD"
>

  <h2>Custom Header instead of the default "FundCardHeader" </h2>
  <FundCardAmountInput />
  <FundCardAmountInputTypeSwitch />
  <FundCardPresetAmountInputList />
  <div>Any custom content</div>
  <FundCardPaymentMethodDropdown />
  <FundCardSubmitButton />
  <div>Any custom content</div>
</FundCard>

Note: If you are using the custom components then you are going to need to access the state of the FundCard component. You can do this by using the useFundContext hook.

const {
    asset,
    currency,
    selectedPaymentMethod,
    setSelectedPaymentMethod,
    fundAmountFiat,
    setFundAmountFiat,
    fundAmountCrypto,
    setFundAmountCrypto,
    selectedInputType,
    setSelectedInputType,
    exchangeRate,
    setExchangeRate,
    exchangeRateLoading,
    setExchangeRateLoading,
    submitButtonState,
    setSubmitButtonState,
    paymentMethods,
    setPaymentMethods,
    paymentMethodsLoading,
    setPaymentMethodsLoading,
    headerText,
    buttonText,
    country,
    subdivision,
    lifecycleStatus,
    updateLifecycleStatus,
    presetAmountInputs,
 } = useFundContext();

​
Props