Implement Stripe's JavaScript packages to collect 💸 credit cards and payment sources from your frontend Angular code. https://fireship.io/lessons/stripe-elements-angular/

- $10 off Fireship PRO use coupon 4wcebivB https://fireship.io/pro
- Stripe JS https://stripe.com/docs/stripe-js/reference#stripe-elements
- AngularFire https://github.com/angular/angularfire2
2024-02-04T06:55:32.441Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
02eff0a7-b947-4c3f-9260-f190461ef36c
cfe784fd416ab431a9dee2b618aaeb16cacc40fa5024024511dc414a51fd30cd
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
If you're building an app, there's a good chance that at some point you'll want to convert your users into paying customers.
The most popular API for doing just that is Stripe.
It's the payment solution behind a huge number of successful startups and companies like Twitch, Squarespace, and Shopify, just to name a few.
Stripe has multiple JavaScript libraries that you can implement in the front end to easily collect credit card information from your customers.
In today's video, you'll learn how to use both Stripe checkout and Stripe Elements in an Angular application.
If you're new here, like and subscribe and you can grab the full source code on Fireship IO.
Now the first thing I want to point out is that this video is only covering the front end implementation.
That involves securely collecting credit card information from the user and then validating it with Stripe, but it does not involve creating the actual charge that will collect money from the user.
There.
For that, you need a back end implementation.
And if you're using Firebase, that means Firebase Cloud Functions.
Luckily, I just released my full length Stripe payments master course, and it will show you how to implement and test everything on the back end as well as integrate it with Firebase.
The course will show you how to build a full stack payment solution similar to the one I have on Fireship IO it handles single charges, subscriptions, coupons, and more.
But enough of that shameless plug, let's get into our Angular application and start writing some code.
We're going to start with Stripe checkout, which is very easy to implement and does almost all the front end work for you.
When the user clicks on this buy button, it will trigger this pop up model, which will then collect their credit card information can do all the validation directly in that modal.
This is great as a drop in solution, but it doesn't give you a lot of flexibility to customize styling or the entire checkout experience.
Now at this point, I wanna make it clear that I'm using Firebase in this project.
It's not at all required to work with Stripe and Angular.
But I want to show you what a real charge looks like.
So in order to do that, I've implemented user authentication in this app as well as Firebase callable functions.
As you can see, I have those dependencies in my app module via the AngularFire library.
One other thing you'll probably wanna do is install the types for either Stripe checkout or Stripe JS just so you have autocomplete in your IDE as you're writing your code.
From there, we'll go into Angular to the index HTML file and then add the script for Stripe checkout.
Stripe recommends including this as a script tag in the HTML as opposed to including it in your JavaScript bundle.
Now I've created a component called checkout, and the first important thing I'll do is declare a namespace for Stripe checkout in the top of this file.
And you can strong type it if you install the typings that I showed you earlier.
Then I'm adding my auth service and AngularFire functions to the constructor.
That's not required for Stripe checkout, and you can replace that with nothing or with your own logic.
Now there's a good chance you have more than one product, so we'll add input properties here to pass in an amount and also a description for the product being sold.
Then we'll declare a handler, which is the actual modal window that the user will enter their credit card details in.
That I'm also going to show you a confirmation of an actual charge from Stripe, and we'll set a loading state to false.
We can define the handler during n g on init, and we do that by calling Stripe checkout configure.
And at this point, you'll need to pass it your Stripe publishable key.
You can find that by going to the Stripe dashboard under developers, API keys.
There's a bunch of different options that you can pass in here to customize things like the avatar image and things like that.
But the important thing is that you define a callback for either the source or the token.
When the user enters their payment details, they will be securely transferred to Stripe, and then Stripe will respond back to your front end with a tokenized version of the payment source or credit card.
So the code right here will run after the user has entered their card details, Stripe has validated that card, and now we can use it to actually create a charge on our own server.
There's quite a few things that you'll wanna do here.
1st, we'll set the loading state to true, and then we'll get the currently authenticated user.
The back end that we build on the Stripe master Recourse is based on Firebase callable functions.
This is a special type of HTTP function that gives us the context of the currently authenticated user.
This means we can make requests to our back end without having to set authorization headers manually.
In this case, we just need to pass a source and an amount and our back end will charge the card.
That will take a second or 2, and then we'll go ahead and set the loading state to false.
And that's all it takes to create a charge from our back end.
The only thing left to do is create a method here called checkout that will open the handler when the user clicks a button.
You can also add additional details here.
For example, you might want to add the user's email address and the amount and description of the product.
We can also close the handler manually, and we'll want to do that if the user clicks the back button by adding a host listener to the window pop state event.
In the HTML, we'll just go ahead and create a button, and then we'll bind the click event to that checkout handler.
Now when creating the amount for a Stripe charge.
It will always be in the currency's smallest denomination, which for US dollars would be pennies.
And that's why I divide the amount by 100 so we have the actual dollar amount to show on the UI.
And then I'll add n g f here for the loading state and also for the confirmation that we get back from our back end.
Now when a customer goes online to buy some meat from our store, they have a modal to enter their credit card details that is not only secure, but also looks pretty nice.
After the card is captured, it will run the code in that callback.
It first puts the app in the loading state for a few seconds, then it responds with a charge object from Stripe, which has all kinds of information about the charge itself, like the ID, the amount, and stuff like that.
So overall, that was very easy, and we created a real charge in the Stripe testing environment.
But the main drawback to Stripe checkout is that we don't have a lot of control over the checkout experience.
We can change the logo and some of the options, but everything else is basically hard coded into that model.
Luckily, Stripe has another library called Stripe Elements that allows you to build checkout forms without having to do everything from scratch.
We use Stripe Elements on Fireship, and as you can see here, we get the same validation and security that we get with the checkout form.
However, it is a lot easier to customize.
And as you can see here, it easily adapts to multiple themes.
And it's really not that much more difficult to set up.
So So first, we're going to go into the index HTML and this time import Stripe JS version 3.
We'll declare a global variable for Stripe and this time, the typings are under the Stripe namespace.
Now the component will start off just like the previous one did.
We pass in the amount and the product description, but then we need to grab a DOM element to attach the payment form to.
So view child will be looking for a template reference called card element, which we'll create once we get to the HTML.
Now we have a few things to declare here.
We have the instance of Stripe Elements itself.
We have the card that represents the actual card details and then any card errors.
And then we'll also have a loading state and a confirmation from our back end.
Now you can initialize Stripe with your publishable key, and then Stripe Elements will give you access to a bunch of different form fields.
If you just have a generic credit card form, you can create the card element, and that's all you need.
That'll give you a nice single line for the card itself, but you can break that down into multiple fields if you want.
From here, we'll go ahead and mount the card to the actual DOM element, which we do by calling card element native element in Angular.
At this point, we need to attach an event listener to changes to the card form.
In this example, we're just going to display the card errors, but you might also want to disable the submit button if the card is not valid.
When it comes to Stripe Elements, we need to handle the actual we'll submission of the payment form.
Unlike the previous example where we defined a source callback, this time we'll actually call Stripe create source and then handle it inside this async function.
If there are any errors, then we'll go ahead and show those in the view.
Otherwise, we're going to run the same exact logic that we ran in that source handler which involves getting the current user, calling the callable function to create the charge in the back end and then setting the loading state to false.
Now we can switch over to the HTML.
And first, we'll create a form element, and then we'll bind the handle form method to the submission of this form.
Then we'll create a div with hashtag card element that creates the template variable that we can actually mount to.
And then we'll also display the card errors here as well.
And that's all it takes to build a validated and secure payment form with Stripe and Angular.
Now we can just drop this component anywhere in our Angular app, and we have a quick and easy way for users to pay for products or sign up for subscriptions.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And if you're serious about building a payment system with Stripe, consider becoming a pro member at Fireship IO.
I'm leaving a discount code down on the description.
And if you have any questions, make sure to leave me a comment.
Thanks for watching, and I will talk to you soon.

