This is a multipart series about building a payment system with Angular4 and Firebase. You can check out the Part 1 Full Lesson at https://angularfirebase.com/lessons/collect-payments-with-angular-stripe-checkout-and-firebase/

I start by talking about the payment process with Stripe. Then show you how to code it step-by-step with Stripe Checkout. 

Also, make sure to get an API key at https://stripe.com
2024-02-04T08:25:06.066Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
b8781a17-d206-4211-87e1-b7ee54a7a230
d9019ebea715610ff81d6c2ebce35abf7627095a9ba0c5f8426494e8cbc8a934
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode we're going to integrate Stripe payments into an Angular 4 project with Firebase on the back end.
This is the 1st installment of a multi part series on handling payments in Angular.
In this first part, you'll learn how to trigger the Stripe checkout model to collect the customer's credit card and then receive the payment token back from Stripe.
Before we get into the code, let's take a look at how the whole Stripe payment process works.
The user will enter their credit card details through the Angular app with Stripe checkout.
Then Stripe will respond with a payment token, which we then want to save in the Firebase database.
This will automatically trigger a cloud function which sends the token back to Stripe.
Stripe will charge the card and then respond with the charge details.
Firebase and Angular have a real time connection, so the user will We stay up to date on the status of their payment throughout this process.
Let's start by getting the initial setup out of the way.
First, you'll need a Stripe API key, which you can get from stripe.com.
Then go to the checkout documentation and we'll be modifying the custom integration to work with Angular.
In your app environment file, add the Stripe API key and make sure it's the test key.
From there, we need to add the Stripe checkout library the index dot HTML file.
And the final step is to make TypeScript aware of the Stripe checkout class, which you do in the typings.d.ts file.
The next step is to create a feature module to handle all of our payment components and services.
When you're done with this lesson, your payment module should look something like this.
From there we can generate the service specifying the payment module, Then import AngularFire database and AngularFire auth.
And first, we'll get the user ID by subscribing to that AngularFire auth state.
The only other thing our service needs to do at this point is save the Stripe token to the Firebase database.
The payment object will just be the Stripe token as well as the amount that we wanna charge the customer.
Let's take a look at how this data is actually structured in the database.
Every payment is nested under its associated user ID.
The payment object has an amount, which is just a number.
And the token and charge properties are objects that are returned from Stripe.
They contain all kinds of useful information that we'll see later in this lesson.
Now we can start building the component that will trigger the Stripe checkout window.
We'll use the host listener decorator, And we'll also want to inject the payment service into the component.
And we'll need the environment variable with our Stripe API key.
We set variables for the handler, which is the Stripe checkout object, and also the amount, which we'll just hard code to 500.
500 is equal to $5 in Stripe.
Everything's counted as 1 one hundredth of the underlying currency.
The handler is defined during n g on init and we define a few properties in there including the Stripe API key, as well as a default logo image.
But the most important part is the token property, which is a function that we can use to handle the token when it's sent back to us from Stripe.
In this case, we send it back to the service to update it in the database.
The next function is just an event handler that you can attach to a button click, and this will actually trigger that Stripe window to pop up.
The last step is to use host listener to listen for the window pop state event.
This will happen if The route redirects or if the user clicks the back button.
So if you redirect to a confirmation page, you'll definitely wanna implement this function.
Let's go back into the app and make sure it's working.
Using a test credit card from Stripe, we can send a test request to the API.
Once the charge is complete, we should see the database updated with the token details.
The most important part here is the token ID, which we'll send back to Stripe from our back end to actually charge the card.
So it's important to note at this point that the card hasn't actually been charged.
We just have a token that we can use to charge it on the back end.
In the next part of this series, we'll go over how to actually charge the card with Firebase Cloud Functions.
That's it for part 1.
If this video helped you please subscribe.
And if you're serious about Stripe payments, I recommend getting a pro subscription at angularfirebase.com.
You'll get exclusive content related to Angular, Stripe, and Firebase as well as access to our pro channel on Slack for 1 on 1 project consulting.
Thanks for watching.
I'll see you in part 2.

