Nuxt 2 Nuxt 3 NEW BLOG

Join our community

Get access to the complete guide to developing and deploying fast, production-ready Nuxt apps.

7-8 Handle Payments with Stripe

In this lesson, we update our Payment component and integrate it with Stripe.

We load the 3rd party script from Stripe’s CDN, and then use it to create a card input element. We also stub out the form submission handler.

Stripe JS: https://stripe.com/docs/js

Chapter 1 - Building Our MVP

18 lessons

0-1 Course Introduction

FREE

02m 05s

1. Building Our MVP

35s

1-0 Getting Set Up

07m 40s

1-1 File based routing

06m 10s

1-2 Displaying Course Lessons

03m 56s

1-3 Nested Routes

05m 51s

1-4 Dynamic Routes

09m 05s

1-5 Loading in Course Data

06m 11s

1-6 Update Lesson Styling

01m 02s

1-7 Add VideoPlayer Component

02m 54s

1-8 What is Universal Rendering?

05m 17s

1-9 Navigating with NuxtLink

04m 15s

1-10 More with NuxtLink

04m 54s

1-11 The useHead composable

03m 11s

1-12 Tracking progress with useState

09m 25s

1-13 Save Course Progress with VueUse and the ClientOnly Component

FREE

10m 37s

1-14 Deploying our MVP to Netlify

10m 51s

Chapter 1 - Summary

46s

Chapter 2 - Architecture and Organizing Our Code

7 lessons

2 - Organizing Our Code

01m 01s

2-1 Smaller is better

03m 44s

2-2 Understanding App.vue

01m 55s

2-3 Understanding Layouts

08m 21s

2-4 Pages vs. Layouts vs. Components

11m 31s

2-5 Understanding Composables in Nuxt

03m 23s

Chapter 2 - Summary

31s

Chapter 3 - Making Our App Robust

7 lessons

3-0 Making Our App Robust

36s

3-1 Adding in TypeScript

05m 55s

3-2 Handling Client-Side Errors with NuxtErrorBoundary

08m 38s

3-3 Advanced Error Handling

06m 26s

3-4 Handling Server Errors and 404s

09m 35s

3-5 Route Validation

03m 19s

Chapter 3 - Summary

38s

Chapter 4 - Route Middleware and Authentication

11 lessons

01m 33s

4-1 Route Middleware Basics

05m 54s

4-2 Creating a Login Page

06m 04s

4-3 Inline, Named, and Global Route Middleware

11m 24s

4-4 Setting Up Supabase

08m 30s

4-5 Adding Environment Variables

08m 12s

4-6 Logging in with Github

07m 57s

4-7 Logging Out

06m 42s

4-8 Protecting Routes with Auth

07m 03s

4-9 Understanding OAuth Basics

17m 46s

44s

Chapter 5 - Server Routes

18 lessons

01m 02s

5-1 Server Route Basics

10m 56s

5-2 Lesson Endpoint

10m 21s

5-3 Fully Typing Our Endpoint

10m 17s

5-4 Course Metadata Endpoint

11m 32s

5-5 Basic Data Fetching

12m 53s

5-6 Advanced Data Fetching

14m 48s

5-7 Creating the useFetchWithCache Composable

07m 49s

5-8 Fetch Course Metadata

09m 55s

5-9 Setting up Prisma

14m 42s

5-10 Creating the Prisma Schema

10m 53s

5-11 Initialize Prisma and Seed Database

15m 46s

5-12 Getting data from Prisma

07m 21s

5-13 Update Lesson Endpoint

05m 24s

5-14 Update Course Meta Endpoint

12m 25s

5-15 Auth and Server Routes

15m 52s

5-16 Understanding Nitro and h3

14m 22s

34s

Chapter 6 - State Management with Pinia

8 lessons

37s

6-1 Setting up Pinia

12m 02s

6-2 Fixing the Meta Endpoint

05m 56s

6-3 Add LessonProgress Model to Our Schema

05m 09s

6-4 Add Endpoint to Update Progress

12m 19s

6-5 Add User Progress Endpoint

11m 04s

6-6 Show Course Completion Percentage

10m 16s

43s

Chapter 7 - Building a Sales Page

17 lessons

40s

7-1 Adding the Landing Page

07m 17s

7-2 Static Generation and Pre-Rendering

10m 33s

7-3 Route Rules

04m 18s

7-4 Managing Static Assets

12m 34s

7-5 Lazy Loading Checkout Components

04m 13s

7-6 Runtime Config and App Config

04m 34s

7-7 Setting up Stripe

06m 05s

7-8 Handle Payments with Stripe

08m 26s

7-9 Add the PaymentIntent Endpoint

08m 22s

7-10 Overview of Granting Access

05m 15s

7-11 Create CoursePurchase in the Database

04m 24s

7-12 Verify Purchase with Stripe Webhooks

06m 57s

7-13 Testing our Webhook Handler

09m 18s

7-14 Link Purchase with Github

08m 38s

7-15 Grant Access to the Course

07m 29s

38s