`<Buy />`

The Buy components provide a comprehensive interface for users to purchase Tokens.

The Buy component supports token swaps from USDC and ETH by default with the option to provide an additional token of choice using the fromToken prop. In addition, users are able to purchase tokens using their Coinbase account, Apple Pay, or debit card.

Before using, ensure you've completed all Getting Started steps.

Usage

Example using @coinbase/onchainkit/buy.

import { Buy } from '@coinbase/onchainkit/buy'; 
import type { Token } from '@coinbase/onchainkit/token';
 
export default function BuyComponents() { 
  const degenToken: Token = {
    name: 'DEGEN',
    address: '0x4ed4e862860bed51a9570b96d89af5e1b0efefed',
    symbol: 'DEGEN',
    decimals: 18,
    image:
    'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/3b/bf/3bbf118b5e6dc2f9e7fc607a6e7526647b4ba8f0bea87125f971446d57b296d2-MDNmNjY0MmEtNGFiZi00N2I0LWIwMTItMDUyMzg2ZDZhMWNm',
    chainId: 8453,
  };
 
  return ( 
    <Buy toToken={degenToken} /> 
  ) 
}

Sponsor gas with Paymaster

To sponsor swap transactions for your users, toggle the Paymaster using the isSponsored prop.

By default, this will use the Coinbase Developer Platform Paymaster.

You can configure sponsorship settings on the Paymaster page. For security reasons, we recommend setting up a contract allowlist in the Portal. Without a contract allowlist defined, your Paymaster will only be able to sponsor up to $1.

The contract used in our Swap API is Uniswap's Universal Router, which is deployed on Base at 0x3fC91A3afd70395Cd496C647d5a6CC9D4B2b7FAD.

Note that gas sponsorship will only work for Smart Wallets.

import { Buy } from '@coinbase/onchainkit/buy'; 
import type { Token } from '@coinbase/onchainkit/token';
 
export default function BuyComponents() { 
  const degenToken: Token = {
    name: 'DEGEN',
    address: '0x4ed4e862860bed51a9570b96d89af5e1b0efefed',
    symbol: 'DEGEN',
    decimals: 18,
    image:
    'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/3b/bf/3bbf118b5e6dc2f9e7fc607a6e7526647b4ba8f0bea87125f971446d57b296d2-MDNmNjY0MmEtNGFiZi00N2I0LWIwMTItMDUyMzg2ZDZhMWNm',
    chainId: 8453,
  };
 
  return ( 
    <Buy toToken={degenToken} isSponsored /> 
  ) 
}

Props

BuyReact