Accept Crypto Payments with Coinbase Commerce & OnchainKit

Introduction

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 article, you will learn how to quickly integrate Coinbase Commerce and OnchainKit to accept crypto payments for products or services in your application.

So, if you want to accept crypto payments using Coinbase Commerce and OnchainKit, you will need two main things.

1. Coinbase Commerce Account

You have to visit the COINBASE COMMERCE website and create an account, which allows you to accept cryptocurrency payments globally.

Now, you have to click on the Products button and create a new product, add its name, price, and description. Here you can see the Product ID and checkout link, which you have to use inside this project.

2. Coinbase Developer Platform (CDP) Account

You have to visit the Coinbase Developer Platform website; It provides the tools and API Key that you need for the integration. You have to copy the API key and paste it into the .env file.

Steps to Set Up a Crypto Payment App with OnchainKit & Coinbase Commerce

Step 1. Clone the OnchainKit App Template

The command initializes a new OnchainKit-based project named my-commerce-app.

npx create-onchain my-commerce-app

Step 2. Install Dependencies.

The npm install command downloads and installs all the project dependencies listed in the package.json file. It creates a node_modules folder that contains all the required libraries and packages needed for your app to run.

npm install

Note. After installing the dependencies , you will get the directory structure like this.

Step 3. Install Coinbase Commerce SDK.

This command installs the official Coinbase Commerce SDK for Node.js. It lets you create and manage crypto payment charges, useful for backend integration with the Coinbase Commerce API.

npm install coinbase-commerce-node

Step 4. Add Your API Key.

COINBASE_COMMERCE_API_KEY=your_api_key_here

You have to add the API key that you generated from CDP(Coinbase Developer Platform) inside your .env file.

Step 5. Create a Checkout Button Component

You have to add a new folder 'components' in which you have to create a new file CoinbaseCheckoutButton.tsk.

In this, the CoinbaseCheckoutButton component is a React button that opens a Coinbase Commerce checkout URL in a new browser tab when clicked. It uses Tailwind CSS for styling with a gradient background and hover effects. You can use this button in your app to let users pay with crypto via Coinbase. Just replace the checkoutUrl with your own Coinbase Commerce checkout link.

// components/CoinbaseCheckoutButton.tsx
import React from 'react';

const CoinbaseCheckoutButton = () => {
  const handleClick = () => {
    // Replace this with your actual Coinbase Commerce payment URL
    const checkoutUrl = 'https://commerce.coinbase.com/checkout/91cd6dc7-8baf-4351-bf7e-c0e725291fd2';
    window.open(checkoutUrl, '_blank');
  };

  return (
    <button
      onClick={handleClick}
      className="px-4 py-2 bg-gradient-to-r from-purple-500 to-blue-500 text-white font-semibold rounded-md shadow-md hover:opacity-90 transition"
    >
      Pay with Crypto (Coinbase)
    </button>
  );
};

export default CoinbaseCheckoutButton;

Step 6. Display a Crypto Payment Button on the Homepage.

This page.tsx file defines the main page of your Next.js app. It imports and displays the CoinbaseCheckoutButton component with a simple heading. The layout is centered using Tailwind CSS for a clean, user-friendly design.

// app/page.tsx
'use client';

import React from 'react';
import CoinbaseCheckoutButton from '../components/CoinbaseCheckoutButton';

export default function Home() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen p-8">
      <h1 className="text-3xl font-bold mb-4">Buy Our Product</h1>
      <CoinbaseCheckoutButton />
    </main>
  );
}

Step 7. Add OnchainKit to Your App.

This code adds your app with OnchainKitProvider to enable Coinbase wallet features. It uses your API key, sets the Base chain, and supports light/dark mode automatically.

'use client';

import { base } from 'wagmi/chains';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import type { ReactNode } from 'react';

export function Providers(props: { children: ReactNode }) {
  return (
    <OnchainKitProvider
      apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
          chain={base}
          config={{ appearance: { 
            mode: 'auto',
        }
      }}
    >
      {props.children}
    </OnchainKitProvider>
  );
}

Step 8. Test & Deploy

Now you have to run the development server.

npm run dev

Then you have to visit http://localhost:3000 to confirm that the payment button works for your product or service.

Now you can see the output, where we have an option to buy a product using crypto. After clicking the 'Pay with Crypto' button, you will be redirected to a payment page where you can pay using wallets like Coinbase, Smart Wallet, or MetaMask.

Conclusion

Integrating crypto payments into your app or website is now simple and seamless thanks to Coinbase Commerce and OnchainKit. With minimal setup, you can offer your users a secure and flexible way to pay using popular wallets like MetaMask and Coinbase Wallet. Whether you're selling products, services, or digital goods, accepting cryptocurrency helps you reach a broader audience and stay ahead in the evolving digital economy.