UPDATE 2020. Much has changed since this upload. Checkout the full Stripe JS course https://fireship.io/courses/stripe-js/

In this episode, we build three Firebase Cloud Functions to handle Stripe subscription payments with an Angular frontend. Get the source code at https://angularfirebase.com/lessons/stripe-recurring-subscription-payments-with-angular-and-firebase-cloud-functions/

Stripe: https://stripe.com
Stripe webhooks: https://stripe.com/docs/subscriptions/webhooks
Cloud Functions: https://firebase.google.com/docs/functions/
Angular4: https://angular.io
2024-02-04T08:04:00.525Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
ee2ba897-b8b5-4a9a-baf2-574585fdf2ec
0a2c829dfe35781f304538968b71f79df5e09fed6bd2979ff9f1adda4d9077dd
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Subscription payments are one of the most effective ways to monetize your software.
In this episode, we're going to use the Stripe payments API along with Angular, Firebase, and Cloud Functions to build a subscription model into an app.
By the end of this video, you'll be able to accept credit cards through your front end Angular app and then save information about the subscription in the Firebase database and handle recurring payments with Stripe webhooks.
I I have to warn you that this video covers a lot of code in a very short amount of time, so I recommend going to angularfirebase.com to follow along with the source code and get additional content related to Stripe payments.
So first things first, you'll need to have a Stripe account which you can get at stripe.com.
Then retrieve your test API key and add it to your environment.
.Ts file in Angular.
Then we're going to add the Stripe checkout JS library to the index HTML file.
It goes in the head tag, and it allows us to collect credit card details then send them back to Stripe.
Then the last thing we need to do is tell TypeScript about Stripe.
So we go to the typings.d.ts file and then just declare a variable called Stripe checkout.
From here, we'll initialize Cloud Functions in our project using the Firebase CLI.
So we run Firebase init functions.
From there, we also need to set our Stripe test key in the functions environment.
So we can do that by running Firebase functions, config, set, Stripe test key with your test key in there.
Then we'll CD into the functions directory and install the Stripe NPM package.
We do that with npm install Stripe Save, and this allows us to communicate with the Stripe API from our Node.
Js Cloud Functions environment.
Okay.
So that wraps up the initial setup.
Now we can actually start building this scription model.
Before we can create a subscription, we need to create a customer in Stripe.
It's easiest if you create that customer as soon as your user signs up for your app.
So we're going to create a cloud function that runs as soon as a user signs up for the first time, and it's going to save the Stripe customer ID in this customer's note on the database.
The Stripe customer ID will be the key and the Firebase user ID will be the value.
This data structure is going to come into play later when we start using webhooks to handle recurring payments.
And we're also going to duplicate this data on the user object itself.
So you can see here under the user ID, we have the customer ID as well.
If you're lost at this point, make sure to check out some of my videos covering user authentication with Firebase.
Now we're going to jump into the functions index dot JS file and build this First Cloud Function.
So first we're going to initialize the function with the admin database, then we'll initialize the Stripe library with the API key that we had configured in the environment earlier.
Then we're going to call this function create Stripe Customer, and it's going to run whenever a new user signs up.
Firebase has a built in auth trigger called on create that will run this function whenever a new user signs up.
When it runs, it's gonna give us access to this event variable which just contains the user auth data.
Then we're going to return a Stripe promise by calling Stripe customers create.
And then to create a customer, all you have to do is pass it an email address.
Then once that promise resolves with Stripe, it's going to return a customer object.
And what we wanna do with this customer object is save it in the Firebase database.
But we have 2 different locations to save it at, so we're gonna create an updates object here.
And first, we're gonna save the user ID on the customer's node.
Then we'll do the inverse of that by saving the customer ID on the user's node.
We structured the update like this so it either succeeds or fails together.
This is known as an atomic update or fan out in Firebase.
So to make the update, we just reference the root database and pass it this updates object.
From here, you can deploy the function and then go test it out by signing up a new user.
And you should see that customer's node and the user node be updated with the corresponding data.
Now that we have that done, I'm going to create a service that will save the payment token to Firebase when the user enters their credit card details.
So first we're going to need the AngularFire database and AngularFire auth services and then we're also gonna import switchmap and do from RXJS.
Then I'm going to set a variable for the current user's ID and also a observable of their membership status in the database.
To get the membership status, we first need to call the AngularFire auth state observable and then once we have that, we're just gonna set the user ID on the service itself and then we'll call switch map and use the user's ID to retrieve their membership in the database.
So we can do that by calling object users, user ID, and then we're going to save it under the pro membership.
Eventually, the pro membership node will have the current status of their membership as well as the next payment date.
When a user enters their credit card details through Stripe Checkout, It will send us back a payment token.
We need to save this payment token in the Firebase database and then trigger a cloud function whenever it's updated.
So for now we'll just save it directly under the Pro membership under that user's ID.
Okay.
Now we can create a component that will be responsible for collecting the user's credit card information.
First, we will import the payment service that we just created and then we'll go ahead and import our environment variables which have the Stripe API key.
Then we'll create a variable for the handler and inject the payment service in the constructor.
Then we'll configure the handler during ng on init and we can do that by calling Stripe checkout configure then pass it an object of different configuration options.
The important thing is the key, which is the Stripe API key, then token, which takes a callback function after Stripe sends us the token back.
Once we have that token, we can use our payment service to save it to the Firebase database.
Now that we have it configured, we just need an event handler that allows user to open it.
So we can call this handler open and then pass a few variables here which describe what they're paying for.
In this case, it's a pro subscription, and the amount is 1500, which translates to 15 US dollars in this case.
In the component HTML, we can reference the payment membership observable, and we'll set that as a template variable called pro in this case.
If the ProStatus is not active, then we want to go ahead and show the payment button.
Then when the user clicks that button, it will open the Stripe event handler.
And then while we're in here, we'll check and see if the user has an active membership.
And if so, we'll just show a div here showing that the subscription is active.
This is a very simplistic approach.
In the real world, you probably wanna show a payment history as well as an option to cancel and other little convenience features like that.
So now we'll enter some card details, and we're just using a test credit card from Stripe.
Once the payment completes, we should see the token being saved here under the pro Ship under that user's account.
So it looks like that's working fine.
Now we just need another cloud function to build the subscription once this event happens.
To do that, go over to your Stripe account dashboard and make sure you're viewing the test data.
Then go to subscriptions and plans, and we're just going to create it manually.
Although I should note you can create these plans programmatically, which is especially useful if your users can customize their own plans.
Now we can jump back to the index JS file and create a Cloud Function that will add a customer to this subscription plan.
The function name will be create subscription, Then we'll run the function whenever the user's user ID pro membership token is updated.
So that'll happen when the user enters their card detail and we want to build the scription, and Charge the Customer.
This is going to give us an event variable which we can use to retrieve the token value that we've already saved to the database.
In this case, we can get the token value by calling Event Data Val.
Then we'll also save the user ID as a variable here and we can throw an error if any of this essential data is missing.
Okay.
The next step is to query the admin database for the actual user data.
So we reference user's user ID, pull that value once, and then have the snapshot resolve into a Promise.
And once we have that data back from Firebase, we can call Stripe subscriptions create which we need to provide a Stripe customer ID as well as a source for the payment which in most cases would be a credit card.
In our case, we saved the customer ID when the user first signed up and we saved the credit card token ID in the last step.
When you create a subscription, you have an array of items.
So in our case, we're just gonna add the Pro membership item, but you could also add, like, a setup fee or any customized options you want here as well.
This is going to return a promise, and on Stripe's end, they're going to create a subscription and also charge the customer.
If the charge fails, it will raise an error.
So So once we get the subscription back, we can go ahead and reference the user's pro membership in Firebase.
And then we'll just go ahead and update it to active, but there's all kinds of additional data you could save here you wanted to.
And the final step will be to catch any errors and that should be it for our subscription cloud function.
You can go ahead and deploy it.
And then if you go charge the card again, you should see the Pro membership updated and then the subscription turned to active.
So if we look at the object, it has a status of active as well as our token that we saved there before.
Then we can also go into Stripe, and we should be able to see the subscription saved there as well.
So going into the Stripe dashboard, we can see this user is subscribed to the pro membership, and then we have a history of their payments and any other activity here as well.
So that's pretty cool, but there's still one more piece to the puzzle that we still haven't solved, and that's handling recurring payments as they happen asynchronously once a month.
Stripe uses webhooks as a way to send data to your app.
So once a month, they're going to that charge the user's card, and then they'll send the data to a webhook that you provide.
A webhook is just a URL where you can receive the data and then run some code in response to it.
We can handle this with Firebase HTTP Cloud Functions.
The end result is going to look like this.
We'll send a test payment failed webhook and then it's going to update the user's Pro membership to past due.
And then if we get a payment succeeded webhook, it updates it back to active.
Let's go back to index.
Js and create the Cloud function that will handle this logic.
Let's give the function a name of recurring payment and we'll make it an HTTPS function which is going to return a request and a response.
So first with the request, we need to get the request body type as well as the request body data object.
And that's just the data that is being sent to us from Stripe.
It has things like the customer's customer ID as well as the subscription status.
And we'll go ahead and throw an error if any of this data is missing.
Then Stripe is not going to send us the Firebase user ID, but it is going to send us the Stripe customer ID.
That's why we saved it on its own customer node that points to the Firebase user ID.
So we can reference that customer ID and then with that data, we can update the data on the actual Firebase user ID.
So once we get the user ID, we'll make a reference to that point in the database, and there's 2 possible hooks here.
We can either have a payment succeeded or a payment failed.
So we'll just use a conditional if statement.
And if the invoice payment succeeded, then we'll just go ahead and update the status to active.
And then, likewise, if the payments failed, then we'll go ahead and update the status to past due.
This is a pretty simplistic approach, and Stripe sends all kinds of other webhooks that you can listen for.
So check out the docs to see the full customization options.
Now the last thing we need to do is send a response back to Stripe.
If we send a 200 response, that means we received it and we updated the database and everything's good to go.
We can also send a 300 or 400 level response which Stripe will treat as an unsuccessful request.
And in that case, Stripe will try to retry the webhook a certain number of times.
You can configure the retry attempts in the Stripe dashboard.
Go ahead and deploy the function, but this time make note of the URL that it returns from you for this recurring payment function.
From the Stripe dashboard, you wanna go to API and then Webhooks and then add an endpoint.
You can just, uh, copy and paste this URL directly in the endpoint.
And then we're gonna go down here and select the invoice payment succeeded and invoice payment failed options.
Then click add endpoint and Stripe will start sending webhooks to that address.
Now when we start testing this webhook, Stripe's going to send it to a customer with all zeros.
So we're gonna go in the Firebase database and just point that test customer to our current user that we're working with.
From here you can click on Test Webhook from the Stripe dashboard and choose the type of request you wanna send.
So in this case, we'll first send a payment failed request, and you can see that changes the status to past due.
Then we can do the same thing for payment succeeded, and we should see the status updated back to active.
If you get any errors at this point, it's always a good idea to look at the Firebase function logs, and you can see exactly what kind of error is happening inside your function.
So that's just barely scratching the surface of the possibilities of Stripe subscription payments.
If this video helped you, please like and Scribe.
And if you want to talk about building your own custom subscription system, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book as well as 1 on 1 project consulting.
Thanks for watching and I'll see you next time.

