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.