Accepting Payments using LemonSqueezy - Integrating LemonSqueezy into Next.js Tutorial
Summary
TLDR在这个视频中,作者介绍了如何使用Lemon Squeezy这个支付处理平台来销售软件产品。他首先创建了一个测试产品,并使用Next.js框架构建了一个应用程序,该应用程序可以调用Lemon Squeezy的API生成支付链接。用户可以通过这个链接完成支付。视频还演示了如何设置Webhook,以便在订单创建时接收实时通知,从而更新服务和数据库。整个过程清晰易懂,适合开发人员入门使用Lemon Squeezy支付系统。
Takeaways
- 🔑 Lemon Squeezy是一个专门为软件产品构建的支付处理平台,支持许可证管理、税费计算等功能。
- 🌐 通过API与Lemon Squeezy集成,可以在自己的应用中销售软件产品。
- 💻 本教程使用Next.js展示了如何与Lemon Squeezy API交互,创建结账会话(checkout session)。
- 🔐 Lemon Squeezy使用Webhook通知订单状态变化,确保及时获取付款信息。
- 🛠 需要配置API密钥、商店ID和Webhook签名密码等重要凭据。
- 📦 创建产品需要设置定价、税费类别、多个变体等细节。
- 🔗 通过获取的Checkout URL可以引导用户完成付款流程。
- ⚙️ 使用ngrok等隧道工具让本地服务器能够接收来自Lemon Squeezy的Webhook通知。
- ✅ 收到Webhook后,需要验证签名以确保请求合法,然后处理订单信息。
- 💡 教程中的代码可以作为基础,根据实际需求添加数据库集成、用户认证等功能。
Q & A
这个教程是关于什么的?
-这个教程展示了如何使用Lemon Squeezy平台在软件产品中集成支付功能。
为什么选择Lemon Squeezy而不是Stripe?
-Lemon Squeezy是专门为软件产品打造的支付处理平台,提供更简洁的界面管理税费等,而Stripe面向更广泛的应用场景。
如何在Lemon Squeezy中创建产品?
-可以在Lemon Squeezy的仪表盘上添加新的商店,然后在商店内创建新产品,设置定价模型、税费类别等详细信息。
这个教程使用了什么编程语言和框架?
-该教程使用JavaScript语言和Next.js框架进行开发。
为什么需要环境变量文件?
-环境变量文件用于存储Lemon Squeezy API密钥、商店ID和Webhook签名密钥等敏感信息,避免泄露。
我们如何获取结账URL以便重定向用户?
-通过调用Lemon Squeezy的/checkouts API接口并提交产品ID等相关信息,服务器会返回一个唯一的结账URL供用户支付。
为什么需要使用ngrok进行本地测试?
-ngrok可以创建一个公共URL指向本地服务器,使得Lemon Squeezy的Webhook能够正确调用我们的API。
Webhook在支付流程中起什么作用?
-Webhook允许Lemon Squeezy在订单创建时通知我们的服务器,提供订单状态和用户自定义数据等信息。
如何验证Webhook请求是否来自Lemon Squeezy?
-通过使用Lemon Squeezy提供的签名密钥和加密算法,对Webhook请求进行签名验证。
我们能在Webhook中获取哪些有用的数据?
-Webhook请求中包含订单状态、支付成功与否、用户自定义数据等重要信息,可用于更新本地数据库。
Outlines
🚀 Lemon Squeezy介绍
这段介绍了Lemon Squeezy作为一个专为软件产品设计的支付处理平台,强调了其相对于Stripe等其他平台的优势,包括更简洁的界面、内置的许可证管理功能以及税务处理的便利性。此外,还指出Lemon Squeezy的易用性,即使是没有创建自己网站的用户也能轻松售卖软件。随后,引导观众进入Lemon Squeezy网站,并展示了如何创建新的商店并添加新产品的过程。
🔧 创建新应用与产品
这部分详细讲述了如何使用Next.js创建一个新的应用程序来与Lemon Squeezy集成,包括安装必要的包和设置环境变量(如API密钥和商店ID)。介绍了如何通过Axios配置与Lemon Squeezy API交互的基础,并展示了如何创建产品和处理支付的API路由。
📦 产品和支付处理
这段内容深入讲解了如何定义产品并在Lemon Squeezy上设置售价,包括单次支付和订阅等不同的支付模式。还介绍了如何通过创建API路由处理支付请求,包括验证产品ID并使用Lemon Squeezy API创建结账会话。
👨💻 编码与错误调试
在这一部分,通过一系列编码演示和错误调试,详细说明了如何发送请求以创建结账会话,并如何处理可能出现的问题,例如错误的请求路径或响应处理。
🌐 前端集成与测试
这段内容聚焦于如何在前端集成支付功能,包括创建触发支付流程的按钮,调用API路由,并处理响应以将用户重定向到支付页面。同时,也展示了如何启动服务器和解决启动过程中遇到的问题。
🔍 支付完成与Webhook设置
介绍了在用户完成支付后,如何使用Webhook通知服务器。展示了如何在Lemon Squeezy上设置Webhook,并通过NGROK工具将本地开发服务器公开为可从外部访问的服务,以便接收Webhook通知。
📝 Webhook处理与总结
这一部分详细说明了如何编写处理Webhook的代码,验证请求的合法性,并根据Webhook事件更新数据库或执行其他操作。最后,概述了整个视频的内容,强调了使用Lemon Squeezy和Next.js为软件产品处理支付的便利性,并提供了代码资源链接。
Mindmap
Keywords
💡Lemon Squeezy
💡Stripe
💡许可证
💡税务合规
💡仪表板
💡产品创建
💡Next.js
💡API路由
💡Webhook
💡环境变量
Highlights
Introduction to Lemon Squeezy as a payments processing platform specifically for software products.
Advantages of Lemon Squeezy over Stripe, including features like licenses and a cleaner interface for taxes.
Lemon Squeezy's automatic handling of tax compliance for software companies.
Creating a new store on Lemon Squeezy's platform.
Exploring product creation options within Lemon Squeezy, including payment and subscription models.
Using Lemon Squeezy's dashboard for setting up a new product, highlighting the ease of adding product descriptions and pricing.
The process of integrating Lemon Squeezy with a Next.js application for software sales.
Setting up environment variables and API keys for securely connecting to Lemon Squeezy.
Creating an API route in Next.js for handling purchases through Lemon Squeezy.
The importance of passing custom data in transactions for tracking and verification purposes.
Setting up Axios for making HTTP requests to Lemon Squeezy's API within a Next.js app.
Creating a front-end interface in Next.js for users to initiate purchases of software products.
Implementing webhooks from Lemon Squeezy to handle events like order creation and payment success.
Using NGROK to test webhooks locally by creating a public URL that forwards to your localhost.
Summary and invitation for feedback, emphasizing the tutorial's goal to facilitate software sales through Lemon Squeezy.
Transcripts
in this video we will look at lemon
squeezy lemon squeezy is a payments
processing platform which is built
specifically for software products so if
you're trying to sell some kind of
software lemon squeezy is the best
platform to do so why would I choose
lemon squeezy over something like stripe
because it has some cool features such
as licenses and a much more cleaner
interface than stripe when it comes to
taxes and stuff you don't need to figure
out a lot of stuff lemon squeezy already
has that for you and it's as it's
already built for software you do not
need to worry about all the different
noise which appears in your stripe
dashboard it also makes selling software
very simpler if you don't want to make
create your own website you can just
share your around your link and sell
your software but if you want you can
also go deep and create your own site
and do all of that stuff it's pretty
interesting so let's get into the
tutorial so we at the lemon squeezy site
you can see it says payments tax and
subscriptions for software companies as
a merchant of record we handle a tax
compliance burden so you can focus more
on revenue and less head headache so
it's specifically built for software uh
it's it just mentioned here and let's go
ahead and click on sign in and let's
create our first project I guess or we
could call it an organization so it took
me to this dashboard so I was doing some
testing here so I already have one but
I'm going to create a new store here I
guess so let's find a way to create a
new store yep add new store if you don't
already have a store it will
automatically ask you to create a new
store so I'm just just going to click
add new store I'm just going to name it
um Aura by
store and I'm just going to change my
country to India but if you are in
different country make sure you set your
own country and let's click on create
new store perfect now it's going to show
all of these settings but we are in test
mode so we don't necessarily need to do
all of these so let's just go ahead and
create our products so to sell some
something you need to have a product
here so let's create a new product we
are just going to create a new test
product and we just going to add a
description as like um this is my test
product perfect and now you can have
different kinds of things like single
payment subscription pay what you want
like they can set the price or even you
can set the price at the back end but we
are going to use single payment because
it's we just have to touch the surface
we just have to look at the basics and
then you can always look at lemon
squeezy documentation and make things
work so let's click on single payment
and let's select the pricing model so
let's look at the options here we have
standard and package package I think
it's for more than one product so I'm
just going to click on standard pricing
for the price uh it's in my currency so
I'm going to set it to I think so 1,500
rupees make sure you respect your
currency like uh does like um I mean
it's test mode it doesn't really matter
so you just do whatever you want then
you have tax category I think this would
be important in live mode where you have
to like sell something so you just have
to categorize this so digital goods or
services excluding ebooks then we have
ebooks as a separate category and then
we have S software as a service so I
think I'm just going to use digital
goods and digital goods or services for
this one but make sure you put your
category here because in live mode I
think this is going to be very important
then you will have the media so it says
add up to 10 images for your product use
to represent your product during
checkout we don't need
it and upload an unlimited amounts of
file to your product your customers will
be given access to them after purchase
so whatever things you have which you're
trying to sell you can simply put them
here and yeah uh it will be sent to your
customer as soon as they have completed
the payments then you will have variants
and stuff where you can uh have
different kinds of license like size
shape and stuff we do you can set it you
can set it up we will need the variant
variant ID when we are dealing with the
code but we can also use the default
variant ID so if you want to skip this
step feel free to do so but if you want
to customize you can go ahead and do so
it's not a problem then you will have
generate license Keys you can again do
so if you want to but I'm just going to
keep it disabled for
now and yeah show this product on your
lemon stor front I guess yeah let's just
leave that for email receipt we can
enable it uh you can have a thank you
node you can have a button link you can
have button text and stuff and you can
simply publish your product there's a
lot of customization here you can simply
dig into it and try to find which
settings you can play around with to
have the best experience for your users
we have we just have the basic settings
so so that we so that I can show you how
the basics work and you can always build
on top of that so we have this product
right here so if we go into this three
dots we will see two different IDs so
one is an ID and one is a variant ID so
here the variant ID means the specific
variant of the product and the ID normal
makes the product ID so product can have
different variants and different
variants will have different IDs so yeah
this is how the product system works in
lemon squeezy all right so let's create
our new application I will be using
nextjs because they have support for API
routes of the box so if you want to use
something like the combination of v and
node J feel free to do so but since next
J is easy for a tutorial purposes I'm
going to do that so I'm going to use
pnpm so
pnpx create next app and I'm going to
name it LS YT stands for lemon squeezy
YouTube so I'm just going to hit enter
now it will be asked for configuration I
will not use typescript for for this
tutorial let's leave everything else to
default and let's wait for our app
installation to complete this should not
take a lot of time let's wait perfect
now let's go to LS YT and there's only
one package we need here you can even
eliminate that if you want to but I want
to make things simpler so I'm going to
install pmpm in we going to install AOS
so pnpm install axos AOS is a library to
make HTTP requests and we're going to
create a config file that sets a base
URL for all the stuff and um yeah for
all uh interaction with lemon squeezy
API and um we also need another package
I'm sorry I'm I'm really sorry for this
one but we are going to need a package
called as server only which makes sure
that a file is always run on the server
side so yeah now let's do code Dot and
open Visual Studio code perfect let's
get this to full screen it's going to
lag a bit I really got to replace my
machine perfect now first things first
we need an envirment variable file so
let's create
env. loal and now first thing we need is
lemon squeezy API
key which we will get from the dashboard
so let's go to the dashboard and here we
are going to go into the
settings and in the API section and we
will get our API key right here I
already have one which is pretty strange
I I don't think I had one for this but
anyways I'm just going to delete this
one and I'm going to create a new one
I'm just going to name it by and please
do not use my API key I'm I'm I'm going
to delete it anyways so don't even try
it's just going to waste your time so
let's go back to a code and I'm just
going to paste this API key right here
perfect the second thing we need is the
store ID so lemon squeezy this does not
need to be private but since we are like
abstracting all the payment rated stuff
to our back end side so we are just
going to make this environment variable
private so we are going to have the
store ID but if you ever wanted to get
this like public you can always do so by
prefixing next public so yeah so let's
go ahead and uh how do we found our
store ID I think it was in general so
let's go
there H strange so let's find how we can
find our store ID I think it was right
here all right so it was in the stores
Tab and we have all my stores here and
the store we are looking for is this one
Aur it store I'm just going to copy the
ID without the hash and we're just going
to paste it here now there is one more
thing we require which is the Web book
signature so whenever somebody tries to
make a payment on a website and whenever
it is successful or even fail or I would
rather say when an order is created
lemon squeezy will try to Ping our
endpoint to tell us that hey this a
person has tried to create an order and
the way to verify if the request has
been sent ledged by Lemon squee and not
by an attacker is by verifying the
signature that lemon squeezy sent us so
how does this work we have a secret uh
which is basically a password which only
you and lemon squeezy knows and using
that password you can make sure that the
request has been sent by lemon squeezy
or not so yeah let's just have a
password Here we will go into the
details lat so we are going to have
lemon
squeezy uh web hook signature oops I
can't
type and we going to have anything you
can literally have anything I'm just
going to have the most secret secret
yeah like it it it just works we will
deal with web books later but first
let's make this thing work all right now
let's go into the SSC folder and let's
create a new folder inside the SRC
folder and I'm going to call it utils
and inside utils I'm going to create a
new file file called axios
JS and this will contain our AOS uh
configuration so I'm just going to
import axos
here import axos auto complete thank you
and now we can start creating our
instance but first of all we need an
base endpoint so lemon squeezy has this
endpoint which we can always contact so
I'm just going to say export const
exporting just because we might need it
later but um it's fine if we don't so
lemon squeezy
endpoint and the endpoint is https not
the one which is suggested by co- parate
but yeah uh api. lemon
squeezy slv1 perfect now this is the API
key sorry this is the API URL which we
are going to call in every single
request we make to lemon squeezy so
let's create the instance so I'm just
going to say
export const instance actually I'm going
to name it lemon squeezy API
instance to be more specific about this
so we are going to create a new instance
using axes. Create oops I can't type
today and we going to have the base URL
here hello autocomplete yeah uh lemon
squeezy end point I just wanted to make
sure that the base URL is like the URL
is all uper case not yeah now we also
need some headers which are provided in
the documentation I'm just going to save
a lot of effort from your side I'm just
going to copy and
paste these things so yeah the accept
and content type headers are something
that lemon squeezy requires and uh
authorization this contains your API key
uh which we pulling in from our
environment variables so yeah perfect
all right now we are going to create a
new API route which will handle
the purchasing for us we will look at
the UI after this so in app we are using
the app directory for next just if
you're using Pages directory make sure
you follow that format but uh since we
using App directory we are going to
create a new folder here I'm going to
call it API uh it should be named API by
the way I'm sorry if I said that I'm
going to call it API it literally should
be called as API now we can call some
folder so yeah now I'm going to call it
purchase product and inside this I am
going to need to add a route. TS file uh
sorry we are not using typescript I
almost forget every single time oops
it's hard it's hard at the JavaScript
yeah anyways now first thing first we
need to export a variable so export cons
Dynamic and we this the value needs to
be Force Dynamic this tells next just
that uh there is no caching involved at
all so don't ever cache the response and
next thing we are going to have is the
actual request Handler so we are going
to make this a post Handler so post it
it is going to only handle post request
so let's do that so export asnc
function post and it will have a request
object and let's open the function now
we can do a try cat block right here and
we can do console do error Whenever
there is an um error in this block we
don't know what it is so we just going
to return that it's an internal server
error so let's do response and U since
using next sh uh this is just the uh way
of sending responses but if you're using
Express you might have like a response
variable inside of your Handler or
something but here we are just doing
response. Json and we're just going to
say message and error ORD and the next
thing we are going to have is a status
which we are going to pass in 500 uh um
mentioning that it's a internal server
error now we can work with stuff now
let's get the data from the post request
so con data request data and then we
going to have request. uh request
dojason I hate when these handlers do
not uh yeah when these handlers do not
have any like types in JavaScript you
need to like just figure out things if
it works or not and it's pretty bad if
you're using typescript it's going to be
much easier but um this is how it works
here so in JavaScript so you just say
request. Json and all of your body will
be converted into an object and will be
set
into request data whatever I named it
anyways now the first thing we want to
check if there is a product ID provided
so this is going to be a very Dynamic
route so if that uh you can just pass
you can just call this endpoint and just
pass in your product ID and it will just
return you with with an URL which you
can make payment with but uh yeah
so uh if there is no product ID provided
we must throw an error so let's do
that request data dot um I guess product
ID GitHub co-pilot is being too annoy
right now so yeah the then we need to
return a response so return response.
Json and we are going to have a message
product ID is required thank you get up
co-pilot for once hello what happened
yeah the status should be 400 as in bad
request perfect and now we can make our
request to lemon squeezy thing so how do
we do that so let's go to the
documentation so this is the
documentation API reference for lemon
squeezy they have two different
documentations one is help documentation
and one is an API reference I will have
the API reference in the uh description
below this is what you will need I think
the documentations is a little confusing
I think they can improve a lot here but
yeah now what you need to do is click on
read the developer guide and we can go
on taking payments and we can get uh
gist of what we need to send to lemon
squeezy so if you're using a post
request to then if you want to get a
checkout checkout and point so creating
checkouts with API you just need to use
this request I would have liked if they
had buttons to change languages but it's
fine we can still work with it so we
need to send this data so first of all
let's Port all this data to a
code and we need to send it to/
checkouts right so we already have these
datas so let's not worry about it we
need to send it to/ checkouts so let's
go um I'm sorry let's go back to our
code and let's go beneath this line of
code and let's say uh con
response is equal to a wait Lon squeezy
instance. post and we are going to post
to/ checkout since we already have the
base URL we do not need to have the
entire URL and now we will have
the data so in the data we are just
going to pass and we just going to paste
it in and we're just going to save it
now this is the data we are going to
send I know this is this does not look
pretty at all but what this means is
that uh in data you are passing in all
the things and um which is related to
your request and the type of this
request is checkouts in relationships
you need to pass in all the data of your
specific lemon lemon
squeezy um instances like your store ID
uh and your variants but instead we need
to edit it here so for stores we need to
have a store ID so let's have process.
EnV do let's go here and copy the store
ID uh perfect and now we can
have in the variant uh we are treating
the variant as a product ID here because
typically you will have different kind
of variants with different anyways if
you want to rename this to variant ID
feel fre to do so I'm just going to let
it be product ID so we are going to
replace this with the uh variant ID so
which is actually the product ID here so
let's do that uh we are going to do
request
data do product ID and since this is
going to be an integer we are going to
convert it to string I also have doubt
that this might be an integer so let's
convert it to string because lemon
squeezy only accepts string Zer perfect
and now when we have the response uh we
will need to console log it out um to
check it out so let's do
console.log response perfect now let's
try to figure things out let's uh create
a new request here so we will go to our
Thunder cland we will create a new
request we don't need the release notes
and uh we will make a request to http
Local
Host 3,000 SL API slash what was it
again it was purchase product perfect
and now we need to pass in all the
headers and stuff uh
actually we do not because we are
handling it internally so we need to
only pass in the body uh we need this
needs to be a post request and it needs
to be adjacent so we need to pass in a
product ID let's get our variant ID from
there so let's go to store let's go to
products let's copy the variant ID I'm
treating this as a separate product
that's why I had named a product ID so
yeah hello yep paste it let's send this
request connection was was refused by
the server let's go to the terminal and
see what's wrong here oops we haven't
even started it yeah classic Dev mode
yeah all this time we have been coding
and we haven't even started the server
it's like crazy let's wait there will be
actually no response but we got in 500
that means something is wrong oh yeah
that's because we didn't send any
response but uh even the request failed
which is interesting let's see what's
wrong here bad requests oops
404 H oh it it should be checkouts yeah
dumb mistake so let's go back let's send
this request again 500 again I wonder
what it is now all right yeah the thing
was it wasn't really an error I was
trying to log the entire response thing
but we only needed the actual data that
was returned back to us so what I did
was uh took out the check out URL which
we will see the structure right now and
I just console loog the respons of data
so let's look at the response of data uh
where is my terminal so yeah this is the
response we get so we have the data
inside it and then we have the
attributes which has a lot of different
things and we have the product options
check out options but the main thing we
need here is the URL so this is the
unique URL which your user will use to
pay and we will pass this to the front
end uh for them to make the payment the
cool thing why we the thing with here is
why we are using this uh because because
uh we need to pass in custom data so
like what traditionally you can do is
you can simply go to the dashboard for
11 squeezy and generate a URL and share
it but what we want to do is we want to
attach custom data with this specific
session and we will get that data back
when the user completes the transaction
so how do we uh pass in custom data here
we can do that by adding a new
attributes section
here attributes I cannot type today and
then we can have okay let me give you
give it a comma and then we can have
custom data oh actually this needs to be
check out data and then we will have it
so check out
data and we will have custom here this
is the format you need to follow and
then you can have any key value pair
here so for example if you have uh
authentication session active you can
find your user ID and you can just plug
it in here so yeah uh but in this case
I'm just going to hardcode it because we
don't really have a customer ID here or
user ID here because we haven't implied
authentication or something but just
feel free to do it it's just going to be
like just plug in the actual user ID and
you will get the user ID at the webbook
S side when the uh order is completed
perfect so this is done now we can
simply go ahead and try again let's send
it we will get oops we are getting some
error oh yeah I know why we are getting
an error because this should be a string
key value pass the value should be a
string in this case and let's send it
again now we have the checkout URL which
we will be passing to the front end now
let's also check the terminal for One
Last Time
oopsie yep now we will also have this
checkout data which is an object which
contains everything which we have which
is user ID it's not printing it out I
just want to show you that the checkout
data is here so that means that it has
accepted it so perfect now we can
actually make payments now we are also
passing using response. Json and we
passing the checkout URL now let's
enable the front end to make calls to
this API and uh make the actual payment
so what we are going to do is we are
going to use the
page.js file we're not going to go into
a lot of details but I'm just going to
remove everything from here we do not
need everything we just need the main
tag and I'm going to have a button here
I'm I just going to I'm just going to
copy paste we do not need to focus a lot
uh it's just going to perform a by
product one uh function which we are
making right now so let's create a new
function C by product
[Applause]
one
async function and my typing speed has
been so bad lately this also will have a
TR catch block and uh we will also have
an error here so we can
simply pass in this code and we will
just alert when there is an error we
will do this Tri tribe block right now
so we are going to do const response the
difference here is that we are making an
API call to our own API which is the
next ch's API route so we going to do a
wait axios we are going to import axos
axios
dopost slash API SL which is product the
data we are going to pass here is
product ID so let's go ahead and get the
variant we are going to copy the variant
ID and we're going to pass in it here as
a product ID yeah let's just do it fine
I was thinking about something else but
I think it's just fine let's just
console log it uh for personal thing if
there is some kind of error we can
easily debug it but the next thing we
want to do is when you want to redirect
the user to the checkout URL to complete
the payment so we can do window.
open and we can say response. data.
checkout URL and we will pass in blank
so that it opens in a new tab perfect
now whenever this button is clicked uh
new tab will be opened where the where
the customer can do his payment and yeah
and if you have any pro if you have
anything set in your product like
sending through email those things will
be sent directly to their emails so yeah
this is how it works let's go let's go
to a browser and test it out so we will
go to local 3000 waiting for it it's
going to take some time H oh yeah this
needs to be a client component so we are
going to use use client I want to make
an entire video on this uh use client
stuff react server component in the next
JS I think it deserves a video of it so
on but yeah let's go back and we will
have this button so let's click this
let's see what happens now a new tab has
been opened it's loading perfect test
mode has been currently enabled now it
has a email ID because we are logged in
here but if not they will get an email
ID prompt here now for card number uh
anyways I think I can blur it out so I'm
just going to type 42 42 42 42 42 42 42
which is the same as stripe so uh yeah
4242 42 and then we are going to
have 2 42 42 I'm just going to have some
some random stuff here I think 4 digit
it works and uh yeah uh let's proceed
with the payment
processing perfect continue now the
thing is that the payment has been
completed but how does your website know
how does your servers know that the
payment is completed of course you can
have like a crw job which like fetches
every single every five minutes to see
if a payment is done or not but it's
really not that good so like if a person
makes a payment right now the person
might potentially have to wait 5 minutes
to uh see his or her payment reflected
and that sucks really so there is one
good thing you can create web hooks that
means that lemon squeezy will call your
API and will inform you that the payment
is successful and that you can enable
their services their paid services so
yeah let's do that so let's go to GL
squeezy dashboard let's go ahead and
click on settings let's go to web hooks
let's create a new web hook
now we need to pass in an URL now this
is a very difficult thing right because
we are in Local Host we cannot just pass
in Local Host here because it doesn't
know what our Local Host is so the thing
is that we need to use some kind of
tunnel so I'm going to use NG Rock so
I'm going to leave a tutorial about how
to use ngok in the comments like you
need to have an API key and stuff but I
already have all of it configured
because it's more of os related thing
how to install it so go ahead and check
it out but but uh what we going to do is
we are going to use NG Rock um HTTP uh
HTTP local 3000 let me tell you the
reason why we are using this what this
will do is it will give us a link uh
which will be a public link if we pass
into to the web hook thing it will
automatically call our Local Host so if
ngok uses the link which is provided
here this will forward all the requests
to a local Host this is how it works and
it's called a tunnel so if you notice
Tel you know what I'm doing right here
so yeah let's pass this URL here for the
signing secret we need to pass in the
same one which we passed here in our
environment variables make sure you just
have some really good one not some goofy
one right like I have right here you
will choose some events here but for
this video I think event order created
should be enough so I'm just going to
save the web hook perfect now I'm just
going to click on Cross perfect now the
Web book is done now let's try to make
the payment again don't worry if
whenever you want to try it out you
don't need to make uh the payments a lot
of time to just just to debug the
webbook uh you can always uh resend the
webbook event from L squeezy so I'll
show you what I mean so let's try to
make this payment once and we do not
need to make it again and
again
um does this work yeah perfect uh yeah
now we can go back to our
dashboard and uh we can reload this
page and we will say that we have the
response of 200 and this data was sent
to us and we can actually get we can
actually use this data to find out the
state of the user if you can go here we
will actually find in the last meta
object you will have the custom data
which we passed when we created the
checkout which is pretty cool uh but
this's one thing we need to modify we
simply passed in the domain here but
which is not good we need to pass in/
API SL webbook which this is the route
we are going to create right now so yeah
let's save this one perfect now yeah
let's work on getting the endpoint thing
up so I'm just going to create a new
folder here under API which is going to
be called as web hook reflecting on what
we passed in on Lemon Squeezy and we are
going to create a new file called route
JS let me get the code from there we do
not want to waste a lot of time here um
this is the entire code for this file uh
actually I coded in typescript first so
I need to remove everything which is
related to typescript
here yep so what we are doing here is
first of all we are cloning the request
because we want the request as text
first because we are passing it for
verification of signatures and then we
are also getting the event name from our
request which is the original request
not the cloned one so we are getting the
oops we getting the header uh which has
the event name which is basically what
event what event is so basically for
example we enabled order created if you
have multiple of those enabled you would
get the exact event name here then we
have the body of the
actual actual content of the request
then this part is copied from lemon
squeezy you do not need need to focus
how it works it's a lot of cryptography
stuff but in short this is just trying
to uh verify if the request is really
coming from lemon squeezy or Not by
using the secret so make sure you keep
the secret very private and not share it
with anyone else because if they have it
they can probably get around this and
pass malicious request to you and after
this point after this uh block of code
this request is legit and you can trust
anything the data says so if the you can
check if the event type is order created
you can get out the get the user ID from
here and you can get if the payment is
successful by checking the status if
it's paid or not I'm not going in detail
of this file because we don't have a
database we don't not have um specific
data to work on but if you have a
database you can simply plug in your
database logic here to make sure that
the that your customers plan is edited
so yeah uh you can simply check out all
these data like U you can check which
where is useful for you and you can fill
that in your database or you know what
you can simply get all of the data from
here and just fill it in your database
for later use and you can simply do the
recent thing and it will work out
oh H so let's click on resent and we
should have it in our terminal so if we
see the data here uh oops there is some
kind of error there is no kind of
response oh yeah we do not have a
response yet so what we will do is uh we
are just going to do
response. Json web hook received and I
think this is important for many web
hooks because if you do not have a 200
response they will try to send it again
and again which is very problematic but
yeah so it's very always it's always
good to have a response to a web hook so
yeah now if you send it again
uh we will have we most likely will have
all the data here we all we have a error
again H which is pretty H this is this
is strange let's try it out
again going to click
resend because we are sending a response
I know for sure no response is written
from Route
Handler ensure that you have a response
we do have response of course we console
logging it out and we are sending a
response using response. Json so yeah I
figured it out it should have been
returned we do not need to do this in
Express but uh apparently this one
requires it so you need to have return
before this so yeah and it works if we
go back and if we see if we resend it we
can check our terminal and we will have
only data and not the errors because we
actually have console loged the body
here and if you go ahead and reload it
first we only have 1 200 and now we have
two 200s which we just have and we we we
also see the response which our web hook
replied with so if you have like some
kind of things logs and stuff you can
always pass it through the webbook
response and you will see it here so
yeah this is how you can work with lemon
squeezy you can the opportunities are
endless here you can do literally
anything you want to uh I will have the
code in the description below though uh
in the GitHub repository so yeah that's
it for this video in this video we saw
how you can use lemon squeezy for
payments for your software products very
easily using nextjs so yeah if you have
any suggestions make sure you leave them
in the comments below and uh please hit
the like button hit the Subscribe button
share this video with your friends and
leave some comment below to support me
and promote my videos in the algorithm
so yeah that's it for this video I'll
see you guys in the next one bye
Voir Plus de Vidéos Connexes
Adding an App Icon and Launch Screen to SwiftUI | Todo List #7
macOS Menu Bar App (Code Along) | SwiftUI, Xcode
The RIGHT WAY To Build AI Agents with CrewAI (BONUS: 100% Local)
Multi-Agent Conversation using CrewAI
Create a List of Todo items in SwiftUI | Todo List #1
How to Set Up an Unreal Engine 5 Git Repository - SourceTree Source Control
5.0 / 5 (0 votes)