Hello everyone. Hope you're doing all

right. In our today's video, I'm going

to share with you another amazing

project which is the web flow app. And

this app is really cool. And there is a

two of the features which I love most is

one is that which have that theme

customizer. You can customize the entire

theme. You can customize even the

typography. Like if you choose this

theme, the sunset glow, it will reflect

in the application. Also you can choose

like right now it's running on like if I

choose the popins as you can see the

popins is selected and either way I can

go back to the default and we are using

lot of things there is the like the

normal dashboard for the user where I'm

having now right now if I just go click

on the sign out as you can see there is

an a sign in and also a create one like

a register applied over here and we have

the home as you can see without sign in

we can't visit any pages

And this is the benefit over here. We're

using the MongoDB database and also we

are using that for the stripe payment

authentication for our subscription

method and also we are having the

cloudinary image management by which by

which we are managing the image. So

we'll go we'll go through the overview

over there after end of the overview as

well like before you can have this

entire repository and trust me it hasn't

it having everything for you people to

start with. They have a table of

contents, features, and remember the

Shopk Pro e-commerce. If you don't know

yet, just hook up to the previous video.

I'm going to also provide the link in

the description. So, you know that video

having like uh like it has everything to

start with with your e-commer e-commerce

business. So this is this is the

demographic scenario for the project

structure that we have the pages and all

the routes set up and also if you just

go through directly in that

documentation there is a very high

possibility you will understand the

project structure more than ever and

also in the description there will be

the live link so you can start you can

try about yourself with all the

features. So let's just explore a bit.

So first of all as you can see without

login we are now in the homepage we are

knowing about the about the

documentation how it's going to start if

if you click you it will just take you

through the documentation page where you

can find and clear overview how to start

and what kind of work it is doing beside

of that I'm going to share you another

thing is this that we are using next

year 16 on the project so yeah lots of

people are asking for the tutorial the

video is coming it's uh there should be

two video, one for the blog, one for the

portfolio and another of course as well

we're going to bring up that e-commerce

uh very soon. So this is coming up next

year 16.0 and also if we just explore

that next config.ts file as you can see

we are using that uh like all of the the

some of the ignore which we are

ignoring. By the way, you can use that

feature also like a cache component

true. It will work perfectly here if you

want to do it. And also the react

compiler it also will work but I'm just

keeping it uh like mute not required but

you can use that. So all the

configuration is done right there. We're

using uh the Telin CSS the latest

version here. So that you can see the

theming here which we use which we

created using the Telin CSS. As you can

see this is primarily going to work very

good and if you just go a little bit

deeper you can understand that scenario

much more often and you know the repo

going to cover almost everything. So

first of all what is the workflow right?

What what is the web flow right? So if I

just go I will just log in as an admin

account so that I want to show you what

kind of things we are having. So this is

the admin account we have and I'm going

to just log in and this every single

scenario is we're using the JWT token

and others to just configure our entire

setup. So first of all as you can see

this is the web flow I have my previous

six web flow but if I just and also is

searching and others going to working

perfectly fine. So I want to create a

new web flow right and I don't want to

go any of the because there is the four

template you can follow through then

also you can go with the quick start

guide but what I want I want to go just

from the scratch so I'm going to make

that let's say I'm going to provide a

name it your web flow right so just to

see how it's going to work so now the

web flow is created so this is my uh

dashboard right here to focus on what

kind of things is going on uh then I'm

going to just take and like uh I can

take an web hook and also I can take an

API call or I can take an schedule right

so if I took a schedule so that going to

standardize when I'm going to make the

call and then I'm going to create also

an API call right so if I go with the

fake store API so I'm going to go with

that API and there we'll try to get some

data so that's the documentation uh so

that's the product list we have okay

let's close it uh so that's the product

list right so we'll try to fetch product

from there within a proper timing. Oh, I

forget to save that one. It's not an

auto save. So, if you doesn't save it,

it will just disappear. You just need to

save it or you can also enable the auto

save. So, if you just go and come back

from anywhere right now, it will work

perfectly fine. Okay, but there is the

error because we didn't configure it,

right? So, we can pass the web hook like

that over here. So, that should be a get

method. Instead of wave hook, you can

see this is not an appropriate scenario

to use the wave hook. So we can remove

it. We will make it a schedule. So that

schedule going to enable us when we want

to make that web hook to call or that

API to call. We can configure the timing

from here. And then we can configure our

API and we can choose either it's a get

method, post method, put or delete

method like we can provide the timing

and then what we can do is that we need

to connect that together. So it's

