A 'cart-confirmation' error occured in Snipcart

Question

for my nextjs app, I want to use snipcart checkout. When I try to validate a payment I receive an error :

A 'cart-confirmation' error occured in Snipcart.

Reason: 'product-crawling-failed'

--- Item 1 ---  [Item ID] 8  [Item Unique ID] 9e63189a-5a3b-4a25-bf57-ceb4574cad45  [Item Name] SEFLESS  [Url] https://cmeditions.fr/books/SEFLESS  [Status] NotFound  [Price in cart] 15  [ Crawled prices] []  [Details] We have not been able to find item with id '8' at 'https://cmeditions.fr/books/SEFLESS'. Please make sure the product is correctly defined.

This this my snipcart button:

<div className="colophon">
            {product.status === true ? (
              <button
                className="snipcart-add-item buy-button "
                variant="dark"
                onMouseEnter={(e) => handleEnter(e)}
                onMouseOut={(e) => handleExit(e)}
                data-item-id={product.id}
                data-item-price={product.price}
                data-item-url={router.asPath}
                data-item-image={getStrapiMedia(product.grid_pic.url)}
                data-item-name={product.name}
                data-item-description={product.author}
                v-bind="customFields"
              >
                BUY ME!
              </button>

If I click on the product URL printed in the error I land in the catalog instead of the product. I assume the problem could come from a nextjs routing problem ...?

Answer 1

You get this error because order validation fails. You will find more information on the product causing the error in de developer logs.

First, make sure the data-item-url points to the page with the Snipcart button if you are using the HTML crawler or to the product definition if you are using the JSON crawler.

If you are using a relative URL, make sure you set up the default domain. This URL needs to be publicly accessible. If you want to test in local development, you can use a tool like ngrok.

Another important aspect is that the Snipcart button cannot be added dynamically (i.e., via javascript or a front-end framework like Vue). If this is your case, then the JSON crawler would be more appropriate for you.