Accept Crypto Payments with Coinbase Commerce & OnchainKit

Learn how to integrate Coinbase Commerce payments into your application using OnchainKit to eliminate traditional fees and expand your global reach.

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.

What You’ll Build

By the end of this guide, you’ll have a fully functional checkout flow that:

• Displays your product with an attractive interface
• Connects users’ wallets securely
• Processes crypto payments through Coinbase Commerce
• Provides real-time payment status updates

Eliminate Fees

Remove traditional credit card processing fees and chargebacks

Global Reach

Accept payments from crypto users worldwide, 24/7

Fast Settlement

Receive payments instantly with blockchain confirmation

Easy Integration

Get started in minutes with OnchainKit components

Prerequisites

Before you begin, ensure you have the following accounts and tools set up:

1. Coinbase Commerce Account

   Sign up for Coinbase Commerce to accept cryptocurrency payments globally.

   You’ll need this to create products and manage payments.

2. Coinbase Developer Platform Account

   Create a CDP account to access OnchainKit APIs and services.

   CDP provides the infrastructure for seamless crypto integrations.

3. Reown (WalletConnect) Account

   Set up Reown (formerly WalletConnect) for secure wallet connections across devices and platforms.

Implementation Guide

1. Create Your Product in Coinbase Commerce

   First, you’ll create a product in Coinbase Commerce that represents what you’re selling.

   1. Log in to your Coinbase Commerce dashboard
   2. Navigate to the product creation page
   3. Fill in your product details:
      • Product name (clear and descriptive)
      • Description (what customers are buying)
      • Price (in your preferred currency)
   4. Click Create product
   5. Once created, select View product and copy the UUID from the URL

   

   Save the product UUID immediately - you’ll need it as an environment variable. The UUID appears in the product URL after creation.

2. Set Up Your Development Environment

   Clone the official OnchainKit app template to get started quickly with best practices already configured.

   Bun

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

   Verify the installation completed successfully by running ls to see the project files.

3. Configure Environment Variables

   Create your environment configuration with the required API keys and identifiers.

   In your project root, create or update your .env.local file:

   .env.local

   # Coinbase Commerce Product ID (from Step 1)
   NEXT_PUBLIC_PRODUCT_ID=your_product_uuid_here
   
   # Coinbase Developer Platform API Key
   NEXT_PUBLIC_ONCHAINKIT_API_KEY=your_cdp_api_key_here
   
   # Reown (WalletConnect) Project ID
   NEXT_PUBLIC_WC_PROJECT_ID=your_walletconnect_project_id_here
   
   # Disable Next.js telemetry (optional)
   NEXT_TELEMETRY_DISABLED=1
   

   Never commit API keys to version control. Add .env.local to your .gitignore file.

   Use descriptive variable names and keep them organized with comments for team members.

4. Configure Smart Wallet Integration

   Set up Wagmi to prioritize smart wallets for better user experience.

   Update your Wagmi configuration file (typically src/app/wagmi.ts):

   src/app/wagmi.ts

   // ... existing Wagmi configuration
   
   // After your useMemo() hook, add:
   coinbaseWallet.preference = 'smartWalletOnly';
   

   This configuration ensures users connect with smart wallets, which provide enhanced security and better UX.

5. Set Up OnchainKit Provider

   Configure the OnchainKit provider to connect with Base network and your CDP API key.

   Update src/app/components/OnchainProviders.tsx:

   src/app/components/OnchainProviders.tsx

   '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;
   

   Update your configuration file to handle environment variables properly:

   Config.ts

   export const NEXT_PUBLIC_URL =
     process.env.NODE_ENV === 'development'
       ? 'http://localhost:3000'
       : 'https://your-app-domain.vercel.app'; // Replace with your actual domain
   
   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;
   

   Using environment variables makes your app more secure and easier to deploy across different environments.