Speaker 0: If you're building an app, there's a good chance that at some point you'll want to convert your users into paying customers. The most popular API for doing just that is Stripe. It's the payment solution behind a huge number of successful startups and companies like Twitch, Squarespace, and Shopify, just to name a few. Stripe has multiple JavaScript libraries that you can implement in the front end to easily collect credit card information from your customers. In today's video, you'll learn how to use both Stripe checkout and Stripe Elements in an Angular application.

If you're new here, like and subscribe and you can grab the full source code on Fireship IO. Now the first thing I want to point out is that this video is only covering the front end implementation. That involves securely collecting credit card information from the user and then validating it with Stripe, but it does not involve creating the actual charge that will collect money from the user. There. For that, you need a back end implementation.

And if you're using Firebase, that means Firebase Cloud Functions. Luckily, I just released my full length Stripe payments master course, and it will show you how to implement and test everything on the back end as well as integrate it with Firebase. The course will show you how to build a full stack payment solution similar to the one I have on Fireship IO it handles single charges, subscriptions, coupons, and more. But enough of that shameless plug, let's get into our Angular application and start writing some code. We're going to start with Stripe checkout, which is very easy to implement and does almost all the front end work for you.

When the user clicks on this buy button, it will trigger this pop up model, which will then collect their credit card information can do all the validation directly in that modal. This is great as a drop in solution, but it doesn't give you a lot of flexibility to customize styling or the entire checkout experience. Now at this point, I wanna make it clear that I'm using Firebase in this project. It's not at all required to work with Stripe and Angular. But I want to show you what a real charge looks like.

So in order to do that, I've implemented user authentication in this app as well as Firebase callable functions. As you can see, I have those dependencies in my app module via the AngularFire library. One other thing you'll probably wanna do is install the types for either Stripe checkout or Stripe JS just so you have autocomplete in your IDE as you're writing your code. From there, we'll go into Angular to the index HTML file and then add the script for Stripe checkout. Stripe recommends including this as a script tag in the HTML as opposed to including it in your JavaScript bundle.

Now I've created a component called checkout, and the first important thing I'll do is declare a namespace for Stripe checkout in the top of this file. And you can strong type it if you install the typings that I showed you earlier. Then I'm adding my auth service and AngularFire functions to the constructor. That's not required for Stripe checkout, and you can replace that with nothing or with your own logic. Now there's a good chance you have more than one product, so we'll add input properties here to pass in an amount and also a description for the product being sold.

Then we'll declare a handler, which is the actual modal window that the user will enter their credit card details in. That I'm also going to show you a confirmation of an actual charge from Stripe, and we'll set a loading state to false. We can define the handler during n g on init, and we do that by calling Stripe checkout configure. And at this point, you'll need to pass it your Stripe publishable key. You can find that by going to the Stripe dashboard under developers, API keys.

There's a bunch of different options that you can pass in here to customize things like the avatar image and things like that. But the important thing is that you define a callback for either the source or the token. When the user enters their payment details, they will be securely transferred to Stripe, and then Stripe will respond back to your front end with a tokenized version of the payment source or credit card. So the code right here will run after the user has entered their card details, Stripe has validated that card, and now we can use it to actually create a charge on our own server. There's quite a few things that you'll wanna do here.

1st, we'll set the loading state to true, and then we'll get the currently authenticated user. The back end that we build on the Stripe master Recourse is based on Firebase callable functions. This is a special type of HTTP function that gives us the context of the currently authenticated user. This means we can make requests to our back end without having to set authorization headers manually. In this case, we just need to pass a source and an amount and our back end will charge the card.

That will take a second or 2, and then we'll go ahead and set the loading state to false. And that's all it takes to create a charge from our back end. The only thing left to do is create a method here called checkout that will open the handler when the user clicks a button. You can also add additional details here. For example, you might want to add the user's email address and the amount and description of the product.

We can also close the handler manually, and we'll want to do that if the user clicks the back button by adding a host listener to the window pop state event. In the HTML, we'll just go ahead and create a button, and then we'll bind the click event to that checkout handler. Now when creating the amount for a Stripe charge. It will always be in the currency's smallest denomination, which for US dollars would be pennies. And that's why I divide the amount by 100 so we have the actual dollar amount to show on the UI.

And then I'll add n g f here for the loading state and also for the confirmation that we get back from our back end. Now when a customer goes online to buy some meat from our store, they have a modal to enter their credit card details that is not only secure, but also looks pretty nice. After the card is captured, it will run the code in that callback. It first puts the app in the loading state for a few seconds, then it responds with a charge object from Stripe, which has all kinds of information about the charge itself, like the ID, the amount, and stuff like that. So overall, that was very easy, and we created a real charge in the Stripe testing environment.

But the main drawback to Stripe checkout is that we don't have a lot of control over the checkout experience. We can change the logo and some of the options, but everything else is basically hard coded into that model. Luckily, Stripe has another library called Stripe Elements that allows you to build checkout forms without having to do everything from scratch. We use Stripe Elements on Fireship, and as you can see here, we get the same validation and security that we get with the checkout form. However, it is a lot easier to customize.

And as you can see here, it easily adapts to multiple themes. And it's really not that much more difficult to set up. So So first, we're going to go into the index HTML and this time import Stripe JS version 3. We'll declare a global variable for Stripe and this time, the typings are under the Stripe namespace. Now the component will start off just like the previous one did.

We pass in the amount and the product description, but then we need to grab a DOM element to attach the payment form to. So view child will be looking for a template reference called card element, which we'll create once we get to the HTML. Now we have a few things to declare here. We have the instance of Stripe Elements itself. We have the card that represents the actual card details and then any card errors.

And then we'll also have a loading state and a confirmation from our back end. Now you can initialize Stripe with your publishable key, and then Stripe Elements will give you access to a bunch of different form fields. If you just have a generic credit card form, you can create the card element, and that's all you need. That'll give you a nice single line for the card itself, but you can break that down into multiple fields if you want. From here, we'll go ahead and mount the card to the actual DOM element, which we do by calling card element native element in Angular.

At this point, we need to attach an event listener to changes to the card form. In this example, we're just going to display the card errors, but you might also want to disable the submit button if the card is not valid. When it comes to Stripe Elements, we need to handle the actual we'll submission of the payment form. Unlike the previous example where we defined a source callback, this time we'll actually call Stripe create source and then handle it inside this async function. If there are any errors, then we'll go ahead and show those in the view.

Otherwise, we're going to run the same exact logic that we ran in that source handler which involves getting the current user, calling the callable function to create the charge in the back end and then setting the loading state to false. Now we can switch over to the HTML. And first, we'll create a form element, and then we'll bind the handle form method to the submission of this form. Then we'll create a div with hashtag card element that creates the template variable that we can actually mount to. And then we'll also display the card errors here as well.

And that's all it takes to build a validated and secure payment form with Stripe and Angular. Now we can just drop this component anywhere in our Angular app, and we have a quick and easy way for users to pay for products or sign up for subscriptions. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you're serious about building a payment system with Stripe, consider becoming a pro member at Fireship IO.

