Merge pull request #5 from coinbase/alissa.crane/charge

chore: set default charge amount

.env.local.default

@@ -1,8 +1,8 @@
-# ~~~
+NEXT_PUBLIC_COINBASE_COMMERCE_API_KEY="COMMERCE_API_KEY_1234567890"
+
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=GA_TEST_1234567890
 
 # See https://www.coinbase.com/developer-platform/products/base-node
 NEXT_PUBLIC_CDP_API_KEY="CDP_API_KEY_1234567890"
 
-# ~~~
 NEXT_PUBLIC_ENVIRONMENT=localhost

.env.test

@@ -1,8 +1,8 @@
-# ~~~
+NEXT_PUBLIC_COINBASE_COMMERCE_API_KEY="COMMERCE_API_KEY_1234567890"
+
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=GA_TEST_1234567890
 
 # See https://www.coinbase.com/developer-platform/products/base-node
 NEXT_PUBLIC_CDP_API_KEY="CDP_API_KEY_1234567890"
 
-# ~~~
 NEXT_PUBLIC_ENVIRONMENT=localhost

src/components/OnchainStoreCart.tsx

@@ -33,12 +33,14 @@ export default function OnchainStoreCart() {
       description,
       pricing_type: 'fixed_price',
       local_price: {
-        amount: totalSum.toString(),
+        // NOTE: set to 0 for simulation purposes,
+        // replace with totalSum.toString() in real app
+        amount: '0',
         currency: 'USD',
       },
     };
     return createCharge(chargeDetails);
-  }, [createCharge, quantities, totalSum]);
+  }, [createCharge, quantities]);
 
   return (
     <div className="-mx-[50vw] fixed right-1/2 bottom-0 left-1/2 w-screen border-gray-200 border-t bg-white">
@@ -56,7 +58,8 @@ export default function OnchainStoreCart() {
                 <PayButton
                   coinbaseBranded={true}
                   text="Pay with Crypto"
-                  disabled={!totalSum}
+                  // NOTE: comment back in to disable 0 amount in real app
+                  // disabled={!totalSum}
                 />
               </Pay>
             </div>

src/hooks/useCreateCharge.ts

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { COINBASE_COMMERCE_API_KEY } from 'src/config';
-
-const COMMERCE_API_URL = 'https://api.commerce.coinbase.com';
+import { COMMERCE_API_URL } from 'src/links';
 
 type Price = {
   amount: string;
@@ -16,7 +15,6 @@ export type ChargeDetails = {
 
 const useCreateCharge = () => {
   const createCharge = useCallback(async (chargeDetails: ChargeDetails) => {
-    console.log({ chargeDetails });
     try {
       const res = await fetch(`${COMMERCE_API_URL}/charges`, {
         method: 'POST',

src/links.ts

@@ -1,3 +1,4 @@
+export const COMMERCE_API_URL = 'https://api.commerce.coinbase.com';
 export const DISCORD_LINK = 'https://discord.gg/wTJ7besU';
 export const FIGMA_LINK =
   'https://www.figma.com/community/file/1370194397345450683/onchainkit';