https://github.com/coinbase/onchain-commerce-template
https://github.com/coinbase/onchain-commerce-template
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/coinbase/onchain-commerce-template
- Owner: coinbase
- License: mit
- Created: 2024-10-10T17:06:23.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-14T00:02:40.000Z (about 1 year ago)
- Last Synced: 2025-03-31T15:19:07.072Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://onchain-commerce-template.vercel.app
- Size: 6.59 MB
- Stars: 37
- Watchers: 4
- Forks: 71
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Onchain Commerce Template
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! ⛵️
## 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"
```
## 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
```sh
# Install bun in case you don't have it
bun curl -fsSL | bash
# Install packages
bun i
# Run Next app
bun run dev
```
## Resources
- [OnchainKit documentation](https://onchainkit.xyz)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details