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!