<FundCard /> · OnchainKit

The <FundCard /> component provides a complete fiat onramp experience with amount input, currency switching, and payment method selection.

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

• FundCardPropsReact

Related Components

• <FundButton />