Product validation gets failed

Hi, I have a gatsby site using snipcart.
I have added a code in my product page to get the updated quantity from Snipcart and update the available quantity in real time. Code works fine. But payment stuck on checkout.
Error: “Unable to process the payment”

Snipcart developer log says
"An attempt to create an order with invalid products has been made. Don’t forget you can’t add/update items attributes in the cart dynamically with javascript as it will cause crawling issues. You can read more about this here:"

I am failed to understand this error. As my code does not update anything on items attributes.

  useEffect(() => {
        getProductdata()
    }, []) 

async function getProductdata(){
        setIsLoading(true);
        const secret = `${process.env.GATSBY_SNIP_SECRET}`
        const request = await fetch(`https://app.snipcart.com/api/products/${data.productsCsv.id}`, {
            headers: {
                'Authorization': `Basic ${btoa(secret)}`,
                'Accept': 'application/json'
            },
        }).then((request => request.json()))
          .then(data => setProductData(data))
          .catch(err=>console.log(err))  
          .finally(() => setIsLoading(false))
    }

add to cart button

  <button className="btn bg-green-500 mt-4 snipcart-add-item p-4 rounded text-white"
                            data-item-id={data.productsCsv.id}
                            data-item-price={data.productsCsv.discountedPrice}
                            data-item-url={`https://bownbee.ca/${data.productsCsv.productCategory}/${data.productsCsv.fields.slug}`}
                            data-item-name={data.productsCsv.name}
                            data-item-image={`https://bownbee.ca` + productImage}
                            data-item-custom1-name="size" 
                            data-item-custom1-value={size}
                            data-item-custom1-options={productSizeOptions}
                            data-item-custom1-required="true"
                            data-item-max-quantity={data.productsCsv.stock}
                            data-item-custom3-name="SKU"
                            data-item-custom3-type="readonly"
                            data-item-custom3-value={sku}
                    >
                            Add to cart
                    </button>

The development site is here… where the actual code is running
https://dev--bnbca.netlify.app/

Any help is appreciated.

@bow You will find this answer here

@lea Thanks for taking time to reply.
actually, I’ve visited thread you’ve mentioned before I created this post.
it give information on issue but does not give much information on how to resolve it.
I dont have any data attributes being changed via JS. If I run the same code without Inventory management(Code) [GetProductsData()] it works fine.

Hey @bow, I noticed in our logs that you were able to process an order. Did you figure this out? If so, that’d be great if you could update this thread so that it can be helpful for other users facing a smiliar issue.

Thanks!

@charles No have not figured it out yet. it’s still not working. I have reverted my code. No I have code in production without inventory management. Product validation keep on failing. not sure why.

here it the code diff with working and not working version.

error while purchasing a product from bownbee.ca

Hey @bow ,

I took a look at your code on commit updated product page and I think the culprit is this line:

if (isLoading) return <div>Loading Data</div>;

This means that the server is returning a loading instead of the page HTML and snipcart button. This would cause our HTML crawler to fail since it can’t find the button.