How To Create A Nuxt.js Stripe Custom Checkout Page in 23 minutes!

#vuejs #nuxtjs #aws
In this video I discuss how toc reate a custom checkout page using Stripe and Nuxt.js We also look at how to create a backend using AWS Amplify, CDK, and Amplify hosting!
👉 Check out my last video on getting job as a Vue Developer
• Is It Impossible to Ge...
___
👉Sign up for my mailing list and get neat stuff!
bit.ly/3Umk7sW
Follow me!
/ erikch
Join this channel to help support the channel!:
/ @programwitherik
0:00 Introduction
0:32 Demo
02:10 Setting Up Nuxt.js App
06:23 Setting up onMounted on checkout page
09:55 Setting up onSubmit on checkout page
16:10 Nuxt API Route stripe purchase
19:40 Nuxt API Route stripe webhooks
22:30 Review of AWS CDK App with Amplify
31:29 Conclusion
Links:
Nuxt App - github.com/ErikCH/stripe-nuxt...
CDK IAC app - github.com/ErikCH/CDKAmplifyH...

[@geopopos]

Thanks for continuing to share awesome stuff like this!

[@pawepietras5617]

After 16 hours works!!! Thank you

[@farzadmf]

REALLY nice walkthough, thank you!

[@ProgramWithErik]

Glad it was helpful!

[@atinux]

Yes! Thank you Erik!

[@ProgramWithErik]

Sweet thanks!

[@1AndrewGray]

Thanks so much for this, very helpful for me. Could you please give an example or two of why someone would want to setup AWS infrastructure like this for the Stripe endpoints vs just using Nuxt server endpoints? I'm currently planning out a small eCommerce side project using this exact stack, but planned on just using Nuxt with Netlify for all endpoints, but this leaves me wondering if I should do something like this instead, with AWS endpoints using CDK. Thanks!

[@nro337]

Awesome video!

[@ProgramWithErik]

Thanks!

[@johnomeara5864]

2:00 Are we just going to pretend to not notice the ChatGPT tab that says "Stripe + NuxtJS Clickbait"? 😂😂

[@usmankhalid857]

If you have created stripe api in server folder. Why do we need webhook api in server folder? can anyone explain please

[@odehadejoh9966]

Great content. One small nitpick though, it might have made sense to extract the instantiation of the stripe object into a composable, to reduce the repetition.

[@mephew2713]

Or rather into a plugin. Also there is a great Nuxt module that does all this for you.

[@odehadejoh9966]

@mephew2713 Yeah, nice. That way it'd be instantiated once, on app mount and you could provide it to the rest of the app.

[@ProgramWithErik]

That's a good point! I just kept it all in the check-out component for simplicity. That makes sense though .

[@ProgramWithErik]

@@mephew2713 The Nuxt3/Vue3 Stripe libraries I found were very new, and I'm not sure if they are ready to go for production. For example this one. github.com/fuentesloic/nuxt-stripe But let me know if you've had good chances with it?

[@mephew2713]

​@@ProgramWithErikThis is indeed the one I've been using and I haven't had any problems with it yet. As for production readiness I'm not sure, I guess it depends on the requirements.

[@agusghost1759]

where the result in browser?