Prerequisites

You will need a Snipcart account to use the beta. Also, you'll need to connect a Stripe account to your account. The beta only works with Stripe at the moment, other payment gateways support will be top priority during the beta phase. Also, from now on, we'll use Stripe Test environment to process payments, meaning that you can now test the complete payment flow before going Live. This is something that has been requested tons of time, so we decided to go ahead for the new version.

During the beta phase, we'll also implement our own fake payment gateway so you can use the cart without a Stripe account. However, for now it will be required to connect one. You can do it while in Test mode without having to enter a credit card.

Installation

Getting started with the beta of Snipcart v3 is very simple. Just like our previous version, you just need to include our assets, a JavaScript file and a CSS file. We don't require jQuery anymore! ??

We suggest you use our assets on our CDN directly.

Include required assets

<script src="https://cdn.snipcart.com/themes/v3.0.0-beta.4/default/snipcart.js"></script>
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.0-beta.4/default/snipcart.css" />

Include Snipcart on your site

One thing we changed, is that we now allow you to decide where exactly the Snipcart application will be mounted into your website. Previously we were automatically appending a div tag into your site.

<div hidden id="snipcart" data-api-key="<your_public_api_key>"></div>

We highly recommend to use the hidden attribute. Especially if you customize our templates. Otherwise, your customers might briefly see some markup on your site while Snipcart loads everything.

Complete example

Here's an example of a basic setup with Snipcart installed properly.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.0-beta.4/default/snipcart.css" />
  </head>
  <body>
    <div class="content">
      Your site content here
    </div>

    <div hidden id="snipcart" data-api-key="<your_public_api_key>"></div>

    <script src="https://cdn.snipcart.com/themes/v3.0.0-beta.4/default/snipcart.js"></script>
  </body>
</html>

Define your first product

Product definition hasn't changed in our new version. You still have to define your products directly into your website with some data attributes.

Here's an example:

<button class="button button--buy snipcart-add-item"
  data-item-id="glasses"
  data-item-price="79"
  data-item-url="/"
  data-item-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam velit, sodales sit amet neque eu, auctor efficitur mi. Fusce. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam velit, sodales sit amet neque eu, auctor efficitur mi. Fusce."
  data-item-custom1-name="Frame color"
  data-item-custom1-options="Black|Brown|Transparent"
  data-item-custom2-name="Lenses"
  data-item-custom2-options="Regular|Photochromic (adjust to lumnisoty)[+100.00]"
  data-item-custom3-name="Prescription left eye"
  data-item-custom4-name="Prescription right eye"
  data-item-image="/static/products/glasses.svg"
  data-item-name="Hipster glasses">
  Add to cart
</button>

You'll find the complete attributes reference right here.

Feedback and bug reports

If you have any feedback, or want to report a bug, please create an issue in the Github repository created for this.