diff --git a/README.md b/README.md index 3bda0dc..7ddc233 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,10 @@ 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/ + +Have fun! ⛵️ +
## Setup @@ -12,7 +16,7 @@ To ensure all components work seamlessly, set the following environment variable 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 after creating an account on [Coinbase Commerce](https://beta.commerce.coinbase.com/). 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 @@ -23,7 +27,19 @@ NEXT_PUBLIC_COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE" ```
-## Locally run +## 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 diff --git a/src/components/OnchainStoreCart.tsx b/src/components/OnchainStoreCart.tsx index b3ee383..cb924a4 100644 --- a/src/components/OnchainStoreCart.tsx +++ b/src/components/OnchainStoreCart.tsx @@ -16,8 +16,6 @@ export default function OnchainStoreCart({ }: OnchainStoreCartReact) { const { quantities, products } = useOnchainStoreContext(); - // const { createCharge } = useCreateCharge(); - const totalSum = useMemo(() => { return ( products?.reduce( @@ -27,6 +25,10 @@ export default function OnchainStoreCart({ ); }, [products, quantities]); + // TODO: comment back in to enable checkout flow + + // const { createCharge } = useCreateCharge(); + // const handleStatusChange = useCallback((status: LifecycleStatus) => { // console.log('onStatus', status); // }, []); @@ -77,7 +79,7 @@ export default function OnchainStoreCart({ TOTAL {totalSum.toFixed(2)} USDC
- {/* TODO: comment back in Checkout component in live environment */} + {/* TODO: comment back in to enable checkout flow */} {/*