Welcome to this Paddle Payments project template 👋
This project is a full-stack TypeScript app that implements a checkout flow using Paddle payments. It is built using the following technologies:
The project is divided into server and client:
server: API implemented using Effect and Node.jsclient: React app that uses theserverAPI to fetch product details and display the Paddle inline checkout flow
This course aims to be an overview of how to structure a full-stack TypeScript app. We won't go into the details of each line of code, but we will instead focus on the high-level architecture of the project.
Paddle Payments: How it works
Let's start with a high-level overview of how Paddle payments work.
On the Paddle dashboard we first create the products we want to sell. Each produce has information like name, description, image and more, as well as an associated productId.
Inside each product we can then add multiple prices. Each price has its own unique priceId.
Product and prices can also be created using the Paddle API.
Inside the client app we embed an inline checkout form. This form is managed by Paddle and allows to collect the user's email, physical address, and then proceed to payment by adding card details.
Each event in the checkout is registered by Paddle and send to a webhook URL.
A webhook is an API endpoint that receives notifications from Paddle when an event occurs.
For example, when a user completes a checkout, Paddle sends a webhook notification to the webhook URL. We can use this notification to update our database or trigger a background job.
This is a high-level overview of how a payment process works (not just for Paddle).
In this project we implement both client (inline checkout) and server (API), highlighting each major dependency and implementation detail necessary to build a full-stack app.
The project code is open source on Github:
Open source codeLet's dive into the project! 🚀