Snipcart

Snipcart fits a developer who wants to keep the site's frontend and add commerce around it. The product catalogue can live in the site's own content system. Snipcart handles the cart and merchant dashboard, with APIs and webhooks for integrations.

Connect a product to the cart

Create a Snipcart account and install its JavaScript snippet with the account's public API key. The installation options control whether the cart opens as a full page or side panel and when its scripts load. A customized cart can pin a particular script version.

Give a purchase button the snipcart-add-item class and the product's unique ID, name and price attributes. Snipcart checks the page's HTML during order validation. Reusing one ID with conflicting prices causes validation to fail, so differently priced products need distinct IDs.

Move from testing to real sales

Development testing has no time limit and needs no card. When the store is ready, switch the dashboard to Live and replace the website's API key with the Live key from Account > API keys. Changing only the dashboard environment does not change the website's key.

Account > Profile can import Test settings into Live. That import may overwrite existing Live settings, and discounts must be recreated separately because they are not imported. Real orders are then managed in the Live environment.

Cost of live checkout

Snipcart charges 2% of transactions plus the payment gateway's fees. For monthly sales below USD 1,000, the percentage is replaced by USD 20 per month. Billing is in USD.

That minimum makes a difference to a site selling only occasionally. The continuing free environment is for development testing, not a free live-selling allowance. A developer should budget for the gateway as well as Snipcart's charge.