Speaker 0: In this episode we're going to integrate Stripe payments into an Angular 4 project with Firebase on the back end. This is the 1st installment of a multi part series on handling payments in Angular. In this first part, you'll learn how to trigger the Stripe checkout model to collect the customer's credit card and then receive the payment token back from Stripe. Before we get into the code, let's take a look at how the whole Stripe payment process works. The user will enter their credit card details through the Angular app with Stripe checkout.

Then Stripe will respond with a payment token, which we then want to save in the Firebase database. This will automatically trigger a cloud function which sends the token back to Stripe. Stripe will charge the card and then respond with the charge details. Firebase and Angular have a real time connection, so the user will We stay up to date on the status of their payment throughout this process. Let's start by getting the initial setup out of the way.

First, you'll need a Stripe API key, which you can get from stripe.com. Then go to the checkout documentation and we'll be modifying the custom integration to work with Angular. In your app environment file, add the Stripe API key and make sure it's the test key. From there, we need to add the Stripe checkout library the index dot HTML file. And the final step is to make TypeScript aware of the Stripe checkout class, which you do in the typings.d.ts file.

The next step is to create a feature module to handle all of our payment components and services. When you're done with this lesson, your payment module should look something like this. From there we can generate the service specifying the payment module, Then import AngularFire database and AngularFire auth. And first, we'll get the user ID by subscribing to that AngularFire auth state. The only other thing our service needs to do at this point is save the Stripe token to the Firebase database.

The payment object will just be the Stripe token as well as the amount that we wanna charge the customer. Let's take a look at how this data is actually structured in the database. Every payment is nested under its associated user ID. The payment object has an amount, which is just a number. And the token and charge properties are objects that are returned from Stripe.

They contain all kinds of useful information that we'll see later in this lesson. Now we can start building the component that will trigger the Stripe checkout window. We'll use the host listener decorator, And we'll also want to inject the payment service into the component. And we'll need the environment variable with our Stripe API key. We set variables for the handler, which is the Stripe checkout object, and also the amount, which we'll just hard code to 500.

500 is equal to $5 in Stripe. Everything's counted as 1 one hundredth of the underlying currency. The handler is defined during n g on init and we define a few properties in there including the Stripe API key, as well as a default logo image. But the most important part is the token property, which is a function that we can use to handle the token when it's sent back to us from Stripe. In this case, we send it back to the service to update it in the database.

The next function is just an event handler that you can attach to a button click, and this will actually trigger that Stripe window to pop up. The last step is to use host listener to listen for the window pop state event. This will happen if The route redirects or if the user clicks the back button. So if you redirect to a confirmation page, you'll definitely wanna implement this function. Let's go back into the app and make sure it's working.

Using a test credit card from Stripe, we can send a test request to the API. Once the charge is complete, we should see the database updated with the token details. The most important part here is the token ID, which we'll send back to Stripe from our back end to actually charge the card. So it's important to note at this point that the card hasn't actually been charged. We just have a token that we can use to charge it on the back end.

In the next part of this series, we'll go over how to actually charge the card with Firebase Cloud Functions. That's it for part 1. If this video helped you please subscribe. And if you're serious about Stripe payments, I recommend getting a pro subscription at angularfirebase.com. You'll get exclusive content related to Angular, Stripe, and Firebase as well as access to our pro channel on Slack for 1 on 1 project consulting.