Speaker 0: Subscription payments are one of the most effective ways to monetize your software. In this episode, we're going to use the Stripe payments API along with Angular, Firebase, and Cloud Functions to build a subscription model into an app. By the end of this video, you'll be able to accept credit cards through your front end Angular app and then save information about the subscription in the Firebase database and handle recurring payments with Stripe webhooks. I I have to warn you that this video covers a lot of code in a very short amount of time, so I recommend going to angularfirebase.com to follow along with the source code and get additional content related to Stripe payments. So first things first, you'll need to have a Stripe account which you can get at stripe.com.

Then retrieve your test API key and add it to your environment. .Ts file in Angular. Then we're going to add the Stripe checkout JS library to the index HTML file. It goes in the head tag, and it allows us to collect credit card details then send them back to Stripe. Then the last thing we need to do is tell TypeScript about Stripe.

So we go to the typings.d.ts file and then just declare a variable called Stripe checkout. From here, we'll initialize Cloud Functions in our project using the Firebase CLI. So we run Firebase init functions. From there, we also need to set our Stripe test key in the functions environment. So we can do that by running Firebase functions, config, set, Stripe test key with your test key in there.

Then we'll CD into the functions directory and install the Stripe NPM package. We do that with npm install Stripe Save, and this allows us to communicate with the Stripe API from our Node. Js Cloud Functions environment. Okay. So that wraps up the initial setup.

Now we can actually start building this scription model. Before we can create a subscription, we need to create a customer in Stripe. It's easiest if you create that customer as soon as your user signs up for your app. So we're going to create a cloud function that runs as soon as a user signs up for the first time, and it's going to save the Stripe customer ID in this customer's note on the database. The Stripe customer ID will be the key and the Firebase user ID will be the value.

This data structure is going to come into play later when we start using webhooks to handle recurring payments. And we're also going to duplicate this data on the user object itself. So you can see here under the user ID, we have the customer ID as well. If you're lost at this point, make sure to check out some of my videos covering user authentication with Firebase. Now we're going to jump into the functions index dot JS file and build this First Cloud Function.

So first we're going to initialize the function with the admin database, then we'll initialize the Stripe library with the API key that we had configured in the environment earlier. Then we're going to call this function create Stripe Customer, and it's going to run whenever a new user signs up. Firebase has a built in auth trigger called on create that will run this function whenever a new user signs up. When it runs, it's gonna give us access to this event variable which just contains the user auth data. Then we're going to return a Stripe promise by calling Stripe customers create.

And then to create a customer, all you have to do is pass it an email address. Then once that promise resolves with Stripe, it's going to return a customer object. And what we wanna do with this customer object is save it in the Firebase database. But we have 2 different locations to save it at, so we're gonna create an updates object here. And first, we're gonna save the user ID on the customer's node.

Then we'll do the inverse of that by saving the customer ID on the user's node. We structured the update like this so it either succeeds or fails together. This is known as an atomic update or fan out in Firebase. So to make the update, we just reference the root database and pass it this updates object. From here, you can deploy the function and then go test it out by signing up a new user.

And you should see that customer's node and the user node be updated with the corresponding data. Now that we have that done, I'm going to create a service that will save the payment token to Firebase when the user enters their credit card details. So first we're going to need the AngularFire database and AngularFire auth services and then we're also gonna import switchmap and do from RXJS. Then I'm going to set a variable for the current user's ID and also a observable of their membership status in the database. To get the membership status, we first need to call the AngularFire auth state observable and then once we have that, we're just gonna set the user ID on the service itself and then we'll call switch map and use the user's ID to retrieve their membership in the database.

So we can do that by calling object users, user ID, and then we're going to save it under the pro membership. Eventually, the pro membership node will have the current status of their membership as well as the next payment date. When a user enters their credit card details through Stripe Checkout, It will send us back a payment token. We need to save this payment token in the Firebase database and then trigger a cloud function whenever it's updated. So for now we'll just save it directly under the Pro membership under that user's ID.

Okay. Now we can create a component that will be responsible for collecting the user's credit card information. First, we will import the payment service that we just created and then we'll go ahead and import our environment variables which have the Stripe API key. Then we'll create a variable for the handler and inject the payment service in the constructor. Then we'll configure the handler during ng on init and we can do that by calling Stripe checkout configure then pass it an object of different configuration options.

The important thing is the key, which is the Stripe API key, then token, which takes a callback function after Stripe sends us the token back. Once we have that token, we can use our payment service to save it to the Firebase database. Now that we have it configured, we just need an event handler that allows user to open it. So we can call this handler open and then pass a few variables here which describe what they're paying for. In this case, it's a pro subscription, and the amount is 1500, which translates to 15 US dollars in this case.

In the component HTML, we can reference the payment membership observable, and we'll set that as a template variable called pro in this case. If the ProStatus is not active, then we want to go ahead and show the payment button. Then when the user clicks that button, it will open the Stripe event handler. And then while we're in here, we'll check and see if the user has an active membership. And if so, we'll just show a div here showing that the subscription is active.

This is a very simplistic approach. In the real world, you probably wanna show a payment history as well as an option to cancel and other little convenience features like that. So now we'll enter some card details, and we're just using a test credit card from Stripe. Once the payment completes, we should see the token being saved here under the pro Ship under that user's account. So it looks like that's working fine.

Now we just need another cloud function to build the subscription once this event happens. To do that, go over to your Stripe account dashboard and make sure you're viewing the test data. Then go to subscriptions and plans, and we're just going to create it manually. Although I should note you can create these plans programmatically, which is especially useful if your users can customize their own plans. Now we can jump back to the index JS file and create a Cloud Function that will add a customer to this subscription plan.

The function name will be create subscription, Then we'll run the function whenever the user's user ID pro membership token is updated. So that'll happen when the user enters their card detail and we want to build the scription, and Charge the Customer. This is going to give us an event variable which we can use to retrieve the token value that we've already saved to the database. In this case, we can get the token value by calling Event Data Val. Then we'll also save the user ID as a variable here and we can throw an error if any of this essential data is missing.

Okay. The next step is to query the admin database for the actual user data. So we reference user's user ID, pull that value once, and then have the snapshot resolve into a Promise. And once we have that data back from Firebase, we can call Stripe subscriptions create which we need to provide a Stripe customer ID as well as a source for the payment which in most cases would be a credit card. In our case, we saved the customer ID when the user first signed up and we saved the credit card token ID in the last step.

When you create a subscription, you have an array of items. So in our case, we're just gonna add the Pro membership item, but you could also add, like, a setup fee or any customized options you want here as well. This is going to return a promise, and on Stripe's end, they're going to create a subscription and also charge the customer. If the charge fails, it will raise an error. So So once we get the subscription back, we can go ahead and reference the user's pro membership in Firebase.

And then we'll just go ahead and update it to active, but there's all kinds of additional data you could save here you wanted to. And the final step will be to catch any errors and that should be it for our subscription cloud function. You can go ahead and deploy it. And then if you go charge the card again, you should see the Pro membership updated and then the subscription turned to active. So if we look at the object, it has a status of active as well as our token that we saved there before.

Then we can also go into Stripe, and we should be able to see the subscription saved there as well. So going into the Stripe dashboard, we can see this user is subscribed to the pro membership, and then we have a history of their payments and any other activity here as well. So that's pretty cool, but there's still one more piece to the puzzle that we still haven't solved, and that's handling recurring payments as they happen asynchronously once a month. Stripe uses webhooks as a way to send data to your app. So once a month, they're going to that charge the user's card, and then they'll send the data to a webhook that you provide.

A webhook is just a URL where you can receive the data and then run some code in response to it. We can handle this with Firebase HTTP Cloud Functions. The end result is going to look like this. We'll send a test payment failed webhook and then it's going to update the user's Pro membership to past due. And then if we get a payment succeeded webhook, it updates it back to active.

Let's go back to index. Js and create the Cloud function that will handle this logic. Let's give the function a name of recurring payment and we'll make it an HTTPS function which is going to return a request and a response. So first with the request, we need to get the request body type as well as the request body data object. And that's just the data that is being sent to us from Stripe.

It has things like the customer's customer ID as well as the subscription status. And we'll go ahead and throw an error if any of this data is missing. Then Stripe is not going to send us the Firebase user ID, but it is going to send us the Stripe customer ID. That's why we saved it on its own customer node that points to the Firebase user ID. So we can reference that customer ID and then with that data, we can update the data on the actual Firebase user ID.

So once we get the user ID, we'll make a reference to that point in the database, and there's 2 possible hooks here. We can either have a payment succeeded or a payment failed. So we'll just use a conditional if statement. And if the invoice payment succeeded, then we'll just go ahead and update the status to active. And then, likewise, if the payments failed, then we'll go ahead and update the status to past due.

This is a pretty simplistic approach, and Stripe sends all kinds of other webhooks that you can listen for. So check out the docs to see the full customization options. Now the last thing we need to do is send a response back to Stripe. If we send a 200 response, that means we received it and we updated the database and everything's good to go. We can also send a 300 or 400 level response which Stripe will treat as an unsuccessful request.

And in that case, Stripe will try to retry the webhook a certain number of times. You can configure the retry attempts in the Stripe dashboard. Go ahead and deploy the function, but this time make note of the URL that it returns from you for this recurring payment function. From the Stripe dashboard, you wanna go to API and then Webhooks and then add an endpoint. You can just, uh, copy and paste this URL directly in the endpoint.

And then we're gonna go down here and select the invoice payment succeeded and invoice payment failed options. Then click add endpoint and Stripe will start sending webhooks to that address. Now when we start testing this webhook, Stripe's going to send it to a customer with all zeros. So we're gonna go in the Firebase database and just point that test customer to our current user that we're working with. From here you can click on Test Webhook from the Stripe dashboard and choose the type of request you wanna send.

So in this case, we'll first send a payment failed request, and you can see that changes the status to past due. Then we can do the same thing for payment succeeded, and we should see the status updated back to active. If you get any errors at this point, it's always a good idea to look at the Firebase function logs, and you can see exactly what kind of error is happening inside your function. So that's just barely scratching the surface of the possibilities of Stripe subscription payments. If this video helped you, please like and Scribe.