similar like if you are having that N8N

which is a very very uh proper version

to work like that but you know we are

just trying to understand those work. So

we're going to go in a pretty decent and

normal and there is a lot of parallel

parameter is there filter switch if

else. So you can combine those data

layer together. So right now if I want

to run that let's see what's going to it

going to do. As you can see the API call

is done. So it's providing the data. If

you want to see all the data together

you can see it as you can see. And now

the step two is schedule. So you can

make a schedule when the data would be

calling. You can simple you can provide

the time. It should be similar as the

chrome job. So you can now configure the

data call where wherever you need to

feed the data. It will automatically

connect over there. And by the way this

page also responsive. You can see you

can either go from here and you can

remove from here. So everything going to

work perfectly. And then you can also

make that one as an active or inactive.

It's just up to you. You save it and

automatically it will save. You can go

to the dashboard and the similar thing

it going to provide you that. But what

is that called the professional and

others you can see the manage bailing

over here. This all are calculate.

There's a whole lot of pages right here

which we are not seeing. If you go for

the like the product we have the feature

page all the pages. The good thing is

that those entire pages is crafted. some

of the pages which is really making some

things but all the tabulous page and

also the integration how you going to

integrate and all those things as well

as going to combined with your setup for

the theming it's going to work with that

so you can see the FA API references and

also for the blog and updates so

everything is right here you can just go

by and update the pages and that would

be really provide you a good kick to

start with so we're going to create a

new account just to see uh before

creating we can see the admin dashboard

here. This is the admin dashboard from

where you can manage everything as an

admin. Now you can see you have 10

users, you have 23 workflows, four undid

messages, five executions. So you can

manage anything and everything from

here. Either if you want to delete any

user, you can update an user. So now we

have a test user, we can edit user if we

want and as well the similar parameter

we can delete user. If you're looking

forward, we can delete it. It's up to

us. So we can do it. Then we have our

paid memberships. Whoever purchased the

product, we have the paid membership and

plan type subness status. And by the

way, this also all the entire setup is

fully responsive. We have the entire

workflows according to the user and

others because admin can handle

anything, right? We can see the inactive

one, we can see the active one. Then we

have the messages because people can the

message with the admin and others

because we have the contact from. So

from there we can go and do so many

things. We have the email subscriptions

which already I have a three email which

is subscribe. We have the settings and

others to go by. So right now let's go

try to login and create a something like

a new setup. So I'm going to just create

a sign out button here and I'm going to

create a new one. Okay. And then you can

upload your image from there. But right

now I'm going to make that as a YouTube

uh let's say user. Okay. YouTube user.

And I'm going to just make a name of

YouTube@gmail.com.

I'm going to I'm going to keep it empty

because the mandatory field is that

because if you click here, you can see

what is the mandatory. So I'm going to

provide the password. Uh you can see the

password if you wanted to. Then I'm

going to create the account. You see

account created successfully. After upon

creating the account, it's going to

automatically redirecting you to the

home like the login page. So I'm going

to go by with a YouTube email uh user.

So let's say and now signing in. So now

I am in my normal flow. Now let's create

a normal workflow. I'm going to go with

the email automation and let's say

create and start building. So this is

the template it going to provide. It

going to provide with the setup how you

can start. Now you can just uh

revalidate recirculate and then you can

figure the web flow and it going to like

you can validate that one and it will

automatically start working. So this how

we going to combine you can use your

entire other database structure and all

you can do that. So now what is that

free version and others first of all

before uh entertaining on that we need

to start our web hook right so if I go

with that it should be stripe listen

that's the way book which you're running

right now so we need to run the webbook

otherwise the payment integrations will

not work perfectly so the problem is in

the free version you can create up to

six workflows only after six the button

it will be visible you can try in the

real time uh whatever the link I'm going

to provide you can try there and you can

see after six work web flow you cannot

create any other web flow. So for that

you can see that you can see uh the

update one or you can just go with the

you can see 1 to six monthly uh

execution. So there is the demo here. So

now you can go with the professional

either you can go with the business for

enterprise you need to contact with

customer support okay where so the

customer can help with that how you

going to do. So I'm going to go with

start the professional okay with the

stripe and it going to open or pop up

with the stripe integration. So I'm

going to provide a valid name here. So

42 4 to okay oops it should be 42 and

I'm going to provide a valid month here

also. So 12 34 and going to be 1 2 3

just provide a name here. Done. So now

after the payment is done, it going to

update my entire status because as I'm

going through uh to be an a professional

user so that it going to update my

category according to it. As you can see

it's verifying the payment the plan is

