Mike Bifulco for Stripe

Posted on Oct 18, 2022

Sky Cart: An Open Source, cloud-agnostic shopping cart using Stripe Checkout

#opensource #showdev #javascript #webdev

Sky Cart lets you embed Stripe Checkout on your site in a flash

Earlier this month, Josh Nussbaum (@joshnuss) announced Sky Cart, a new open source project, which uses Svelte, Prisma, Vitest and Stripe Checkout to add a shopping cart to a web site:

With a few short lines of code, he created a headless, cloud-agnostic shopping cart embed that takes advantage of the hosted purchase flow provided by Stripe Checkout.

Using Sky Cart

Since Sky Cart is headless, the UI implementation depends on your web app’s framework. Products for Sky Cart are provided through the Stripe API - to get started, create a Stripe account and visit the Products page in the Dashboard to create products for your site.

Under the hood, Sky Cart uses the Stripe API to provide a list of products for sale. These can be made available on your site using Sky Cart’s Catalog API.

You’ll need to build the UI to expose a product list on your site. There are APIs available for creating a cart, as well as adding, removing, and updating items in your cart.

Sky Cart’s README provides additional information about using the library on your own project, as well as instructions for Development and Production deployments.

How Sky Cart was built

SvelteKit

If you’ve used Svelte before, you’ve probably come across SvelteKit, which is a minimal application framework for building Svelte apps. With SvelteKit, the functionality for Sky Cart is provided by way of serverless cloud functions.

Sky Cart uses SvelteKit as an abstraction layer for a variety of common serverless cloud hosting services. SvelteKit allows deployment to providers like CloudFlare, Vercel, and Netlify using plugins called Adapters.

Since functionality for SkyCart is built on top of serverless functions, your web app can scale just like any other serverless project - this means multiple carts can be run in parallel without any fuss or degradation of performance.

Testing

Unit testing for Sky Cart is provided by Vitest, and is used to ensure that the library remains functional even as new changes are merged into future releases. Test cases written with Vitest are in the repo’s /test/ folder - check out cart.test.js to see an example of syntax used for testing.

Data layer

Prisma provides Object-Relation Mapping (ORM) for the data types used by Stripe Checkout for assembling a cart and the associated charges when users make a purchase. This again is a wonderfully simple implementation - you can see the entire object model for Sky Cart in schema.prisma.

Stripe Checkout

Sky Cart is used to coordinate and maintain a list of products to purchase from a Stripe Account. It provides APIs for users to add items to their cart, remove items, and update totals. Once users decide to make a purchase, a call to Sky Cart’s checkout API sends users to a Stripe’s hosted Checkout experience, where they can securely complete their purchase.

Making Sky Cart available as Open Source Software (OSS)

Josh to fill in this section - why make this project available as OSS?

Josh built Sky Cart to learn more about using Prisma & Vitest with SvelteKit. Since SvelteKit is still quite new, this project was a great way to dig a bit deeper into SvelteKit’s developer experience. By building a simple tool with SvelteKit, Josh was able to provide feedback for the SvelteKit team while creating some resources that would help others integrate Prisma with SvelteKit.

The project came around as the result of an idea Josh had for using Stripe to provide catalog and purchasing functionality for an ecommerce site. Because Stripe manages product & pricing data as well as the checkout process, it made sense to experiment with adding a cart between those two resources.

During the process of building Sky Cart, Josh identified and built a few open source utilities, which are published and available as NPM packages:

prisma-database-cleaner: A utility to clean your DB between test runs
svelte-kit-test-helpers: Helper functions for testing SvelteKit endpoints

If you’re building with SvelteKit, check out these OSS resources as well:

A reusable GitHub Action for migrating Prisma and deploying to Vercel.
A code example of handling Stripe Webhooks with SvelteKit, and mocking Stripe in test mode.

Contributions Welcome

Since Sky Cart is completely open source, you can propose new features, add new functionality, or help maintain it by heading to GitHub in the repo joshnuss/sky-cart.

Give it a try!

And that’s it! Sky Cart is available for use straight away. You can add it to your site today by following the instructions in the README.md for Sky Cart. Make sure to follow Joshua Nussbaum on twitter @joshnuss, too!

Top comments (1)

codebytesfl • Oct 19 '22

Cool stuff! I would love to see this evolve into something that can support multiple different payment processors. I've heard atrocious things about stripe customer support and holding money. Generally in large e-commerce operations multiple processors are supported in their codebase in case one goes out, suddenly stops operating, or any other reason why this third party service might become un-available.

A general api function would be created for example

const cart = addProductToCart(product_id)

where this function would abstract the product adding functionality depending on what payment processor is active.

const addProductToCart = (product_id) => {

    if(processor === stripe) stripe.addProduct(product_id)
    if(processor === square) square.addProduct(product_id)

}

This is a high level pseudo code example of what I've seen in larger operations. This allows us to keep the same checkout logic, but only modify the processor logic as needed (for example to add another one, or remove one).

DEV Community