Part 2 of the Angular-Firebase-Stripe series. We setup a backend Firebase Cloud Function to make the actual charge on the user's credit card. Grab the full lesson here https://angularfirebase.com/lessons/angular-stripe-payments-part-2-firebase-cloud-functions-backend/

Lost? Checkout Part 1: https://youtu.be/_lZc2O2oUJk

Join our slack team if you want to discuss Angular/Stripe/Firebase with fellow developers. Invite link at angularfirebase.com 

You may also want to reference the Firebase Cloud Functions and the Stripe Charge docs. 

https://firebase.google.com/docs/functions/
https://stripe.com/docs/charges
2024-02-04T08:24:21.822Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c73897be-8268-47b6-ae80-3fea1665087c
32420b7e86ae365b0eae46d452318bd8ef13f41658a1ad420ed70ffca7d1bb3b
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Welcome to part 2 of Stripe payments with Angular 4 and Firebase.
In part 1, we collected the payment token from Stripe.
And in this episode, we're going to build a Firebase Cloud Function that will actually charge the card.
All Stripe transactions need to occur on a real back end server, and that's exactly what we're gonna use Cloud Functions for.
The first step is to initialize Cloud Functions if they're not already set up in your project.
Run firebase init and then cd into that functions directory.
Then run npm install stripe with the save flag to save it to the local project.
Your package dot JSON file should look something like this.
And from here, we need to set an environment variable with our Stripe API key.
Run Firebase functions config set Stripe dot test key followed by your own Stripe API key.
Check out the link in the description to just copy and paste this command.
Now we can start building the function in the index dot JS file.
First step is to import the Firebase functions library as well as the admin database.
And for Stripe, we'll initialize it with our API key using that environment variable we just set.
Name of the function will be Stripe charge, and we'll use the on write database callback to trigger this function.
In other words, whenever a new payment is written to the database, this function will be invoked.
It has an event object that has the data from that node in the database, which is the payment along with the token.
So we can get that by calling event dot data dot val.
Soft.
And we'll also set variables for the user ID as well as the payment ID just to make our code a little more concise.
And then we want the function to return null if there is no payment or if the payment already has a charge.
From there, we'll chain together a bunch of promises, the first one being the user in the database.
This isn't completely necessary, but it's a good idea if you have recurring charges or if you wanna save customer data in the database.
We call once just to get a single snapshot of this data, then we just return the snapshot value.
From there, we can tell Stripe to charge this customer's credit card with the payment token.
We can set a few variables just to keep the code organized, and we'll also set an item potency key using the Firebase push ID for this payment.
This is important because it prevents duplicate charges.
It guarantees that multiple post requests to this ID can only have a single side effect.
So if we ever had a network issue, it wouldn't duplicate the charge on the customer's card.
From there, we set the source to the token ID and the currency to US dollars.
Then we can just easily build the charge object from these variables.
Now the Stripe API finally comes into play.
We call Stripe charges create and pass it that charge, then pass the item potency key as the second argument in its own object.
Then we wait for Stripe to return the actual charge object which will tell us whether or not the charge succeeded.
In this case, we'll go ahead and save the entire object to the database, and when we look at it, you'll see there's all kinds of useful information in there.
Now let's go ahead and deploy the function so we can start testing it.
Run Firebase deploy flagging only functions.
Then go back into your app and test it out with another test charge.
We should see it turn green then orange very quickly.
That's the new token being created, then the charge being updated from the cloud function.
You can see the object from Stripe contains all kinds of information such as paid, refunded, risk level, and things like that.
I went through that very quickly, so let's go back and revisit the entire Stripe payment process from start to finish.
The user will enter their credit card details through the Angular app with Stripe checkout.
Then Stripe will respond with the 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.
So at this point, we're at the end of the process.
We received the funding and now we just need to update the user's balance or assign the charge to a specific product and that'll be the topic of the 3rd installment in the series.
We're going to create a payment history component and then give the user the ability to buy digital products with their account balance.
That's it for part 2.
If you wanna learn more about Stripe payments, consider joining our Slack Steam or becoming a pro subscriber at angularfirebase.com, where you'll get exclusive content about building apps with Angular, Firebase, and Stripe payments.
Thanks for watching, and I'll see you for part 3.

