---
title: "Coinbase Commerce"
description: "Embed USDC payment and commerce capabilities in a few lines of code, powered by Coinbase Smart Wallet and Coinbase Commerce."
url: "https://vercel.com/templates/next.js/coinbase-commerce"
links:
  repository: "https://github.com/coinbase/onchain-commerce-template"
  demo: "https://onchain-commerce-template.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Coinbase+Commerce&demo-description=Embed+USDC+payment+and+commerce+capabilities+in+a+few+lines+of+code%2C+powered+by+Coinbase+Smart+Wallet+and+Coinbase+Commerce.&demo-url=https%3A%2F%2Fonchain-commerce-template.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F2G5mEAHdpCO8Edn36JdFGP%2F1796757314d1516277aab70175be26bc%2Fonchainkit.png&project-name=Coinbase+Commerce&repository-name=coinbase-commerce&repository-url=https%3A%2F%2Fgithub.com%2Fcoinbase%2Fonchain-commerce-template&from=templates&skippable-integrations=1&env=NEXT_PUBLIC_COINBASE_COMMERCE_API_KEY%2CNEXT_PUBLIC_ONCHAINKIT_API_KEY&envDescription=Add+your+Coinbase+Commerce+and+OnchainKit+API+keys.&envLink=https%3A%2F%2Fgithub.com%2Fcoinbase%2Fonchain-commerce-template%3Ftab%3Dreadme-ov-file%23setup"
---

# Coinbase Commerce

Embed USDC payment and commerce capabilities in a few lines of code, powered by Coinbase Smart Wallet and Coinbase Commerce.

# Onchain Commerce Template

<img width="1200" alt="Thumbnail (1)" src="https://github.com/user-attachments/assets/e1f513ea-d1ac-4baf-908e-35b0456d5565">

An Onchain Commerce Template built with [OnchainKit](https://onchainkit.xyz), and ready to be deployed to Vercel.

Play with it live on https://onchain-commerce-template.vercel.app/

Have fun! ⛵️

<br />

## Setup

To ensure all components work seamlessly, set the following environment variables in your `.env` file using `.local.env.example` as a reference.

You can find the API key on the [Coinbase Developer Portal's OnchainKit page](https://portal.cdp.coinbase.com/products/onchainkit). If you don't have an account, you will need to create one. 

You can find your Coinbase Commerce API key on [Coinbase Commerce](https://beta.commerce.coinbase.com/). If you don't have an account, you will need to create one. 

```sh
# See https://portal.cdp.coinbase.com/products/onchainkit
NEXT_PUBLIC_ONCHAINKIT_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM"

# See https://beta.commerce.coinbase.com/
COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE"
```
<br />

## Enabling checkout

By default, the checkout functionality is disabled to prevent transactions in non-production environments. To enable the checkout flow for local development, you need to uncomment the code found in the `OnchainStoreCart.tsx` component, along with the imports at the top of the file.

You can also remove the `OnchainStoreModal` component and logic as well as the `MockCheckoutButton` as these were created for demo purposes only. 

Next, you'll want to replace `products` in the `OnchainStoreProvider` with your own product items. 


>This template showcases a multi-product checkout implementation of our `Checkout` component using the `chargeHandler` approach. You can read more about this implementation in the Advanced Usage section of our `Checkout` component docs here: https://onchainkit.xyz/checkout/checkout


<br />

## Running locally



```sh
# Install bun in case you don't have it
bun curl -fsSL <https://bun.sh/install> | bash

# Install packages
bun i

# Run Next app
bun run dev
```
<br />

## Resources

- [OnchainKit documentation](https://onchainkit.xyz)

<br />

## License

This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/coinbase/onchain-commerce-template/tree/main/LICENSE.md) file for details

## Related Templates

### [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce)

Starter kit for high-performance commerce with Shopify.

### [Your Next Store — Commerce with Next.js and Stripe](https://vercel.com/templates/next.js/yournextstore)

Your Next Store is a modern, ultra-fast commerce storefront with Stripe as the backend, using shadcn UI components.

### [Coinbase Onchain](https://vercel.com/templates/next.js/coinbase-onchain)

Build on Base with OnchainKit. Includes wallet connection, transaction flows, and onchain data fetching.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.