Skip to content

Commit

Permalink
Merge pull request #14 from coinbase/alissa.crane/docs
Browse files Browse the repository at this point in the history
chore: update docs
  • Loading branch information
abcrane123 authored Oct 24, 2024
2 parents eb968b8 + 8e83a95 commit 8f54b90
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 5 deletions.
20 changes: 18 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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! ⛵️

<br />

## Setup
Expand All @@ -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
Expand All @@ -23,7 +27,19 @@ NEXT_PUBLIC_COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE"
```
<br />

## 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.

<br />

## Running locally



Expand Down
8 changes: 5 additions & 3 deletions src/components/OnchainStoreCart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ export default function OnchainStoreCart({
}: OnchainStoreCartReact) {
const { quantities, products } = useOnchainStoreContext();

// const { createCharge } = useCreateCharge();

const totalSum = useMemo(() => {
return (
products?.reduce(
Expand All @@ -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);
// }, []);
Expand Down Expand Up @@ -77,7 +79,7 @@ export default function OnchainStoreCart({
TOTAL {totalSum.toFixed(2)} USDC
</h2>
<div className="w-64">
{/* TODO: comment back in Checkout component in live environment */}
{/* TODO: comment back in to enable checkout flow */}
{/* <Checkout
key={key}
onStatus={handleStatusChange}
Expand Down

0 comments on commit 8f54b90

Please sign in to comment.