activated and what's included. So that's

all just to go by so that you can

understand how it going to work with

that. So right now I can have the 50 for

the plan and you can see the users

details. I can go for 50 workflows and

other execution. That's that's the

different two different thing. One is

that if you see one is the 50 workflow

and then is the 10,000 execution. So

both are different setup. So you need to

understand on that. So this is the how

you can start with that. You can now go

with your uh like the profile segment.

So from where you can update the

profile, you can edit the profile, you

can delete anything like if I YouTube

react. Okay. And then I'm going to just

you can see the email you cannot edit.

You can do other anything. Let's say uh

software

uh engineer and I'm going to go with

that reactivity.com and save the changes

and as well as we did we are changing

everything. We're good to go. So this is

a perfect blend of application which can

really trigger and trust me try to

experience all the pages. There is a

very very good setup with the pages. So

if you just look forward to it you can

have a very good overview of how those

things can done and how those things is

working. So that's things you need to

understand a bit better. So first of all

what I'm going to do as I'm running it

in my local host 3000 I'm also my stripe

uh web hook. I'm going to close it

everything. I'm going to close all. Now

what's the best we can do is that we can

now bring up like the clone setup here.

So this is the application which we're

going to use it and I'm going to show

you from like the bottom to top. So you

can do the same thing with me and we can

build it together so that there will be

no problem at all to go and start with.

So first of all as we are having that we

need to have this drive uh sorry the

MongoDB. So what I'm going to do if he

doesn't have the MongoDB you can

register the application in MongoDB and

then you can just coming over here there

those videos is right there. So I'm not

going to go and measure it. So what or

I'm going to just go and make log out

from everywhere so that it could be easy

for you to understand how the things we

can make it done. Okay, good to go. So

I'm going to close this one. So first

thing first, I'm going to go with my

let's say I'm going to open uh my

over here the GitHub desktop and I'm

going to make that uh let's say web flow

app YT. Okay, that's the application

which I want to clone. I'm going to

clone it directly from there. So right

now what is online I'm going to just

cloning right there. So you and me are

doing the same application. If you

doesn't want to do like clone it using

that GitHub uh desktop you can either uh

make that using that let's say you can

directly use your terminal to do that

you know you can just make that g clone

then you can just pass the g clone

parameter over here. What is that? This

is the one. If you just copy that and

then pass it here, it will automatically

clone in that repo because as it just

using at public either if you having the

GitHub account you can directly fork it

then it will automatically going to

upload in your GitHub repo and whenever

I'm changing you just need to need to

have the pull request and it will going

to work perfectly fine. And for the

about section I'm going to just put a

tackle over here. So that should be

webflow.react.com.

This is the live application here. So

I'm going to just provide that uh to you

so that whenever you are visiting the

repo uh you can have it right here. So

should be let's say uh webflow app.

Okayflow

later on I'm going to extract these

things. So now this is just an small

setup right there. So right now as we

are having in our local like in our repo

here. So the first thing first you need

to understand what you need to do. First

of all, as you can see, I'm going to

make a little bit more bigger so you can

see it properly. So now, first thing

first, you need to care take care about

that configuration. So this is the

MongoDB URI. So you need to have the

MongoDB setup. We have the next URL. We

have the next secret. We have the Google

client ID, Google client secret,

colinary cloud name, colinary API key,

cloudinary API secret. For the image

uploading, we need to provide this. I

just keep it in a production mode. We

need to have the stripe publishable key,

secret key, web hook, secret. Then we

need to have these four key. Stripe

professional monthly price ID, Stripe

promotional yearly price ID, monthly

price ID, business or yearly price ID.

So this we need to create. Okay. So this

is the three things which we are

requiring right now. The first command

I'm going to run that PNPM. I'm using

the PNPM. If you're using npm or doesn't

matter. It going to work perfectly for

all of the scenario. So you can go

through with any of it. And after that

I'm if I run right now it going to

provide a very very certain error

because it cannot access that MongoDB

for sure. So just run the command for

the local host 3000. No it's running.

Yeah. So application is running but we

are having error. Okay that's the

MongoDB fetching error and others it

going to have that. But now we can visit

the signin page. We can visit the create

one page. So everything is right there.

All the is in setup. So let's go to

MongoDB. I'm going to go directly login

using one of my account here. So I'm

going to use a new account to go with

that. Right. So to do that I think all

of my account I will go with the

developer. Uh okay let's see it's just

an o configuration. I think it will do.

Okay. I I believe this application also

has or may not be if it doesn't have uh

no it has. Okay. Anyway so you will not

