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.
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"
/>
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
Responses are generated using AI and may contain mistakes.