How to add Stripe payments to ANY Next.js 14 App! (Easy Tutorial for Beginners)

Sonny Sangha
Sonny Sangha
17,414
0
Published 2024-06-20
Get started with lcl.host today: 👉 lcl.host/
GitHub Source Code: 👉 github.com/sonnysangha/stripe-payment-elements-wit…

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: www.papareact.com/course

🔴 LOOKING FOR THE CODE FROM MY OTHER BUILDS? 🛠️
links.papareact.com/github

Join me as I show you how to build and test popular payment methods like Apple & Google Pay on localhost with Next.js 14. You'll learn the following in this video:

👉 How to integrate Stripe's embeddable UI Component: Stripe Payment Element to Accept Payment Methods
👉 How to Test Payment Methods like Apple Pay & Google Pay on localhost using lcl.host
👉 Benefits of using lcl.host compared to Next.js Experimental Flag
👉 Benefits of using lcl.host compared to ngrok
👉 How to Create an API Route Handler in Next.js 14 to Accept Payments
👉 How to build a fully responsive site with Tailwind CSS
👉 How to use TypeScript to reduce the overall number of Bugs and Errors

📩 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter

👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord

💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPAFAM Merch: links.papareact.com/merch

🕐 TIMESTAMPS:
00:00 Introduction
00:23 Build Demo
01:35 Build Breakdown in 5 Steps
02:08 Step 1 | Creating the Next.js 14 App
03:19 Step 2 | Implementing Stripe Payment Element
07:46 Creating the Checkout Page
08:40 Step 3 | Creating a Next.js 14 API Route Handler to Accept Payments
10:56 Generating a Client Secret based on the Payment Method Selected
17:25 Step 4 | Redirecting User to a Payment Success Page
18:08 Problem with Testing Payment Methods on localhost
18:46 Step 5 | Implementing lcl.host to Test Payment Methods in localhost
21:31 Testing Payment Methods on localhost!
22:43 Why Use HTTPS in a Local Environment
24:05 lcl.host vs Next.js Experimental Flag
24:37 lcl.host vs ngrok
25:07 Benefits of lcl.host
25:55 Outro

Let’s get it PAPAFAM 🔥.

#nextjs14 #localhost #anchor #applepay #googlepay #lclhost #tailwindcss #typescript #testing #reactjs #javascript
All Comments (21)
  • @user-mg4kg4vh5e
    Your explanations are super clear and concise. Thanks Sonny
  • @JeremyMoritz1
    Marvelous tutorial! Followed along and my app worked perfectly on the first try. Thank you for doing this and with such attention to detail! Subscribed.
  • @user-xh5ry1yb8y
    Thanks a llot. love from Bangladesh. I have been waiting for such a video.
  • @mileslegend
    :trophy-yellow-smiling::trophy-yellow-smiling::trophy-yellow-smiling::trophy-yellow-smiling::trophy-yellow-smiling:my guy comes out with another banger ,, thanks man for not allowing us get dormant.....
  • @sadique_x_
    thanks sonny!, thank you so much i'm a big fan
  • @bodywithoutasoul
    Thank you for this Sonny, very useful! May I ask why you decided to deviate from the stripe docs and fetch the client secret in the checkout component as opposed to the page, as they show it?
  • @DigitalAlchemyst
    A follow up on how to enter stripe data into a data base, pay out tenant users of the app isolate money to user accounts and things of that nature would be great. basically covering deeper in how to use this beyond just grabbing money for sale of something and getting it to you from your strip account.
  • @aimagicx
    Thanks Sonny, Can you please do a video for Lemon Squeezy payment gateway?
  • @user-wn6qu3xb2l
    Thank you a lot for this video! But i'm actually trynna add apple and google pay and cashpp it doesn't work for cash app
  • @EdwardBudaza
    Can you please do PayPal as well, Stripe doesn't work on most countries