get the gig right here. So what we can

do uh we can just uh this is our cluster

and we if you just browse the collection

let's see what we have in this database

because uh uh okay we have the blog okay

so right now what I need to do is that

to have a certain kind of scenario I

will I will try to uh login with a

separate one which doesn't have the

account I change the account so now this

one doesn't have the cluster it has but

it's resumed so I'm going to resume my

previous old cluster so uh Okay. Post

host terminate. Okay. Uh okay. What is

that? The M0 reseab version of his

backup. Okay. Uh

what is that?

That's that's pretty old. Okay. We need

to change the account right now. Okay.

We just terminate uh we did terminate

the previous cluster. So right now we

doesn't have any cluster. That's the

same thing. Once you're going to log in,

you're going to have to come here to

create the cluster. So first thing first

we're going to build a cluster here. If

we click over there now we need to

choose the location. Uh the by default

name it going to be cluster row. So you

can either keep that one or you can go

with to provide your own name if you're

looking forward to and there is a three

separate plan is right here. So what is

coming here for hourly build? One is the

flex and we are going to love to have

that free. Trust me whatever you are

having free for the 520 megaby storage

and share RAM and BCPO. So that should

be enough for you right. So if you are

looking in the production then you can

go for that and for I'm going to go with

whatever the default setup is providing

me right now. See again aller free and

let's uh I think if uh I'm near to India

I think that Mumbai is paid so I can

choose it. Uh even it will be a little

bit slower but anyway okay. So it's

still in the bahin so it's south Asian

Asian specific. So right now I'm going

to create a username. I'm going to

provide that as an admin and also as an

admin. Trust me, you can autogenerate or

make sure that you are happen to provide

a very uh perfect bend. I'm going to go

with that later on. I'm going to change

that. So, right now I have the previous

setup. So, I'm going to remove those

things. Not ready right now. I'm going

to create and before creating that one

if I add it uh I need to provide uh what

kind of uh Okay, I think I'm going to

remove those uh IP address also. Okay,

let me just remove it. Okay, I'm going

to just finish and close it right now.

Later on, I'm going to go with uh in the

cluster then I can remove those things.

Okay, now while it's loading your sample

data or creating the entire segment, you

can do two two things. First is that go

with the database and network access and

in the database we have the and there is

one thing you need to make sure that

your role should be at last admin. Okay,

if it doesn't showing as an atlast

admin, you can directly go with the

built-in role here. Okay, not no need to

there. You can just toggle through here.

You can just toggle whatever the role

you can provide. So, I'll just provide

in atlast admin. So, it can do any kind

of work right there. And then you check

your IP address list. Make sure to have

that 0000.0.0.04/4.

Otherwise you can also use your current

IP but that time you can only access

with your current address but if you

keep zero then you can address it from

uh like access it from anywhere. So

let's go back to in our cluster. So

that's a new cluster right here and also

it going to just loading some dummy data

which you can remove it later on. You

can see the simple this the data is

creating. You can just either drop it

from here and it going to automatically

remove the entire data structure. What I

recommend you to remove it to have a

fresh start whatever is providing it

going to take a bit of time. So as it's

loading right now so what we need to do

we need to find a way how we can connect

with it right. So to connect that there

is a multiple way to connect. So here

you can use the drivers which can

connect you locally. If you click that

you can connect directly locally and go

with that. But as far as uh we doesn't

have that we can go with the compost.

And as we doesn't have the compost

installed in our machine, we can just

copy that scenario. Right? So if we copy

that should be enough for us and it

going to work perfectly. So I copy it.

Let's go over here and paste it right

here. Now we need to manipulate several

setup. First of all, you can see we put

the user as an admin and also the

password as an admin. Try to keep that

user and password autogenerated either a

very simple not so sophistic not so

complicated because if it's very

complicated that one cannot read that so

make sure to remove everything and then

put that admin and after that over here

you can do two separate uh scenario

first of all you can provide like you

need to provide a question mark here so

that's the question mark I provide and

then you need to go the retrie and

majority and app name cluster

zero so better to provide that then you

can provide the app name so like it

could be your collection name so I'm

going to make that as web flow right so

that web flow app so that we can

understand that is the combination where

we going to hit and connect our

application so if you can see here in

the browse collection where the

collection is right now it going to

create the collection name as the web

flow and then it going to provide the

data layer I think again we try to

remove that It's still loading. So it

will later on like you can remove it uh

one at a time because right now it's uh

still loading. So it going to take a bit

of time to remove that but let's skip

it. So whatever it is that so that that