And if you want to talk about building your own custom subscription system, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
Subscription payments are one of the most effective ways to monetize your software. In this episode, we're going to use the Stripe payments API along with Angular, Firebase, and Cloud Functions to build a subscription model into an app. By the end of this video, you'll be able to accept credit cards through your front end Angular app and then save information about the subscription in the Firebase database and handle recurring payments with Stripe webhooks. I I have to warn you that this video covers a lot of code in a very short amount of time, so I recommend going to angularfirebase.com to follow along with the source code and get additional content related to Stripe payments. So first things first, you'll need to have a Stripe account which you can get at stripe.com.
billing
youtube
customer support
software
Then retrieve your test API key and add it to your environment. .Ts file in Angular. Then we're going to add the Stripe checkout JS library to the index HTML file. It goes in the head tag, and it allows us to collect credit card details then send them back to Stripe. Then the last thing we need to do is tell TypeScript about Stripe. So we go to the typings.d.ts file and then just declare a variable called Stripe checkout. From here, we'll initialize Cloud Functions in our project using the Firebase CLI. So we run Firebase init functions. From there, we also need to set our Stripe test key in the functions environment. So we can do that by running Firebase functions, config, set, Stripe test key with your test key in there. Then we'll CD into the functions directory and install the Stripe NPM package. We do that with npm install Stripe Save, and this allows us to communicate with the Stripe API from our Node. Js Cloud Functions environment.
Okay. So that wraps up the initial setup. Now we can actually start building this scription model. Before we can create a subscription, we need to create a customer in Stripe. It's easiest if you create that customer as soon as your user signs up for your app. So we're going to create a cloud function that runs as soon as a user signs up for the first time, and it's going to save the Stripe customer ID in this customer's note on the database. The Stripe customer ID will be the key and the Firebase user ID will be the value. This data structure is going to come into play later when we start using webhooks to handle recurring payments. And we're also going to duplicate this data on the user object itself. So you can see here under the user ID, we have the customer ID as well.
customer support
If you're lost at this point, make sure to check out some of my videos covering user authentication with Firebase. Now we're going to jump into the functions index dot JS file and build this First Cloud Function. So first we're going to initialize the function with the admin database, then we'll initialize the Stripe library with the API key that we had configured in the environment earlier. Then we're going to call this function create Stripe Customer, and it's going to run whenever a new user signs up. Firebase has a built in auth trigger called on create that will run this function whenever a new user signs up.
When it runs, it's gonna give us access to this event variable which just contains the user auth data. Then we're going to return a Stripe promise by calling Stripe customers create. And then to create a customer, all you have to do is pass it an email address. Then once that promise resolves with Stripe, it's going to return a customer object. And what we wanna do with this customer object is save it in the Firebase database. But we have 2 different locations to save it at, so we're gonna create an updates object here.
customer support
billing
And first, we're gonna save the user ID on the customer's node. Then we'll do the inverse of that by saving the customer ID on the user's node. We structured the update like this so it either succeeds or fails together. This is known as an atomic update or fan out in Firebase. So to make the update, we just reference the root database and pass it this updates object. From here, you can deploy the function and then go test it out by signing up a new user.
And you should see that customer's node and the user node be updated with the corresponding data. Now that we have that done, I'm going to create a service that will save the payment token to Firebase when the user enters their credit card details. So first we're going to need the AngularFire database and AngularFire auth services and then we're also gonna import switchmap and do from RXJS.
databases
Then I'm going to set a variable for the current user's ID and also a observable of their membership status in the database. To get the membership status, we first need to call the AngularFire auth state observable and then once we have that, we're just gonna set the user ID on the service itself and then we'll call switch map and use the user's ID to retrieve their membership in the database. So we can do that by calling object users, user ID, and then we're going to save it under the pro membership. Eventually, the pro membership node will have the current status of their membership as well as the next payment date.
When a user enters their credit card details through Stripe Checkout, It will send us back a payment token. We need to save this payment token in the Firebase database and then trigger a cloud function whenever it's updated. So for now we'll just save it directly under the Pro membership under that user's ID. Okay. Now we can create a component that will be responsible for collecting the user's credit card information. First, we will import the payment service that we just created and then we'll go ahead and import our environment variables which have the Stripe API key. Then we'll create a variable for the handler and inject the payment service in the constructor. Then we'll configure the handler during ng on init and we can do that by calling Stripe checkout configure then pass it an object of different configuration options. The important thing is the key, which is the Stripe API key, then token, which takes a callback function after Stripe sends us the token back.
banking
billing
programming
Once we have that token, we can use our payment service to save it to the Firebase database. Now that we have it configured, we just need an event handler that allows user to open it.
So we can call this handler open and then pass a few variables here which describe what they're paying for. In this case, it's a pro subscription, and the amount is 1500, which translates to 15 US dollars in this case. In the component HTML, we can reference the payment membership observable, and we'll set that as a template variable called pro in this case. If the ProStatus is not active, then we want to go ahead and show the payment button. Then when the user clicks that button, it will open the Stripe event handler. And then while we're in here, we'll check and see if the user has an active membership. And if so, we'll just show a div here showing that the subscription is active. This is a very simplistic approach. In the real world, you probably wanna show a payment history as well as an option to cancel and other little convenience features like that. So now we'll enter some card details, and we're just using a test credit card from Stripe. Once the payment completes, we should see the token being saved here under the pro Ship under that user's account. So it looks like that's working fine. Now we just need another cloud function to build the subscription once this event happens.
billing
gambling
customers
revenue
customer support
banking
purchasing
finance
To do that, go over to your Stripe account dashboard and make sure you're viewing the test data. Then go to subscriptions and plans, and we're just going to create it manually. Although I should note you can create these plans programmatically, which is especially useful if your users can customize their own plans. Now we can jump back to the index JS file and create a Cloud Function that will add a customer to this subscription plan. The function name will be create subscription, Then we'll run the function whenever the user's user ID pro membership token is updated.
So that'll happen when the user enters their card detail and we want to build the scription, and Charge the Customer. This is going to give us an event variable which we can use to retrieve the token value that we've already saved to the database. In this case, we can get the token value by calling Event Data Val.
programming
billing
Then we'll also save the user ID as a variable here and we can throw an error if any of this essential data is missing.
Okay. The next step is to query the admin database for the actual user data. So we reference user's user ID, pull that value once, and then have the snapshot resolve into a Promise. And once we have that data back from Firebase, we can call Stripe subscriptions create which we need to provide a Stripe customer ID as well as a source for the payment which in most cases would be a credit card. In our case, we saved the customer ID when the user first signed up and we saved the credit card token ID in the last step. When you create a subscription, you have an array of items. So in our case, we're just gonna add the Pro membership item, but you could also add, like, a setup fee or any customized options you want here as well. This is going to return a promise, and on Stripe's end, they're going to create a subscription and also charge the customer. If the charge fails, it will raise an error. So So once we get the subscription back, we can go ahead and reference the user's pro membership in Firebase.
billing
customer support
customers
purchasing
data management
And then we'll just go ahead and update it to active, but there's all kinds of additional data you could save here you wanted to. And the final step will be to catch any errors and that should be it for our subscription cloud function. You can go ahead and deploy it.
And then if you go charge the card again, you should see the Pro membership updated and then the subscription turned to active. So if we look at the object, it has a status of active as well as our token that we saved there before. Then we can also go into Stripe, and we should be able to see the subscription saved there as well. So going into the Stripe dashboard, we can see this user is subscribed to the pro membership, and then we have a history of their payments and any other activity here as well. So that's pretty cool, but there's still one more piece to the puzzle that we still haven't solved, and that's handling recurring payments as they happen asynchronously once a month. Stripe uses webhooks as a way to send data to your app. So once a month, they're going to that charge the user's card, and then they'll send the data to a webhook that you provide.
customer support
billing
customers
A webhook is just a URL where you can receive the data and then run some code in response to it. We can handle this with Firebase HTTP Cloud Functions. The end result is going to look like this. We'll send a test payment failed webhook and then it's going to update the user's Pro membership to past due. And then if we get a payment succeeded webhook, it updates it back to active. Let's go back to index. Js and create the Cloud function that will handle this logic.
Let's give the function a name of recurring payment and we'll make it an HTTPS function which is going to return a request and a response. So first with the request, we need to get the request body type as well as the request body data object. And that's just the data that is being sent to us from Stripe.
data
It has things like the customer's customer ID as well as the subscription status. And we'll go ahead and throw an error if any of this data is missing. Then Stripe is not going to send us the Firebase user ID, but it is going to send us the Stripe customer ID.
customer support
That's why we saved it on its own customer node that points to the Firebase user ID. So we can reference that customer ID and then with that data, we can update the data on the actual Firebase user ID. So once we get the user ID, we'll make a reference to that point in the database, and there's 2 possible hooks here. We can either have a payment succeeded or a payment failed. So we'll just use a conditional if statement. And if the invoice payment succeeded, then we'll just go ahead and update the status to active.
And then, likewise, if the payments failed, then we'll go ahead and update the status to past due. This is a pretty simplistic approach, and Stripe sends all kinds of other webhooks that you can listen for. So check out the docs to see the full customization options. Now the last thing we need to do is send a response back to Stripe.
billing
If we send a 200 response, that means we received it and we updated the database and everything's good to go. We can also send a 300 or 400 level response which Stripe will treat as an unsuccessful request. And in that case, Stripe will try to retry the webhook a certain number of times. You can configure the retry attempts in the Stripe dashboard. Go ahead and deploy the function, but this time make note of the URL that it returns from you for this recurring payment function. From the Stripe dashboard, you wanna go to API and then Webhooks and then add an endpoint. You can just, uh, copy and paste this URL directly in the endpoint. And then we're gonna go down here and select the invoice payment succeeded and invoice payment failed options. Then click add endpoint and Stripe will start sending webhooks to that address. Now when we start testing this webhook, Stripe's going to send it to a customer with all zeros.
So we're gonna go in the Firebase database and just point that test customer to our current user that we're working with. From here you can click on Test Webhook from the Stripe dashboard and choose the type of request you wanna send. So in this case, we'll first send a payment failed request, and you can see that changes the status to past due.
customer support
Then we can do the same thing for payment succeeded, and we should see the status updated back to active. If you get any errors at this point, it's always a good idea to look at the Firebase function logs, and you can see exactly what kind of error is happening inside your function.
So that's just barely scratching the surface of the possibilities of Stripe subscription payments. If this video helped you, please like and Scribe. And if you want to talk about building your own custom subscription system, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
books
publishing
customer support
literature
youtube
Subscription payments are one of the most effective ways to monetize your software. In this episode, we're going to use the Stripe payments API along with Angular, Firebase, and Cloud Functions to build a subscription model into an app. By the end of this video, you'll be able to accept credit cards through your front end Angular app and then save information about the subscription in the Firebase database and handle recurring payments with Stripe webhooks. I I have to warn you that this video covers a lot of code in a very short amount of time, so I recommend going to angularfirebase.com to follow along with the source code and get additional content related to Stripe payments. So first things first, you'll need to have a Stripe account which you can get at stripe.com. Then retrieve your test API key and add it to your environment. .Ts file in Angular. Then we're going to add the Stripe checkout JS library to the index HTML file. It goes in the head tag, and it allows us to collect credit card details then send them back to Stripe. Then the last thing we need to do is tell TypeScript about Stripe. So we go to the typings.d.ts file and then just declare a variable called Stripe checkout. From here, we'll initialize Cloud Functions in our project using the Firebase CLI. So we run Firebase init functions. From there, we also need to set our Stripe test key in the functions environment. So we can do that by running Firebase functions, config, set, Stripe test key with your test key in there. Then we'll CD into the functions directory and install the Stripe NPM package. We do that with npm install Stripe Save, and this allows us to communicate with the Stripe API from our Node. Js Cloud Functions environment. Okay. So that wraps up the initial setup. Now we can actually start building this scription model. Before we can create a subscription, we need to create a customer in Stripe. It's easiest if you create that customer as soon as your user signs up for your app. So we're going to create a cloud function that runs as soon as a user signs up for the first time, and it's going to save the Stripe customer ID in this customer's note on the database. The Stripe customer ID will be the key and the Firebase user ID will be the value. This data structure is going to come into play later when we start using webhooks to handle recurring payments. And we're also going to duplicate this data on the user object itself. So you can see here under the user ID, we have the customer ID as well. If you're lost at this point, make sure to check out some of my videos covering user authentication with Firebase. Now we're going to jump into the functions index dot JS file and build this First Cloud Function. So first we're going to initialize the function with the admin database, then we'll initialize the Stripe library with the API key that we had configured in the environment earlier. Then we're going to call this function create Stripe Customer, and it's going to run whenever a new user signs up. Firebase has a built in auth trigger called on create that will run this function whenever a new user signs up. When it runs, it's gonna give us access to this event variable which just contains the user auth data. Then we're going to return a Stripe promise by calling Stripe customers create. And then to create a customer, all you have to do is pass it an email address. Then once that promise resolves with Stripe, it's going to return a customer object. And what we wanna do with this customer object is save it in the Firebase database. But we have 2 different locations to save it at, so we're gonna create an updates object here. And first, we're gonna save the user ID on the customer's node. Then we'll do the inverse of that by saving the customer ID on the user's node. We structured the update like this so it either succeeds or fails together. This is known as an atomic update or fan out in Firebase. So to make the update, we just reference the root database and pass it this updates object. From here, you can deploy the function and then go test it out by signing up a new user. And you should see that customer's node and the user node be updated with the corresponding data. Now that we have that done, I'm going to create a service that will save the payment token to Firebase when the user enters their credit card details. So first we're going to need the AngularFire database and AngularFire auth services and then we're also gonna import switchmap and do from RXJS. Then I'm going to set a variable for the current user's ID and also a observable of their membership status in the database. To get the membership status, we first need to call the AngularFire auth state observable and then once we have that, we're just gonna set the user ID on the service itself and then we'll call switch map and use the user's ID to retrieve their membership in the database. So we can do that by calling object users, user ID, and then we're going to save it under the pro membership. Eventually, the pro membership node will have the current status of their membership as well as the next payment date. When a user enters their credit card details through Stripe Checkout, It will send us back a payment token. We need to save this payment token in the Firebase database and then trigger a cloud function whenever it's updated. So for now we'll just save it directly under the Pro membership under that user's ID. Okay. Now we can create a component that will be responsible for collecting the user's credit card information. First, we will import the payment service that we just created and then we'll go ahead and import our environment variables which have the Stripe API key. Then we'll create a variable for the handler and inject the payment service in the constructor. Then we'll configure the handler during ng on init and we can do that by calling Stripe checkout configure then pass it an object of different configuration options. The important thing is the key, which is the Stripe API key, then token, which takes a callback function after Stripe sends us the token back. Once we have that token, we can use our payment service to save it to the Firebase database. Now that we have it configured, we just need an event handler that allows user to open it. So we can call this handler open and then pass a few variables here which describe what they're paying for. In this case, it's a pro subscription, and the amount is 1500, which translates to 15 US dollars in this case. In the component HTML, we can reference the payment membership observable, and we'll set that as a template variable called pro in this case. If the ProStatus is not active, then we want to go ahead and show the payment button. Then when the user clicks that button, it will open the Stripe event handler. And then while we're in here, we'll check and see if the user has an active membership. And if so, we'll just show a div here showing that the subscription is active. This is a very simplistic approach. In the real world, you probably wanna show a payment history as well as an option to cancel and other little convenience features like that. So now we'll enter some card details, and we're just using a test credit card from Stripe. Once the payment completes, we should see the token being saved here under the pro Ship under that user's account. So it looks like that's working fine. Now we just need another cloud function to build the subscription once this event happens. To do that, go over to your Stripe account dashboard and make sure you're viewing the test data. Then go to subscriptions and plans, and we're just going to create it manually. Although I should note you can create these plans programmatically, which is especially useful if your users can customize their own plans. Now we can jump back to the index JS file and create a Cloud Function that will add a customer to this subscription plan. The function name will be create subscription, Then we'll run the function whenever the user's user ID pro membership token is updated. So that'll happen when the user enters their card detail and we want to build the scription, and Charge the Customer. This is going to give us an event variable which we can use to retrieve the token value that we've already saved to the database. In this case, we can get the token value by calling Event Data Val. Then we'll also save the user ID as a variable here and we can throw an error if any of this essential data is missing. Okay. The next step is to query the admin database for the actual user data. So we reference user's user ID, pull that value once, and then have the snapshot resolve into a Promise. And once we have that data back from Firebase, we can call Stripe subscriptions create which we need to provide a Stripe customer ID as well as a source for the payment which in most cases would be a credit card. In our case, we saved the customer ID when the user first signed up and we saved the credit card token ID in the last step. When you create a subscription, you have an array of items. So in our case, we're just gonna add the Pro membership item, but you could also add, like, a setup fee or any customized options you want here as well. This is going to return a promise, and on Stripe's end, they're going to create a subscription and also charge the customer. If the charge fails, it will raise an error. So So once we get the subscription back, we can go ahead and reference the user's pro membership in Firebase. And then we'll just go ahead and update it to active, but there's all kinds of additional data you could save here you wanted to. And the final step will be to catch any errors and that should be it for our subscription cloud function. You can go ahead and deploy it. And then if you go charge the card again, you should see the Pro membership updated and then the subscription turned to active. So if we look at the object, it has a status of active as well as our token that we saved there before. Then we can also go into Stripe, and we should be able to see the subscription saved there as well. So going into the Stripe dashboard, we can see this user is subscribed to the pro membership, and then we have a history of their payments and any other activity here as well. So that's pretty cool, but there's still one more piece to the puzzle that we still haven't solved, and that's handling recurring payments as they happen asynchronously once a month. Stripe uses webhooks as a way to send data to your app. So once a month, they're going to that charge the user's card, and then they'll send the data to a webhook that you provide. A webhook is just a URL where you can receive the data and then run some code in response to it. We can handle this with Firebase HTTP Cloud Functions. The end result is going to look like this. We'll send a test payment failed webhook and then it's going to update the user's Pro membership to past due. And then if we get a payment succeeded webhook, it updates it back to active. Let's go back to index. Js and create the Cloud function that will handle this logic. Let's give the function a name of recurring payment and we'll make it an HTTPS function which is going to return a request and a response. So first with the request, we need to get the request body type as well as the request body data object. And that's just the data that is being sent to us from Stripe. It has things like the customer's customer ID as well as the subscription status. And we'll go ahead and throw an error if any of this data is missing. Then Stripe is not going to send us the Firebase user ID, but it is going to send us the Stripe customer ID. That's why we saved it on its own customer node that points to the Firebase user ID. So we can reference that customer ID and then with that data, we can update the data on the actual Firebase user ID. So once we get the user ID, we'll make a reference to that point in the database, and there's 2 possible hooks here. We can either have a payment succeeded or a payment failed. So we'll just use a conditional if statement. And if the invoice payment succeeded, then we'll just go ahead and update the status to active. And then, likewise, if the payments failed, then we'll go ahead and update the status to past due. This is a pretty simplistic approach, and Stripe sends all kinds of other webhooks that you can listen for. So check out the docs to see the full customization options. Now the last thing we need to do is send a response back to Stripe. If we send a 200 response, that means we received it and we updated the database and everything's good to go. We can also send a 300 or 400 level response which Stripe will treat as an unsuccessful request. And in that case, Stripe will try to retry the webhook a certain number of times. You can configure the retry attempts in the Stripe dashboard. Go ahead and deploy the function, but this time make note of the URL that it returns from you for this recurring payment function. From the Stripe dashboard, you wanna go to API and then Webhooks and then add an endpoint. You can just, uh, copy and paste this URL directly in the endpoint. And then we're gonna go down here and select the invoice payment succeeded and invoice payment failed options. Then click add endpoint and Stripe will start sending webhooks to that address. Now when we start testing this webhook, Stripe's going to send it to a customer with all zeros. So we're gonna go in the Firebase database and just point that test customer to our current user that we're working with. From here you can click on Test Webhook from the Stripe dashboard and choose the type of request you wanna send. So in this case, we'll first send a payment failed request, and you can see that changes the status to past due. Then we can do the same thing for payment succeeded, and we should see the status updated back to active. If you get any errors at this point, it's always a good idea to look at the Firebase function logs, and you can see exactly what kind of error is happening inside your function. So that's just barely scratching the surface of the possibilities of Stripe subscription payments. If this video helped you, please like and Scribe. And if you want to talk about building your own custom subscription system, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
Subscription
subscription
payments
payments
are
are
one
one
of
of
the
the
most
most
effective
effective
ways
ways
to
to
monetize
monetize
your
your
software.
software
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
use
use
the
the
Stripe
stripe
payments
payments
API
api
along
along
with
with
Angular,
angular
Firebase,
firebase
and
and
Cloud
cloud
Functions
functions
to
to
build
build
a
a
subscription
subscription
model
model
into
into
an
an
app.
app
By
by
the
the
end
end
of
of
this
this
video,
video
you'll
you'll
be
be
able
able
to
to
accept
accept
credit
credit
cards
cards
through
through
your
your
front
front
end
end
Angular
angular
app
app
and
and
then
then
save
save
information
information
about
about
the
the
subscription
subscription
in
in
the
the
Firebase
firebase
database
database
and
and
handle
handle
recurring
recurring
payments
payments
with
with
Stripe
stripe
webhooks.
webhooks
I
i
I
i
have
have
to
to
warn
warn
you
you
that
that
this
this
video
video
covers
covers
a
a
lot
lot
of
of
code
code
in
in
a
a
very
very
short
short
amount
amount
of
of
time,
time
so
so
I
i
recommend
recommend
going
going
to
to
angularfirebase.com
angularfirebase.com
to
to
follow
follow
along
along
with
with
the
the
source
source
code
code
and
and
get
get
additional
additional
content
content
related
related
to
to
Stripe
stripe
payments.
payments
So
so
first
first
things
things
first,
first
you'll
you'll
need
need
to
to
have
have
a
a
Stripe
stripe
account
account
which
which
you
you
can
can
get
get
at
at
stripe.com.
stripe.com
Then
then
retrieve
retrieve
your
your
test
test
API
api
key
key
and
and
add
add
it
it
to
to
your
your
environment.
environment
.Ts
ts
file
file
in
in
Angular.
angular
Then
then
we're
we're
going
going
to
to
add
add
the
the
Stripe
stripe
checkout
checkout
JS
js
library
library
to
to
the
the
index
index
HTML
html
file.
file
It
it
goes
goes
in
in
the
the
head
head
tag,
tag
and
and
it
it
allows
allows
us
us
to
to
collect
collect
credit
credit
card
card
details
details
then
then
send
send
them
them
back
back
to
to
Stripe.
stripe
Then
then
the
the
last
last
thing
thing
we
we
need
need
to
to
do
do
is
is
tell
tell
TypeScript
typescript
about
about
Stripe.
stripe
So
so
we
we
go
go
to
to
the
the
typings.d.ts
typings.d.ts
file
file
and
and
then
then
just
just
declare
declare
a
a
variable
variable
called
called
Stripe
stripe
checkout.
checkout
From
from
here,
here
we'll
we'll
initialize
initialize
Cloud
cloud
Functions
functions
in
in
our
our
project
project
using
using
the
the
Firebase
firebase
CLI.
cli
So
so
we
we
run
run
Firebase
firebase
init
init
functions.
functions
From
from
there,
there
we
we
also
also
need
need
to
to
set
set
our
our
Stripe
stripe
test
test
key
key
in
in
the
the
functions
functions
environment.
environment
So
so
we
we
can
can
do
do
that
that
by
by
running
running
Firebase
firebase
functions,
functions
config,
config
set,
set
Stripe
stripe
test
test
key
key
with
with
your
your
test
test
key
key
in
in
there.
there
Then
then
we'll
we'll
CD
cd
into
into
the
the
functions
functions
directory
directory
and
and
install
install
the
the
Stripe
stripe
NPM
npm
package.
package
We
we
do
do
that
that
with
with
npm
npm
install
install
Stripe
stripe
Save,
save
and
and
this
this
allows
allows
us
us
to
to
communicate
communicate
with
with
the
the
Stripe
stripe
API
api
from
from
our
our
Node.
node
Js
js
Cloud
cloud
Functions
functions
environment.
environment
Okay.
okay
So
so
that
that
wraps
wraps
up
up
the
the
initial
initial
setup.
setup
Now
now
we
we
can
can
actually
actually
start
start
building
building
this
this
scription
scription
model.
model
Before
before
we
we
can
can
create
create
a
a
subscription,
subscription
we
we
need
need
to
to
create
create
a
a
customer
customer
in
in
Stripe.
stripe
It's
it's
easiest
easiest
if
if
you
you
create
create
that
that
customer
customer
as
as
soon
soon
as
as
your
your
user
user
signs
signs
up
up
for
for
your
your
app.
app
So
so
we're
we're
going
going
to
to
create
create
a
a
cloud
cloud
function
function
that
that
runs
runs
as
as
soon
soon
as
as
a
a
user
user
signs
signs
up
up
for
for
the
the
first
first
time,
time
and
and
it's
it's
going
going
to
to
save
save
the
the
Stripe
stripe
customer
customer
ID
id
in
in
this
this
customer's
customer's
note
note
on
on
the
the
database.
database
The
the
Stripe
stripe
customer
customer
ID
id
will
will
be
be
the
the
key
key
and
and
the
the
Firebase
firebase
user
user
ID
id
will
will
be
be
the
the
value.
value
This
this
data
data
structure
structure
is
is
going
going
to
to
come
come
into
into
play
play
later
later
when
when
we
we
start
start
using
using
webhooks
webhooks
to
to
handle
handle
recurring
recurring
payments.
payments
And
and
we're
we're
also
also
going
going
to
to
duplicate
duplicate
this
this
data
data
on
on
the
the
user
user
object
object
itself.
itself
So
so
you
you
can
can
see
see
here
here
under
under
the
the
user
user
ID,
id
we
we
have
have
the
the
customer
customer
ID
id
as
as
well.
well
If
if
you're
you're
lost
lost
at
at
this
this
point,
point
make
make
sure
sure
to
to
check
check
out
out
some
some
of
of
my
my
videos
videos
covering
covering
user
user
authentication
authentication
with
with
Firebase.
firebase
Now
now
we're
we're
going
going
to
to
jump
jump
into
into
the
the
functions
functions
index
index
dot
dot
JS
js
file
file
and
and
build
build
this
this
First
first
Cloud
cloud
Function.
function
So
so
first
first
we're
we're
going
going
to
to
initialize
initialize
the
the
function
function
with
with
the
the
admin
admin
database,
database
then
then
we'll
we'll
initialize
initialize
the
the
Stripe
stripe
library
library
with
with
the
the
API
api
key
key
that
that
we
we
had
had
configured
configured
in
in
the
the
environment
environment
earlier.
earlier
Then
then
we're
we're
going
going
to
to
call
call
this
this
function
function
create
create
Stripe
stripe
Customer,
customer
and
and
it's
it's
going
going
to
to
run
run
whenever
whenever
a
a
new
new
user
user
signs
signs
up.
up
Firebase
firebase
has
has
a
a
built
built
in
in
auth
auth
trigger
trigger
called
called
on
on
create
create
that
that
will
will
run
run
this
this
function
function
whenever
whenever
a
a
new
new
user
user
signs
signs
up.
up
When
when
it
it
runs,
runs
it's
it's
gonna
gonna
give
give
us
us
access
access
to
to
this
this
event
event
variable
variable
which
which
just
just
contains
contains
the
the
user
user
auth
auth
data.
data
Then
then
we're
we're
going
going
to
to
return
return
a
a
Stripe
stripe
promise
promise
by
by
calling
calling
Stripe
stripe
customers
customers
create.
create
And
and
then
then
to
to
create
create
a
a
customer,
customer
all
all
you
you
have
have
to
to
do
do
is
is
pass
pass
it
it
an
an
email
email
address.
address
Then
then
once
once
that
that
promise
promise
resolves
resolves
with
with
Stripe,
stripe
it's
it's
going
going
to
to
return
return
a
a
customer
customer
object.
object
And
and
what
what
we
we
wanna
wanna
do
do
with
with
this
this
customer
customer
object
object
is
is
save
save
it
it
in
in
the
the
Firebase
firebase
database.
database
But
but
we
we
have
have
2
2
different
different
locations
locations
to
to
save
save
it
it
at,
at
so
so
we're
we're
gonna
gonna
create
create
an
an
updates
updates
object
object
here.
here
And
and
first,
first
we're
we're
gonna
gonna
save
save
the
the
user
user
ID
id
on
on
the
the
customer's
customer's
node.
node
Then
then
we'll
we'll
do
do
the
the
inverse
inverse
of
of
that
that
by
by
saving
saving
the
the
customer
customer
ID
id
on
on
the
the
user's
user's
node.
node
We
we
structured
structured
the
the
update
update
like
like
this
this
so
so
it
it
either
either
succeeds
succeeds
or
or
fails
fails
together.
together
This
this
is
is
known
known
as
as
an
an
atomic
atomic
update
update
or
or
fan
fan
out
out
in
in
Firebase.
firebase
So
so
to
to
make
make
the
the
update,
update
we
we
just
just
reference
reference
the
the
root
root
database
database
and
and
pass
pass
it
it
this
this
updates
updates
object.
object
From
from
here,
here
you
you
can
can
deploy
deploy
the
the
function
function
and
and
then
then
go
go
test
test
it
it
out
out
by
by
signing
signing
up
up
a
a
new
new
user.
user
And
and
you
you
should
should
see
see
that
that
customer's
customer's
node
node
and
and
the
the
user
user
node
node
be
be
updated
updated
with
with
the
the
corresponding
corresponding
data.
data
Now
now
that
that
we
we
have
have
that
that
done,
done
I'm
i'm
going
going
to
to
create
create
a
a
service
service
that
that
will
will
save
save
the
the
payment
payment
token
token
to
to
Firebase
firebase
when
when
the
the
user
user
enters
enters
their
their
credit
credit
card
card
details.
details
So
so
first
first
we're
we're
going
going
to
to
need
need
the
the
AngularFire
angularfire
database
database
and
and
AngularFire
angularfire
auth
auth
services
services
and
and
then
then
we're
we're
also
also
gonna
gonna
import
import
switchmap
switchmap
and
and
do
do
from
from
RXJS.
rxjs
Then
then
I'm
i'm
going
going
to
to
set
set
a
a
variable
variable
for
for
the
the
current
current
user's
user's
ID
id
and
and
also
also
a
a
observable
observable
of
of
their
their
membership
membership
status
status
in
in
the
the
database.
database
To
to
get
get
the
the
membership
membership
status,
status
we
we
first
first
need
need
to
to
call
call
the
the
AngularFire
angularfire
auth
auth
state
state
observable
observable
and
and
then
then
once
once
we
we
have
have
that,
that
we're
we're
just
just
gonna
gonna
set
set
the
the
user
user
ID
id
on
on
the
the
service
service
itself
itself
and
and
then
then
we'll
we'll
call
call
switch
switch
map
map
and
and
use
use
the
the
user's
user's
ID
id
to
to
retrieve
retrieve
their
their
membership
membership
in
in
the
the
database.
database
So
so
we
we
can
can
do
do
that
that
by
by
calling
calling
object
object
users,
users
user
user
ID,
id
and
and
then
then
we're
we're
going
going
to
to
save
save
it
it
under
under
the
the
pro
pro
membership.
membership
Eventually,
eventually
the
the
pro
pro
membership
membership
node
node
will
will
have
have
the
the
current
current
status
status
of
of
their
their
membership
membership
as
as
well
well
as
as
the
the
next
next
payment
payment
date.
date
When
when
a
a
user
user
enters
enters
their
their
credit
credit
card
card
details
details
through
through
Stripe
stripe
Checkout,
checkout
It
it
will
will
send
send
us
us
back
back
a
a
payment
payment
token.
token
We
we
need
need
to
to
save
save
this
this
payment
payment
token
token
in
in
the
the
Firebase
firebase
database
database
and
and
then
then
trigger
trigger
a
a
cloud
cloud
function
function
whenever
whenever
it's
it's
updated.
updated
So
so
for
for
now
now
we'll
we'll
just
just
save
save
it
it
directly
directly
under
under
the
the
Pro
pro
membership
membership
under
under
that
that
user's
user's
ID.
id
Okay.
okay
Now
now
we
we
can
can
create
create
a
a
component
component
that
that
will
will
be
be
responsible
responsible
for
for
collecting
collecting
the
the
user's
user's
credit
credit
card
card
information.
information
First,
first
we
we
will
will
import
import
the
the
payment
payment
service
service
that
that
we
we
just
just
created
created
and
and
then
then
we'll
we'll
go
go
ahead
ahead
and
and
import
import
our
our
environment
environment
variables
variables
which
which
have
have
the
the
Stripe
stripe
API
api
key.
key
Then
then
we'll
we'll
create
create
a
a
variable
variable
for
for
the
the
handler
handler
and
and
inject
inject
the
the
payment
payment
service
service
in
in
the
the
constructor.
constructor
Then
then
we'll
we'll
configure
configure
the
the
handler
handler
during
during
ng
ng
on
on
init
init
and
and
we
we
can
can
do
do
that
that
by
by
calling
calling
Stripe
stripe
checkout
checkout
configure
configure
then
then
pass
pass
it
it
an
an
object
object
of
of
different
different
configuration
configuration
options.
options
The
the
important
important
thing
thing
is
is
the
the
key,
key
which
which
is
is
the
the
Stripe
stripe
API
api
key,
key
then
then
token,
token
which
which
takes
takes
a
a
callback
callback
function
function
after
after
Stripe
stripe
sends
sends
us
us
the
the
token
token
back.
back
Once
once
we
we
have
have
that
that
token,
token
we
we
can
can
use
use
our
our
payment
payment
service
service
to
to
save
save
it
it
to
to
the
the
Firebase
firebase
database.
database
Now
now
that
that
we
we
have
have
it
it
configured,
configured
we
we
just
just
need
need
an
an
event
event
handler
handler
that
that
allows
allows
user
user
to
to
open
open
it.
it
So
so
we
we
can
can
call
call
this
this
handler
handler
open
open
and
and
then
then
pass
pass
a
a
few
few
variables
variables
here
here
which
which
describe
describe
what
what
they're
they're
paying
paying
for.
for
In
in
this
this
case,
case
it's
it's
a
a
pro
pro
subscription,
subscription
and
and
the
the
amount
amount
is
is
1500,
1500
which
which
translates
translates
to
to
15
15
US
us
dollars
dollars
in
in
this
this
case.
case
In
in
the
the
component
component
HTML,
html
we
we
can
can
reference
reference
the
the
payment
payment
membership
membership
observable,
observable
and
and
we'll
we'll
set
set
that
that
as
as
a
a
template
template
variable
variable
called
called
pro
pro
in
in
this
this
case.
case
If
if
the
the
ProStatus
prostatus
is
is
not
not
active,
active
then
then
we
we
want
want
to
to
go
go
ahead
ahead
and
and
show
show
the
the
payment
payment
button.
button
Then
then
when
when
the
the
user
user
clicks
clicks
that
that
button,
button
it
it
will
will
open
open
the
the
Stripe
stripe
event
event
handler.
handler
And
and
then
then
while
while
we're
we're
in
in
here,
here
we'll
we'll
check
check
and
and
see
see
if
if
the
the
user
user
has
has
an
an
active
active
membership.
membership
And
and
if
if
so,
so
we'll
we'll
just
just
show
show
a
a
div
div
here
here
showing
showing
that
that
the
the
subscription
subscription
is
is
active.
active
This
this
is
is
a
a
very
very
simplistic
simplistic
approach.
approach
In
in
the
the
real
real
world,
world
you
you
probably
probably
wanna
wanna
show
show
a
a
payment
payment
history
history
as
as
well
well
as
as
an
an
option
option
to
to
cancel
cancel
and
and
other
other
little
little
convenience
convenience
features
features
like
like
that.
that
So
so
now
now
we'll
we'll
enter
enter
some
some
card
card
details,
details
and
and
we're
we're
just
just
using
using
a
a
test
test
credit
credit
card
card
from
from
Stripe.
stripe
Once
once
the
the
payment
payment
completes,
completes
we
we
should
should
see
see
the
the
token
token
being
being
saved
saved
here
here
under
under
the
the
pro
pro
Ship
ship
under
under
that
that
user's
user's
account.
account
So
so
it
it
looks
looks
like
like
that's
that's
working
working
fine.
fine
Now
now
we
we
just
just
need
need
another
another
cloud
cloud
function
function
to
to
build
build
the
the
subscription
subscription
once
once
this
this
event
event
happens.
happens
To
to
do
do
that,
that
go
go
over
over
to
to
your
your
Stripe
stripe
account
account
dashboard
dashboard
and
and
make
make
sure
sure
you're
you're
viewing
viewing
the
the
test
test
data.
data
Then
then
go
go
to
to
subscriptions
subscriptions
and
and
plans,
plans
and
and
we're
we're
just
just
going
going
to
to
create
create
it
it
manually.
manually
Although
although
I
i
should
should
note
note
you
you
can
can
create
create
these
these
plans
plans
programmatically,
programmatically
which
which
is
is
especially
especially
useful
useful
if
if
your
your
users
users
can
can
customize
customize
their
their
own
own
plans.
plans
Now
now
we
we
can
can
jump
jump
back
back
to
to
the
the
index
index
JS
js
file
file
and
and
create
create
a
a
Cloud
cloud
Function
function
that
that
will
will
add
add
a
a
customer
customer
to
to
this
this
subscription
subscription
plan.
plan
The
the
function
function
name
name
will
will
be
be
create
create
subscription,
subscription
Then
then
we'll
we'll
run
run
the
the
function
function
whenever
whenever
the
the
user's
user's
user
user
ID
id
pro
pro
membership
membership
token
token
is
is
updated.
updated
So
so
that'll
that'll
happen
happen
when
when
the
the
user
user
enters
enters
their
their
card
card
detail
detail
and
and
we
we
want
want
to
to
build
build
the
the
scription,
scription
and
and
Charge
charge
the
the
Customer.
customer
This
this
is
is
going
going
to
to
give
give
us
us
an
an
event
event
variable
variable
which
which
we
we
can
can
use
use
to
to
retrieve
retrieve
the
the
token
token
value
value
that
that
we've
we've
already
already
saved
saved
to
to
the
the
database.
database
In
in
this
this
case,
case
we
we
can
can
get
get
the
the
token
token
value
value
by
by
calling
calling
Event
event
Data
data
Val.
val
Then
then
we'll
we'll
also
also
save
save
the
the
user
user
ID
id
as
as
a
a
variable
variable
here
here
and
and
we
we
can
can
throw
throw
an
an
error
error
if
if
any
any
of
of
this
this
essential
essential
data
data
is
is
missing.
missing
Okay.
okay
The
the
next
next
step
step
is
is
to
to
query
query
the
the
admin
admin
database
database
for
for
the
the
actual
actual
user
user
data.
data
So
so
we
we
reference
reference
user's
user's
user
user
ID,
id
pull
pull
that
that
value
value
once,
once
and
and
then
then
have
have
the
the
snapshot
snapshot
resolve
resolve
into
into
a
a
Promise.
promise
And
and
once
once
we
we
have
have
that
that
data
data
back
back
from
from
Firebase,
firebase
we
we
can
can
call
call
Stripe
stripe
subscriptions
subscriptions
create
create
which
which
we
we
need
need
to
to
provide
provide
a
a
Stripe
stripe
customer
customer
ID
id
as
as
well
well
as
as
a
a
source
source
for
for
the
the
payment
payment
which
which
in
in
most
most
cases
cases
would
would
be
be
a
a
credit
credit
card.
card
In
in
our
our
case,
case
we
we
saved
saved
the
the
customer
customer
ID
id
when
when
the
the
user
user
first
first
signed
signed
up
up
and
and
we
we
saved
saved
the
the
credit
credit
card
card
token
token
ID
id
in
in
the
the
last
last
step.
step
When
when
you
you
create
create
a
a
subscription,
subscription
you
you
have
have
an
an
array
array
of
of
items.
items
So
so
in
in
our
our
case,
case
we're
we're
just
just
gonna
gonna
add
add
the
the
Pro
pro
membership
membership
item,
item
but
but
you
you
could
could
also
also
add,
add
like,
like
a
a
setup
setup
fee
fee
or
or
any
any
customized
customized
options
options
you
you
want
want
here
here
as
as
well.
well
This
this
is
is
going
going
to
to
return
return
a
a
promise,
promise
and
and
on
on
Stripe's
stripe's
end,
end
they're
they're
going
going
to
to
create
create
a
a
subscription
subscription
and
and
also
also
charge
charge
the
the
customer.
customer
If
if
the
the
charge
charge
fails,
fails
it
it
will
will
raise
raise
an
an
error.
error
So
so
So
so
once
once
we
we
get
get
the
the
subscription
subscription
back,
back
we
we
can
can
go
go
ahead
ahead
and
and
reference
reference
the
the
user's
user's
pro
pro
membership
membership
in
in
Firebase.
firebase
And
and
then
then
we'll
we'll
just
just
go
go
ahead
ahead
and
and
update
update
it
it
to
to
active,
active
but
but
there's
there's
all
all
kinds
kinds
of
of
additional
additional
data
data
you
you
could
could
save
save
here
here
you
you
wanted
wanted
to.
to
And
and
the
the
final
final
step
step
will
will
be
be
to
to
catch
catch
any
any
errors
errors
and
and
that
that
should
should
be
be
it
it
for
for
our
our
subscription
subscription
cloud
cloud
function.
function
You
you
can
can
go
go
ahead
ahead
and
and
deploy
deploy
it.
it
And
and
then
then
if
if
you
you
go
go
charge
charge
the
the
card
card
again,
again
you
you
should
should
see
see
the
the
Pro
pro
membership
membership
updated
updated
and
and
then
then
the
the
subscription
subscription
turned
turned
to
to
active.
active
So
so
if
if
we
we
look
look
at
at
the
the
object,
object
it
it
has
has
a
a
status
status
of
of
active
active
as
as
well
well
as
as
our
our
token
token
that
that
we
we
saved
saved
there
there
before.
before
Then
then
we
we
can
can
also
also
go
go
into
into
Stripe,
stripe
and
and
we
we
should
should
be
be
able
able
to
to
see
see
the
the
subscription
subscription
saved
saved
there
there
as
as
well.
well
So
so
going
going
into
into
the
the
Stripe
stripe
dashboard,
dashboard
we
we
can
can
see
see
this
this
user
user
is
is
subscribed
subscribed
to
to
the
the
pro
pro
membership,
membership
and
and
then
then
we
we
have
have
a
a
history
history
of
of
their
their
payments
payments
and
and
any
any
other
other
activity
activity
here
here
as
as
well.
well
So
so
that's
that's
pretty
pretty
cool,
cool
but
but
there's
there's
still
still
one
one
more
more
piece
piece
to
to
the
the
puzzle
puzzle
that
that
we
we
still
still
haven't
haven't
solved,
solved
and
and
that's
that's
handling
handling
recurring
recurring
payments
payments
as
as
they
they
happen
happen
asynchronously
asynchronously
once
once
a
a
month.
month
Stripe
stripe
uses
uses
webhooks
webhooks
as
as
a
a
way
way
to
to
send
send
data
data
to
to
your
your
app.
app
So
so
once
once
a
a
month,
month
they're
they're
going
going
to
to
that
that
charge
charge
the
the
user's
user's
card,
card
and
and
then
then
they'll
they'll
send
send
the
the
data
data
to
to
a
a
webhook
webhook
that
that
you
you
provide.
provide
A
a
webhook
webhook
is
is
just
just
a
a
URL
url
where
where
you
you
can
can
receive
receive
the
the
data
data
and
and
then
then
run
run
some
some
code
code
in
in
response
response
to
to
it.
it
We
we
can
can
handle
handle
this
this
with
with
Firebase
firebase
HTTP
http
Cloud
cloud
Functions.
functions
The
the
end
end
result
result
is
is
going
going
to
to
look
look
like
like
this.
this
We'll
we'll
send
send
a
a
test
test
payment
payment
failed
failed
webhook
webhook
and
and
then
then
it's
it's
going
going
to
to
update
update
the
the
user's
user's
Pro
pro
membership
membership
to
to
past
past
due.
due
And
and
then
then
if
if
we
we
get
get
a
a
payment
payment
succeeded
succeeded
webhook,
webhook
it
it
updates
updates
it
it
back
back
to
to
active.
active
Let's
let's
go
go
back
back
to
to
index.
index
Js
js
and
and
create
create
the
the
Cloud
cloud
function
function
that
that
will
will
handle
handle
this
this
logic.
logic
Let's
let's
give
give
the
the
function
function
a
a
name
name
of
of
recurring
recurring
payment
payment
and
and
we'll
we'll
make
make
it
it
an
an
HTTPS
https
function
function
which
which
is
is
going
going
to
to
return
return
a
a
request
request
and
and
a
a
response.
response
So
so
first
first
with
with
the
the
request,
request
we
we
need
need
to
to
get
get
the
the
request
request
body
body
type
type
as
as
well
well
as
as
the
the
request
request
body
body
data
data
object.
object
And
and
that's
that's
just
just
the
the
data
data
that
that
is
is
being
being
sent
sent
to
to
us
us
from
from
Stripe.
stripe
It
it
has
has
things
things
like
like
the
the
customer's
customer's
customer
customer
ID
id
as
as
well
well
as
as
the
the
subscription
subscription
status.
status
And
and
we'll
we'll
go
go
ahead
ahead
and
and
throw
throw
an
an
error
error
if
if
any
any
of
of
this
this
data
data
is
is
missing.
missing
Then
then
Stripe
stripe
is
is
not
not
going
going
to
to
send
send
us
us
the
the
Firebase
firebase
user
user
ID,
id
but
but
it
it
is
is
going
going
to
to
send
send
us
us
the
the
Stripe
stripe
customer
customer
ID.
id
That's
that's
why
why
we
we
saved
saved
it
it
on
on
its
its
own
own
customer
customer
node
node
that
that
points
points
to
to
the
the
Firebase
firebase
user
user
ID.
id
So
so
we
we
can
can
reference
reference
that
that
customer
customer
ID
id
and
and
then
then
with
with
that
that
data,
data
we
we
can
can
update
update
the
the
data
data
on
on
the
the
actual
actual
Firebase
firebase
user
user
ID.
id
So
so
once
once
we
we
get
get
the
the
user
user
ID,
id
we'll
we'll
make
make
a
a
reference
reference
to
to
that
that
point
point
in
in
the
the
database,
database
and
and
there's
there's
2
2
possible
possible
hooks
hooks
here.
here
We
we
can
can
either
either
have
have
a
a
payment
payment
succeeded
succeeded
or
or
a
a
payment
payment
failed.
failed
So
so
we'll
we'll
just
just
use
use
a
a
conditional
conditional
if
if
statement.
statement
And
and
if
if
the
the
invoice
invoice
payment
payment
succeeded,
succeeded
then
then
we'll
we'll
just
just
go
go
ahead
ahead
and
and
update
update
the
the
status
status
to
to
active.
active
And
and
then,
then
likewise,
likewise
if
if
the
the
payments
payments
failed,
failed
then
then
we'll
we'll
go
go
ahead
ahead
and
and
update
update
the
the
status
status
to
to
past
past
due.
due
This
this
is
is
a
a
pretty
pretty
simplistic
simplistic
approach,
approach
and
and
Stripe
stripe
sends
sends
all
all
kinds
kinds
of
of
other
other
webhooks
webhooks
that
that
you
you
can
can
listen
listen
for.
for
So
so
check
check
out
out
the
the
docs
docs
to
to
see
see
the
the
full
full
customization
customization
options.
options
Now
now
the
the
last
last
thing
thing
we
we
need
need
to
to
do
do
is
is
send
send
a
a
response
response
back
back
to
to
Stripe.
stripe
If
if
we
we
send
send
a
a
200
200
response,
response
that
that
means
means
we
we
received
received
it
it
and
and
we
we
updated
updated
the
the
database
database
and
and
everything's
everything's
good
good
to
to
go.
go
We
we
can
can
also
also
send
send
a
a
300
300
or
or
400
400
level
level
response
response
which
which
Stripe
stripe
will
will
treat
treat
as
as
an
an
unsuccessful
unsuccessful
request.
request
And
and
in
in
that
that
case,
case
Stripe
stripe
will
will
try
try
to
to
retry
retry
the
the
webhook
webhook
a
a
certain
certain
number
number
of
of
times.
times
You
you
can
can
configure
configure
the
the
retry
retry
attempts
attempts
in
in
the
the
Stripe
stripe
dashboard.
dashboard
Go
go
ahead
ahead
and
and
deploy
deploy
the
the
function,
function
but
but
this
this
time
time
make
make
note
note
of
of
the
the
URL
url
that
that
it
it
returns
returns
from
from
you
you
for
for
this
this
recurring
recurring
payment
payment
function.
function
From
from
the
the
Stripe
stripe
dashboard,
dashboard
you
you
wanna
wanna
go
go
to
to
API
api
and
and
then
then
Webhooks
webhooks
and
and
then
then
add
add
an
an
endpoint.
endpoint
You
you
can
can
just,
just
uh,
uh
copy
copy
and
and
paste
paste
this
this
URL
url
directly
directly
in
in
the
the
endpoint.
endpoint
And
and
then
then
we're
we're
gonna
gonna
go
go
down
down
here
here
and
and
select
select
the
the
invoice
invoice
payment
payment
succeeded
succeeded
and
and
invoice
invoice
payment
payment
failed
failed
options.
options
Then
then
click
click
add
add
endpoint
endpoint
and
and
Stripe
stripe
will
will
start
start
sending
sending
webhooks
webhooks
to
to
that
that
address.
address
Now
now
when
when
we
we
start
start
testing
testing
this
this
webhook,
webhook
Stripe's
stripe's
going
going
to
to
send
send
it
it
to
to
a
a
customer
customer
with
with
all
all
zeros.
zeros
So
so
we're
we're
gonna
gonna
go
go
in
in
the
the
Firebase
firebase
database
database
and
and
just
just
point
point
that
that
test
test
customer
customer
to
to
our
our
current
current
user
user
that
that
we're
we're
working
working
with.
with
From
from
here
here
you
you
can
can
click
click
on
on
Test
test
Webhook
webhook
from
from
the
the
Stripe
stripe
dashboard
dashboard
and
and
choose
choose
the
the
type
type
of
of
request
request
you
you
wanna
wanna
send.
send
So
so
in
in
this
this
case,
case
we'll
we'll
first
first
send
send
a
a
payment
payment
failed
failed
request,
request
and
and
you
you
can
can
see
see
that
that
changes
changes
the
the
status
status
to
to
past
past
due.
due
Then
then
we
we
can
can
do
do
the
the
same
same
thing
thing
for
for
payment
payment
succeeded,
succeeded
and
and
we
we
should
should
see
see
the
the
status
status
updated
updated
back
back
to
to
active.
active
If
if
you
you
get
get
any
any
errors
errors
at
at
this
this
point,
point
it's
it's
always
always
a
a
good
good
idea
idea
to
to
look
look
at
at
the
the
Firebase
firebase
function
function
logs,
logs
and
and
you
you
can
can
see
see
exactly
exactly
what
what
kind
kind
of
of
error
error
is
is
happening
happening
inside
inside
your
your
function.
function
So
so
that's
that's
just
just
barely
barely
scratching
scratching
the
the
surface
surface
of
of
the
the
possibilities
possibilities
of
of
Stripe
stripe
subscription
subscription
payments.
payments
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
Scribe.
scribe
And
and
if
if
you
you
want
want
to
to
talk
talk
about
about
building
building
your
your
own
own
custom
custom
subscription
subscription
system,
system
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker explains how to build a subscription model into an app using Stripe payments, Angular, and CloudGeneration. They provide instructions on creating a customer, setting a Stripe test key, and setting a customer ID and user ID. They also discuss how to create a cloud function and import payment services. The speaker explains how to access customer payment history and cancel a subscription, and provides instructions on how to update data for recurring payments through Stripe. They also discuss updating customer Pro membership to past due and handling recurring payments, and provide instructions on how to access and update data for recurring payments through Stripe. Finally, they explain the process of updating customer Pro membership to past due and handling recurring payments, and mention a free book and a project consulting service.
Subscription Payments with Stripe, Angular, and Firebase
Subscription payments are one of the most effective ways to monetize your software. In this episode, we're going to use the Stripe payments API along with Angular, Firebase, and Cloud Functions to build a subscription model into an app. By the end of this video, you'll be able to accept credit cards through your front end Angular app and then save information about the subscription in the Firebase database and handle recurring payments with Stripe webhooks. I I have to warn you that this video covers a lot of code in a very short amount of time, so I recommend going to angularfirebase.com to follow along with the source code and get additional content related to Stripe payments. So first things first, you'll need to have a Stripe account which you can get at stripe.com. Then retrieve your test API key and add it to your environment. .Ts file in Angular. Then we're going to add the Stripe checkout JS library to the index HTML file. It goes in the head tag, and it allows us to collect credit card details then send them back to Stripe. Then the last thing we need to do is tell TypeScript about Stripe. So we go to the typings.d.ts file and then just declare a variable called Stripe checkout. From here, we'll initialize Cloud Functions in our project using the Firebase CLI. So we run Firebase init functions. From there, we also need to set our Stripe test key in the functions environment. So we can do that by running Firebase functions, config, set, Stripe test key with your test key in there. Then we'll CD into the functions directory and install the Stripe NPM package. We do that with npm install Stripe Save, and this allows us to communicate with the Stripe API from our Node. Js Cloud Functions environment. Okay. So that wraps up the initial setup. Now we can actually start building this scription model. Before we can create a subscription, we need to create a customer in Stripe. It's easiest if you create that customer as soon as your user signs up for your app. So we're going to create a cloud function that runs as soon as a user signs up for the first time, and it's going to save the Stripe customer ID in this customer's note on the database. The Stripe customer ID will be the key and the Firebase user ID will be the value. This data structure is going to come into play later when we start using webhooks to handle recurring payments. And we're also going to duplicate this data on the user object itself. So you can see here under the user ID, we have the customer ID as well. If you're lost at this point, make sure to check out some of my videos covering user authentication with Firebase. Now we're going to jump into the functions index dot JS file and build this First Cloud Function. So first we're going to initialize the function with the admin database, then we'll initialize the Stripe library with the API key that we had configured in the environment earlier. Then we're going to call this function create Stripe Customer, and it's going to run whenever a new user signs up. Firebase has a built in auth trigger called on create that will run this function whenever a new user signs up. When it runs, it's gonna give us access to this event variable which just contains the user auth data. Then we're going to return a Stripe promise by calling Stripe customers create. And then to create a customer, all you have to do is pass it an email address. Then once that promise resolves with Stripe, it's going to return a customer object. And what we wanna do with this customer object is save it in the Firebase database. But we have 2 different locations to save it at, so we're gonna create an updates object here. And first, we're gonna save the user ID on the customer's node. Then we'll do the inverse of that by saving the customer ID on the user's node. We structured the update like this so it either succeeds or fails together. This is known as an atomic update or fan out in Firebase. So to make the update, we just reference the root database and pass it this updates object. From here, you can deploy the function and then go test it out by signing up a new user. And you should see that customer's node and the user node be updated with the corresponding data. Now that we have that done, I'm going to create a service that will save the payment token to Firebase when the user enters their credit card details. So first we're going to need the AngularFire database and AngularFire auth services and then we're also gonna import switchmap and do from RXJS. Then I'm going to set a variable for the current user's ID and also a observable of their membership status in the database. To get the membership status, we first need to call the AngularFire auth state observable and then once we have that, we're just gonna set the user ID on the service itself and then we'll call switch map and use the user's ID to retrieve their membership in the database. So we can do that by calling object users, user ID, and then we're going to save it under the pro membership. Eventually, the pro membership node will have the current status of their membership as well as the next payment date. When a user enters their credit card details through Stripe Checkout, It will send us back a payment token. We need to save this payment token in the Firebase database and then trigger a cloud function whenever it's updated. So for now we'll just save it directly under the Pro membership under that user's ID. Okay. Now we can create a component that will be responsible for collecting the user's credit card information. First, we will import the payment service that we just created and then we'll go ahead and import our environment variables which have the Stripe API key. Then we'll create a variable for the handler and inject the payment service in the constructor. Then we'll configure the handler during ng on init and we can do that by calling Stripe checkout configure then pass it an object of different configuration options. The important thing is the key, which is the Stripe API key, then token, which takes a callback function after Stripe sends us the token back. Once we have that token, we can use our payment service to save it to the Firebase database. Now that we have it configured, we just need an event handler that allows user to open it. So we can call this handler open and then pass a few variables here which describe what they're paying for. In this case, it's a pro subscription, and the amount is 1500, which translates to 15 US dollars in this case. In the component HTML, we can reference the payment membership observable, and we'll set that as a template variable called pro in this case. If the ProStatus is not active, then we want to go ahead and show the payment button. Then when the user clicks that button, it will open the Stripe event handler. And then while we're in here, we'll check and see if the user has an active membership. And if so, we'll just show a div here showing that the subscription is active. This is a very simplistic approach. In the real world, you probably wanna show a payment history as well as an option to cancel and other little convenience features like that. So now we'll enter some card details, and we're just using a test credit card from Stripe. Once the payment completes, we should see the token being saved here under the pro Ship under that user's account. So it looks like that's working fine. Now we just need another cloud function to build the subscription once this event happens. To do that, go over to your Stripe account dashboard and make sure you're viewing the test data. Then go to subscriptions and plans, and we're just going to create it manually. Although I should note you can create these plans programmatically, which is especially useful if your users can customize their own plans. Now we can jump back to the index JS file and create a Cloud Function that will add a customer to this subscription plan. The function name will be create subscription, Then we'll run the function whenever the user's user ID pro membership token is updated. So that'll happen when the user enters their card detail and we want to build the scription, and Charge the Customer. This is going to give us an event variable which we can use to retrieve the token value that we've already saved to the database. In this case, we can get the token value by calling Event Data Val. Then we'll also save the user ID as a variable here and we can throw an error if any of this essential data is missing. Okay. The next step is to query the admin database for the actual user data. So we reference user's user ID, pull that value once, and then have the snapshot resolve into a Promise. And once we have that data back from Firebase, we can call Stripe subscriptions create which we need to provide a Stripe customer ID as well as a source for the payment which in most cases would be a credit card. In our case, we saved the customer ID when the user first signed up and we saved the credit card token ID in the last step. When you create a subscription, you have an array of items. So in our case, we're just gonna add the Pro membership item, but you could also add, like, a setup fee or any customized options you want here as well. This is going to return a promise, and on Stripe's end, they're going to create a subscription and also charge the customer. If the charge fails, it will raise an error. So So once we get the subscription back, we can go ahead and reference the user's pro membership in Firebase. And then we'll just go ahead and update it to active, but there's all kinds of additional data you could save here you wanted to. And the final step will be to catch any errors and that should be it for our subscription cloud function. You can go ahead and deploy it. And then if you go charge the card again, you should see the Pro membership updated and then the subscription turned to active. So if we look at the object, it has a status of active as well as our token that we saved there before. Then we can also go into Stripe, and we should be able to see the subscription saved there as well. So going into the Stripe dashboard, we can see this user is subscribed to the pro membership, and then we have a history of their payments and any other activity here as well. So that's pretty cool, but there's still one more piece to the puzzle that we still haven't solved, and that's handling recurring payments as they happen asynchronously once a month. Stripe uses webhooks as a way to send data to your app. So once a month, they're going to that charge the user's card, and then they'll send the data to a webhook that you provide. A webhook is just a URL where you can receive the data and then run some code in response to it. We can handle this with Firebase HTTP Cloud Functions. The end result is going to look like this. We'll send a test payment failed webhook and then it's going to update the user's Pro membership to past due. And then if we get a payment succeeded webhook, it updates it back to active. Let's go back to index. Js and create the Cloud function that will handle this logic. Let's give the function a name of recurring payment and we'll make it an HTTPS function which is going to return a request and a response. So first with the request, we need to get the request body type as well as the request body data object. And that's just the data that is being sent to us from Stripe. It has things like the customer's customer ID as well as the subscription status. And we'll go ahead and throw an error if any of this data is missing. Then Stripe is not going to send us the Firebase user ID, but it is going to send us the Stripe customer ID. That's why we saved it on its own customer node that points to the Firebase user ID. So we can reference that customer ID and then with that data, we can update the data on the actual Firebase user ID. So once we get the user ID, we'll make a reference to that point in the database, and there's 2 possible hooks here. We can either have a payment succeeded or a payment failed. So we'll just use a conditional if statement. And if the invoice payment succeeded, then we'll just go ahead and update the status to active. And then, likewise, if the payments failed, then we'll go ahead and update the status to past due. This is a pretty simplistic approach, and Stripe sends all kinds of other webhooks that you can listen for. So check out the docs to see the full customization options. Now the last thing we need to do is send a response back to Stripe. If we send a 200 response, that means we received it and we updated the database and everything's good to go. We can also send a 300 or 400 level response which Stripe will treat as an unsuccessful request. And in that case, Stripe will try to retry the webhook a certain number of times. You can configure the retry attempts in the Stripe dashboard. Go ahead and deploy the function, but this time make note of the URL that it returns from you for this recurring payment function. From the Stripe dashboard, you wanna go to API and then Webhooks and then add an endpoint. You can just, uh, copy and paste this URL directly in the endpoint. And then we're gonna go down here and select the invoice payment succeeded and invoice payment failed options. Then click add endpoint and Stripe will start sending webhooks to that address. Now when we start testing this webhook, Stripe's going to send it to a customer with all zeros. So we're gonna go in the Firebase database and just point that test customer to our current user that we're working with. From here you can click on Test Webhook from the Stripe dashboard and choose the type of request you wanna send. So in this case, we'll first send a payment failed request, and you can see that changes the status to past due. Then we can do the same thing for payment succeeded, and we should see the status updated back to active. If you get any errors at this point, it's always a good idea to look at the Firebase function logs, and you can see exactly what kind of error is happening inside your function. So that's just barely scratching the surface of the possibilities of Stripe subscription payments. If this video helped you, please like and Scribe. And if you want to talk about building your own custom subscription system, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching and I'll see you next time.
The speaker explains how to build a subscription model into an app using Stripe payments, Angular, and CloudGeneration. They provide instructions on creating a customer, setting a Stripe test key, and setting a customer ID and user ID. They also discuss how to create a cloud function and import payment services. The speaker explains how to access customer payment history and cancel a subscription, and provides instructions on how to update data for recurring payments through Stripe. They also discuss updating customer Pro membership to past due and handling recurring payments, and provide instructions on how to access and update data for recurring payments through Stripe. Finally, they explain the process of updating customer Pro membership to past due and handling recurring payments, and mention a free book and a project consulting service.