Accepting Payments using LemonSqueezy - Integrating LemonSqueezy into Next.js Tutorial

Summary

在这个视频中,作者介绍了如何使用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

00:00

🚀 Lemon Squeezy介绍

这段介绍了Lemon Squeezy作为一个专为软件产品设计的支付处理平台，强调了其相对于Stripe等其他平台的优势，包括更简洁的界面、内置的许可证管理功能以及税务处理的便利性。此外，还指出Lemon Squeezy的易用性，即使是没有创建自己网站的用户也能轻松售卖软件。随后，引导观众进入Lemon Squeezy网站，并展示了如何创建新的商店并添加新产品的过程。

05:00

🔧 创建新应用与产品

这部分详细讲述了如何使用Next.js创建一个新的应用程序来与Lemon Squeezy集成，包括安装必要的包和设置环境变量（如API密钥和商店ID）。介绍了如何通过Axios配置与Lemon Squeezy API交互的基础，并展示了如何创建产品和处理支付的API路由。

10:02

📦 产品和支付处理

这段内容深入讲解了如何定义产品并在Lemon Squeezy上设置售价，包括单次支付和订阅等不同的支付模式。还介绍了如何通过创建API路由处理支付请求，包括验证产品ID并使用Lemon Squeezy API创建结账会话。

15:04

👨‍💻 编码与错误调试

在这一部分，通过一系列编码演示和错误调试，详细说明了如何发送请求以创建结账会话，并如何处理可能出现的问题，例如错误的请求路径或响应处理。

20:04

🌐 前端集成与测试

这段内容聚焦于如何在前端集成支付功能，包括创建触发支付流程的按钮，调用API路由，并处理响应以将用户重定向到支付页面。同时，也展示了如何启动服务器和解决启动过程中遇到的问题。

25:04

🔍 支付完成与Webhook设置

介绍了在用户完成支付后，如何使用Webhook通知服务器。展示了如何在Lemon Squeezy上设置Webhook，并通过NGROK工具将本地开发服务器公开为可从外部访问的服务，以便接收Webhook通知。

30:05

📝 Webhook处理与总结

这一部分详细说明了如何编写处理Webhook的代码，验证请求的合法性，并根据Webhook事件更新数据库或执行其他操作。最后，概述了整个视频的内容，强调了使用Lemon Squeezy和Next.js为软件产品处理支付的便利性，并提供了代码资源链接。

Keywords

💡Lemon Squeezy

Lemon Squeezy是一个为软件产品定制的支付处理平台。在视频中，它被强调为一个专为软件销售而设计的解决方案，提供了如许可证管理和税务处理等特殊功能，以简化软件开发者的销售流程。例如，视频中提到Lemon Squeezy处理税务合规性，让用户可以更专注于收入增长，减少头痛事。

💡Stripe

Stripe是一个广泛使用的在线支付处理平台。在视频中，Stripe被用作与Lemon Squeezy进行比较的对象，目的是突出后者在软件产品销售方面的专业性和优势，如更干净的界面和对税务等复杂问题的处理。

💡许可证

许可证在软件销售中扮演着重要的角色，用于控制和管理用户对软件的使用权限。视频中提到Lemon Squeezy提供许可证管理功能，这对于销售需要授权使用的软件产品尤为重要。

💡税务合规

税务合规是指遵守相关税法和规定的过程。视频强调Lemon Squeezy能够处理税务合规问题，减轻软件销售者在税务处理方面的负担，确保交易的合法性和合规性。

💡仪表板

仪表板是一个用户界面，用于展示和管理信息。在视频中，提到用户在Lemon Squeezy平台上的操作是通过仪表板进行的，包括创建新商店、添加产品等操作。这突出了平台的用户友好性和操作的便利性。

💡产品创建

产品创建是在Lemon Squeezy平台上销售软件所必需的步骤之一。视频详细介绍了如何在平台上创建新产品，包括设置定价、选择税务类别和上传产品文件，说明了平台在产品管理方面的灵活性和功能丰富性。

💡Next.js

Next.js是一个基于React的开源Web开发框架，支持服务端渲染和静态网站生成。视频中使用Next.js来开发一个与Lemon Squeezy API交互的应用，展示了如何集成Lemon Squeezy进行支付处理的过程。

💡API路由

API路由是指处理API请求的路径。在视频中，通过创建特定的API路由来处理购买请求和Webhook通知，这是使用Next.js开发Web应用时的一个常见做法，用于处理后端逻辑和与外部服务的交互。

💡Webhook

Webhook是一种Web回调或HTTP推送API的一种实现，用于在特定事件发生时向其他应用程序发送实时信息。视频中演示了如何设置和处理来自Lemon Squeezy的Webhook，用于在用户完成支付时接收通知。

💡环境变量

环境变量是在操作系统中用来指定运行环境设置的动态命名值。视频中提到使用环境变量来存储敏感信息，如API密钥和商店ID，这是一种保护敏感数据不被直接暴露在代码中的常见做法。

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