Error on payment processing : product-crawling-failed

I have a nextjs app with strapi and snipcart.

I have an error on payment processing :

[Details] We have not been able to find item with id ‘selfless’

The logs 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.

I tried with data-item-id added statically and it worked, but not with {product.slug}
here is my code

The developer’s logs gave me this information :

Found 0 snipcart-add-item elements with ids []

but, in the google dev tools I see that :

— Item 1 — [Item ID] infra [Item Unique ID] 903b79d0-8bd9-4331-94e9-9f4f48edd96c [Item Name] Infra- [Url] Infra- [Status] NotFound [Price in cart] 20 [Crawled prices] [] [Details] We have not been able to find item with id ‘infra’ at ‘Infra-’.

I’m totally lost …

const ProductPage = ({ product }) => {
  const router = useRouter()
  // if (router.isFallback) {
  //   return <div>Loading product...</div>
  // }

  return (
    <div className="carousel-container m-6 grid grid-cols-1 gap-4 mt-8 items-start">
      <div className="rounded-t-lg pt-2 pb-2 m-auto h-auto">
        <EmblaCarousel {...product} />
      <div className="w-full p-5 flex flex-col justify-between">
          <h4 className="mt-1 font-semibold leading-tight truncate text-slate">
            <span className="uppercase text-lg font-bold">{product.title}</span>
            <br />
          <LanguageDesc {...product} />
        <div className="flex flex-col md:flex-row">
          <div className="mt-4 font-semibold leading-tight truncate text-slate">
            <p>Format: {product.size}</p>
            <p>Printing: {product.technic}</p>
            <p>Paper: {product.medium}</p>
            <p>{product.copies} copies</p>
          {product.status === "published" ? (
              className="snipcart-add-item mt-4 ml-16 self-center bg-slate border border-gray-200 d hover:shadow-lg hover:bg-brique focus:outline-none text-white font-semibold leading-none py-2 px-4 w-20 h-20 rounded-full"
              Add to cart
          ) : (
            <div className="text-center mr-10 mb-1" v-else>
                className="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
                <span className="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">
                  Coming soon...
                <span className="font-semibold mr-2 text-left flex-auto">
                  This article is not available yet.

export async function getStaticPaths() {
  const products = await getProducts()
  return {
    paths: => {
      return {
        params: { slug: _product.slug },
    fallback: false,

export async function getStaticProps({ params }) {
  const product = await getProduct(params.slug)
  return { props: { product } }

export default ProductPage

Hi @RomainPruvost

Are you using the JSON Crawler? If the pages are not server-side rendered with the product data (i.e. the product data is not in the source HTML without running JS), we cannot properly get the product data and validate the order.

Hi @nelitow

No. If I understand well, I need to have a page in front with a JSON of my products, so snipcart can have access to the products data.

As it used to work during tests, could it be different if I use getServeSideProps instead of getStaticProps ?

I’m sorry. I don’t understand what I have to do and it’s kind of important :confused:

@RomainPruvost Can you please send us an email at with the email associated with the account so we can check the site and the logs to get an accurate answer for the issue?