Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Monetize Your App with Stripe in 5 Minutes Using Cursor!
You have completed Monetize Your App with Stripe in 5 Minutes Using Cursor!
Preview
Want to make money from your web app but not sure where to start? Neither does Dustin—but in this video, watch as he uses Cursor to figure out how to integrate Stripe for payments. Whether you're building a SaaS, a marketplace, or selling digital goods, adding a seamless checkout is key to getting paid.
Resources
If you want to learn more about Cursor:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You want to make money
0:00
off of your app ideas?
0:00
I mean,
0:02
I think pretty much
0:02
everyone wants to do that,
0:03
but no one knows
0:04
how to do that.
0:05
Like how to
0:05
integrate payment
0:06
processing system to
0:07
your app so that
0:08
people can spend
0:09
money on your app.
0:10
I don't know how
0:11
to do it either.
0:12
Let's say I wanted
0:12
to add some sort of
0:13
payment processing
0:15
system to my app.
0:16
How would I go
0:17
about doing that?
0:18
So that's what we're going
0:19
to do in this video.
0:20
I think I'm going
0:21
to create a very
0:21
basic simple app
0:22
and I'm going to
0:23
just see how hard
0:23
it is to integrate
0:24
something like
0:25
Stripe to that app to
0:26
make some money.
0:28
So let's get started.
0:28
As someone who actually has
0:30
no clue how to add
0:32
any sort of payment
0:33
processing system to an app,
0:34
I'm just going
0:36
to use chat.
0:36
I'm going to be as
0:37
real with you guys
0:38
as I possibly can.
0:39
Just a video on how
0:40
another developer
0:41
would tackle trying
0:42
to figure out how to
0:43
do something they've
0:44
never done before.
0:45
I have absolutely
0:46
no idea how to
0:46
implement a payment
0:47
processing system.
0:48
Got a typo.
0:52
There we go.
0:54
So that I can
0:55
monetize my app idea.
0:55
I heard Stripe is
0:57
a good service.
0:58
How would I go about
0:59
implementing that?
0:59
I have a next
1:00
JS application.
1:01
I lied.
1:02
I don't actually have
1:03
an XJS application,
1:04
but we'll build one.
1:05
So let's just hit send.
1:06
Stripe is an
1:07
excellent choice for
1:08
payment processing.
1:09
And since you're
1:10
using next JS,
1:10
you can integrate
1:11
it efficiently.
1:12
That's good to know.
1:13
All right.
1:14
So let's just
1:14
get started.
1:14
I think we have
1:15
a good bit of
1:16
information here that
1:16
we're going to use.
1:17
Oh, yeah.
1:18
Look at all this info.
1:19
Let's go ahead and
1:20
set up an app.
1:20
All right.
1:21
So we have a next
1:22
JS app cooking up.
1:23
Actually, I think
1:24
it's finished.
1:25
Yes, it's finished.
1:25
And I called it
1:26
lemonade because why not
1:27
let the first thing
1:28
we sell online be
1:29
lemonade?
1:30
Virtual lemonade.
1:34
All right.
1:36
Let's open this up.
1:36
We could say
1:37
cursor lemonade.
1:38
All right.
1:42
Open this up.
1:43
So this is our basic
1:44
next JS application.
1:44
You know what
1:45
I might do?
1:46
I might actually let
1:46
cursor take over.
1:47
All right.
1:48
So after a few Google
1:49
image searches to
1:50
get a really cool
1:51
lemonade image and a
1:52
couple of prompts,
1:53
like literally just
1:54
one or two prompts
1:55
to cursor to build
1:56
out this little
1:57
landing page.
1:58
And here we are.
1:59
I think this
2:00
looks pretty good.
2:01
Fresh squeezed
2:01
happiness.
2:02
The perfect blend of
2:03
sweet and tangy made
2:04
with real lemons
2:05
and pure cane sugar.
2:06
Buy now for $1.
2:07
So clicking this does
2:09
absolutely nothing.
2:10
And I think this
2:11
is good enough.
2:12
Right.
2:13
Let's see if we can
2:13
turn this app into
2:14
something where we
2:15
can make some money.
2:16
Even if it's
2:18
just a dollar.
2:18
Let's just stay in cursor
2:19
and let's just say,
2:21
I've never used
2:23
Stripe before,
2:23
but I want to implement
2:24
it so that when a
2:25
user clicks by now,
2:25
we can
2:26
charge them a dollar.
2:26
Seems pretty
2:28
straightforward, right?
2:28
So it does look like
2:29
it is starting off
2:31
with MPM install Stripe
2:32
and then Stripe JS,
2:33
pretty much just
2:34
like chat GPT did.
2:35
So it says to
2:38
complete the setup,
2:38
you'll need to create
2:39
a Stripe account.
2:40
Get your API keys from
2:41
the Stripe dashboard.
2:42
Create a dot env
2:44
dot local file and
2:45
your project route
2:46
with these variables.
2:46
All right.
2:48
So let's do that first.
2:48
Let's go to Stripe.
2:49
So after creating
2:50
my account,
2:51
it's asking
2:52
me some stuff.
2:53
I can skip,
2:54
but I'll just
2:55
it says, how do
2:56
you want to start?
2:57
And this is just
2:58
a one off payment,
2:59
but it looks like we
3:00
could set up recurring and
3:00
build a platform
3:01
or marketplace.
3:03
So that's really cool.
3:04
We did call the
3:04
app lemonade stand.
3:05
So all right,
3:07
when I click go to
3:09
dashboard and see where
3:09
our API keys are.
3:11
Yeah,
3:13
I'm not sure this is
3:13
where I need to be either,
3:14
but there is a
3:15
setup guide down
3:16
here and it says set
3:16
up one off payments.
3:18
First option is
3:19
choose how to accept
3:20
one off payment.
3:21
So let's just
3:21
click that.
3:22
Maybe we need to
3:22
go through this.
3:23
So there's three options
3:24
of how we want to
3:25
accept one off payments.
3:26
So there's shareable
3:28
payment links,
3:29
which use payment links
3:29
to share a payment page
3:31
with your customer
3:32
over email,
3:33
SMS or social media.
3:35
So this would be a
3:36
link that I would
3:36
send up to someone.
3:37
So I don't think
3:38
that would work.
3:38
And then prebuilt
3:39
checkout form,
3:40
use checkout to
3:41
embed a payment form
3:42
on your site or
3:43
redirect to a
3:45
striped posted page.
3:46
That's not bad.
3:49
That might not
3:50
be a bad option.
3:50
And then the last option
3:51
is embedded components.
3:52
So use elements to
3:54
build secure payment
3:55
experiences perfectly
3:56
match your business.
3:58
I'm going to go with
3:59
this middle option,
3:59
prebuilt checkout form that
4:00
might be all we need.
4:02
All right, so now create
4:03
a one off product.
4:04
Okay, let's do that.
4:05
This seems pretty
4:07
straightforward.
4:07
Click add product.
4:08
Okay guys,
4:10
so all I had to do
4:10
was verify my email
4:11
address and instantly
4:13
my dashboard
4:14
changed.
4:15
And I'm instantly
4:16
brought to this section
4:16
with the API keys.
4:18
So I guess that's
4:19
what you need to do.
4:20
Once you create your
4:21
account on Stripe,
4:21
just verify your
4:22
email address and
4:23
then you should
4:24
be brought to
4:25
your dashboard.
4:25
That shows these two
4:26
keys here that you need.
4:27
So I'm going to go
4:28
ahead and copy this.
4:29
So let's go here
4:31
and create our dot
4:31
env dot local file.
4:32
By the way, please
4:34
don't go and
4:35
try to steal my keys.
4:38
I'm going to delete
4:39
this after the
4:39
videos uploaded.
4:40
So is that it?
4:41
Can I just like
4:42
refresh and hit buy
4:43
now for a dollar?
4:44
Okay,
4:45
so we got something
4:46
went wrong,
4:46
but it does say
4:47
processing here,
4:48
which is pretty
4:48
cool.
4:49
All right, we do
4:50
have an error.
4:50
Let's see what
4:51
the error is.
4:51
All right,
4:52
so let's just copy
4:52
this and paste it
4:53
directly into cursor.
4:54
I see the issue.
4:56
We need to use Stripe
4:57
elements properly.
4:58
Let me fix the
4:59
implementation by using the
4:59
correct element setup.
5:00
All right, hit buy now.
5:02
Pay a dollar.
5:04
Okay, cool.
5:05
So this is all coming
5:05
up, which is really neat.
5:06
All right,
5:07
so after trying to
5:08
put in my actual details
5:09
to pay myself $1,
5:11
I realized I kept
5:13
getting issues.
5:14
I kept getting errors
5:15
with it like it
5:16
kept erroring out
5:16
and it didn't
5:18
tell me anything
5:19
why just that it was
5:19
throwing an error.
5:20
So I had cursor
5:21
write some better error
5:23
handling logic.
5:24
So this time
5:26
when I tried it,
5:27
it said that I
5:27
was in test mode
5:28
and I was using
5:29
real credentials
5:30
instead of test
5:31
credentials.
5:31
And then I thought
5:32
to myself, well, duh,
5:33
no one's going to test
5:35
these things when they
5:36
implement them for
5:37
their websites with
5:38
their own stuff.
5:39
I'm sure there's ways
5:39
to test things, right?
5:40
So it told me to
5:42
go to docs.stripe
5:43
.com slash testing.
5:45
So that's
5:47
where we're at.
5:47
Okay,
5:48
so I think testing is
5:48
actually pretty simple.
5:49
It says testing
5:50
interactively.
5:51
When testing
5:52
interactively,
5:52
use a card number such
5:53
as 4242424242 and so on.
5:54
Enter the card number
5:57
in the dashboard or
5:58
in any payment form,
5:59
use a valid future date
6:00
for the expiration
6:02
date and use any three
6:03
digits for the CVC.
6:05
So let's just try that.
6:07
I'm not going to put
6:08
an email or a phone number.
6:08
I have the test number
6:09
in for the card.
6:11
I put a futuristic
6:12
date for the expiration
6:13
or random security code
6:14
and let's see if this
6:15
actually works.
6:17
Thank you.
6:18
Your payment
6:18
was successful.
6:18
Enjoy your lemonade.
6:19
This is neat.
6:21
Okay, so this is
6:21
actually working.
6:22
So the only thing I
6:23
would need to do is
6:24
figure out how to like
6:25
turn test mode off.
6:25
Now,
6:26
obviously we
6:27
didn't get paid,
6:27
but I did take a
6:28
look on the docs
6:29
and a little bit
6:31
of chat,
6:32
GBT and cursor.
6:33
So we are in test mode.
6:34
I was able to replicate
6:36
an actual transaction,
6:38
but it's only
6:39
in test mode.
6:40
In order for me to
6:41
actually get paid,
6:42
I would just need
6:43
to swap over my
6:43
API keys from the
6:45
test mode API keys to
6:46
the live mode API keys.
6:48
And in order to do that,
6:50
you just need to finish
6:51
setting up your
6:51
stripe account and then
6:52
switching over the API
6:53
keys and everything should
6:55
work just the same.
6:56
Thank you guys for
6:57
coming on this journey
6:57
with me to figure out
6:58
how to add some sort
6:59
of payment processing
7:00
system to an app.
7:01
I honestly expected
7:03
a little bit
7:04
more of a challenge.
7:05
This didn't seem
7:06
too hard at all.
7:07
And that might be why
7:07
we hear about stripes
7:08
so much these days
7:09
because it's just so easy
7:10
to implement.
7:11
I hope you guys
7:12
enjoyed the video and
7:12
I'll see you guys
7:13
in the next one.
7:13
Peace.
7:14
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up