Thanks for watching. I'll see you in part 2.
In this episode we're going to integrate Stripe payments into an Angular 4 project with Firebase on the back end. This is the 1st installment of a multi part series on handling payments in Angular. In this first part, you'll learn how to trigger the Stripe checkout model to collect the customer's credit card and then receive the payment token back from Stripe. Before we get into the code, let's take a look at how the whole Stripe payment process works. The user will enter their credit card details through the Angular app with Stripe checkout. Then Stripe will respond with a payment token, which we then want to save in the Firebase database. This will automatically trigger a cloud function which sends the token back to Stripe. Stripe will charge the card and then respond with the charge details. Firebase and Angular have a real time connection, so the user will We stay up to date on the status of their payment throughout this process. Let's start by getting the initial setup out of the way. First, you'll need a Stripe API key, which you can get from stripe.com. Then go to the checkout documentation and we'll be modifying the custom integration to work with Angular. In your app environment file, add the Stripe API key and make sure it's the test key. From there, we need to add the Stripe checkout library the index dot HTML file.
And the final step is to make TypeScript aware of the Stripe checkout class, which you do in the typings.d.ts file. The next step is to create a feature module to handle all of our payment components and services. When you're done with this lesson, your payment module should look something like this.
billing
programming
From there we can generate the service specifying the payment module, Then import AngularFire database and AngularFire auth. And first, we'll get the user ID by subscribing to that AngularFire auth state. The only other thing our service needs to do at this point is save the Stripe token to the Firebase database.
The payment object will just be the Stripe token as well as the amount that we wanna charge the customer. Let's take a look at how this data is actually structured in the database. Every payment is nested under its associated user ID. The payment object has an amount, which is just a number. And the token and charge properties are objects that are returned from Stripe. They contain all kinds of useful information that we'll see later in this lesson. Now we can start building the component that will trigger the Stripe checkout window.
billing
banking
We'll use the host listener decorator, And we'll also want to inject the payment service into the component. And we'll need the environment variable with our Stripe API key. We set variables for the handler, which is the Stripe checkout object, and also the amount, which we'll just hard code to 500. 500 is equal to $5 in Stripe. Everything's counted as 1 one hundredth of the underlying currency. The handler is defined during n g on init and we define a few properties in there including the Stripe API key, as well as a default logo image. But the most important part is the token property, which is a function that we can use to handle the token when it's sent back to us from Stripe.
billing
cryptocurrency
programming
In this case, we send it back to the service to update it in the database. The next function is just an event handler that you can attach to a button click, and this will actually trigger that Stripe window to pop up. The last step is to use host listener to listen for the window pop state event. This will happen if The route redirects or if the user clicks the back button.
So if you redirect to a confirmation page, you'll definitely wanna implement this function. Let's go back into the app and make sure it's working. Using a test credit card from Stripe, we can send a test request to the API. Once the charge is complete, we should see the database updated with the token details. The most important part here is the token ID, which we'll send back to Stripe from our back end to actually charge the card. So it's important to note at this point that the card hasn't actually been charged. We just have a token that we can use to charge it on the back end. In the next part of this series, we'll go over how to actually charge the card with Firebase Cloud Functions. That's it for part 1. If this video helped you please subscribe. And if you're serious about Stripe payments, I recommend getting a pro subscription at angularfirebase.com. You'll get exclusive content related to Angular, Stripe, and Firebase as well as access to our pro channel on Slack for 1 on 1 project consulting. Thanks for watching. I'll see you in part 2.
youtube
streaming
billing
customer support
In this episode we're going to integrate Stripe payments into an Angular 4 project with Firebase on the back end. This is the 1st installment of a multi part series on handling payments in Angular. In this first part, you'll learn how to trigger the Stripe checkout model to collect the customer's credit card and then receive the payment token back from Stripe. Before we get into the code, let's take a look at how the whole Stripe payment process works. The user will enter their credit card details through the Angular app with Stripe checkout. Then Stripe will respond with a payment token, which we then want to save in the Firebase database. This will automatically trigger a cloud function which sends the token back to Stripe. Stripe will charge the card and then respond with the charge details. Firebase and Angular have a real time connection, so the user will We stay up to date on the status of their payment throughout this process. Let's start by getting the initial setup out of the way. First, you'll need a Stripe API key, which you can get from stripe.com. Then go to the checkout documentation and we'll be modifying the custom integration to work with Angular. In your app environment file, add the Stripe API key and make sure it's the test key. From there, we need to add the Stripe checkout library the index dot HTML file. And the final step is to make TypeScript aware of the Stripe checkout class, which you do in the typings.d.ts file. The next step is to create a feature module to handle all of our payment components and services. When you're done with this lesson, your payment module should look something like this. From there we can generate the service specifying the payment module, Then import AngularFire database and AngularFire auth. And first, we'll get the user ID by subscribing to that AngularFire auth state. The only other thing our service needs to do at this point is save the Stripe token to the Firebase database. The payment object will just be the Stripe token as well as the amount that we wanna charge the customer. Let's take a look at how this data is actually structured in the database. Every payment is nested under its associated user ID. The payment object has an amount, which is just a number. And the token and charge properties are objects that are returned from Stripe. They contain all kinds of useful information that we'll see later in this lesson. Now we can start building the component that will trigger the Stripe checkout window. We'll use the host listener decorator, And we'll also want to inject the payment service into the component. And we'll need the environment variable with our Stripe API key. We set variables for the handler, which is the Stripe checkout object, and also the amount, which we'll just hard code to 500. 500 is equal to $5 in Stripe. Everything's counted as 1 one hundredth of the underlying currency. The handler is defined during n g on init and we define a few properties in there including the Stripe API key, as well as a default logo image. But the most important part is the token property, which is a function that we can use to handle the token when it's sent back to us from Stripe. In this case, we send it back to the service to update it in the database. The next function is just an event handler that you can attach to a button click, and this will actually trigger that Stripe window to pop up. The last step is to use host listener to listen for the window pop state event. This will happen if The route redirects or if the user clicks the back button. So if you redirect to a confirmation page, you'll definitely wanna implement this function. Let's go back into the app and make sure it's working. Using a test credit card from Stripe, we can send a test request to the API. Once the charge is complete, we should see the database updated with the token details. The most important part here is the token ID, which we'll send back to Stripe from our back end to actually charge the card. So it's important to note at this point that the card hasn't actually been charged. We just have a token that we can use to charge it on the back end. In the next part of this series, we'll go over how to actually charge the card with Firebase Cloud Functions. That's it for part 1. If this video helped you please subscribe. And if you're serious about Stripe payments, I recommend getting a pro subscription at angularfirebase.com. You'll get exclusive content related to Angular, Stripe, and Firebase as well as access to our pro channel on Slack for 1 on 1 project consulting. Thanks for watching. I'll see you in part 2.
In
in
this
this
episode
episode
we're
we're
going
going
to
to
integrate
integrate
Stripe
stripe
payments
payments
into
into
an
an
Angular
angular
4
4
project
project
with
with
Firebase
firebase
on
on
the
the
back
back
end.
end
This
this
is
is
the
the
1st
1st
installment
installment
of
of
a
a
multi
multi
part
part
series
series
on
on
handling
handling
payments
payments
in
in
Angular.
angular
In
in
this
this
first
first
part,
part
you'll
you'll
learn
learn
how
how
to
to
trigger
trigger
the
the
Stripe
stripe
checkout
checkout
model
model
to
to
collect
collect
the
the
customer's
customer's
credit
credit
card
card
and
and
then
then
receive
receive
the
the
payment
payment
token
token
back
back
from
from
Stripe.
stripe
Before
before
we
we
get
get
into
into
the
the
code,
code
let's
let's
take
take
a
a
look
look
at
at
how
how
the
the
whole
whole
Stripe
stripe
payment
payment
process
process
works.
works
The
the
user
user
will
will
enter
enter
their
their
credit
credit
card
card
details
details
through
through
the
the
Angular
angular
app
app
with
with
Stripe
stripe
checkout.
checkout
Then
then
Stripe
stripe
will
will
respond
respond
with
with
a
a
payment
payment
token,
token
which
which
we
we
then
then
want
want
to
to
save
save
in
in
the
the
Firebase
firebase
database.
database
This
this
will
will
automatically
automatically
trigger
trigger
a
a
cloud
cloud
function
function
which
which
sends
sends
the
the
token
token
back
back
to
to
Stripe.
stripe
Stripe
stripe
will
will
charge
charge
the
the
card
card
and
and
then
then
respond
respond
with
with
the
the
charge
charge
details.
details
Firebase
firebase
and
and
Angular
angular
have
have
a
a
real
real
time
time
connection,
connection
so
so
the
the
user
user
will
will
We
we
stay
stay
up
up
to
to
date
date
on
on
the
the
status
status
of
of
their
their
payment
payment
throughout
throughout
this
this
process.
process
Let's
let's
start
start
by
by
getting
getting
the
the
initial
initial
setup
setup
out
out
of
of
the
the
way.
way
First,
first
you'll
you'll
need
need
a
a
Stripe
stripe
API
api
key,
key
which
which
you
you
can
can
get
get
from
from
stripe.com.
stripe.com
Then
then
go
go
to
to
the
the
checkout
checkout
documentation
documentation
and
and
we'll
we'll
be
be
modifying
modifying
the
the
custom
custom
integration
integration
to
to
work
work
with
with
Angular.
angular
In
in
your
your
app
app
environment
environment
file,
file
add
add
the
the
Stripe
stripe
API
api
key
key
and
and
make
make
sure
sure
it's
it's
the
the
test
test
key.
key
From
from
there,
there
we
we
need
need
to
to
add
add
the
the
Stripe
stripe
checkout
checkout
library
library
the
the
index
index
dot
dot
HTML
html
file.
file
And
and
the
the
final
final
step
step
is
is
to
to
make
make
TypeScript
typescript
aware
aware
of
of
the
the
Stripe
stripe
checkout
checkout
class,
class
which
which
you
you
do
do
in
in
the
the
typings.d.ts
typings.d.ts
file.
file
The
the
next
next
step
step
is
is
to
to
create
create
a
a
feature
feature
module
module
to
to
handle
handle
all
all
of
of
our
our
payment
payment
components
components
and
and
services.
services
When
when
you're
you're
done
done
with
with
this
this
lesson,
lesson
your
your
payment
payment
module
module
should
should
look
look
something
something
like
like
this.
this
From
from
there
there
we
we
can
can
generate
generate
the
the
service
service
specifying
specifying
the
the
payment
payment
module,
module
Then
then
import
import
AngularFire
angularfire
database
database
and
and
AngularFire
angularfire
auth.
auth
And
and
first,
first
we'll
we'll
get
get
the
the
user
user
ID
id
by
by
subscribing
subscribing
to
to
that
that
AngularFire
angularfire
auth
auth
state.
state
The
the
only
only
other
other
thing
thing
our
our
service
service
needs
needs
to
to
do
do
at
at
this
this
point
point
is
is
save
save
the
the
Stripe
stripe
token
token
to
to
the
the
Firebase
firebase
database.
database
The
the
payment
payment
object
object
will
will
just
just
be
be
the
the
Stripe
stripe
token
token
as
as
well
well
as
as
the
the
amount
amount
that
that
we
we
wanna
wanna
charge
charge
the
the
customer.
customer
Let's
let's
take
take
a
a
look
look
at
at
how
how
this
this
data
data
is
is
actually
actually
structured
structured
in
in
the
the
database.
database
Every
every
payment
payment
is
is
nested
nested
under
under
its
its
associated
associated
user
user
ID.
id
The
the
payment
payment
object
object
has
has
an
an
amount,
amount
which
which
is
is
just
just
a
a
number.
number
And
and
the
the
token
token
and
and
charge
charge
properties
properties
are
are
objects
objects
that
that
are
are
returned
returned
from
from
Stripe.
stripe
They
they
contain
contain
all
all
kinds
kinds
of
of
useful
useful
information
information
that
that
we'll
we'll
see
see
later
later
in
in
this
this
lesson.
lesson
Now
now
we
we
can
can
start
start
building
building
the
the
component
component
that
that
will
will
trigger
trigger
the
the
Stripe
stripe
checkout
checkout
window.
window
We'll
we'll
use
use
the
the
host
host
listener
listener
decorator,
decorator
And
and
we'll
we'll
also
also
want
want
to
to
inject
inject
the
the
payment
payment
service
service
into
into
the
the
component.
component
And
and
we'll
we'll
need
need
the
the
environment
environment
variable
variable
with
with
our
our
Stripe
stripe
API
api
key.
key
We
we
set
set
variables
variables
for
for
the
the
handler,
handler
which
which
is
is
the
the
Stripe
stripe
checkout
checkout
object,
object
and
and
also
also
the
the
amount,
amount
which
which
we'll
we'll
just
just
hard
hard
code
code
to
to
500.
500
500
500
is
is
equal
equal
to
to
$5
$5
in
in
Stripe.
stripe
Everything's
everything's
counted
counted
as
as
1
1
one
one
hundredth
hundredth
of
of
the
the
underlying
underlying
currency.
currency
The
the
handler
handler
is
is
defined
defined
during
during
n
n
g
g
on
on
init
init
and
and
we
we
define
define
a
a
few
few
properties
properties
in
in
there
there
including
including
the
the
Stripe
stripe
API
api
key,
key
as
as
well
well
as
as
a
a
default
default
logo
logo
image.
image
But
but
the
the
most
most
important
important
part
part
is
is
the
the
token
token
property,
property
which
which
is
is
a
a
function
function
that
that
we
we
can
can
use
use
to
to
handle
handle
the
the
token
token
when
when
it's
it's
sent
sent
back
back
to
to
us
us
from
from
Stripe.
stripe
In
in
this
this
case,
case
we
we
send
send
it
it
back
back
to
to
the
the
service
service
to
to
update
update
it
it
in
in
the
the
database.
database
The
the
next
next
function
function
is
is
just
just
an
an
event
event
handler
handler
that
that
you
you
can
can
attach
attach
to
to
a
a
button
button
click,
click
and
and
this
this
will
will
actually
actually
trigger
trigger
that
that
Stripe
stripe
window
window
to
to
pop
pop
up.
up
The
the
last
last
step
step
is
is
to
to
use
use
host
host
listener
listener
to
to
listen
listen
for
for
the
the
window
window
pop
pop
state
state
event.
event
This
this
will
will
happen
happen
if
if
The
the
route
route
redirects
redirects
or
or
if
if
the
the
user
user
clicks
clicks
the
the
back
back
button.
button
So
so
if
if
you
you
redirect
redirect
to
to
a
a
confirmation
confirmation
page,
page
you'll
you'll
definitely
definitely
wanna
wanna
implement
implement
this
this
function.
function
Let's
let's
go
go
back
back
into
into
the
the
app
app
and
and
make
make
sure
sure
it's
it's
working.
working
Using
using
a
a
test
test
credit
credit
card
card
from
from
Stripe,
stripe
we
we
can
can
send
send
a
a
test
test
request
request
to
to
the
the
API.
api
Once
once
the
the
charge
charge
is
is
complete,
complete
we
we
should
should
see
see
the
the
database
database
updated
updated
with
with
the
the
token
token
details.
details
The
the
most
most
important
important
part
part
here
here
is
is
the
the
token
token
ID,
id
which
which
we'll
we'll
send
send
back
back
to
to
Stripe
stripe
from
from
our
our
back
back
end
end
to
to
actually
actually
charge
charge
the
the
card.
card
So
so
it's
it's
important
important
to
to
note
note
at
at
this
this
point
point
that
that
the
the
card
card
hasn't
hasn't
actually
actually
been
been
charged.
charged
We
we
just
just
have
have
a
a
token
token
that
that
we
we
can
can
use
use
to
to
charge
charge
it
it
on
on
the
the
back
back
end.
end
In
in
the
the
next
next
part
part
of
of
this
this
series,
series
we'll
we'll
go
go
over
over
how
how
to
to
actually
actually
charge
charge
the
the
card
card
with
with
Firebase
firebase
Cloud
cloud
Functions.
functions
That's
that's
it
it
for
for
part
part
1.
1
If
if
this
this
video
video
helped
helped
you
you
please
please
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
Stripe
stripe
payments,
payments
I
i
recommend
recommend
getting
getting
a
a
pro
pro
subscription
subscription
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
exclusive
exclusive
content
content
related
related
to
to
Angular,
angular
Stripe,
stripe
and
and
Firebase
firebase
as
as
well
well
as
as
access
access
to
to
our
our
pro
pro
channel
channel
on
on
Slack
slack
for
for
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching.
watching
I'll
i'll
see
see
you
you
in
in
part
part
2.
2
success
In this video, the speaker explains how to integrate Stripe payments into an Angular 4 project and provides a code for the process. They outline the process of setting variables, creating a payment module, and fixing the token ID and charge properties. The speaker also explains how to use the host listener decorator and the pro subscription service for Angular, Stripe, and Guinea.
Stripe Checkout Payments with Angular and Firebase - Part 1
In this episode we're going to integrate Stripe payments into an Angular 4 project with Firebase on the back end. This is the 1st installment of a multi part series on handling payments in Angular. In this first part, you'll learn how to trigger the Stripe checkout model to collect the customer's credit card and then receive the payment token back from Stripe. Before we get into the code, let's take a look at how the whole Stripe payment process works. The user will enter their credit card details through the Angular app with Stripe checkout. Then Stripe will respond with a payment token, which we then want to save in the Firebase database. This will automatically trigger a cloud function which sends the token back to Stripe. Stripe will charge the card and then respond with the charge details. Firebase and Angular have a real time connection, so the user will We stay up to date on the status of their payment throughout this process. Let's start by getting the initial setup out of the way. First, you'll need a Stripe API key, which you can get from stripe.com. Then go to the checkout documentation and we'll be modifying the custom integration to work with Angular. In your app environment file, add the Stripe API key and make sure it's the test key. From there, we need to add the Stripe checkout library the index dot HTML file. And the final step is to make TypeScript aware of the Stripe checkout class, which you do in the typings.d.ts file. The next step is to create a feature module to handle all of our payment components and services. When you're done with this lesson, your payment module should look something like this. From there we can generate the service specifying the payment module, Then import AngularFire database and AngularFire auth. And first, we'll get the user ID by subscribing to that AngularFire auth state. The only other thing our service needs to do at this point is save the Stripe token to the Firebase database. The payment object will just be the Stripe token as well as the amount that we wanna charge the customer. Let's take a look at how this data is actually structured in the database. Every payment is nested under its associated user ID. The payment object has an amount, which is just a number. And the token and charge properties are objects that are returned from Stripe. They contain all kinds of useful information that we'll see later in this lesson. Now we can start building the component that will trigger the Stripe checkout window. We'll use the host listener decorator, And we'll also want to inject the payment service into the component. And we'll need the environment variable with our Stripe API key. We set variables for the handler, which is the Stripe checkout object, and also the amount, which we'll just hard code to 500. 500 is equal to $5 in Stripe. Everything's counted as 1 one hundredth of the underlying currency. The handler is defined during n g on init and we define a few properties in there including the Stripe API key, as well as a default logo image. But the most important part is the token property, which is a function that we can use to handle the token when it's sent back to us from Stripe. In this case, we send it back to the service to update it in the database. The next function is just an event handler that you can attach to a button click, and this will actually trigger that Stripe window to pop up. The last step is to use host listener to listen for the window pop state event. This will happen if The route redirects or if the user clicks the back button. So if you redirect to a confirmation page, you'll definitely wanna implement this function. Let's go back into the app and make sure it's working. Using a test credit card from Stripe, we can send a test request to the API. Once the charge is complete, we should see the database updated with the token details. The most important part here is the token ID, which we'll send back to Stripe from our back end to actually charge the card. So it's important to note at this point that the card hasn't actually been charged. We just have a token that we can use to charge it on the back end. In the next part of this series, we'll go over how to actually charge the card with Firebase Cloud Functions. That's it for part 1. If this video helped you please subscribe. And if you're serious about Stripe payments, I recommend getting a pro subscription at angularfirebase.com. You'll get exclusive content related to Angular, Stripe, and Firebase as well as access to our pro channel on Slack for 1 on 1 project consulting. Thanks for watching. I'll see you in part 2.
In this video, the speaker explains how to integrate Stripe payments into an Angular 4 project and provides a code for the process. They outline the process of setting variables, creating a payment module, and fixing the token ID and charge properties. The speaker also explains how to use the host listener decorator and the pro subscription service for Angular, Stripe, and Guinea.