Build an Ecommerce Store With SvelteKit 1.0, Stripe API, and Skeleton UI (TypeScript Tutorial)

In this video I show how to create an Ecommerce store using Sveltekit 1.0, with full Stripe integration to allow for secure checkouts. This is a great project for beginner and intermediate level programmers, and uses a bunch of practical functionality which you can easily apply to any application you want to build with SvelteKit 1.0. The tutorial covers SvelteKit 1.0 API, routing, svelte stores, svelte writable (state management), svelte components, and Skeleton UI with Tailwind CSS. The shopping cart of the tutorial is also a great way to get a first look into how you manage data using svelte/store. This video is also great to understand how you can use TypeScript with SvelteKit 1.0, and add your own custom types.

0:00 Project showcase
1:15 Create SvelteKit 1.0 app with Skeleton UI
2:52 Create UI
4:30 Create ProductCard Svelte component
7:00 Dynamically load products to store
11:55 Create cart logic with svelte/store (writable)
22:05 Add cart logic to ProductCard component
26:00 Create Stripe checkout API route
32:28 Setup Stripe API / Create Stripe products
34:35 Create checkout logic with Stripe API call
37:50 Checkout test, thanks for watching!

[skeletonlabs]

Hey Cooper, thanks for the shoutout. The tutorial seems super informative, great stuff!

[deucebigs]

You explain things as you go way better than I think any other tutorial

[tedspens]

I did it! With your help, of course 😉. My plan is to couple this with a WordPress/WooCommerce backend and sell some of my pens and eventually rule the world, but one thing at a time. Thank you for the straight forward how-to without complicating things just to sound smart. You don't sound smart at all and I for one, appreciate it. I shall reserve a seat for you on the high council after, well... you know... rule the world and stuff. Thank you!

[lyaeusv]

this tutorial was so easy to follow that i practices following every step while commuting on the train truly a blessing

[Allformyequine]

WOW your way of explaining is FANTASTIC, and I love the comments you add to help 'cement the understanding' !! You have a new subscriber!!! Also, BEST VISUAL demonstration/example of passing the props in and typing them ~ just awesome!! Are you ideas for new content? Keep the SvelteKit content coming!!

[rekaiadraoui]

This was so well made, thank you so much, and I checked your channel you have other svelte tuts that i'm def gonna watch, thank you for detailing your explanations you have no idea how useful that is

[paulthomas]

Thanks for another great tutorial - Skeleton looks great - I'll have a good look at it. Have a great week !

[stylrart]

I love the way you teach — one of the best, straight forward and focused explainations.
Great job. Keep on going!

[LouiHunna]

Loving this channel already!
If you’re taking suggestions for a follow-up video; It would be really cool to see how you could integrate a CMS with this app!
Thanks again 🔥🔥

[meka]

Wow. This is amazing. I would like to see/buy a more complete course on Svelte + Tailwind + Skeleton + TS and more! Thanks!

[dimitarnikolov]

You're literally saving my ass with this video. Thanks man, love you❤️

[onyilimba]

if anyone is wondering if it's a must to create product in stripe before and set as id as seen on this tutorial, no. but you need to set price_data and product_data inside the line items. like this items.forEach((item: any) => {
lineItems.push({
price_data: {
currency: 'usd',
unit_amount: item.price,
product_data: {
item.title,
item.description
}
},
quantity: 1
});
});

the data will look like this

{
price_data: { currency: 'usd', unit_amount: 20, product_data: {name: "T shirt, description: "White T shirt"} },
quantity: 1
}

[onyilimba]

I don't appreciate lots of sveltekit tutor, but you are really good. You earned the a like and a sub. The stripe productID you created in stripe and copied to the card item id. Are those required?

[gm]

This is great. Can you also make a tutorial like an extension to this one where you can list what the customer has paid for using what I see being recommended the Payment Intents from Stripe? I want to create a simple subscription service for my community, and I just need to query what a user has paid for.
Edit: I also see there are Stripe Apps where I can login a user to my website. Then get their payment history. With some time, I can figure it out on my own, but the process is smoother with a tutorial like yours.

[Jake-bhhm]

This is great, can you make a Svelte Native ... where we can make native IOS and android apps with svelte ..

[PavelStianko]

Awesome tutorial! Any idea how to keep the store if you reload the page as well? Thank you for help

[Manish___Choudhary]

Good tutorial and explanation ❤️
But one doubt!!!,
When we are updating item in writable, can't we just do this

items[itemPosition].quantity +=1

instead of mapping over complete array

[diegoavendanohernandez]

great video thanks a lot it was very helpful

[thvk]

How i pass this payment to specific owner of the store. Like for food website when user pay then it need to pay to the restaurant bank. How i can do this?

[jaizon]

What's the benefit in using the get and subscribe methods in the card component instead of the $?