Speaker 0: Welcome to part 2 of Stripe payments with Angular 4 and Firebase. In part 1, we collected the payment token from Stripe. And in this episode, we're going to build a Firebase Cloud Function that will actually charge the card. All Stripe transactions need to occur on a real back end server, and that's exactly what we're gonna use Cloud Functions for. The first step is to initialize Cloud Functions if they're not already set up in your project.

Run firebase init and then cd into that functions directory. Then run npm install stripe with the save flag to save it to the local project. Your package dot JSON file should look something like this. And from here, we need to set an environment variable with our Stripe API key. Run Firebase functions config set Stripe dot test key followed by your own Stripe API key.

Check out the link in the description to just copy and paste this command. Now we can start building the function in the index dot JS file. First step is to import the Firebase functions library as well as the admin database. And for Stripe, we'll initialize it with our API key using that environment variable we just set. Name of the function will be Stripe charge, and we'll use the on write database callback to trigger this function.

In other words, whenever a new payment is written to the database, this function will be invoked. It has an event object that has the data from that node in the database, which is the payment along with the token. So we can get that by calling event dot data dot val. Soft. And we'll also set variables for the user ID as well as the payment ID just to make our code a little more concise.

And then we want the function to return null if there is no payment or if the payment already has a charge. From there, we'll chain together a bunch of promises, the first one being the user in the database. This isn't completely necessary, but it's a good idea if you have recurring charges or if you wanna save customer data in the database. We call once just to get a single snapshot of this data, then we just return the snapshot value. From there, we can tell Stripe to charge this customer's credit card with the payment token.

We can set a few variables just to keep the code organized, and we'll also set an item potency key using the Firebase push ID for this payment. This is important because it prevents duplicate charges. It guarantees that multiple post requests to this ID can only have a single side effect. So if we ever had a network issue, it wouldn't duplicate the charge on the customer's card. From there, we set the source to the token ID and the currency to US dollars.

Then we can just easily build the charge object from these variables. Now the Stripe API finally comes into play. We call Stripe charges create and pass it that charge, then pass the item potency key as the second argument in its own object. Then we wait for Stripe to return the actual charge object which will tell us whether or not the charge succeeded. In this case, we'll go ahead and save the entire object to the database, and when we look at it, you'll see there's all kinds of useful information in there.

Now let's go ahead and deploy the function so we can start testing it. Run Firebase deploy flagging only functions. Then go back into your app and test it out with another test charge. We should see it turn green then orange very quickly. That's the new token being created, then the charge being updated from the cloud function.

You can see the object from Stripe contains all kinds of information such as paid, refunded, risk level, and things like that. I went through that very quickly, so let's go back and revisit the entire Stripe payment process from start to finish. The user will enter their credit card details through the Angular app with Stripe checkout. Then Stripe will respond with the 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. So at this point, we're at the end of the process. We received the funding and now we just need to update the user's balance or assign the charge to a specific product and that'll be the topic of the 3rd installment in the series. We're going to create a payment history component and then give the user the ability to buy digital products with their account balance. That's it for part 2.