is the one setup right so we're going to

go directly from the setup and then we

need also to have that next occ

we're going to just make that open SSL

open SSL ran 64. So that's the uh okay

no not like that 6432

I believe need to provide okay no really

let's see what's the command is I think

the full command it will be this one

open SSL B 64-B 64 32-bit so that could

be the scenario I'm going to I'm going

to also like uh offer there I'm going to

put that command so that you can have it

and you can generate any secret if

you're looking forward to so right now

I'm going to copy that so let's click

Copy it here then just pass it. So this

is our next al secret. Then we need to

have two separate configuration here.

One is that to have that Google client

ID and Google client secret because we

are using the Google ooth. You just need

to if you are already did that shop pro

e-commerce application. You know how to

configure that. It's very easy to do. So

I'm going to go with that. I believe you

know how to do that. So let's just go

with the sign up procedure. I'm going to

go with that. Let's say I'm going to go

with my name. So let's say if it can

loged in.

Okay. No atgmail.com.

I'm going to go with the role and I'm

going to go with the password.

Okay. Let's try to create a new user. If

my database is all right, it should uh

start. Yeah. Okay. I think it's it's

cool. It's really cool. It's it's just a

single time. It didn't make a mistake.

Didn't make a mistake. So let's see if

it's coming. Yeah, that's the web flow

and that's the user. If I go directly in

my user, we have that I have my email

password also hashing the password and

everything is working within the next

application which is the next JS 13 uh

sorry 16.0 uh 16.1. So you know

everything working perfectly fine

running with a vast majority setup of

APIs. So this is all the APIs right here

which having the admin API, O API,

contact API, newsletters. So everything

is right here all of the things. But if

you are feeling the some of that you are

missing something then what I recommend

you to go to upgrade where you can find

not so much prices there. Even if this

price is seeming that is high for you,

let me know in the comments. I will

reduce it for you. Trust me. And by the

way, you can also directly go in my

account right here just to provide that

you can uh get member over there. You

can also support my channel and trust me

if you're still with me, subscribe the

channel and please to like the video. It

will be a lot and lot help for me and I

really appreciate that for you. So that

you can do if you're looking forward to

but if you're not looking forward to you

can directly go with that. If you're

like me, a coding geek or developer,

want to build everything by yourself,

you can just clone that or and then

smash it. Okay, right now, as you can

see, we have the free account. Let's see

if we can click any web uh like create

any web flow. So, I'm going to make that

one. Let's say API data call. Okay, so

let's create that web flow just to see

if it's working or not. You can explain

uh you can go through with every single

setup. So, I'm going to go with the

schedule uh schedule call and I'm going

to go with the API call. This is my

favorite one. So, let's save it and we

can just connect that two together and

then I'm going to go my API to bring

back my API. So, let's see. Uh I'm going

to put that which going to be a get

method. I can make a schedule. I'm going

to just save the configuration here.

Okay. Why? Why it's just gone? It was

connected, right? So, save. If I hit

run, it will automatically fetch all the

product directly from that API. Okay,

working perfectly. If I validate, it's

validating. I can export the data. You

can see the JSON data is just exported

from there. So, I can just uh open that.

You can see all the JSON data just

coming up from there. And then also I

can import the entire setup if I'm

looking forward to just to go on by. I

can activate, deactivate, I can change

the theme. Okay, I didn't I didn't talk

about that. I can change the theme right

now. Everything is there. Nothing

missing at all. You can have the entire

setup right now. You can change any of

the uh like any of the API to change the

language or you can go with the reset

with default. The default value going be

appearing right here. Now, how we can

get our admin, right? To do to get our

first admin, we need to manipulate the

database because this is our first

admin, right? Later on admin can assign

admin and other users. So we're going to

update in the MongoDB and whenever we

update let's see if it's reflecting or

not. Uh as you can see that is

reflecting. It just updated

automatically in the database structure

and working perfectly fine. So now what

we need to do we can upgrade our plan.

Even we are admin we need to work with

that upgrading the plan. If you are

looking forward that no admin doesn't

need you can do that. So what we can do

right here we need to create an

application for this one. So create an

account. So should be webflow app and

then for dashyt I'm going to create an

application because we need to create a

certain kind of scenario which need to

be provide in a very good scenario. So

the first thing first provide a time and

also we need to have that uh setup for

that. As you can see, we can directly go

in the settings or or we can go Yeah,

from the settings, we can go with the

API keys. We make sure don't share those

API secret key to anybody. So, if you

click on generate, okay, uh I I need to

receive an email for that to start with

