> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cdp.coinbase.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Onchain commerce shop

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

export const LearnButtons = ({primary, secondaries}) => {
  return <div className="flex flex-row gap-2 not-prose">
      {primary && <a href={primary.href} className="flex items-center justify-center gap-2 bg-primary-dark dark:bg-primary-light dark:text-gray-900 text-white rounded-full px-4 py-1 hover:opacity-[0.9]">
          <Icon icon={primary.icon} color="white" iconType="solid" />
          <span className="font-semibold">{primary.title}</span>
        </a>}
      {secondaries && secondaries.map(secondary => <a href={secondary.href} className="flex items-center justify-center gap-2 bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 text-gray-800 dark:text-white rounded-full px-4 py-1 hover:opacity-[0.9]">
          <Icon icon={secondary.icon} color="currentColor" iconType="solid" />
          <span className="font-semibold">{secondary.title}</span>
        </a>)}
    </div>;
};

export const Tags = ({tags, className}) => {
  if (!tags || !Array.isArray(tags)) {
    return null;
  }
  return <div className={`mt-5 mb-5 flex flex-row flex-wrap gap-2 ${className}`}>
      {tags.map((tag, index) => <span key={index} className="text-sm text-[#733E00] dark:text-yellow-500 bg-[#FFFCF1] dark:bg-yellow-500/10 font-semibold px-2 py-1 rounded-lg">{tag}</span>)}
    </div>;
};

<LearnButtons
  primary={{ title: 'View demo', href: 'https://onchain-commerce-template.vercel.app/', icon: "arrow-up-right" }}
  secondaries={[
  { title: 'GitHub', href: 'https://github.com/coinbase/onchain-commerce-template', icon: "github" }
]}
/>

<Tags tags={['Payments', 'Fintech', 'OnchainKit']} />

<Frame>
  <video controls className="w-full aspect-video" src="https://mintlify-assets.b-cdn.net/onchain-commerce-shop.mp4" />
</Frame>

## Onchain Commerce Template

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

Play with it live on [https://onchain-commerce-template.vercel.app/](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 lines wrap theme={null}
# See https://portal.cdp.coinbase.com/products/onchainkit
NEXT_PUBLIC_ONCHAINKIT_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM"

# See https://beta.commerce.coinbase.com/
NEXT_PUBLIC_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 certain lines of code 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.

After these changes, the actual OnchainKit checkout flow will be functional in your local environment.

### Running locally

```sh lines wrap theme={null}
# 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
```

### Resources

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

### License

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