Skip to content
Get help

Accept Crypto Payments with Coinbase Commerce & OnchainKit

Accepting crypto payments can help you eliminate traditional credit card fees and avoid costly chargebacks, giving you a faster, more global payment experience. In this guide, you'll learn how to quickly integrate Coinbase Commerce and OnchainKit to accept crypto payments for products or services in your application.

Objectives

By following this guide, you will learn how to:

  • Create or configure a product in Coinbase Commerce
  • Configure your OnchainKit environment
  • Implement a checkout flow for accepting crypto payments
  • Deploy and test your app to confirm the payment flow

Prerequisites

1. Coinbase Commerce Account

Coinbase Commerce allows you to accept cryptocurrency payments globally. Sign up to get started.

2. Coinbase Developer Platform (CDP) Account

Coinbase Developer Platform (CDP) provides the tools and APIs you need for integration.

3. Reown (WalletConnect) Account

Reown (formerly WalletConnect) provides a secure way to connect wallets across different devices and platforms.

Step-by-Step Setup

Step 1: Create a Product in Coinbase Commerce

  1. Log in to your Coinbase Commerce account.
  2. Go to the product creation page.
  3. Add product details (name, description, price).
  4. Click Create product.
  5. Once created, select View product and copy the UUID from the URL.

Create product screenshot

Tip: Store the product UUID as an environment variable in your .env file. This makes it easier to reference safely in your code.

Step 2: Clone the OnchainKit App Template

Use the official OnchainKit app template to bootstrap your project:

Bun
git clone https://github.com/coinbase/onchainkit-app-template.git
cd onchainkit-app-template
bun i

Step 3: Configure Environment Variables

In the project folder, open (or create) your .env file and add:

NEXT_PUBLIC_WC_PROJECT_ID=
NEXT_TELEMETRY_DISABLED=1
NEXT_PUBLIC_ONCHAINKIT_API_KEY=
NEXT_PUBLIC_PRODUCT_ID=

Note:

  • NEXT_PUBLIC_PRODUCT_ID should be set to the UUID from your Coinbase Commerce product.
  • NEXT_PUBLIC_ONCHAINKIT_API_KEY should be your CDP API key.
  • NEXT_PUBLIC_WC_PROJECT_ID is your Reown (WalletConnect) project ID.

Step 4: Configure Wagmi for Smart Wallets

Open your Wagmi configuration file (e.g., src/app/wagmi.ts or similar) and after your useMemo() hook, add:

  // other Wagmi config
+ coinbaseWallet.preference = 'smartWalletOnly';

This ensures Coinbase Wallet only connects to smart wallets.

In src/app/components/OnchainProviders.tsx, set up OnchainKitProvider to use your CDP API key and Base as the chain:

'use client';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import type { ReactNode } from 'react';
import { base } from 'viem/chains';
import { WagmiProvider } from 'wagmi';
import { useWagmiConfig } from '../wagmi';
 
type Props = { children: ReactNode };
const queryClient = new QueryClient();
 
function OnchainProviders({ children }: Props) {
  const wagmiConfig = useWagmiConfig();
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <OnchainKitProvider
          apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
          chain={base}
        >
          <RainbowKitProvider modalSize='compact'>
            {children}
          </RainbowKitProvider>
        </OnchainKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
 
export default OnchainProviders;

Finally, update your Config.ts (or similar config file) to read from environment variables and match your hosted URL:

export const NEXT_PUBLIC_URL =
  process.env.NODE_ENV === 'development'
    ? 'http://localhost:3000'
    : 'https://based-jerseys.vercel.app';
 
export const NEXT_PUBLIC_CDP_API_KEY =
  process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY;
 
export const NEXT_PUBLIC_WC_PROJECT_ID =
  process.env.NEXT_PUBLIC_WC_PROJECT_ID;

Step 5: Implement the Payment Component

  1. Open src/app/page.tsx (or similar entry page).

  2. Import the necessary components:

    import { Checkout, CheckoutButton, CheckoutStatus } from '@coinbase/onchainkit/checkout';
import Image from 'next/image';
 
const productId = process.env.NEXT_PUBLIC_PRODUCT_ID;

  3. Add an image of your product or service in the public folder (e.g., /public/based-jersey-front.jpeg).

  4. Display that image and conditionally render the checkout UI only when a wallet is connected:

    <section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-zinc-100 px-2 py-4 md:grow">
  <div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
    <div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
      <Image src={'/based-jersey-front.jpeg'} width={250} height={250} alt="jersey" />
    </div>
  </div>
  <div className="mt-6">
    {address ? (
      <Checkout productId={productId}>
        <CheckoutButton coinbaseBranded={true} />
        <CheckoutStatus />
      </Checkout>
    ) : (
      <WalletWrapper className="w-[450px] max-w-full" text="Sign in to transact" />
    )}
  </div>
</section>

Step 6: Test & Deploy

  1. Run the development server:
Bun
bun run dev
  1. Visit http://localhost:3000 to confirm that the payment button works for your product or service.
  2. Deploy with your preferred hosting provider (e.g., Vercel).

Final product screenshot

Conclusion

Congratulations! You've successfully integrated Coinbase Commerce and OnchainKit into your application, enabling crypto payments. By providing this option, you can:

  • Eliminate traditional payment fees and chargebacks
  • Expand your audience to crypto users worldwide
  • Easily scale your offerings for more products and services

Happy building and enjoy the benefits of a global, decentralized payment system on Base!