6. Implement the Payment Interface

   Create an attractive payment interface that showcases your product and handles the checkout flow.

   Update your main page (src/app/page.tsx):

   src/app/page.tsx

   import { Checkout, CheckoutButton, CheckoutStatus } from '@coinbase/onchainkit/checkout';
   import Image from 'next/image';
   
   const productId = process.env.NEXT_PUBLIC_PRODUCT_ID;
   
   export default function PaymentPage() {
     return (
       <main className="flex min-h-screen flex-col items-center justify-center p-4">
         <div className="max-w-2xl w-full">
           {/* Product showcase section */}
           <section className="flex w-full flex-col items-center justify-center gap-6 rounded-xl bg-gradient-to-b from-blue-50 to-white p-8 shadow-lg">
             
             {/* Product image container */}
             <div className="flex h-[400px] w-[400px] max-w-full items-center justify-center rounded-xl bg-gradient-to-br from-gray-900 to-gray-800 shadow-xl">
               <div className="rounded-lg bg-white p-4 shadow-inner">
                 <Image 
                   src="/your-product-image.jpg" 
                   width={320} 
                   height={320} 
                   alt="Product image" 
                   className="rounded-lg"
                 />
               </div>
             </div>
   
             {/* Product information */}
             <div className="text-center space-y-2">
               <h1 className="text-2xl font-bold text-gray-900">Your Amazing Product</h1>
               <p className="text-gray-600">High-quality product with crypto payment support</p>
             </div>
   
             {/* Payment section */}
             <div className="w-full max-w-md">
               {address ? (
                 <Checkout productId={productId}>
                   <CheckoutButton 
                     coinbaseBranded={true}
                     className="w-full"
                   />
                   <CheckoutStatus />
                 </Checkout>
               ) : (
                 <WalletWrapper 
                   className="w-full" 
                   text="Connect wallet to purchase" 
                 />
               )}
             </div>
           </section>
         </div>
       </main>
     );
   }
   

   Make sure to add your product image to the public folder and update the image path accordingly.

   The conditional rendering prevents errors when no wallet is connected, providing a smooth user experience.

7. Test and Deploy Your Application

   Test your payment flow locally before deploying to production.

   Local Testing:

   Bun

   bun run dev
   

   1. Visit http://localhost:3000
   2. Connect your wallet using the wallet connection button
   3. Test the checkout flow with a small amount
   4. Verify payment status updates correctly

   

   Production Deployment:

   1. Update your configuration with production URLs
   2. Deploy to your preferred platform (Vercel, Netlify, etc.)
   3. Test the live application with real transactions
   4. Monitor payment confirmations in your Coinbase Commerce dashboard

   Start with testnet transactions to ensure everything works before going live with mainnet.

Troubleshooting

Wallet connection issues

Common solutions:

• Ensure your WalletConnect project ID is correctly configured
• Check that your wallet extension is updated to the latest version
• Try connecting with a different wallet provider
• Clear your browser cache and cookies

Payment not processing

Check these items:

• Verify your product ID matches exactly with Coinbase Commerce
• Ensure your CDP API key has the necessary permissions
• Confirm the user has sufficient funds for the transaction
• Check network connectivity and blockchain status

Environment variable errors

Configuration checklist:

• All required environment variables are set in .env.local
• No extra spaces or quotes around variable values
• File is in the project root directory
• Restart your development server after making changes

Next Steps

Now that you have crypto payments working, consider these enhancements:

Add Multiple Products

Scale your setup to handle multiple products and services

Implement Webhooks

Set up payment confirmation webhooks for automated processing

Analytics Dashboard

Track payment metrics and customer behavior

Multi-chain Support

Accept payments on multiple blockchain networks

Conclusion

Congratulations! You’ve successfully integrated Coinbase Commerce and OnchainKit into your application. Your users can now make crypto payments, giving you access to:

✅ Zero traditional payment fees and chargebacks
✅ Global customer reach with 24/7 payment processing
✅ Instant settlement with blockchain confirmation
✅ Enhanced security through smart wallet integration

Ready to scale? Consider expanding to multiple products, implementing automated fulfillment, or adding analytics to track your crypto payment performance.

Your application now supports the future of global payments. Happy building on Base!