Introducing <FundCard/>
January 27, 2025
A universal need within onchain applications is bringing money onchain. This means every onchain builder needs a simple-to-implement, low-fee, high conversion onramping solution. Traditionally, providing a seamless onramping experience requires a full stack integration and can take hours (if not days) to be production ready. In the evolving payments landscape, this simply isn’t an efficient model.
Today, Coinbase is excited to announce the launch of FundCard, a simple React component that enables self-custody app developers to provide seamless fiat-to-crypto onramping for their users with just a few lines of code. With the FundCard component, users can easily onramp funds from a bank account or debit card via their Coinbase account. No Coinbase account? U.S. guest users can make limited Onramp purchases using a debit card.
Build a custom FundCard in the OnchainKit playground
The FundCard component provides a complete fiat-to-crypto onramp experience, powered by Coinbase Onramp’s One-click-buy. It includes:
Amount input with fiat/crypto switching
Smart handling of payment method availability (based on country and subdivision)
Payment method selection (Coinbase, Apple Pay, debit card)
Automatic exchange rate updates
Getting started
Head to the FundCard docs to see how you can customize this component for your application’s needs.
1. Starting a new project? We recommend creating a new OnchainKit app, which automatically sets everything up for you. To create a new project, run:
npm create onchain@latest
If you already have a project, install OnchainKit inside:
npm install @coinbase/onchainkit
2. Get your Client API Key from Coinbase Developer Platform and add it to a .env file in your project:
NEXT_PUBLIC_ONCHAINKIT_API_KEY=YOUR_PUBLIC_API_KEY
NEXT_PUBLIC_CDP_PROJECT_ID=YOUR_CDP_PROJECT_ID
3. 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>
4. Drop in the <FundCard /> component and customize your preset asset, amounts, currency, and more.
import { FundCard } from '@coinbase/onchainkit/fund';
<FundCard
assetSymbol="ETH"
country="US"
currency="USD"
/>;
Need help integrating? Have feedback?
Drop us a message in Discord to get help with FundCard. Tweet about your FundCard integration and tag us @CoinbaseDev and @OnchainKit for a chance to be featured in our community spotlights!