that. So, let's see. Uh it's is provide

the confirmation email. So, let's just

loged in with that and I will get my

confirmation email. Where is my account?

This is the one. So let's just log in.

Okay, got that. So now I need to provide

that confirmation confirmation

tab. So done. Now as you see untitled.

So I'm going to provide the name as

that. Let's say it should be uh webflow

webflow app YT. Now I need to copy this

name. You see the cloud name. I need to

copy the cloud name. That would be my

cloud name here. Then I need to copy my

API key. That would be my API key. The

most important I need to also copy that

secret key and make sure doesn't share

it with anybody and don't use that

actual key I'm using because later on

I'm going to remove it. So when we did

that now if I go directly in my

application let's just see I want to

change my uh profile picture right? So I

can add it from here. I will upload an

image. So let's just go in the downloads

and can upload an image. Let's say

uploading enemy. Uh it's less than 5

mgaby. So it cannot upload. So I'm going

to go with the AI bubble and I can

upload it right here. Okay. Now it's

uploading and then save images and

automatically it just uploaded and even

when you reload it will be there and you

can see your asset, you can see your

folders. There is no folder structure

right there. You can see oh it's there.

So if you click in the web flow it going

to showcase your setup. You see this is

the one which you're having right now.

So this is very simple. Let's go in our

application here. I'm going to skip

everything for the stripe payment

integration and directly go to the

sandbox. So we need to clear up. We need

to have several things from there. We

need to have the publishable. You need

to have the secret. We need so there is

seven things too. I'm skipping. If you

know how to grab these four, you can

also do that too. So from there as you

can see we are now in web flow

application. First and foremost, I'm

going to go and bring back our API keys.

So, let's click on developers. Let's

click on the API keys. We should have to

get two API keys. One is the publishable

key. Another is the secret. Later on, we

will receive the web hook. Now, where

these two this key here for the monthly

pricing ID and others from where we can

grab it. This is very important. We need

to have that. we'll go with our product

catalog here and from there we can

create the product right so in that

product it going to create those

scenario or also we can uh I think also

we can go with the pricing tables to

generate uh and make those things done

and I'm going to just share with you the

previous setup so let's say stripe and

I'm going to try to change my account

with my previous balance so that I will

let you show that how it going to

structurize so let's just go and bring

back that web uh webflow application and

from there if I go directly in the setup

of the products what we are talking

about right now. So that should be the

product catalog and as you can see we

have the planner. So this is the old

products we can create right we have the

business plan we have the in the

business plan we have the two pricing

setup right so the same thing it going

to work also here uh whenever we're

going to create these two setup so right

let's create the pricing table uh now

the pricing table okay keep it like that

all products I'm going to create that so

that should be let's say I'm going to

keep the same name as it is so that

should be the business plan

Okay,

business plan. So, should be a recurring

and I'm going to just provide a $10 or

yeah $20 just to provide that. So,

monthly 20 and more pricing options and

that should be monthly and that should

be yearly and yearly should be 200.

Right? So, one is the monthly, one is

the yearly. Okay? So, save and also this

one add product. Right? So, this is the

business plan which we having right now.

So business plan have what we did we

have only one plan okay one year uh okay

year is saved but other is not saved so

I'm going to go with the monthly another

one I'm going to create uh that should

create the two plan together right

that's how it going to work so I'm going

to edit the product uh business plan

pricing uh add another pricing

so

monthly should be 20 Okay.

And yearly should be 200.

I hope this will work. Update the

product. So we should have yeah per year

two. So now if we click here uh we

should be able to get so this is the

business plan and this is the log. Okay

cool. So now from here if we you can see

monthly 20 yearly 200. So if I go and

copy the price ID. Now what we need to

have that stripe professional monthly we

place that and also here stripe

professional yearly copy the price ID

the similar setup place it that's it now

we need to get the wave hook to grab the

wave hook uh I'm going to I'm going to

remove this one I think so and you can

create another pricing here so that

should be uh okay not like that you can

go in the product catalog now as the

business plan you can create the another

plan which is the uh professional plan

Like so the business plan business

yearly uh professional yearly so this is

the professional okay

you can rename that so the business plan

professional yeah so this is the

business so I can

cut it

anyway I'm going to keep it the same for

both of that you can either customize

and you can do your product in a very

decent way the way you are looking

forward to but for me I think this will

do the good things for us. So now what I

need to do I need to make that stripe uh

stripe login. So I need to login this

stripe. So enter and make sure whenever

you are trying to loged in that you are

in the same account which you can see uh

okay it's provide me the digit for to uh