If you wanna learn more about Stripe payments, consider joining our Slack Steam or becoming a pro subscriber at angularfirebase.com, where you'll get exclusive content about building apps with Angular, Firebase, and Stripe payments. Thanks for watching, and I'll see you for part 3.
Welcome to part 2 of Stripe payments with Angular 4 and Firebase. In part 1, we collected the payment token from Stripe. And in this episode, we're going to build a Firebase Cloud Function that will actually charge the card. All Stripe transactions need to occur on a real back end server, and that's exactly what we're gonna use Cloud Functions for.
billing
The first step is to initialize Cloud Functions if they're not already set up in your project. Run firebase init and then cd into that functions directory. Then run npm install stripe with the save flag to save it to the local project. Your package dot JSON file should look something like this. And from here, we need to set an environment variable with our Stripe API key. Run Firebase functions config set Stripe dot test key followed by your own Stripe API key. Check out the link in the description to just copy and paste this command. Now we can start building the function in the index dot JS file. First step is to import the Firebase functions library as well as the admin database. And for Stripe, we'll initialize it with our API key using that environment variable we just set. Name of the function will be Stripe charge, and we'll use the on write database callback to trigger this function. In other words, whenever a new payment is written to the database, this function will be invoked. It has an event object that has the data from that node in the database, which is the payment along with the token.
So we can get that by calling event dot data dot val. Soft. And we'll also set variables for the user ID as well as the payment ID just to make our code a little more concise. And then we want the function to return null if there is no payment or if the payment already has a charge. From there, we'll chain together a bunch of promises, the first one being the user in the database. This isn't completely necessary, but it's a good idea if you have recurring charges or if you wanna save customer data in the database. We call once just to get a single snapshot of this data, then we just return the snapshot value. From there, we can tell Stripe to charge this customer's credit card with the payment token. We can set a few variables just to keep the code organized, and we'll also set an item potency key using the Firebase push ID for this payment. This is important because it prevents duplicate charges.
billing
data
data management
It guarantees that multiple post requests to this ID can only have a single side effect. So if we ever had a network issue, it wouldn't duplicate the charge on the customer's card.
From there, we set the source to the token ID and the currency to US dollars. Then we can just easily build the charge object from these variables. Now the Stripe API finally comes into play. We call Stripe charges create and pass it that charge, then pass the item potency key as the second argument in its own object.
billing
Then we wait for Stripe to return the actual charge object which will tell us whether or not the charge succeeded. In this case, we'll go ahead and save the entire object to the database, and when we look at it, you'll see there's all kinds of useful information in there.
data
Now let's go ahead and deploy the function so we can start testing it. Run Firebase deploy flagging only functions. Then go back into your app and test it out with another test charge.
We should see it turn green then orange very quickly. That's the new token being created, then the charge being updated from the cloud function. You can see the object from Stripe contains all kinds of information such as paid, refunded, risk level, and things like that. I went through that very quickly, so let's go back and revisit the entire Stripe payment process from start to finish. The user will enter their credit card details through the Angular app with Stripe checkout.
billing
Then Stripe will respond with the 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. So at this point, we're at the end of the process. We received the funding and now we just need to update the user's balance or assign the charge to a specific product and that'll be the topic of the 3rd installment in the series. We're going to create a payment history component and then give the user the ability to buy digital products with their account balance. That's it for part 2. If you wanna learn more about Stripe payments, consider joining our Slack Steam or becoming a pro subscriber at angularfirebase.com, where you'll get exclusive content about building apps with Angular, Firebase, and Stripe payments.
billing
purchasing
covid-19
revenue
finance
Thanks for watching, and I'll see you for part 3.
Welcome to part 2 of Stripe payments with Angular 4 and Firebase. In part 1, we collected the payment token from Stripe. And in this episode, we're going to build a Firebase Cloud Function that will actually charge the card. All Stripe transactions need to occur on a real back end server, and that's exactly what we're gonna use Cloud Functions for. The first step is to initialize Cloud Functions if they're not already set up in your project. Run firebase init and then cd into that functions directory. Then run npm install stripe with the save flag to save it to the local project. Your package dot JSON file should look something like this. And from here, we need to set an environment variable with our Stripe API key. Run Firebase functions config set Stripe dot test key followed by your own Stripe API key. Check out the link in the description to just copy and paste this command. Now we can start building the function in the index dot JS file. First step is to import the Firebase functions library as well as the admin database. And for Stripe, we'll initialize it with our API key using that environment variable we just set. Name of the function will be Stripe charge, and we'll use the on write database callback to trigger this function. In other words, whenever a new payment is written to the database, this function will be invoked. It has an event object that has the data from that node in the database, which is the payment along with the token. So we can get that by calling event dot data dot val. Soft. And we'll also set variables for the user ID as well as the payment ID just to make our code a little more concise. And then we want the function to return null if there is no payment or if the payment already has a charge. From there, we'll chain together a bunch of promises, the first one being the user in the database. This isn't completely necessary, but it's a good idea if you have recurring charges or if you wanna save customer data in the database. We call once just to get a single snapshot of this data, then we just return the snapshot value. From there, we can tell Stripe to charge this customer's credit card with the payment token. We can set a few variables just to keep the code organized, and we'll also set an item potency key using the Firebase push ID for this payment. This is important because it prevents duplicate charges. It guarantees that multiple post requests to this ID can only have a single side effect. So if we ever had a network issue, it wouldn't duplicate the charge on the customer's card. From there, we set the source to the token ID and the currency to US dollars. Then we can just easily build the charge object from these variables. Now the Stripe API finally comes into play. We call Stripe charges create and pass it that charge, then pass the item potency key as the second argument in its own object. Then we wait for Stripe to return the actual charge object which will tell us whether or not the charge succeeded. In this case, we'll go ahead and save the entire object to the database, and when we look at it, you'll see there's all kinds of useful information in there. Now let's go ahead and deploy the function so we can start testing it. Run Firebase deploy flagging only functions. Then go back into your app and test it out with another test charge. We should see it turn green then orange very quickly. That's the new token being created, then the charge being updated from the cloud function. You can see the object from Stripe contains all kinds of information such as paid, refunded, risk level, and things like that. I went through that very quickly, so let's go back and revisit the entire Stripe payment process from start to finish. The user will enter their credit card details through the Angular app with Stripe checkout. Then Stripe will respond with the 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. So at this point, we're at the end of the process. We received the funding and now we just need to update the user's balance or assign the charge to a specific product and that'll be the topic of the 3rd installment in the series. We're going to create a payment history component and then give the user the ability to buy digital products with their account balance. That's it for part 2. If you wanna learn more about Stripe payments, consider joining our Slack Steam or becoming a pro subscriber at angularfirebase.com, where you'll get exclusive content about building apps with Angular, Firebase, and Stripe payments. Thanks for watching, and I'll see you for part 3.
Welcome
welcome
to
to
part
part
2
2
of
of
Stripe
stripe
payments
payments
with
with
Angular
angular
4
4
and
and
Firebase.
firebase
In
in
part
part
1,
1
we
we
collected
collected
the
the
payment
payment
token
token
from
from
Stripe.
stripe
And
and
in
in
this
this
episode,
episode
we're
we're
going
going
to
to
build
build
a
a
Firebase
firebase
Cloud
cloud
Function
function
that
that
will
will
actually
actually
charge
charge
the
the
card.
card
All
all
Stripe
stripe
transactions
transactions
need
need
to
to
occur
occur
on
on
a
a
real
real
back
back
end
end
server,
server
and
and
that's
that's
exactly
exactly
what
what
we're
we're
gonna
gonna
use
use
Cloud
cloud
Functions
functions
for.
for
The
the
first
first
step
step
is
is
to
to
initialize
initialize
Cloud
cloud
Functions
functions
if
if
they're
they're
not
not
already
already
set
set
up
up
in
in
your
your
project.
project
Run
run
firebase
firebase
init
init
and
and
then
then
cd
cd
into
into
that
that
functions
functions
directory.
directory
Then
then
run
run
npm
npm
install
install
stripe
stripe
with
with
the
the
save
save
flag
flag
to
to
save
save
it
it
to
to
the
the
local
local
project.
project
Your
your
package
package
dot
dot
JSON
json
file
file
should
should
look
look
something
something
like
like
this.
this
And
and
from
from
here,
here
we
we
need
need
to
to
set
set
an
an
environment
environment
variable
variable
with
with
our
our
Stripe
stripe
API
api
key.
key
Run
run
Firebase
firebase
functions
functions
config
config
set
set
Stripe
stripe
dot
dot
test
test
key
key
followed
followed
by
by
your
your
own
own
Stripe
stripe
API
api
key.
key
Check
check
out
out
the
the
link
link
in
in
the
the
description
description
to
to
just
just
copy
copy
and
and
paste
paste
this
this
command.
command
Now
now
we
we
can
can
start
start
building
building
the
the
function
function
in
in
the
the
index
index
dot
dot
JS
js
file.
file
First
first
step
step
is
is
to
to
import
import
the
the
Firebase
firebase
functions
functions
library
library
as
as
well
well
as
as
the
the
admin
admin
database.
database
And
and
for
for
Stripe,
stripe
we'll
we'll
initialize
initialize
it
it
with
with
our
our
API
api
key
key
using
using
that
that
environment
environment
variable
variable
we
we
just
just
set.
set
Name
name
of
of
the
the
function
function
will
will
be
be
Stripe
stripe
charge,
charge
and
and
we'll
we'll
use
use
the
the
on
on
write
write
database
database
callback
callback
to
to
trigger
trigger
this
this
function.
function
In
in
other
other
words,
words
whenever
whenever
a
a
new
new
payment
payment
is
is
written
written
to
to
the
the
database,
database
this
this
function
function
will
will
be
be
invoked.
invoked
It
it
has
has
an
an
event
event
object
object
that
that
has
has
the
the
data
data
from
from
that
that
node
node
in
in
the
the
database,
database
which
which
is
is
the
the
payment
payment
along
along
with
with
the
the
token.
token
So
so
we
we
can
can
get
get
that
that
by
by
calling
calling
event
event
dot
dot
data
data
dot
dot
val.
val
Soft.
soft
And
and
we'll
we'll
also
also
set
set
variables
variables
for
for
the
the
user
user
ID
id
as
as
well
well
as
as
the
the
payment
payment
ID
id
just
just
to
to
make
make
our
our
code
code
a
a
little
little
more
more
concise.
concise
And
and
then
then
we
we
want
want
the
the
function
function
to
to
return
return
null
null
if
if
there
there
is
is
no
no
payment
payment
or
or
if
if
the
the
payment
payment
already
already
has
has
a
a
charge.
charge
From
from
there,
there
we'll
we'll
chain
chain
together
together
a
a
bunch
bunch
of
of
promises,
promises
the
the
first
first
one
one
being
being
the
the
user
user
in
in
the
the
database.
database
This
this
isn't
isn't
completely
completely
necessary,
necessary
but
but
it's
it's
a
a
good
good
idea
idea
if
if
you
you
have
have
recurring
recurring
charges
charges
or
or
if
if
you
you
wanna
wanna
save
save
customer
customer
data
data
in
in
the
the
database.
database
We
we
call
call
once
once
just
just
to
to
get
get
a
a
single
single
snapshot
snapshot
of
of
this
this
data,
data
then
then
we
we
just
just
return
return
the
the
snapshot
snapshot
value.
value
From
from
there,
there
we
we
can
can
tell
tell
Stripe
stripe
to
to
charge
charge
this
this
customer's
customer's
credit
credit
card
card
with
with
the
the
payment
payment
token.
token
We
we
can
can
set
set
a
a
few
few
variables
variables
just
just
to
to
keep
keep
the
the
code
code
organized,
organized
and
and
we'll
we'll
also
also
set
set
an
an
item
item
potency
potency
key
key
using
using
the
the
Firebase
firebase
push
push
ID
id
for
for
this
this
payment.
payment
This
this
is
is
important
important
because
because
it
it
prevents
prevents
duplicate
duplicate
charges.
charges
It
it
guarantees
guarantees
that
that
multiple
multiple
post
post
requests
requests
to
to
this
this
ID
id
can
can
only
only
have
have
a
a
single
single
side
side
effect.
effect
So
so
if
if
we
we
ever
ever
had
had
a
a
network
network
issue,
issue
it
it
wouldn't
wouldn't
duplicate
duplicate
the
the
charge
charge
on
on
the
the
customer's
customer's
card.
card
From
from
there,
there
we
we
set
set
the
the
source
source
to
to
the
the
token
token
ID
id
and
and
the
the
currency
currency
to
to
US
us
dollars.
dollars
Then
then
we
we
can
can
just
just
easily
easily
build
build
the
the
charge
charge
object
object
from
from
these
these
variables.
variables
Now
now
the
the
Stripe
stripe
API
api
finally
finally
comes
comes
into
into
play.
play
We
we
call
call
Stripe
stripe
charges
charges
create
create
and
and
pass
pass
it
it
that
that
charge,
charge
then
then
pass
pass
the
the
item
item
potency
potency
key
key
as
as
the
the
second
second
argument
argument
in
in
its
its
own
own
object.
object
Then
then
we
we
wait
wait
for
for
Stripe
stripe
to
to
return
return
the
the
actual
actual
charge
charge
object
object
which
which
will
will
tell
tell
us
us
whether
whether
or
or
not
not
the
the
charge
charge
succeeded.
succeeded
In
in
this
this
case,
case
we'll
we'll
go
go
ahead
ahead
and
and
save
save
the
the
entire
entire
object
object
to
to
the
the
database,
database
and
and
when
when
we
we
look
look
at
at
it,
it
you'll
you'll
see
see
there's
there's
all
all
kinds
kinds
of
of
useful
useful
information
information
in
in
there.
there
Now
now
let's
let's
go
go
ahead
ahead
and
and
deploy
deploy
the
the
function
function
so
so
we
we
can
can
start
start
testing
testing
it.
it
Run
run
Firebase
firebase
deploy
deploy
flagging
flagging
only
only
functions.
functions
Then
then
go
go
back
back
into
into
your
your
app
app
and
and
test
test
it
it
out
out
with
with
another
another
test
test
charge.
charge
We
we
should
should
see
see
it
it
turn
turn
green
green
then
then
orange
orange
very
very
quickly.
quickly
That's
that's
the
the
new
new
token
token
being
being
created,
created
then
then
the
the
charge
charge
being
being
updated
updated
from
from
the
the
cloud
cloud
function.
function
You
you
can
can
see
see
the
the
object
object
from
from
Stripe
stripe
contains
contains
all
all
kinds
kinds
of
of
information
information
such
such
as
as
paid,
paid
refunded,
refunded
risk
risk
level,
level
and
and
things
things
like
like
that.
that
I
i
went
went
through
through
that
that
very
very
quickly,
quickly
so
so
let's
let's
go
go
back
back
and
and
revisit
revisit
the
the
entire
entire
Stripe
stripe
payment
payment
process
process
from
from
start
start
to
to
finish.
finish
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
the
the
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
So
so
at
at
this
this
point,
point
we're
we're
at
at
the
the
end
end
of
of
the
the
process.
process
We
we
received
received
the
the
funding
funding
and
and
now
now
we
we
just
just
need
need
to
to
update
update
the
the
user's
user's
balance
balance
or
or
assign
assign
the
the
charge
charge
to
to
a
a
specific
specific
product
product
and
and
that'll
that'll
be
be
the
the
topic
topic
of
of
the
the
3rd
3rd
installment
installment
in
in
the
the
series.
series
We're
we're
going
going
to
to
create
create
a
a
payment
payment
history
history
component
component
and
and
then
then
give
give
the
the
user
user
the
the
ability
ability
to
to
buy
buy
digital
digital
products
products
with
with
their
their
account
account
balance.
balance
That's
that's
it
it
for
for
part
part
2.
2
If
if
you
you
wanna
wanna
learn
learn
more
more
about
about
Stripe
stripe
payments,
payments
consider
consider
joining
joining
our
our
Slack
slack
Steam
steam
or
or
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com,
angularfirebase.com
where
where
you'll
you'll
get
get
exclusive
exclusive
content
content
about
about
building
building
apps
apps
with
with
Angular,
angular
Firebase,
firebase
and
and
Stripe
stripe
payments.
payments
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
for
for
part
part
3.
3
success
In this episode of Stripe payments, the host explains how to create a attacked Cloud Function that will charge the customer's credit card and return the customer's credit card payment. The function will be run in CloudGeneration and use the on write database callback to trigger the function. The host also explains how to set variables for the user ID, payment ID, and the source to the token ID and currency to US dollars. The function will be deployed and updated with a new token created and charged by Stripe.
Process Stripe Payments with Firebase Cloud Functions - Part 2
Welcome to part 2 of Stripe payments with Angular 4 and Firebase. In part 1, we collected the payment token from Stripe. And in this episode, we're going to build a Firebase Cloud Function that will actually charge the card. All Stripe transactions need to occur on a real back end server, and that's exactly what we're gonna use Cloud Functions for. The first step is to initialize Cloud Functions if they're not already set up in your project. Run firebase init and then cd into that functions directory. Then run npm install stripe with the save flag to save it to the local project. Your package dot JSON file should look something like this. And from here, we need to set an environment variable with our Stripe API key. Run Firebase functions config set Stripe dot test key followed by your own Stripe API key. Check out the link in the description to just copy and paste this command. Now we can start building the function in the index dot JS file. First step is to import the Firebase functions library as well as the admin database. And for Stripe, we'll initialize it with our API key using that environment variable we just set. Name of the function will be Stripe charge, and we'll use the on write database callback to trigger this function. In other words, whenever a new payment is written to the database, this function will be invoked. It has an event object that has the data from that node in the database, which is the payment along with the token. So we can get that by calling event dot data dot val. Soft. And we'll also set variables for the user ID as well as the payment ID just to make our code a little more concise. And then we want the function to return null if there is no payment or if the payment already has a charge. From there, we'll chain together a bunch of promises, the first one being the user in the database. This isn't completely necessary, but it's a good idea if you have recurring charges or if you wanna save customer data in the database. We call once just to get a single snapshot of this data, then we just return the snapshot value. From there, we can tell Stripe to charge this customer's credit card with the payment token. We can set a few variables just to keep the code organized, and we'll also set an item potency key using the Firebase push ID for this payment. This is important because it prevents duplicate charges. It guarantees that multiple post requests to this ID can only have a single side effect. So if we ever had a network issue, it wouldn't duplicate the charge on the customer's card. From there, we set the source to the token ID and the currency to US dollars. Then we can just easily build the charge object from these variables. Now the Stripe API finally comes into play. We call Stripe charges create and pass it that charge, then pass the item potency key as the second argument in its own object. Then we wait for Stripe to return the actual charge object which will tell us whether or not the charge succeeded. In this case, we'll go ahead and save the entire object to the database, and when we look at it, you'll see there's all kinds of useful information in there. Now let's go ahead and deploy the function so we can start testing it. Run Firebase deploy flagging only functions. Then go back into your app and test it out with another test charge. We should see it turn green then orange very quickly. That's the new token being created, then the charge being updated from the cloud function. You can see the object from Stripe contains all kinds of information such as paid, refunded, risk level, and things like that. I went through that very quickly, so let's go back and revisit the entire Stripe payment process from start to finish. The user will enter their credit card details through the Angular app with Stripe checkout. Then Stripe will respond with the 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. So at this point, we're at the end of the process. We received the funding and now we just need to update the user's balance or assign the charge to a specific product and that'll be the topic of the 3rd installment in the series. We're going to create a payment history component and then give the user the ability to buy digital products with their account balance. That's it for part 2. If you wanna learn more about Stripe payments, consider joining our Slack Steam or becoming a pro subscriber at angularfirebase.com, where you'll get exclusive content about building apps with Angular, Firebase, and Stripe payments. Thanks for watching, and I'll see you for part 3.
In this episode of Stripe payments, the host explains how to create a attacked Cloud Function that will charge the customer's credit card and return the customer's credit card payment. The function will be run in CloudGeneration and use the on write database callback to trigger the function. The host also explains how to set variables for the user ID, payment ID, and the source to the token ID and currency to US dollars. The function will be deployed and updated with a new token created and charged by Stripe.