Effortlessly accept USDC payments with Commerce + OnchainKit’s Checkout component. Learn more about OnchainKit here. Our all-in-one solution simplifies payment processing for merchants and developers, removing complex integrations, high fees, and onboarding friction. Whether you’re selling goods, services, NFTs, or in-game items, this tool is for you.

​
Features

  • Plug-and-Play Integration: Add our Checkout button with just a few lines of code. No backend required.
  • Seamless Onboarding: Support Passkey wallets to eliminate onboarding drop-offs.
  • Real-time Merchant Tooling: Get instant payment tracking, order attribution, and reporting.

​
Quick Start

  • Before using the Checkout component, ensure you’ve completed all Getting Started steps.
  • If you’re starting a new project, we recommend using Wagmi to scaffold your project following our Getting Started steps.
  • If you’re adding the component to an existing project, simply install OnchainKit (npm install @coinbase/onchainkit@latest). Wrap the <OnchainKitProvider /> around your app following steps in Getting Started.

​
Getting Started

1. Sign up for a Coinbase Commerce account Head to Coinbase Commerce and sign up. This is where you’ll manage transactions, view reports, and configure payments. 2. Set Your Deposit Address Enter any EVM-compatible wallet address or create a new wallet to receive payments. Optional: Apply for a Coinbase Business account to offramp to a business bank account. This process can take up to two weeks.

​
Simple Integrations

Want to sell something with a set price? Just embed the Checkout button. No backend required! Examples:
  • Selling credits or access to your product (e.g. Warps).
  • Merchants selling a limited set of goods (e.g. a hoodie).
  • Game developers selling fixed in-game items (e.g. a skin).
1. Create a product and copy the productId In the Coinbase Commerce dashboard, create a new product and copy the productId. 2. Import the OnchainKit component Copy and paste the Checkout component code into your app or site: 
import { Checkout, CheckoutButton, CheckoutStatus } from '@coinbase/onchainkit/checkout';

<Checkout productId='my-product-id' >
    <CheckoutButton coinbaseBranded/>
    <CheckoutStatus />
</Checkout>
That’s it! Starting selling with just a few lines of code.

​
Dynamic Integrations

For variable prices or complex payment flows, connect to our backend to create charges on the fly. Examples:
  • Custom carts: Allow users to choose and pay for different quantities of items.
  • Game spins: Sell a variable number of in-game spins based on user preference.
  • Services: Charge based on custom inputs like time or scope.
1. Create the Charge in Your Backend Here’s a simple backend example to create a charge: 
    const url = 'https://api.commerce.coinbase.com/charges';

    const metadata = {
       myCustomField: 'myCustomValue'
    }
    async function createCharge(amount, metadata) {
      const requestBody = {
        local_price: {
          amount, // Order price
          currency: 'USDC'
        },
        pricing_type: 'fixed_price',
        metadata, // Optional: Attach metadata like order ID or customer details
      };

      const payload = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CC-Api-Key': process.env.API_KEY, // Your secret API key
        },
        body: JSON.stringify(requestBody),
      };

      const response = await fetch(url, payload);
      return await response.json(); // Returns charge details
    }
2. Add the Checkout Component After creating the charge, embed the Checkout component to handle the payment process: 
const { chargeId } = useParams();

<Checkout
  apiKey={process.env.NEXT_PUBLIC_API_KEY}
  chargeId={chargeId}
  onSuccess={() => navigate(`/payment-processing/${chargeId}`)}
/>
3. Customize for Your Use Case
  • Adjust the price or product info in the backend.
  • Pass additional details like customer ID or order number in the metadata field to track transactions.
Use this when you need to process more complex transactions, like a shopping cart or custom services.

​
That’s It!

Whether you’re adding a simple fixed-price button or integrating with your backend for more complex use cases, OnchainKit’s Checkout component makes accepting USDC payments quick and easy.