the verification. Let's just go grab my

account verification code and I'm going

to go with this. I'm just uh hiding it.

I don't want you to show you my entire

email. So forgive me for that. So I'm

going to copy that and paste it here.

Okay. Everything is looking perfect.

Okay. Now as you can see from there I

need to choose. I'm not in the web flow.

So I can switch my application. I want

to go with the web flow YT. So whatever

application we are locked in need to

match otherwise the web flow the web

hook it will not match entirely. Okay.

Allow access. Good to go. Access is

allowed. Access granted. So right now

what we can do we can make that stripe

uh listen uh stripe listen and as you

can see if I just check in our API our

stripe web hook is right here API and

then directly over there we have the web

hook where is the web hook oh

it doesn't have we have a stripe web

hook okay that will not work because as

you can see API for/ /stripe

for slash webbook. So this the one which

we need to copy. So I'm going to just

copy that and over here in that I will

pass. Okay, this one is the good one.

This is right there. So hit uh okay not

there you need to keep it here and

enter. After entering it will provide

you a code as you can see that's the

code is for us just to provide that

stripe secret. It's saved. Now I'm going

to go over here. Let's try to go with

that upgrade the plan and let's see what

it going to do and how it going to work.

Let's go with the professional pay with

stripe. So we're going to go with the

monthly plan and now it's going to

provide. Okay, it just passing that

there. So means it going to work

perfectly. Believe so. 1 2 3 1 2 3 and

provide the name blah blah blah. Done.

So now what it going to do? it going to

go and make the plan for the $20 per

yearly uh sorry per month and then if

you want to upgrade you can update it

yearly. Okay, it's payment is success

continue to dashboard and you need to uh

it will update for sure as you can see

now over here in the transaction we

should be able to see our transaction

for the subscription and that is working

from which email and what kind of plan

and every details is right there. So

this is looking good. So now we have the

setup done. Our entire segment is

working. Even if we go directly in our

admin dashboard, we should be able to

see the admin dashboard. So we have one

user act, one active workflow. So

everything is working perfectly aligned

together. But how we can deploy it,

right? We have everything running

locally. How we can deploy and running

that wave hook in real time. So we need

to maximize those scenario. So what I'm

going to do I'm going to go in my versel

here. Uh okay. So versel right now as

you can see I'm going to I'm going to

also upload some changes which uh okay

there is no much changes only the env

which no need to pass there. So whatever

the env is right there we can uh do it

manually. So I'm going to go create add

a new project right there and we can

find the top project which will be

webflow app yt. So we can just go and

make import that and I'm going to before

passing there we need to make uh make

sure another thing is that I'm going to

just close everything and there we need

to make sure that our application like

PNPM build like it's going to build in

proper way so there is no error

everything is working fine and as you

can see right here uh we have a very

good structurable things you see we have

the server count static component

dynamic component especially uh our API

going to in dynamic because it's going

to wait for but most of the pages are

static. You can see most of the pages

are static but API uh could be dynamic

on that. So four now we need to make

sure to provide that environment

variable. Right now what I'm going to do

I'm going to just copy that entire

segment. I'm I'm going to skip that next

URL. I'm going to just comment it and

I'm going to select everything. Okay.

And once you select everything if you

just make paste everything it will

ignore that comment. So uh make sure to

have that uh like the client ID client

secret from there for the Google

otherwise the Google uh login it will

not work. Okay. So right now what it

going to do it going to start uh

building the setup deployment is on the

queue because my uh whole dashboard is

having a very like more than 200 project

is right there. So getting a little bit

asleep here. So now we're going to

provide a bit of time while it's

uploading and then we're going to

configure our web hook there. Okay. So

the setup is done. We can continue to

our dashboard. Then we will find one

assign link web hook app yel.app.

So this is the link where application

going to work. If I go try to sign in,

remember we have that our account which

is that snore@gmail.com

and we can use our password and let's

see if it's working or not in our real

time. Let's see what's happening. It

going to take a bit of time before

making the caching and other setup.

Okay, everything is working. So now as

you can see this looks pretty cool. So

now we're going to try to assign a new

account just to see and before you

fundamentally uh just go alone by I want

you to copy that then I want you to go

over here and from the developers I want

to choose that to make is that web hooks

right and from there we can add the

destination here and from the

destination we can select whatever the

web hook method we are using. So let's

say web hook. So that's the uh subscribe

uh subscribe here. Uh subscription it

will not make a deal here but the web

hook going to do. So in the web hook

let's see what kind of actions which we

are taking. Check out session completed.

