Error 500 in calling Snipcart.api.cart.items.add

Support
#1

I followed the steps here to setup snipcart here

and when I call the JS SDK function below (Snipcart.api.cart.items.add) I got
snipcart.js:1 POST https://app.snipcart.com/api/cart 500

        try {
            Snipcart.api.cart.items.add({
                    id: tileStyle,
                    name: "Tile1",
                    image: imageCropped,
                    price: tilePrice,
                    quantity: quantity,
                    stackable: "always",
                    url: "/products/" + tileStyle
                }).then(function (item) {
                        console.log("addToCart initCheckout");
                        Snipcart.api.theme.cart.open();
                    }
                });
        } catch (error) {
            console.log(error);
        }
#2

@keithlei01 We trigger an event named snipcart.ready on the the global document object when the SDK is ready. We recommend you encapsulate all your API calls or event subscribers in the callback of that event:

document.addEventListener('snipcart.ready', () => {
  // You can safely use window.Snipcart here
  Snipcart.events.on(...);
});