The Onchain Commerce Template is a Next.js storefront starter built on OnchainKit that ships a multi-product crypto checkout flow and is ready to deploy to Vercel.
What is the Onchain Commerce Template?
It is an open-source Next.js storefront template that combines the OnchainKit component library with Coinbase Commerce to produce a working onchain shop with a cart and a multi-product checkout. You supply two credentials — an OnchainKit API key and a Coinbase Commerce API key — plus your own product list, and the template renders a browsable store and a charge-based checkout flow. It runs locally with Bun (bun i, bun run dev) and is configured for Vercel deployment. The repository is licensed under MIT and has around 75 stars.
What makes it stand out?
- OnchainKit foundation — the storefront UI is assembled from OnchainKit components, the Coinbase toolkit documented at onchainkit.xyz.
- Multi-product checkout with chargeHandler — the Checkout component handles carts containing several items using the chargeHandler approach described in OnchainKit's advanced usage docs.
- Coinbase Commerce payments — checkout requires a
COINBASE_COMMERCE_API_KEYgenerated from the Coinbase Commerce dashboard at beta.commerce.coinbase.com. - Coinbase Developer Platform key — the storefront needs a
NEXT_PUBLIC_ONCHAINKIT_API_KEYfrom the OnchainKit page of the Coinbase Developer Portal. - Checkout disabled by default — transactions are blocked until you uncomment the code and imports inside
OnchainStoreCart.tsx, preventing accidental live charges outside production. - Removable demo components —
OnchainStoreModalandMockCheckoutButtonexist purely for demonstration and can be deleted along with their logic. - Bring your own catalog — product data lives in
OnchainStoreProviderand is replaced with your own items. - Bun + Vercel workflow — installs and runs through Bun and targets Vercel hosting.
Who should use the Onchain Commerce Template?
- Crypto-native builders: launch a shop that accepts onchain payments without wiring a checkout from scratch.
- Next.js developers: study a concrete multi-product Checkout integration using the chargeHandler pattern.
- Hackathon and demo teams: start from a live, deployable storefront instead of an empty repo.
- Merchants testing Coinbase Commerce: validate charge flows in a local environment before going live.
What can you do with the Onchain Commerce Template?
- Launch an onchain storefront: swap in your own products and deploy to Vercel with the two API keys configured.
- Prototype multi-item carts: test how the Checkout component behaves when a cart holds several products rather than one.
- Evaluate Coinbase Commerce charges: run checkout locally once the demo-disabled code is uncommented.
- Learn OnchainKit: read working component usage instead of isolated documentation snippets.
How does it work?
- Copy
.local.env.exampleto.envand fill in the OnchainKit and Coinbase Commerce API keys. - Install dependencies with Bun and start the Next.js dev server.
- Uncomment the checkout code in
OnchainStoreCart.tsx, remove the mock components, and replace the product list inOnchainStoreProvider.
FAQ
Is the Onchain Commerce Template free?
Yes. The repository is released under the MIT License, so you can use, modify, and redistribute it, including commercially. You still need free Coinbase Developer Platform and Coinbase Commerce accounts to obtain the API keys the template depends on.
Does checkout work out of the box?
No. Checkout is intentionally disabled to prevent transactions in non-production environments. To enable it during local development you must uncomment the code and imports in OnchainStoreCart.tsx, then remove the OnchainStoreModal and MockCheckoutButton demo pieces.
What API keys does it require?
Two: NEXT_PUBLIC_ONCHAINKIT_API_KEY from the Coinbase Developer Portal's OnchainKit page, and COINBASE_COMMERCE_API_KEY from Coinbase Commerce. Both are stored in a .env file created from the provided .local.env.example reference.
What is OnchainKit?
OnchainKit is Coinbase's component library for building onchain apps, documented at onchainkit.xyz. This template uses it for the storefront UI, and its documentation covers the Checkout component and the chargeHandler approach this template demonstrates.