So we're going to go the customer

subscription created. So this we need to

copy. So check out session uh we can

find that completed one action need to

be done. then check out because

subscriber can update it their accounts.

So this should be created and that

should be updated.

So whenever those action going to work

the web hook going to call and also

check out subscription customer

subscription deleted that method going

to also need to be triggered and then

invoice payment succeed because we can

create the invoices. So right now let's

see invoice payment succeed and also we

can provide an integration layer

whenever the invoice payment is failed.

So we need to also choose that the

failed method and then any method we use

more no this is the method the way books

going to handle together to create the

subscription plan and others. So I think

we are good to go. Okay. Uh not so

anyway. So right now what I'm going to

do I'm going to go hit continuous and

then I'm going to use my waybook

endpoint the endpoint going to be and

I'm really sorry if you are finding my

uh visuals like my voice is getting a

little bit regional tone because I'm

from the Bangl I'm from Bangladesh so it

going to connect with that so I'm really

sorry for that if you're feeling that so

from here I'm going to use my endpoint

and then create the destination so this

is the destination here I need to copy

this one this is the uh web hook key

which we need to update in our like say

we're going to go in our uh settings

over here and from the settings I'm

going to go with the environment

variables and from the environment

variables remember the web hook secrets

so uh stripe web hook secrets so I'm

going to just edit that and I'm going to

replace that one I'm going to remove

this I'm going to pass it that one and

hit save after save you need to redo

redeploy your application or if you're

having any changes you can redeploy it

again and now we need to provide a bit

of time to finish the deployment

otherwise we cannot refactor over here.

So what is deploying? We can sign up

with another application. Let's say it

going to be test uh user and test

atgmail.com

and then I'm going to do that create

account. Okay. Password mismatch. So I

think

password mismatch again. Oh my god.

Really?

Okay,

now I think it should work.

What's the password I put?

Okay.

Uh, anything we missing?

Uh, let's see. So, this the Barcel app.

So, if I go with that, let's say I'm

going to go with the zone door. Let's

say zone atgmail.com.

Okay.

Okay,

let's create. Okay. Uh, some glitches

was there. But I think uh yeah, I forgot

to make the console log. It should not

be an problem there because this user is

not there. So, it should not be a

problem. If it's there, it going to

provide an error for sure. So, I think

this is just a glitch. So, if you if

you're finding that also in the real

time in real sector, let me know in the

comments. So let's go in the free. I'm

going to update my plan. So I believe my

application is already updated. So right

now if you go to create the start

professional let's try oh the planning

which okay uh you need to change that uh

typing here from the uh that page

otherwise it going the model is having

that old prices which you need to update

that. I think these things you can do

very well. Okay. So after subscription

is done. So now you can see we should be

able to have the two subscription here

right now. So if we just close it, we

can uh see the transactions here. Let's

go in the web hook. Okay, still it's

running. So after having that we should

be having a okay

there is another problem which we need

to configure because as you can see next

URL if we just go by in our where we

used that uh in the web hook. So process

env next to the URL and this is the

stripe create. This is the stripe create

and this two. So let's go in our web

hook. Uh web hook and in the web hook I

believe we are doing some manual

adjustment that's why it cannot read

that. So when the payment is done where

we are heading

okay

we are handling that. So yeah that

should not be so what we need to do we

need to provide that next URL in our uh

segment here. So if you go in our

settings and from the settings again

that environment variables because

remember we we copied everything but

next URL is not there. So should be

let's just go uh next out URL we're

going to just uh provide our URL here

because it just take taken by in our

local host. So

uh okay

let's just update this one. So this is

the one it should be.

So that would be the value. Okay. And I

believe it going to work.

So success URL next URL. Okay.

Next URL. So now if you just redeploy it

again and just uh use it in a proper

way, it going to work perfectly. So

trust me it will work. We tested it

before and it will not compel anything.

So right now you can go through the

entire application structure. You can

find the tuning. You can also like if

you're missing anything in there, let me

know in the comments. I'm going to try

to support you regarding on that. If you

also get any the upgrade plan like you

purchase that code, if you're having any

issue, let me know in the comments. But

I believe you're going to have almost uh

pretty much having to make sure

everything is done properly from there.

Just follow through it. So you're going

to have a better idea how to build up

the application in a proper way, how to

structurize the application in a proper

way and how to make those payment setup

in a very very cool and easy manner. So

all the best. I think you should be able

to do that by yourself as I really love

these two cool feature and I believe you

you people should take it and use it in

proper way. So, I believe you can do it

and all the best and I'm going to see

you in our next