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 ...?

score 0 · Answer 1 · answered May 19 '21 at 14:03

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.

Thank you for the response. I don't really understand how to use the JSON crawler, but as I tried to click on the URL in the error, I noticed that I have a routing problem in nextjs. When I refresh a page or click on a relative link, it automatically leads me to the root link, while it's still the good url in the browser. I assume it come from this. But I don't understand the origin of the problem — Rom-888, May 19 '21 at 14:22

A 'cart-confirmation' error occured in Snipcart

1 Answers1