diff --git a/examples/hooks/10-Cart.js b/examples/hooks/10-Cart.js
index dd62f8f..7e9e986 100644
--- a/examples/hooks/10-Cart.js
+++ b/examples/hooks/10-Cart.js
@@ -17,15 +17,23 @@ const ProductPage = ({options, productId}) => {
   const cartElement = useCartElement();
   const cartElementState = useCartElementState();
 
-  const handleCheckout = async () => {
+  const handleReady = (event) => {
+    console.log(event?.lineItems?.count);
+  };
+
+  const handleChange = (event) => {
+    console.log(event?.lineItems?.count);
+  };
+
+  const handleCheckout = (event) => {
+    console.log(event);
     if (!cartElement) return;
-    // Redirect to Checkout page
+    // redirect to Checkout page would go here
     cartElement.cancelCheckout('Error message here');
   };
 
-  const handleLineItemClick = async (event) => {
-    if (!cartElement) return;
-    // Block native link redirect
+  const handleLineItemClick = (event) => {
+    // calling preventDefault blocks native link redirect
     event.preventDefault();
     console.log(event.url);
   };
@@ -50,6 +58,8 @@ const ProductPage = ({options, productId}) => {
       </button>
       <CartElement
         options={options}
+        onReady={handleReady}
+        onChange={handleChange}
         onCheckout={handleCheckout}
         onLineItemClick={handleLineItemClick}
       />
diff --git a/src/components/createElementComponent.tsx b/src/components/createElementComponent.tsx
index 69347c6..27e3b3a 100644
--- a/src/components/createElementComponent.tsx
+++ b/src/components/createElementComponent.tsx
@@ -94,14 +94,19 @@ const createElementComponent = (
         elementRef.current = element;
         element.mount(domNode.current);
         element.on('ready', (event) => {
-          if (type === 'cart' && setCartState) {
+          if (type === 'cart') {
             // we know that elements.on event must be of type StripeCartPayloadEvent if type is 'cart'
             // we need to cast because typescript is not able to infer which overloaded method is used based off param type
-            setCartState(
-              (event as unknown) as stripeJs.StripeCartElementPayloadEvent
-            );
+            if (setCartState) {
+              setCartState(
+                (event as unknown) as stripeJs.StripeCartElementPayloadEvent
+              );
+            }
+            // the cart ready event returns a CartStatePayload instead of the CartElement
+            callOnReady(event);
+          } else {
+            callOnReady(element);
           }
-          callOnReady(element);
         });
 
         element.on('change', (event) => {