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

Get started with lcl.host today: 👉 lcl.host
GitHub Source Code: 👉 github.com/sonnysangha/stripe...
🚨 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

[@user-mg4kg4vh5e]

Your explanations are super clear and concise. Thanks Sonny

[@mileslegend]

my guy comes out with another banger ,, thanks man for not allowing us get dormant.....

[@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.

[@alexsantosdev]

Thanks bro, excellent content!

[@sadique_x_]

thanks sonny!, thank you so much i'm a big fan

[@developmentwithtariq]

Thank you for your great contribution in my life as a developer

[@adomicarts]

Thanks sonnyyyy!!!!

[@shreyanshsinghal5457]

Thanks for awesome tutorial

[@bespokeprogramming]

Sonny! You are a Legend!

[@SonnySangha]

Appreciate you!!

[@tmuse9510]

useful video I appreciate it dude

[@SonnySangha]

You’re welcome dude!!

[@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?

[@hamza_Techy]

Great!

[@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.

[@olawunitemitope2738]

Please do full tutorial on testing... Like jest testing

[@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

[@ashishsubedi1400]

can you do paddle integration with next js?

[@EdwardBudaza]

Can you please do PayPal as well, Stripe doesn't work on most countries

[@keristang7208]

hi sonny, i have successfully following your code , and it works. but somehow my code create 2 transaction everytime i checkout. one transaction show succeeded and another show incomplete. do i implement correctly or this is normal.

[@aimagicx]

Thanks Sonny, Can you please do a video for Lemon Squeezy payment gateway?

[@egretfx]

yes please:)

[@vatsalcodes]

Can we use paypal along with google pay? if yes then how?

[@user-xh5ry1yb8y]

When I am trying to pay the bill it is showing me "No such payment_intent", how can I solve this problem?

[@savindugunasekara-xh3zx]

Hey my payment element somtimes shows and sometimes doesnt load at all.. why is that happening

[@user-ot7ip1zt9c]

This is great. Please make a similar video on LemonSqueezy

[@SonnySangha]

On it

[@desheapettiford]

how to add email address and phone number custom field

[@it32_harsh_ninave49]

MERN project from scratch!❤️

[@egretfx]

what about LemonSqueezy? some countries dont have stripe support.

[@KATHLEENWoods-gz8rd]

There is a bypass

[@egretfx]

@@KATHLEENWoods-gz8rd care to explain?

[@Devaratha6823]

Hey Sonny, I would like to integrate Stripe for our website showcase. I don't want to add real credit cards to Stripe for testing. How can we set it up for testing purposes?

[@SonnySangha]

They have test cards! 42424242424242 is usually the one!

[@enesertugrulkoyuncu3599]

at 12:35 , i cant see your form in my site :/ is it changed in 1 week??

[@enesertugrulkoyuncu3599]

i think changed in 1 week...

[@waleedsharif618]

Is using stripe free ? I want to deploy my MERN app in free version of Vercel and it uses Stripe

[@deepakkushwaha1392]

yes

[@veerarajankarunanithi728]

Yes integration is free but 2% commission on payments need to pay

[@_A1Anime]

How did you learn all these technologies?

[@nemeziz_prime]

By doing and not over thinking

[@KATHLEENWoods-gz8rd]

By doing it one code at a time

[@danimusbar]

Please make another tutorial but using Paypal

[@AllahomAnsorGaza]

anyone know what is his headphone name please :D

[@SonnySangha]

Audiotechniqa! In my desk setup tour I show all

[@graphiclife5416]

You can easily hack the price on the front end

[@SonnySangha]

Typically pricing comes from the backend, this is just a simple demo where we use a variable on the front end for the price😄 But yes nice point - fetch the amounts from the backend typically!

[@MrPherez]

Intergrate M-Pesa payment

[@parrou3]

Hi, is next.js a must learn for 2024-2025 ?

[@SonnySangha]

Yes 100%

[@user-zv2qb7bc9m]

Mern Project

[@KATHLEENWoods-gz8rd]

2024-2026. How important it is to learn next.js and react

[@SonnySangha]

Extremely important. Trust me - market is huge