Sky Cart: An Open Source, cloud-agnostic shopping cart using Stripe Checkout
Tags: opensource, showdev, javascript, webdev
Published: 2022-10-18 20:58:40

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

Earlier this month, Josh Nussbaum ([@joshnuss](https://twitter.com/joshnuss?lang=en)) announced [Sky Cart](https://github.com/joshnuss/sky-cart), a new open source project, which uses Svelte, Prisma, Vitest and Stripe Checkout to add a shopping cart to a web site:

{% embed https://twitter.com/joshnuss/status/1575910337110740993 %}

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](https://stripe.com/payments/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](https://stripe.com/register) and visit the [Products page in the Dashboard](https://dashboard.stripe.com/products/create) 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](https://github.com/joshnuss/sky-cart#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](https://github.com/joshnuss/sky-cart#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](https://svelte.dev/) before, you’ve probably come across [SvelteKit](https://kit.svelte.dev/), 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](https://kit.svelte.dev/docs/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](https://vitest.dev/), 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](https://github.com/joshnuss/sky-cart/blob/main/test/routes/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](https://github.com/joshnuss/sky-cart/blob/main/prisma/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](https://github.com/joshnuss/sky-cart#checkout) 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](https://github.com/joshnuss/prisma-database-cleaner): A utility to clean your DB between test runs
* [svelte-kit-test-helpers](https://github.com/joshnuss/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](https://github.com/joshnuss/sky-cart/blob/main/.github/workflows/ci.yml) for migrating Prisma and deploying to Vercel.
* A [code example](https://github.com/joshnuss/sky-cart/blob/main/src/routes/events/%2Bserver.js) of handling Stripe Webhooks with SvelteKit, and [mocking Stripe in test mode](https://github.com/joshnuss/sky-cart/blob/main/test/routes/events.test.js).


## 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](https://github.com/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](https://github.com/joshnuss/sky-cart#readme). Make sure to follow Joshua Nussbaum on twitter [@joshnuss](https://twitter.com/joshnuss), too!