Войти
  • 120300Просмотров
  • 1 год назадОпубликованоSonny Sangha

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

Get started with today: 👉 GitHub Source Code: 👉 🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: 🔴 LOOKING FOR THE CODE FROM MY OTHER BUILDS? 🛠️ Join me as I show you how to build and test popular payment methods like Apple & Google Pay on localhost with 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 👉 Benefits of using compared to Experimental Flag 👉 Benefits of using compared to ngrok 👉 How to Create an API Route Handler in 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 👉 👇🏻FOLLOW ME HERE: Instagram: Facebook: LinkedIn: Twitter: Discord: 💰 WANT TO SUPPORT THE CHANNEL? Donate here: Grab some PAPAFAM Merch: 🕐 TIMESTAMPS: 00:00 Introduction 00:23 Build Demo 01:35 Build Breakdown in 5 Steps 02:08 Step 1 | Creating the 14 App 03:19 Step 2 | Implementing Stripe Payment Element 07:46 Creating the Checkout Page 08:40 Step 3 | Creating a 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 to Test Payment Methods in localhost 21:31 Testing Payment Methods on localhost! 22:43 Why Use HTTPS in a Local Environment 24:05 vs Experimental Flag 24:37 vs ngrok 25:07 Benefits of 25:55 Outro Let’s get it PAPAFAM 🔥. #nextjs14 #localhost #anchor #applepay #googlepay #lclhost #tailwindcss #typescript #testing #reactjs #javascript