Accept Payments in Next js App using Paddle (Next.js + Paddle). Full Guide
💸 Integrate Paddle with Next.js — Full Payments & Subscriptions Guide!
In this in-depth tutorial, I’ll show you how to fully integrate Paddle into your Next.js app, so you can start accepting payments, managing subscriptions, and handling users' billing info like a pro.
We’ll go beyond the basics — you’ll learn how to display past transactions, save payment methods, show active subscriptions, and even build a custom subscription payment form using Paddle's SDK. Plus, we’ll set up a secure webhook to sync your backend in real time!
🔧 What You’ll Learn:
How to set up Paddle in a Next.js project
Creating and displaying products and prices
Adding the Paddle checkout to your frontend
Saving user payment methods securely
Showing subscription status and billing history
Building a custom subscription form
Setting up and securing webhooks for real-time updates
🧰 Tools Used:
Next.js 15+
Paddle (v2)
TypeScript (optional)
Webhooks for backend sync
PostgreSQL / Prisma (optional for storing data)
📌 If you're building a SaaS or digital product, this is everything you need to get paid — securely and globally.
🔔 Don’t forget to like, subscribe, and drop your questions in the comments — I reply to every one!
📚 Useful Links:
👉 Paddle Dev Docs: https://developer.paddle.com
👉 Next.js Docs: https://nextjs.org/docs
👉 GitHub Repo (coming soon)
Chapters:
00:00 Intro
00:50 Pros & Cons of Paddle
01:13 Product, Price, Customer & Transaction Explained
03:46 Paddle.js Integration
14:26 Load Form on Click
15:33 Load Form within custom Component
20:15 How to change Design & Layout of Paddle Form
20:53 What is Webhook?
22:47 Explained: How to get Subscriptions & Transactions of Customer
23:46 How to Setup Paddle Webhook
37:27 How to Simulate Webhook Event?
39:09 Testing Platform Webhook
41:20 How to Get Transactions of a Customer using Paddle
45:48 Allow Customers to Save Payment Method
49:50 Subscription (Recurring) based Price
54:13 Outro