Snipcart data-item-url not working on localhost

Question

I'm currently testing product payment on local (Wampserver) but I always have a 'domain-crawling-failed' error I can't solve when it comes to confirm payment.

https://i.stack.imgur.com/HVxjd.png

https://i.stack.imgur.com/iU0zJ.png

I've set 'localhost' as default domain on snipcart and also put sub-domains :

https://i.stack.imgur.com/AhouQ.png

My products with the buy-button are in the page:"http://localhost/Site/boutique". Here is the code :

<ul id="Product-List">
    <li class="product-item shown">
        <img src="assets/word.png">
        <div class="product-description">
            <h1>Word Guide Complet</h1>
        </div>
        <div class="product-pay">
            <h2>39,99 €</h2>
            <button class="buy-button snipcart-add-item"
            data-item-id="word"
            data-item-price="39.99"
            data-item-url="http://localhost/Site/boutique"
            data-item-description="Le guide complet de Word"
            data-item-image="assets/word.png"
            data-item-name="Word Guide Complet">
                Ajouter au panier
            </button>
        </div>
       
    </li>
    <li class="product-item shown">
        <img src="assets/excel.png">
        <div class="product-description">
            <h1>Excel Guide Complet</h1>
        </div>
        <div class="product-pay">
            <h2>39,99 €</h2>
            <button class="buy-button snipcart-add-item"
            data-item-id="excel"
            data-item-price="39.99"
            data-item-url="http://localhost/Site/boutique"
            data-item-description="Le guide complet de Excel"
            data-item-image="assets/excel.png"
            data-item-name="Excel Guide Complet">
                Ajouter au panier
            </button>
        </div>
        
    </li>
    <li class="product-item shown">
        <img src="assets/powerpoint.png">
        <div class="product-description">
            <h1>Powerpoint Guide Complet</h1>
        </div>
        <div class="product-pay">
            <h2>39,99 €</h2>
            <button class="buy-button snipcart-add-item"
            data-item-id="powerpoint"
            data-item-price="39.99"
            data-item-url="http://localhost/Site/boutique"
            data-item-description="Le guide complet de Powerpoint"
            data-item-image="assets/powerpoint.png"
            data-item-name="Powerpoint Guide Complet">
                Ajouter au panier
            </button>
        </div>
        
    </li>
</ul>

Answer 1

The Snipcart needs to validate the product price, and to do that it will try to access the data-item-url and try to validate the product price there.

But, the Snipcart can not access your localhost. You have to put the validator data somewhere where the Snipcart can access it. You can do this in several ways:

SOLUTION 1

For example, you can create an project on codesandbox.io (or any other online editor). In that project, create one json file and put all the products ids and prices inside. Now you can set the value of data-item-url to point on that json. Since codesandbox.io project is on the cloud, Snipcart will be able to access it and validate the product price. Downside of this solution is that you will need to modify manually this json whenever you have the new product or you change the price of existing product.

NOTE: Remember to add codesandox.io domain to Snipcart's Domains and Subdomains in Snipcart Dashboard.

Example of json file in codesandbox project:

https://codesandbox.io/s/agitated-sid-6jqpl?file=/src/assets/all-products.json

SOLUTION 2

You can use the ngrok npm package to tunnel the data to your localhost. That way Snipcart will be able to validate the products even in your localhost. Downside of this solution is that you need to create ngrok account to be able to use the package.

ngrok package:

https://www.npmjs.com/package/ngrok

SOLUTION 3

This is the best solution if you ask me. Create an endpoint on your server that will return all the products from your database in a json document. When you do that, you can set data-item-url to point on that endpoint on your server. Whenever the Snipcart needs to validate something it will call your server, and your server will always return up-to-date data. All you need to do now is to host your server somewhere in the cloud so Snipcart can access that endpoint.

NOTE: Remember to add your server domain to Snipcart's Domains and Subdomains in Snipcart Dashboard.