Onchain Commerce Template

An Onchain Commerce Template built with OnchainKit, and ready to be deployed to Vercel.

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

Have fun! ⛵️

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. If you don't have an account, you will need to create one.

You can find your Coinbase Commerce API key on Coinbase Commerce. If you don't have an account, you will need to create one.

1
# See https://portal.cdp.coinbase.com/products/onchainkit
2
NEXT_PUBLIC_ONCHAINKIT_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM"
3

4
# See https://beta.commerce.coinbase.com/
5
COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE"

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

Running locally

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

4
# Install packages
5
bun i
6

7
# Run Next app
8
bun run dev

Resources

• OnchainKit documentation

License

This project is licensed under the MIT License - see the LICENSE.md file for details