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

Рет қаралды 17,553

Күн бұрын

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

Пікірлер: 69

@user-mg4kg4vh5e Ай бұрын

Your explanations are super clear and concise. Thanks Sonny

@JeremyMoritz1 16 күн бұрын

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.

@shawn.builds 16 сағат бұрын

Wow that was FAST! Thanks Sonny

@mileslegend Ай бұрын

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

@user-xh5ry1yb8y Ай бұрын

Thanks a llot. love from Bangladesh. I have been waiting for such a video.

@sadique_x_ Ай бұрын

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

@alexsantosdev 8 күн бұрын

Thanks bro, excellent content!

@developmentwithtariq 6 күн бұрын

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

@adomicarts 11 күн бұрын

Thanks sonnyyyy!!!!

@shreyanshsinghal5457 Ай бұрын

Thanks for awesome tutorial

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

@bespokeprogramming Ай бұрын

Sonny! You are a Legend!

@SonnySangha Ай бұрын

Appreciate you!!

@hamza_Techy Ай бұрын

Great!

@tmuse9510 21 күн бұрын

useful video I appreciate it dude

@SonnySangha 21 күн бұрын

You’re welcome dude!!

@DigitalAlchemyst 19 күн бұрын

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.

@ashishsubedi1400 Ай бұрын

can you do paddle integration with next js?

@mohamedanouarjabri271 5 күн бұрын

I've tried it with react js but when creating the env.local file and trying to use the env variable it keeps showing an error saying that the Stripe() should take an apiKey with string type and I'am sure thet the process.env.Key is a string 🤷

@itsmkb1213 4 күн бұрын

Hi when I try to make payments I get three entries in my stripe dashboard. One completed and two incomplete any idea how to solve it

@user-wn6qu3xb2l 10 күн бұрын

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

@shibashishmohapatra 5 күн бұрын

How u registered the domain in stripe dashboard

@user-xh5ry1yb8y 21 күн бұрын

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

@olawunitemitope2738 Ай бұрын

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

@EdwardBudaza Ай бұрын

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

@vatsalcodes 28 күн бұрын

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

@savindugunasekara-xh3zx 19 күн бұрын

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

@desheapettiford Ай бұрын

how to add email address and phone number custom field

@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

@egretfx Ай бұрын

what about LemonSqueezy? some countries dont have stripe support.

@KATHLEENWoods-gz8rd Ай бұрын

There is a bypass

@egretfx Ай бұрын

@@KATHLEENWoods-gz8rd care to explain?

@aimagicx Ай бұрын

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

@egretfx Ай бұрын

yes please:)

@Devaratha6823 7 күн бұрын

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 7 күн бұрын

They have test cards! 42424242424242 is usually the one!

@user-ot7ip1zt9c Ай бұрын

This is great. Please make a similar video on LemonSqueezy

@SonnySangha Ай бұрын

On it

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

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

@it32_harsh_ninave49 Ай бұрын

MERN project from scratch!❤️

@AllahomAnsorGaza Ай бұрын

anyone know what is his headphone name please :D

@SonnySangha Ай бұрын

Audiotechniqa! In my desk setup tour I show all

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

@itsmkb1213 4 күн бұрын

Mine creats 3. 2 incomplete and 1 success. Did you manage to solve it?

@keristang7208 4 күн бұрын

@@itsmkb1213 im not manage to solve it. is that normal? hope sonny can explain that to us.

@itsmkb1213 4 күн бұрын

@@keristang7208 I see. Can you kindly update me if you manage to figure it out. I will update you if I could solve it

@itsmkb1213 4 күн бұрын

@@keristang7208 @SonnySangha can you please reach to us!!!

@itsmkb1213 4 күн бұрын

@SonnySangha both of us have same kinda issue

@parrou3 Ай бұрын

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

@SonnySangha Ай бұрын

Yes 100%

@danimusbar Ай бұрын

Please make another tutorial but using Paypal

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