We're trying to integrate Tolstoy Shoppable Videos onto our Headless Shopify Hydrogen site. I have a component to handle this, however, the add-to-cart is not working so I need to build the custom logic. From my understanding, and testing, it doesn't look like I can use the standard fetch('/cart/add.js') and would need to utilise the CartProvider and <AddToCartButton> then use state and useEffect to trigger the addToCart once I receive the variantId from Tolstoy. The variantId is coming back from Tolstoy in the payload just fine, it's passing that to the AddToCart and triggering the event that I think I'm struggling with. I have tried quite a few variations of this logic but I'm getting nowhere. import { CartProvider } from '~/provider/cart' import { AddToCartButton } from '~/components' import { SectionTolstoyModuleProps } from './TolstoyModule.types' import React, { useEffect, useState } from 'react' interface AddToCartHandlerProps { variantId: string quantity: number onAddToCartSuccess: (payload: any) => void } const AddToCartHandler: React.FC<AddToCartHandlerProps> = ({ variantId, quantity, onAddToCartSuccess }) => { const [isAdding, setIsAdding] = useState(false) useEffect(() => { const handleTolstoyEvent = (event: MessageEvent) => { if (event.data && event.data.eventName === 'tolstoy_add_to_cart') { setIsAdding(true) } } window.addEventListener('message', handleTolstoyEvent) return () => { window.removeEventListener('message', handleTolstoyEvent) } }, []) return ( <CartProvider> {isAdding && ( <AddToCartButton lines={[ { quantity: 1, merchandiseId: variantId, }, ]} variantId={variantId} quantity={quantity} onSubmit={() => { console.log('ON SUBMIT FIRED') setIsAdding(false) onAddToCartSuccess({ variantId }) }} /> )} </CartProvider> ) } export const TolstoyModule: React.FC<SectionTolstoyModuleProps> = ({ tags = [], publishId, productId, tolstoyType, }) => { const tagsString = tags?.join(',') const handleAddToCartSuccess = (payload: any) => { window.tolstoyWidget.postMessage({ ...payload, eventName: 'tolstoy_add_to_cart_success', }) } return ( <div data-tags={tagsString} className={`tolstoy-${tolstoyType}`} data-publish-id={publishId} data-product-id={productId}> <AddToCartHandler variantId={productId} quantity={1} onAddToCartSuccess={handleAddToCartSuccess} /> </div> ) } Any help is much appreciated.