Skip to content
Docs

<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)

Prerequisites

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

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}
/>;

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>
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

Related Components