Get started with lcl.host today: https://lcl.host
GitHub Source Code: https://github.com/sonnysangha/stripe...

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

LOOKING FOR THE CODE FROM MY OTHER BUILDS?
https://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 https://links.papareact.com/newsletter

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

WANT TO SUPPORT THE CHANNEL?
Donate here: https://links.papareact.com/donate
Grab some PAPAFAM Merch: https://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