I'm leaving a discount code down on the description. And if you have any questions, make sure to leave me a comment. Thanks for watching, and I will talk to you soon.
If you're building an app, there's a good chance that at some point you'll want to convert your users into paying customers. The most popular API for doing just that is Stripe. It's the payment solution behind a huge number of successful startups and companies like Twitch, Squarespace, and Shopify, just to name a few. Stripe has multiple JavaScript libraries that you can implement in the front end to easily collect credit card information from your customers. In today's video, you'll learn how to use both Stripe checkout and Stripe Elements in an Angular application. If you're new here, like and subscribe and you can grab the full source code on Fireship IO. Now the first thing I want to point out is that this video is only covering the front end implementation. That involves securely collecting credit card information from the user and then validating it with Stripe, but it does not involve creating the actual charge that will collect money from the user.
youtube
video gaming
streaming
customers
billing
customer support
There. For that, you need a back end implementation. And if you're using Firebase, that means Firebase Cloud Functions. Luckily, I just released my full length Stripe payments master course, and it will show you how to implement and test everything on the back end as well as integrate it with Firebase.
The course will show you how to build a full stack payment solution similar to the one I have on Fireship IO it handles single charges, subscriptions, coupons, and more. But enough of that shameless plug, let's get into our Angular application and start writing some code. We're going to start with Stripe checkout, which is very easy to implement and does almost all the front end work for you.
billing
When the user clicks on this buy button, it will trigger this pop up model, which will then collect their credit card information can do all the validation directly in that modal. This is great as a drop in solution, but it doesn't give you a lot of flexibility to customize styling or the entire checkout experience. Now at this point, I wanna make it clear that I'm using Firebase in this project. It's not at all required to work with Stripe and Angular. But I want to show you what a real charge looks like. So in order to do that, I've implemented user authentication in this app as well as Firebase callable functions. As you can see, I have those dependencies in my app module via the AngularFire library. One other thing you'll probably wanna do is install the types for either Stripe checkout or Stripe JS just so you have autocomplete in your IDE as you're writing your code. From there, we'll go into Angular to the index HTML file and then add the script for Stripe checkout. Stripe recommends including this as a script tag in the HTML as opposed to including it in your JavaScript bundle. Now I've created a component called checkout, and the first important thing I'll do is declare a namespace for Stripe checkout in the top of this file. And you can strong type it if you install the typings that I showed you earlier. Then I'm adding my auth service and AngularFire functions to the constructor.
That's not required for Stripe checkout, and you can replace that with nothing or with your own logic. Now there's a good chance you have more than one product, so we'll add input properties here to pass in an amount and also a description for the product being sold. Then we'll declare a handler, which is the actual modal window that the user will enter their credit card details in. That I'm also going to show you a confirmation of an actual charge from Stripe, and we'll set a loading state to false. We can define the handler during n g on init, and we do that by calling Stripe checkout configure.
billing
banking
And at this point, you'll need to pass it your Stripe publishable key. You can find that by going to the Stripe dashboard under developers, API keys. There's a bunch of different options that you can pass in here to customize things like the avatar image and things like that.
But the important thing is that you define a callback for either the source or the token. When the user enters their payment details, they will be securely transferred to Stripe, and then Stripe will respond back to your front end with a tokenized version of the payment source or credit card. So the code right here will run after the user has entered their card details, Stripe has validated that card, and now we can use it to actually create a charge on our own server. There's quite a few things that you'll wanna do here. 1st, we'll set the loading state to true, and then we'll get the currently authenticated user.
billing
The back end that we build on the Stripe master Recourse is based on Firebase callable functions. This is a special type of HTTP function that gives us the context of the currently authenticated user.
This means we can make requests to our back end without having to set authorization headers manually. In this case, we just need to pass a source and an amount and our back end will charge the card. That will take a second or 2, and then we'll go ahead and set the loading state to false.
billing
And that's all it takes to create a charge from our back end. The only thing left to do is create a method here called checkout that will open the handler when the user clicks a button. You can also add additional details here. For example, you might want to add the user's email address and the amount and description of the product. We can also close the handler manually, and we'll want to do that if the user clicks the back button by adding a host listener to the window pop state event.
In the HTML, we'll just go ahead and create a button, and then we'll bind the click event to that checkout handler. Now when creating the amount for a Stripe charge. It will always be in the currency's smallest denomination, which for US dollars would be pennies. And that's why I divide the amount by 100 so we have the actual dollar amount to show on the UI. And then I'll add n g f here for the loading state and also for the confirmation that we get back from our back end. Now when a customer goes online to buy some meat from our store, they have a modal to enter their credit card details that is not only secure, but also looks pretty nice. After the card is captured, it will run the code in that callback. It first puts the app in the loading state for a few seconds, then it responds with a charge object from Stripe, which has all kinds of information about the charge itself, like the ID, the amount, and stuff like that.
billing
finance
banking
customers
customer support
purchasing
cryptocurrency
So overall, that was very easy, and we created a real charge in the Stripe testing environment. But the main drawback to Stripe checkout is that we don't have a lot of control over the checkout experience. We can change the logo and some of the options, but everything else is basically hard coded into that model. Luckily, Stripe has another library called Stripe Elements that allows you to build checkout forms without having to do everything from scratch. We use Stripe Elements on Fireship, and as you can see here, we get the same validation and security that we get with the checkout form. However, it is a lot easier to customize. And as you can see here, it easily adapts to multiple themes. And it's really not that much more difficult to set up. So So first, we're going to go into the index HTML and this time import Stripe JS version 3. We'll declare a global variable for Stripe and this time, the typings are under the Stripe namespace. Now the component will start off just like the previous one did. We pass in the amount and the product description, but then we need to grab a DOM element to attach the payment form to. So view child will be looking for a template reference called card element, which we'll create once we get to the HTML. Now we have a few things to declare here. We have the instance of Stripe Elements itself. We have the card that represents the actual card details and then any card errors. And then we'll also have a loading state and a confirmation from our back end. Now you can initialize Stripe with your publishable key, and then Stripe Elements will give you access to a bunch of different form fields. If you just have a generic credit card form, you can create the card element, and that's all you need. That'll give you a nice single line for the card itself, but you can break that down into multiple fields if you want. From here, we'll go ahead and mount the card to the actual DOM element, which we do by calling card element native element in Angular.
At this point, we need to attach an event listener to changes to the card form. In this example, we're just going to display the card errors, but you might also want to disable the submit button if the card is not valid. When it comes to Stripe Elements, we need to handle the actual we'll submission of the payment form.
billing
Unlike the previous example where we defined a source callback, this time we'll actually call Stripe create source and then handle it inside this async function.
If there are any errors, then we'll go ahead and show those in the view. Otherwise, we're going to run the same exact logic that we ran in that source handler which involves getting the current user, calling the callable function to create the charge in the back end and then setting the loading state to false.
logic
Now we can switch over to the HTML. And first, we'll create a form element, and then we'll bind the handle form method to the submission of this form.
Then we'll create a div with hashtag card element that creates the template variable that we can actually mount to. And then we'll also display the card errors here as well. And that's all it takes to build a validated and secure payment form with Stripe and Angular. Now we can just drop this component anywhere in our Angular app, and we have a quick and easy way for users to pay for products or sign up for subscriptions.
billing
I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you're serious about building a payment system with Stripe, consider becoming a pro member at Fireship IO. I'm leaving a discount code down on the description. And if you have any questions, make sure to leave me a comment.
customer support
youtube
Thanks for watching, and I will talk to you soon.
If you're building an app, there's a good chance that at some point you'll want to convert your users into paying customers. The most popular API for doing just that is Stripe. It's the payment solution behind a huge number of successful startups and companies like Twitch, Squarespace, and Shopify, just to name a few. Stripe has multiple JavaScript libraries that you can implement in the front end to easily collect credit card information from your customers. In today's video, you'll learn how to use both Stripe checkout and Stripe Elements in an Angular application. If you're new here, like and subscribe and you can grab the full source code on Fireship IO. Now the first thing I want to point out is that this video is only covering the front end implementation. That involves securely collecting credit card information from the user and then validating it with Stripe, but it does not involve creating the actual charge that will collect money from the user. There. For that, you need a back end implementation. And if you're using Firebase, that means Firebase Cloud Functions. Luckily, I just released my full length Stripe payments master course, and it will show you how to implement and test everything on the back end as well as integrate it with Firebase. The course will show you how to build a full stack payment solution similar to the one I have on Fireship IO it handles single charges, subscriptions, coupons, and more. But enough of that shameless plug, let's get into our Angular application and start writing some code. We're going to start with Stripe checkout, which is very easy to implement and does almost all the front end work for you. When the user clicks on this buy button, it will trigger this pop up model, which will then collect their credit card information can do all the validation directly in that modal. This is great as a drop in solution, but it doesn't give you a lot of flexibility to customize styling or the entire checkout experience. Now at this point, I wanna make it clear that I'm using Firebase in this project. It's not at all required to work with Stripe and Angular. But I want to show you what a real charge looks like. So in order to do that, I've implemented user authentication in this app as well as Firebase callable functions. As you can see, I have those dependencies in my app module via the AngularFire library. One other thing you'll probably wanna do is install the types for either Stripe checkout or Stripe JS just so you have autocomplete in your IDE as you're writing your code. From there, we'll go into Angular to the index HTML file and then add the script for Stripe checkout. Stripe recommends including this as a script tag in the HTML as opposed to including it in your JavaScript bundle. Now I've created a component called checkout, and the first important thing I'll do is declare a namespace for Stripe checkout in the top of this file. And you can strong type it if you install the typings that I showed you earlier. Then I'm adding my auth service and AngularFire functions to the constructor. That's not required for Stripe checkout, and you can replace that with nothing or with your own logic. Now there's a good chance you have more than one product, so we'll add input properties here to pass in an amount and also a description for the product being sold. Then we'll declare a handler, which is the actual modal window that the user will enter their credit card details in. That I'm also going to show you a confirmation of an actual charge from Stripe, and we'll set a loading state to false. We can define the handler during n g on init, and we do that by calling Stripe checkout configure. And at this point, you'll need to pass it your Stripe publishable key. You can find that by going to the Stripe dashboard under developers, API keys. There's a bunch of different options that you can pass in here to customize things like the avatar image and things like that. But the important thing is that you define a callback for either the source or the token. When the user enters their payment details, they will be securely transferred to Stripe, and then Stripe will respond back to your front end with a tokenized version of the payment source or credit card. So the code right here will run after the user has entered their card details, Stripe has validated that card, and now we can use it to actually create a charge on our own server. There's quite a few things that you'll wanna do here. 1st, we'll set the loading state to true, and then we'll get the currently authenticated user. The back end that we build on the Stripe master Recourse is based on Firebase callable functions. This is a special type of HTTP function that gives us the context of the currently authenticated user. This means we can make requests to our back end without having to set authorization headers manually. In this case, we just need to pass a source and an amount and our back end will charge the card. That will take a second or 2, and then we'll go ahead and set the loading state to false. And that's all it takes to create a charge from our back end. The only thing left to do is create a method here called checkout that will open the handler when the user clicks a button. You can also add additional details here. For example, you might want to add the user's email address and the amount and description of the product. We can also close the handler manually, and we'll want to do that if the user clicks the back button by adding a host listener to the window pop state event. In the HTML, we'll just go ahead and create a button, and then we'll bind the click event to that checkout handler. Now when creating the amount for a Stripe charge. It will always be in the currency's smallest denomination, which for US dollars would be pennies. And that's why I divide the amount by 100 so we have the actual dollar amount to show on the UI. And then I'll add n g f here for the loading state and also for the confirmation that we get back from our back end. Now when a customer goes online to buy some meat from our store, they have a modal to enter their credit card details that is not only secure, but also looks pretty nice. After the card is captured, it will run the code in that callback. It first puts the app in the loading state for a few seconds, then it responds with a charge object from Stripe, which has all kinds of information about the charge itself, like the ID, the amount, and stuff like that. So overall, that was very easy, and we created a real charge in the Stripe testing environment. But the main drawback to Stripe checkout is that we don't have a lot of control over the checkout experience. We can change the logo and some of the options, but everything else is basically hard coded into that model. Luckily, Stripe has another library called Stripe Elements that allows you to build checkout forms without having to do everything from scratch. We use Stripe Elements on Fireship, and as you can see here, we get the same validation and security that we get with the checkout form. However, it is a lot easier to customize. And as you can see here, it easily adapts to multiple themes. And it's really not that much more difficult to set up. So So first, we're going to go into the index HTML and this time import Stripe JS version 3. We'll declare a global variable for Stripe and this time, the typings are under the Stripe namespace. Now the component will start off just like the previous one did. We pass in the amount and the product description, but then we need to grab a DOM element to attach the payment form to. So view child will be looking for a template reference called card element, which we'll create once we get to the HTML. Now we have a few things to declare here. We have the instance of Stripe Elements itself. We have the card that represents the actual card details and then any card errors. And then we'll also have a loading state and a confirmation from our back end. Now you can initialize Stripe with your publishable key, and then Stripe Elements will give you access to a bunch of different form fields. If you just have a generic credit card form, you can create the card element, and that's all you need. That'll give you a nice single line for the card itself, but you can break that down into multiple fields if you want. From here, we'll go ahead and mount the card to the actual DOM element, which we do by calling card element native element in Angular. At this point, we need to attach an event listener to changes to the card form. In this example, we're just going to display the card errors, but you might also want to disable the submit button if the card is not valid. When it comes to Stripe Elements, we need to handle the actual we'll submission of the payment form. Unlike the previous example where we defined a source callback, this time we'll actually call Stripe create source and then handle it inside this async function. If there are any errors, then we'll go ahead and show those in the view. Otherwise, we're going to run the same exact logic that we ran in that source handler which involves getting the current user, calling the callable function to create the charge in the back end and then setting the loading state to false. Now we can switch over to the HTML. And first, we'll create a form element, and then we'll bind the handle form method to the submission of this form. Then we'll create a div with hashtag card element that creates the template variable that we can actually mount to. And then we'll also display the card errors here as well. And that's all it takes to build a validated and secure payment form with Stripe and Angular. Now we can just drop this component anywhere in our Angular app, and we have a quick and easy way for users to pay for products or sign up for subscriptions. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you're serious about building a payment system with Stripe, consider becoming a pro member at Fireship IO. I'm leaving a discount code down on the description. And if you have any questions, make sure to leave me a comment. Thanks for watching, and I will talk to you soon.
If
if
you're
you're
building
building
an
an
app,
app
there's
there's
a
a
good
good
chance
chance
that
that
at
at
some
some
point
point
you'll
you'll
want
want
to
to
convert
convert
your
your
users
users
into
into
paying
paying
customers.
customers
The
the
most
most
popular
popular
API
api
for
for
doing
doing
just
just
that
that
is
is
Stripe.
stripe
It's
it's
the
the
payment
payment
solution
solution
behind
behind
a
a
huge
huge
number
number
of
of
successful
successful
startups
startups
and
and
companies
companies
like
like
Twitch,
twitch
Squarespace,
squarespace
and
and
Shopify,
shopify
just
just
to
to
name
name
a
a
few.
few
Stripe
stripe
has
has
multiple
multiple
JavaScript
javascript
libraries
libraries
that
that
you
you
can
can
implement
implement
in
in
the
the
front
front
end
end
to
to
easily
easily
collect
collect
credit
credit
card
card
information
information
from
from
your
your
customers.
customers
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
how
how
to
to
use
use
both
both
Stripe
stripe
checkout
checkout
and
and
Stripe
stripe
Elements
elements
in
in
an
an
Angular
angular
application.
application
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe
subscribe
and
and
you
you
can
can
grab
grab
the
the
full
full
source
source
code
code
on
on
Fireship
fireship
IO.
io
Now
now
the
the
first
first
thing
thing
I
i
want
want
to
to
point
point
out
out
is
is
that
that
this
this
video
video
is
is
only
only
covering
covering
the
the
front
front
end
end
implementation.
implementation
That
that
involves
involves
securely
securely
collecting
collecting
credit
credit
card
card
information
information
from
from
the
the
user
user
and
and
then
then
validating
validating
it
it
with
with
Stripe,
stripe
but
but
it
it
does
does
not
not
involve
involve
creating
creating
the
the
actual
actual
charge
charge
that
that
will
will
collect
collect
money
money
from
from
the
the
user.
user
There.
there
For
for
that,
that
you
you
need
need
a
a
back
back
end
end
implementation.
implementation
And
and
if
if
you're
you're
using
using
Firebase,
firebase
that
that
means
means
Firebase
firebase
Cloud
cloud
Functions.
functions
Luckily,
luckily
I
i
just
just
released
released
my
my
full
full
length
length
Stripe
stripe
payments
payments
master
master
course,
course
and
and
it
it
will
will
show
show
you
you
how
how
to
to
implement
implement
and
and
test
test
everything
everything
on
on
the
the
back
back
end
end
as
as
well
well
as
as
integrate
integrate
it
it
with
with
Firebase.
firebase
The
the
course
course
will
will
show
show
you
you
how
how
to
to
build
build
a
a
full
full
stack
stack
payment
payment
solution
solution
similar
similar
to
to
the
the
one
one
I
i
have
have
on
on
Fireship
fireship
IO
io
it
it
handles
handles
single
single
charges,
charges
subscriptions,
subscriptions
coupons,
coupons
and
and
more.
more
But
but
enough
enough
of
of
that
that
shameless
shameless
plug,
plug
let's
let's
get
get
into
into
our
our
Angular
angular
application
application
and
and
start
start
writing
writing
some
some
code.
code
We're
we're
going
going
to
to
start
start
with
with
Stripe
stripe
checkout,
checkout
which
which
is
is
very
very
easy
easy
to
to
implement
implement
and
and
does
does
almost
almost
all
all
the
the
front
front
end
end
work
work
for
for
you.
you
When
when
the
the
user
user
clicks
clicks
on
on
this
this
buy
buy
button,
button
it
it
will
will
trigger
trigger
this
this
pop
pop
up
up
model,
model
which
which
will
will
then
then
collect
collect
their
their
credit
credit
card
card
information
information
can
can
do
do
all
all
the
the
validation
validation
directly
directly
in
in
that
that
modal.
modal
This
this
is
is
great
great
as
as
a
a
drop
drop
in
in
solution,
solution
but
but
it
it
doesn't
doesn't
give
give
you
you
a
a
lot
lot
of
of
flexibility
flexibility
to
to
customize
customize
styling
styling
or
or
the
the
entire
entire
checkout
checkout
experience.
experience
Now
now
at
at
this
this
point,
point
I
i
wanna
wanna
make
make
it
it
clear
clear
that
that
I'm
i'm
using
using
Firebase
firebase
in
in
this
this
project.
project
It's
it's
not
not
at
at
all
all
required
required
to
to
work
work
with
with
Stripe
stripe
and
and
Angular.
angular
But
but
I
i
want
want
to
to
show
show
you
you
what
what
a
a
real
real
charge
charge
looks
looks
like.
like
So
so
in
in
order
order
to
to
do
do
that,
that
I've
i've
implemented
implemented
user
user
authentication
authentication
in
in
this
this
app
app
as
as
well
well
as
as
Firebase
firebase
callable
callable
functions.
functions
As
as
you
you
can
can
see,
see
I
i
have
have
those
those
dependencies
dependencies
in
in
my
my
app
app
module
module
via
via
the
the
AngularFire
angularfire
library.
library
One
one
other
other
thing
thing
you'll
you'll
probably
probably
wanna
wanna
do
do
is
is
install
install
the
the
types
types
for
for
either
either
Stripe
stripe
checkout
checkout
or
or
Stripe
stripe
JS
js
just
just
so
so
you
you
have
have
autocomplete
autocomplete
in
in
your
your
IDE
ide
as
as
you're
you're
writing
writing
your
your
code.
code
From
from
there,
there
we'll
we'll
go
go
into
into
Angular
angular
to
to
the
the
index
index
HTML
html
file
file
and
and
then
then
add
add
the
the
script
script
for
for
Stripe
stripe
checkout.
checkout
Stripe
stripe
recommends
recommends
including
including
this
this
as
as
a
a
script
script
tag
tag
in
in
the
the
HTML
html
as
as
opposed
opposed
to
to
including
including
it
it
in
in
your
your
JavaScript
javascript
bundle.
bundle
Now
now
I've
i've
created
created
a
a
component
component
called
called
checkout,
checkout
and
and
the
the
first
first
important
important
thing
thing
I'll
i'll
do
do
is
is
declare
declare
a
a
namespace
namespace
for
for
Stripe
stripe
checkout
checkout
in
in
the
the
top
top
of
of
this
this
file.
file
And
and
you
you
can
can
strong
strong
type
type
it
it
if
if
you
you
install
install
the
the
typings
typings
that
that
I
i
showed
showed
you
you
earlier.
earlier
Then
then
I'm
i'm
adding
adding
my
my
auth
auth
service
service
and
and
AngularFire
angularfire
functions
functions
to
to
the
the
constructor.
constructor
That's
that's
not
not
required
required
for
for
Stripe
stripe
checkout,
checkout
and
and
you
you
can
can
replace
replace
that
that
with
with
nothing
nothing
or
or
with
with
your
your
own
own
logic.
logic
Now
now
there's
there's
a
a
good
good
chance
chance
you
you
have
have
more
more
than
than
one
one
product,
product
so
so
we'll
we'll
add
add
input
input
properties
properties
here
here
to
to
pass
pass
in
in
an
an
amount
amount
and
and
also
also
a
a
description
description
for
for
the
the
product
product
being
being
sold.
sold
Then
then
we'll
we'll
declare
declare
a
a
handler,
handler
which
which
is
is
the
the
actual
actual
modal
modal
window
window
that
that
the
the
user
user
will
will
enter
enter
their
their
credit
credit
card
card
details
details
in.
in
That
that
I'm
i'm
also
also
going
going
to
to
show
show
you
you
a
a
confirmation
confirmation
of
of
an
an
actual
actual
charge
charge
from
from
Stripe,
stripe
and
and
we'll
we'll
set
set
a
a
loading
loading
state
state
to
to
false.
false
We
we
can
can
define
define
the
the
handler
handler
during
during
n
n
g
g
on
on
init,
init
and
and
we
we
do
do
that
that
by
by
calling
calling
Stripe
stripe
checkout
checkout
configure.
configure
And
and
at
at
this
this
point,
point
you'll
you'll
need
need
to
to
pass
pass
it
it
your
your
Stripe
stripe
publishable
publishable
key.
key
You
you
can
can
find
find
that
that
by
by
going
going
to
to
the
the
Stripe
stripe
dashboard
dashboard
under
under
developers,
developers
API
api
keys.
keys
There's
there's
a
a
bunch
bunch
of
of
different
different
options
options
that
that
you
you
can
can
pass
pass
in
in
here
here
to
to
customize
customize
things
things
like
like
the
the
avatar
avatar
image
image
and
and
things
things
like
like
that.
that
But
but
the
the
important
important
thing
thing
is
is
that
that
you
you
define
define
a
a
callback
callback
for
for
either
either
the
the
source
source
or
or
the
the
token.
token
When
when
the
the
user
user
enters
enters
their
their
payment
payment
details,
details
they
they
will
will
be
be
securely
securely
transferred
transferred
to
to
Stripe,
stripe
and
and
then
then
Stripe
stripe
will
will
respond
respond
back
back
to
to
your
your
front
front
end
end
with
with
a
a
tokenized
tokenized
version
version
of
of
the
the
payment
payment
source
source
or
or
credit
credit
card.
card
So
so
the
the
code
code
right
right
here
here
will
will
run
run
after
after
the
the
user
user
has
has
entered
entered
their
their
card
card
details,
details
Stripe
stripe
has
has
validated
validated
that
that
card,
card
and
and
now
now
we
we
can
can
use
use
it
it
to
to
actually
actually
create
create
a
a
charge
charge
on
on
our
our
own
own
server.
server
There's
there's
quite
quite
a
a
few
few
things
things
that
that
you'll
you'll
wanna
wanna
do
do
here.
here
1st,
1st
we'll
we'll
set
set
the
the
loading
loading
state
state
to
to
true,
true
and
and
then
then
we'll
we'll
get
get
the
the
currently
currently
authenticated
authenticated
user.
user
The
the
back
back
end
end
that
that
we
we
build
build
on
on
the
the
Stripe
stripe
master
master
Recourse
recourse
is
is
based
based
on
on
Firebase
firebase
callable
callable
functions.
functions
This
this
is
is
a
a
special
special
type
type
of
of
HTTP
http
function
function
that
that
gives
gives
us
us
the
the
context
context
of
of
the
the
currently
currently
authenticated
authenticated
user.
user
This
this
means
means
we
we
can
can
make
make
requests
requests
to
to
our
our
back
back
end
end
without
without
having
having
to
to
set
set
authorization
authorization
headers
headers
manually.
manually
In
in
this
this
case,
case
we
we
just
just
need
need
to
to
pass
pass
a
a
source
source
and
and
an
an
amount
amount
and
and
our
our
back
back
end
end
will
will
charge
charge
the
the
card.
card
That
that
will
will
take
take
a
a
second
second
or
or
2,
2
and
and
then
then
we'll
we'll
go
go
ahead
ahead
and
and
set
set
the
the
loading
loading
state
state
to
to
false.
false
And
and
that's
that's
all
all
it
it
takes
takes
to
to
create
create
a
a
charge
charge
from
from
our
our
back
back
end.
end
The
the
only
only
thing
thing
left
left
to
to
do
do
is
is
create
create
a
a
method
method
here
here
called
called
checkout
checkout
that
that
will
will
open
open
the
the
handler
handler
when
when
the
the
user
user
clicks
clicks
a
a
button.
button
You
you
can
can
also
also
add
add
additional
additional
details
details
here.
here
For
for
example,
example
you
you
might
might
want
want
to
to
add
add
the
the
user's
user's
email
email
address
address
and
and
the
the
amount
amount
and
and
description
description
of
of
the
the
product.
product
We
we
can
can
also
also
close
close
the
the
handler
handler
manually,
manually
and
and
we'll
we'll
want
want
to
to
do
do
that
that
if
if
the
the
user
user
clicks
clicks
the
the
back
back
button
button
by
by
adding
adding
a
a
host
host
listener
listener
to
to
the
the
window
window
pop
pop
state
state
event.
event
In
in
the
the
HTML,
html
we'll
we'll
just
just
go
go
ahead
ahead
and
and
create
create
a
a
button,
button
and
and
then
then
we'll
we'll
bind
bind
the
the
click
click
event
event
to
to
that
that
checkout
checkout
handler.
handler
Now
now
when
when
creating
creating
the
the
amount
amount
for
for
a
a
Stripe
stripe
charge.
charge
It
it
will
will
always
always
be
be
in
in
the
the
currency's
currency's
smallest
smallest
denomination,
denomination
which
which
for
for
US
us
dollars
dollars
would
would
be
be
pennies.
pennies
And
and
that's
that's
why
why
I
i
divide
divide
the
the
amount
amount
by
by
100
100
so
so
we
we
have
have
the
the
actual
actual
dollar
dollar
amount
amount
to
to
show
show
on
on
the
the
UI.
ui
And
and
then
then
I'll
i'll
add
add
n
n
g
g
f
f
here
here
for
for
the
the
loading
loading
state
state
and
and
also
also
for
for
the
the
confirmation
confirmation
that
that
we
we
get
get
back
back
from
from
our
our
back
back
end.
end
Now
now
when
when
a
a
customer
customer
goes
goes
online
online
to
to
buy
buy
some
some
meat
meat
from
from
our
our
store,
store
they
they
have
have
a
a
modal
modal
to
to
enter
enter
their
their
credit
credit
card
card
details
details
that
that
is
is
not
not
only
only
secure,
secure
but
but
also
also
looks
looks
pretty
pretty
nice.
nice
After
after
the
the
card
card
is
is
captured,
captured
it
it
will
will
run
run
the
the
code
code
in
in
that
that
callback.
callback
It
it
first
first
puts
puts
the
the
app
app
in
in
the
the
loading
loading
state
state
for
for
a
a
few
few
seconds,
seconds
then
then
it
it
responds
responds
with
with
a
a
charge
charge
object
object
from
from
Stripe,
stripe
which
which
has
has
all
all
kinds
kinds
of
of
information
information
about
about
the
the
charge
charge
itself,
itself
like
like
the
the
ID,
id
the
the
amount,
amount
and
and
stuff
stuff
like
like
that.
that
So
so
overall,
overall
that
that
was
was
very
very
easy,
easy
and
and
we
we
created
created
a
a
real
real
charge
charge
in
in
the
the
Stripe
stripe
testing
testing
environment.
environment
But
but
the
the
main
main
drawback
drawback
to
to
Stripe
stripe
checkout
checkout
is
is
that
that
we
we
don't
don't
have
have
a
a
lot
lot
of
of
control
control
over
over
the
the
checkout
checkout
experience.
experience
We
we
can
can
change
change
the
the
logo
logo
and
and
some
some
of
of
the
the
options,
options
but
but
everything
everything
else
else
is
is
basically
basically
hard
hard
coded
coded
into
into
that
that
model.
model
Luckily,
luckily
Stripe
stripe
has
has
another
another
library
library
called
called
Stripe
stripe
Elements
elements
that
that
allows
allows
you
you
to
to
build
build
checkout
checkout
forms
forms
without
without
having
having
to
to
do
do
everything
everything
from
from
scratch.
scratch
We
we
use
use
Stripe
stripe
Elements
elements
on
on
Fireship,
fireship
and
and
as
as
you
you
can
can
see
see
here,
here
we
we
get
get
the
the
same
same
validation
validation
and
and
security
security
that
that
we
we
get
get
with
with
the
the
checkout
checkout
form.
form
However,
however
it
it
is
is
a
a
lot
lot
easier
easier
to
to
customize.
customize
And
and
as
as
you
you
can
can
see
see
here,
here
it
it
easily
easily
adapts
adapts
to
to
multiple
multiple
themes.
themes
And
and
it's
it's
really
really
not
not
that
that
much
much
more
more
difficult
difficult
to
to
set
set
up.
up
So
so
So
so
first,
first
we're
we're
going
going
to
to
go
go
into
into
the
the
index
index
HTML
html
and
and
this
this
time
time
import
import
Stripe
stripe
JS
js
version
version
3.
3
We'll
we'll
declare
declare
a
a
global
global
variable
variable
for
for
Stripe
stripe
and
and
this
this
time,
time
the
the
typings
typings
are
are
under
under
the
the
Stripe
stripe
namespace.
namespace
Now
now
the
the
component
component
will
will
start
start
off
off
just
just
like
like
the
the
previous
previous
one
one
did.
did
We
we
pass
pass
in
in
the
the
amount
amount
and
and
the
the
product
product
description,
description
but
but
then
then
we
we
need
need
to
to
grab
grab
a
a
DOM
dom
element
element
to
to
attach
attach
the
the
payment
payment
form
form
to.
to
So
so
view
view
child
child
will
will
be
be
looking
looking
for
for
a
a
template
template
reference
reference
called
called
card
card
element,
element
which
which
we'll
we'll
create
create
once
once
we
we
get
get
to
to
the
the
HTML.
html
Now
now
we
we
have
have
a
a
few
few
things
things
to
to
declare
declare
here.
here
We
we
have
have
the
the
instance
instance
of
of
Stripe
stripe
Elements
elements
itself.
itself
We
we
have
have
the
the
card
card
that
that
represents
represents
the
the
actual
actual
card
card
details
details
and
and
then
then
any
any
card
card
errors.
errors
And
and
then
then
we'll
we'll
also
also
have
have
a
a
loading
loading
state
state
and
and
a
a
confirmation
confirmation
from
from
our
our
back
back
end.
end
Now
now
you
you
can
can
initialize
initialize
Stripe
stripe
with
with
your
your
publishable
publishable
key,
key
and
and
then
then
Stripe
stripe
Elements
elements
will
will
give
give
you
you
access
access
to
to
a
a
bunch
bunch
of
of
different
different
form
form
fields.
fields
If
if
you
you
just
just
have
have
a
a
generic
generic
credit
credit
card
card
form,
form
you
you
can
can
create
create
the
the
card
card
element,
element
and
and
that's
that's
all
all
you
you
need.
need
That'll
that'll
give
give
you
you
a
a
nice
nice
single
single
line
line
for
for
the
the
card
card
itself,
itself
but
but
you
you
can
can
break
break
that
that
down
down
into
into
multiple
multiple
fields
fields
if
if
you
you
want.
want
From
from
here,
here
we'll
we'll
go
go
ahead
ahead
and
and
mount
mount
the
the
card
card
to
to
the
the
actual
actual
DOM
dom
element,
element
which
which
we
we
do
do
by
by
calling
calling
card
card
element
element
native
native
element
element
in
in
Angular.
angular
At
at
this
this
point,
point
we
we
need
need
to
to
attach
attach
an
an
event
event
listener
listener
to
to
changes
changes
to
to
the
the
card
card
form.
form
In
in
this
this
example,
example
we're
we're
just
just
going
going
to
to
display
display
the
the
card
card
errors,
errors
but
but
you
you
might
might
also
also
want
want
to
to
disable
disable
the
the
submit
submit
button
button
if
if
the
the
card
card
is
is
not
not
valid.
valid
When
when
it
it
comes
comes
to
to
Stripe
stripe
Elements,
elements
we
we
need
need
to
to
handle
handle
the
the
actual
actual
we'll
we'll
submission
submission
of
of
the
the
payment
payment
form.
form
Unlike
unlike
the
the
previous
previous
example
example
where
where
we
we
defined
defined
a
a
source
source
callback,
callback
this
this
time
time
we'll
we'll
actually
actually
call
call
Stripe
stripe
create
create
source
source
and
and
then
then
handle
handle
it
it
inside
inside
this
this
async
async
function.
function
If
if
there
there
are
are
any
any
errors,
errors
then
then
we'll
we'll
go
go
ahead
ahead
and
and
show
show
those
those
in
in
the
the
view.
view
Otherwise,
otherwise
we're
we're
going
going
to
to
run
run
the
the
same
same
exact
exact
logic
logic
that
that
we
we
ran
ran
in
in
that
that
source
source
handler
handler
which
which
involves
involves
getting
getting
the
the
current
current
user,
user
calling
calling
the
the
callable
callable
function
function
to
to
create
create
the
the
charge
charge
in
in
the
the
back
back
end
end
and
and
then
then
setting
setting
the
the
loading
loading
state
state
to
to
false.
false
Now
now
we
we
can
can
switch
switch
over
over
to
to
the
the
HTML.
html
And
and
first,
first
we'll
we'll
create
create
a
a
form
form
element,
element
and
and
then
then
we'll
we'll
bind
bind
the
the
handle
handle
form
form
method
method
to
to
the
the
submission
submission
of
of
this
this
form.
form
Then
then
we'll
we'll
create
create
a
a
div
div
with
with
hashtag
hashtag
card
card
element
element
that
that
creates
creates
the
the
template
template
variable
variable
that
that
we
we
can
can
actually
actually
mount
mount
to.
to
And
and
then
then
we'll
we'll
also
also
display
display
the
the
card
card
errors
errors
here
here
as
as
well.
well
And
and
that's
that's
all
all
it
it
takes
takes
to
to
build
build
a
a
validated
validated
and
and
secure
secure
payment
payment
form
form
with
with
Stripe
stripe
and
and
Angular.
angular
Now
now
we
we
can
can
just
just
drop
drop
this
this
component
component
anywhere
anywhere
in
in
our
our
Angular
angular
app,
app
and
and
we
we
have
have
a
a
quick
quick
and
and
easy
easy
way
way
for
for
users
users
to
to
pay
pay
for
for
products
products
or
or
sign
sign
up
up
for
for
subscriptions.
subscriptions
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
building
building
a
a
payment
payment
system
system
with
with
Stripe,
stripe
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO.
io
I'm
i'm
leaving
leaving
a
a
discount
discount
code
code
down
down
on
on
the
the
description.
description
And
and
if
if
you
you
have
have
any
any
questions,
questions
make
make
sure
sure
to
to
leave
leave
me
me
a
a
comment.
comment
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss the use of Stripe as a popular payment solution for businesses, and show how to use it in Angular applications. They also explain how to set a checkout method and create a payment form using Stripe checkout, including setting a loading state, setting a callback, and using a library called Stripe Glad. The speakers provide discount codes for those interested in building a payment system with Stripe.
Stripe Elements & Checkout with Angular - Monetize your PWA
If you're building an app, there's a good chance that at some point you'll want to convert your users into paying customers. The most popular API for doing just that is Stripe. It's the payment solution behind a huge number of successful startups and companies like Twitch, Squarespace, and Shopify, just to name a few. Stripe has multiple JavaScript libraries that you can implement in the front end to easily collect credit card information from your customers. In today's video, you'll learn how to use both Stripe checkout and Stripe Elements in an Angular application. If you're new here, like and subscribe and you can grab the full source code on Fireship IO. Now the first thing I want to point out is that this video is only covering the front end implementation. That involves securely collecting credit card information from the user and then validating it with Stripe, but it does not involve creating the actual charge that will collect money from the user. There. For that, you need a back end implementation. And if you're using Firebase, that means Firebase Cloud Functions. Luckily, I just released my full length Stripe payments master course, and it will show you how to implement and test everything on the back end as well as integrate it with Firebase. The course will show you how to build a full stack payment solution similar to the one I have on Fireship IO it handles single charges, subscriptions, coupons, and more. But enough of that shameless plug, let's get into our Angular application and start writing some code. We're going to start with Stripe checkout, which is very easy to implement and does almost all the front end work for you. When the user clicks on this buy button, it will trigger this pop up model, which will then collect their credit card information can do all the validation directly in that modal. This is great as a drop in solution, but it doesn't give you a lot of flexibility to customize styling or the entire checkout experience. Now at this point, I wanna make it clear that I'm using Firebase in this project. It's not at all required to work with Stripe and Angular. But I want to show you what a real charge looks like. So in order to do that, I've implemented user authentication in this app as well as Firebase callable functions. As you can see, I have those dependencies in my app module via the AngularFire library. One other thing you'll probably wanna do is install the types for either Stripe checkout or Stripe JS just so you have autocomplete in your IDE as you're writing your code. From there, we'll go into Angular to the index HTML file and then add the script for Stripe checkout. Stripe recommends including this as a script tag in the HTML as opposed to including it in your JavaScript bundle. Now I've created a component called checkout, and the first important thing I'll do is declare a namespace for Stripe checkout in the top of this file. And you can strong type it if you install the typings that I showed you earlier. Then I'm adding my auth service and AngularFire functions to the constructor. That's not required for Stripe checkout, and you can replace that with nothing or with your own logic. Now there's a good chance you have more than one product, so we'll add input properties here to pass in an amount and also a description for the product being sold. Then we'll declare a handler, which is the actual modal window that the user will enter their credit card details in. That I'm also going to show you a confirmation of an actual charge from Stripe, and we'll set a loading state to false. We can define the handler during n g on init, and we do that by calling Stripe checkout configure. And at this point, you'll need to pass it your Stripe publishable key. You can find that by going to the Stripe dashboard under developers, API keys. There's a bunch of different options that you can pass in here to customize things like the avatar image and things like that. But the important thing is that you define a callback for either the source or the token. When the user enters their payment details, they will be securely transferred to Stripe, and then Stripe will respond back to your front end with a tokenized version of the payment source or credit card. So the code right here will run after the user has entered their card details, Stripe has validated that card, and now we can use it to actually create a charge on our own server. There's quite a few things that you'll wanna do here. 1st, we'll set the loading state to true, and then we'll get the currently authenticated user. The back end that we build on the Stripe master Recourse is based on Firebase callable functions. This is a special type of HTTP function that gives us the context of the currently authenticated user. This means we can make requests to our back end without having to set authorization headers manually. In this case, we just need to pass a source and an amount and our back end will charge the card. That will take a second or 2, and then we'll go ahead and set the loading state to false. And that's all it takes to create a charge from our back end. The only thing left to do is create a method here called checkout that will open the handler when the user clicks a button. You can also add additional details here. For example, you might want to add the user's email address and the amount and description of the product. We can also close the handler manually, and we'll want to do that if the user clicks the back button by adding a host listener to the window pop state event. In the HTML, we'll just go ahead and create a button, and then we'll bind the click event to that checkout handler. Now when creating the amount for a Stripe charge. It will always be in the currency's smallest denomination, which for US dollars would be pennies. And that's why I divide the amount by 100 so we have the actual dollar amount to show on the UI. And then I'll add n g f here for the loading state and also for the confirmation that we get back from our back end. Now when a customer goes online to buy some meat from our store, they have a modal to enter their credit card details that is not only secure, but also looks pretty nice. After the card is captured, it will run the code in that callback. It first puts the app in the loading state for a few seconds, then it responds with a charge object from Stripe, which has all kinds of information about the charge itself, like the ID, the amount, and stuff like that. So overall, that was very easy, and we created a real charge in the Stripe testing environment. But the main drawback to Stripe checkout is that we don't have a lot of control over the checkout experience. We can change the logo and some of the options, but everything else is basically hard coded into that model. Luckily, Stripe has another library called Stripe Elements that allows you to build checkout forms without having to do everything from scratch. We use Stripe Elements on Fireship, and as you can see here, we get the same validation and security that we get with the checkout form. However, it is a lot easier to customize. And as you can see here, it easily adapts to multiple themes. And it's really not that much more difficult to set up. So So first, we're going to go into the index HTML and this time import Stripe JS version 3. We'll declare a global variable for Stripe and this time, the typings are under the Stripe namespace. Now the component will start off just like the previous one did. We pass in the amount and the product description, but then we need to grab a DOM element to attach the payment form to. So view child will be looking for a template reference called card element, which we'll create once we get to the HTML. Now we have a few things to declare here. We have the instance of Stripe Elements itself. We have the card that represents the actual card details and then any card errors. And then we'll also have a loading state and a confirmation from our back end. Now you can initialize Stripe with your publishable key, and then Stripe Elements will give you access to a bunch of different form fields. If you just have a generic credit card form, you can create the card element, and that's all you need. That'll give you a nice single line for the card itself, but you can break that down into multiple fields if you want. From here, we'll go ahead and mount the card to the actual DOM element, which we do by calling card element native element in Angular. At this point, we need to attach an event listener to changes to the card form. In this example, we're just going to display the card errors, but you might also want to disable the submit button if the card is not valid. When it comes to Stripe Elements, we need to handle the actual we'll submission of the payment form. Unlike the previous example where we defined a source callback, this time we'll actually call Stripe create source and then handle it inside this async function. If there are any errors, then we'll go ahead and show those in the view. Otherwise, we're going to run the same exact logic that we ran in that source handler which involves getting the current user, calling the callable function to create the charge in the back end and then setting the loading state to false. Now we can switch over to the HTML. And first, we'll create a form element, and then we'll bind the handle form method to the submission of this form. Then we'll create a div with hashtag card element that creates the template variable that we can actually mount to. And then we'll also display the card errors here as well. And that's all it takes to build a validated and secure payment form with Stripe and Angular. Now we can just drop this component anywhere in our Angular app, and we have a quick and easy way for users to pay for products or sign up for subscriptions. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you're serious about building a payment system with Stripe, consider becoming a pro member at Fireship IO. I'm leaving a discount code down on the description. And if you have any questions, make sure to leave me a comment. Thanks for watching, and I will talk to you soon.
The speakers discuss the use of Stripe as a popular payment solution for businesses, and show how to use it in Angular applications. They also explain how to set a checkout method and create a payment form using Stripe checkout, including setting a loading state, setting a callback, and using a library called Stripe Glad. The speakers provide discount codes for those interested in building a payment system with Stripe.