Updated cart ready event to return event instead of element

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}
       />

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) => {