A Shopping Cart Made for Static Sites

I’ve been building a shopping cart made for static websites. What I’ve come up with so far is a embedabble JavaScript shopping cart that works with Stripe Checkout v3 and is only 37kb in size.

So, essentially, you can add a shopping cart to your static website with the following code:

<div data-cart-host="sullycart">
    <script type="text/props">
        {
            "stripeKey": "<YOUR_STRIPE_PUBLISHABLE_KEY>",
            "successUrl": "<YOUR_SUCCESS_URL>",
            "cancelUrl": "<YOUR_CANCEL_URL>",
            "buttonColor": "<HEX_CODE_FOR_YOUR_BRAND_COLOR>"
        }
    </script>
</div>
<script src="https://js.stripe.com/v3/"></script>
<script async src="https://cart.sullylabs.com/bundle.js"></script>

Adding a product to your website that will work with your new shopping cart is as simple as this:

<button
    data-cart-add="sku_FMa2s0RgyWvem8"
    data-cart-price="50"
    data-cart-name="Cades Cove print">
    Add to cart
</button>

All that’s required is an HTML element with a few data attributes. You’ll need data-cart-add with a value of the product SKU from Stripe’s dashboard, data-cart-price with a number formatted like you’d write any other dollar amount (25.00), and a data-cart-name attribute with the name of your product.

To see a live demo of the shopping cart, you can check out tnposters.sullylabs.com.

If you’re interested in using this shopping cart for your website, shoot me an email at [parker [at] parkeragee [dot] com](mailto:[email protected]) and I’ll get you hooked up with it.

P.S. The posters on the TN Posters demo website are actually for sale. If you’d like to buy one, why not use the shopping cart on the website 😎

TN Posters Demo

Parker Agee

Software Engineer

Nashville, TN https://parkeragee.com