Use Stripe Elements to make your Progressive Web App handle in-app payments. In this episode, we use Angular 5 and the Payment Request API to build a next-generation checkout flow https://angularfirebase.com/lessons/payment-request-api-with-stripe-elements/

- Full-Stack Stripe Payments Course: https://projects.angularfirebase.com/p/stripe-payments-with-angular-and-firebase
- Payment Request API: https://developers.google.com/web/fundamentals/payments/
- Stripe Elements: https://stripe.com/elements
2024-02-04T07:48:56.684Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
96949a5d-a16b-4640-a7f3-b61ec7a4378f
57317c4cbc84beb8320c4cf07e63ac0756de0efd9cbfd38d41b640a81afc62da
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today, I wanna show you the future of checkout forms in progressive web apps using the browser payments API.
Instead of giving users a long tedious checkout form that they're likely not to finish, we give them a simple buy now button that uses a credit card saved on their browser So it behaves a lot more like in app payments do on native mobile devices.
This is very recent technology, and it's only available in Chrome and Microsoft dot edge.
To facilitate this feature in Angular, we'll be using Stripe Elements, which has the added benefit of supporting Apple Pay on Safari browsers.
If you're new to the channel, make sure to subscribe.
And if you're serious about payments, check out my full stack Stripe payments course, which you can find on Angular firebase.com, and is free to all pro members.
To build this payment request button, the first thing I'm going to do is start with a fresh Angular 5 app.
At this point, you'll also need a Stripe account and you want to reference the payment request button in the Stripe documentation.
What we're building is just a simple component that has a random product I found on Amazon.
And then when the buy now button is clicked, it will bring up the browser payments API.
When the user clicks pay, it's going to send the payment information off to Stripe, and Stripe will respond with the payment source.
You can see we have a source ID here in the Console as well as information about the user's credit card, but no information that would actually be a client side security risk.
Now jumping into our Angular code, the first thing we'll have to do is add the stripejs version 3 tag to index HTML.
Stripe JS has its own Stripe class, so we need to register it with TypeScript and typings d t s.
From there, we need to instantiate Stripe somewhere in our project.
To do that, I'm going to use an Angular service which I'm calling the payment service.
After we generate it with the CLI, we can go in there and instantiate it with our Stripe publishable key.
For the sake of simplicity, I'm using the key directly in the Angular service, But a better approach would be to manage your keys in your Angular environment.
That way, you can use your test key in your development app and your live key in your actual deployed production app.
Now we can build the actual component that's going to do all the work.
I'm calling it the Payment Request component.
Because we're using Stripe elements in this component, We need to wait for the view to initialize before we can actually attach the payment button.
To do that, we use the after view init lifecycle hook in Angular.
We're also going to bring in our payment service and then we'll initialize a couple of input variables first.
The amount will be the amount of the payment that we're making and the label is whatever we're paying for.
The input properties allow you to use this as a child component.
For example, if you had a shopping cart, You could easily pass the total amount and label of that cart down to the child component.
From there, we're going to set a few variables for the information that we get back from Stripe Elements including the elements object itself, the payment request, and the payment request button.
We'll see these in action in just a minute here.
Then to actually mount the element in the DOM, we use the view child decorator.
Quickly, I'll jump over the HTML to show you how that looks.
View child is pointing to a template reference variable called pay element.
So all we do is set up an empty div here and then do hash pay element.
This div is going to be replaced by the actual Stripe Elements button.
Switching back over to the TypeScript, we'll first inject the payment service in the constructor.
Now we have about 5 different steps we need to go through, which I'll explain to you 1 by 1.
The first step is to instantiate the payment request object.
That object has a number of different parameters that you can pass to it, but the 2 we're going to pass to it for right now are just the amount and the label.
We can access Stripe from our payment service and then call payment request, and we'll set the country, the currency, as well as the total amount and the label.
Again, the amount in the label correspond to our input properties.
Step 2 is to instantiate the Stripe elements object.
Elements contain the actual UI components that we get from Stripe JS.
That's just an easy one line statement.
Then we can move on to step 3 where we actually register an event listener or when the user submits their source to Stripe and Stripe responds back with the actual card details.
When Stripe responds with the card details, That's the point when you would send a request to your back end to actually charge the card or just save the card on a customer account.
That's a whole another challenge to overcome.
So for right now, I'm just going to console log the event, and then I'm going to set a time out to simulate the call to the back end.
Normally, you would use the Angular HTTP client to make a call to your back end.
But for right now, I'm just going to pretend that I received a successful response and then call event complete success.
You could also call event fail here or a number of other validation errors provided by Stripe.
The next thing we do is create the actual instance of the UI button from Stripe Elements.
So we say elements create payment request button, Then we tell it to reference the payment request object that we've already created.
This part's optional, but you can also control the style and the theme of the button.
Just pass the style object and then set the corresponding options that you want.
That takes care of step 4.
Now the final step is to mount the actual payment button in the DOM.
To do this, I'm going to use an async function.
You could technically use RxJS here, but I don't think there's really any advantage to doing The purpose of this function is to see if the browser supports the payments API.
To do that, we say payment request can make payment, which is going to return a promise.
If we get a positive result, then we can go ahead and mount our payment request button to the native element that we retrieved from view child.
Otherwise, the result is going to be null, so we can just console log a helpful error message.
Now let's go into Chrome and test it out.
We should be good to go.
Right?
Well, not exactly.
It looks like our button is not showing up here, and we're getting an error message from Stripe saying that we need to be serving over HTTPS.
The problem here is that the browser payments API only works when you serve with an SSL certificate, and that goes for development on local host as well.
It is possible to run ng serve with an SSL certificate if you happen to have an SSL certificate lying around, which not many people do and a self signed certificate is not going to work either.
Luckily, there's a pretty easy solution and that's It's a service called ngrok or at least I think that's how you pronounce it.
It allows you to create an HTTP tunnel that will allow you to serve your app on local host while also forwarding it to a valid HTTPS connection that you can use with the payment request API.
You need to download the application on your local machine, which is going to vary by operating system, but the setup is really easy overall.
Once you have it set up, you can create a custom command in your package JSON file to run this command quickly.
The actual command you use might look a little bit different because you have to point to the actual ngrok install on your local machine.
Then you call HTTP 42100, and I also had to set the host header to 8080 for just some random error that was coming up.
Once you have that done, you'll first wanna run n g serve and then you'll open up a second terminal tab and run the npm run n grok command that we just created.
That's going to open up this window that's going to take you to the other side of the tunnel.
The one we're looking at is the HTTPS endpoint that is forwarding from local host 42100.
You can go ahead and copy and paste that into a browser, and then it should magically bring up the payment button that we had created before.
The forwarding process is really slow, but it does give you a reliable way to test the payment request button.
Like I said at the beginning, I believe this is going to be the future of payments in the browser.
It makes life so much easier for both the developer and the customer, and things like that tend to be opted pretty quickly.
If this video helped you, please like and subscribe.
And if you're serious about payments, consider becoming a pro member at angularfirebase.com.
You'll get access to the Stripe payments project, which is designed for developers who are building Stripe features into real world applications.
Thanks for watching, and I'll see you soon.

Speaker 0: Today, I wanna show you the future of checkout forms in progressive web apps using the browser payments API. Instead of giving users a long tedious checkout form that they're likely not to finish, we give them a simple buy now button that uses a credit card saved on their browser So it behaves a lot more like in app payments do on native mobile devices. This is very recent technology, and it's only available in Chrome and Microsoft dot edge. To facilitate this feature in Angular, we'll be using Stripe Elements, which has the added benefit of supporting Apple Pay on Safari browsers. If you're new to the channel, make sure to subscribe.

And if you're serious about payments, check out my full stack Stripe payments course, which you can find on Angular firebase.com, and is free to all pro members. To build this payment request button, the first thing I'm going to do is start with a fresh Angular 5 app. At this point, you'll also need a Stripe account and you want to reference the payment request button in the Stripe documentation. What we're building is just a simple component that has a random product I found on Amazon. And then when the buy now button is clicked, it will bring up the browser payments API.

When the user clicks pay, it's going to send the payment information off to Stripe, and Stripe will respond with the payment source. You can see we have a source ID here in the Console as well as information about the user's credit card, but no information that would actually be a client side security risk. Now jumping into our Angular code, the first thing we'll have to do is add the stripejs version 3 tag to index HTML. Stripe JS has its own Stripe class, so we need to register it with TypeScript and typings d t s. From there, we need to instantiate Stripe somewhere in our project.

To do that, I'm going to use an Angular service which I'm calling the payment service. After we generate it with the CLI, we can go in there and instantiate it with our Stripe publishable key. For the sake of simplicity, I'm using the key directly in the Angular service, But a better approach would be to manage your keys in your Angular environment. That way, you can use your test key in your development app and your live key in your actual deployed production app. Now we can build the actual component that's going to do all the work.

I'm calling it the Payment Request component. Because we're using Stripe elements in this component, We need to wait for the view to initialize before we can actually attach the payment button. To do that, we use the after view init lifecycle hook in Angular. We're also going to bring in our payment service and then we'll initialize a couple of input variables first. The amount will be the amount of the payment that we're making and the label is whatever we're paying for.

The input properties allow you to use this as a child component. For example, if you had a shopping cart, You could easily pass the total amount and label of that cart down to the child component. From there, we're going to set a few variables for the information that we get back from Stripe Elements including the elements object itself, the payment request, and the payment request button. We'll see these in action in just a minute here. Then to actually mount the element in the DOM, we use the view child decorator.

Quickly, I'll jump over the HTML to show you how that looks. View child is pointing to a template reference variable called pay element. So all we do is set up an empty div here and then do hash pay element. This div is going to be replaced by the actual Stripe Elements button. Switching back over to the TypeScript, we'll first inject the payment service in the constructor.

Now we have about 5 different steps we need to go through, which I'll explain to you 1 by 1. The first step is to instantiate the payment request object. That object has a number of different parameters that you can pass to it, but the 2 we're going to pass to it for right now are just the amount and the label. We can access Stripe from our payment service and then call payment request, and we'll set the country, the currency, as well as the total amount and the label. Again, the amount in the label correspond to our input properties.

Step 2 is to instantiate the Stripe elements object. Elements contain the actual UI components that we get from Stripe JS. That's just an easy one line statement. Then we can move on to step 3 where we actually register an event listener or when the user submits their source to Stripe and Stripe responds back with the actual card details. When Stripe responds with the card details, That's the point when you would send a request to your back end to actually charge the card or just save the card on a customer account.

That's a whole another challenge to overcome. So for right now, I'm just going to console log the event, and then I'm going to set a time out to simulate the call to the back end. Normally, you would use the Angular HTTP client to make a call to your back end. But for right now, I'm just going to pretend that I received a successful response and then call event complete success. You could also call event fail here or a number of other validation errors provided by Stripe.

The next thing we do is create the actual instance of the UI button from Stripe Elements. So we say elements create payment request button, Then we tell it to reference the payment request object that we've already created. This part's optional, but you can also control the style and the theme of the button. Just pass the style object and then set the corresponding options that you want. That takes care of step 4.

Now the final step is to mount the actual payment button in the DOM. To do this, I'm going to use an async function. You could technically use RxJS here, but I don't think there's really any advantage to doing The purpose of this function is to see if the browser supports the payments API. To do that, we say payment request can make payment, which is going to return a promise. If we get a positive result, then we can go ahead and mount our payment request button to the native element that we retrieved from view child.

Otherwise, the result is going to be null, so we can just console log a helpful error message. Now let's go into Chrome and test it out. We should be good to go. Right? Well, not exactly.

It looks like our button is not showing up here, and we're getting an error message from Stripe saying that we need to be serving over HTTPS. The problem here is that the browser payments API only works when you serve with an SSL certificate, and that goes for development on local host as well. It is possible to run ng serve with an SSL certificate if you happen to have an SSL certificate lying around, which not many people do and a self signed certificate is not going to work either. Luckily, there's a pretty easy solution and that's It's a service called ngrok or at least I think that's how you pronounce it. It allows you to create an HTTP tunnel that will allow you to serve your app on local host while also forwarding it to a valid HTTPS connection that you can use with the payment request API.

You need to download the application on your local machine, which is going to vary by operating system, but the setup is really easy overall. Once you have it set up, you can create a custom command in your package JSON file to run this command quickly. The actual command you use might look a little bit different because you have to point to the actual ngrok install on your local machine. Then you call HTTP 42100, and I also had to set the host header to 8080 for just some random error that was coming up. Once you have that done, you'll first wanna run n g serve and then you'll open up a second terminal tab and run the npm run n grok command that we just created.

That's going to open up this window that's going to take you to the other side of the tunnel. The one we're looking at is the HTTPS endpoint that is forwarding from local host 42100. You can go ahead and copy and paste that into a browser, and then it should magically bring up the payment button that we had created before. The forwarding process is really slow, but it does give you a reliable way to test the payment request button. Like I said at the beginning, I believe this is going to be the future of payments in the browser.

It makes life so much easier for both the developer and the customer, and things like that tend to be opted pretty quickly. If this video helped you, please like and subscribe. And if you're serious about payments, consider becoming a pro member at angularfirebase.com. You'll get access to the Stripe payments project, which is designed for developers who are building Stripe features into real world applications. Thanks for watching, and I'll see you soon.
Today, I wanna show you the future of checkout forms in progressive web apps using the browser payments API. Instead of giving users a long tedious checkout form that they're likely not to finish, we give them a simple buy now button that uses a credit card saved on their browser So it behaves a lot more like in app payments do on native mobile devices. This is very recent technology, and it's only available in Chrome and Microsoft dot edge. To facilitate this feature in Angular, we'll be using Stripe Elements, which has the added benefit of supporting Apple Pay on Safari browsers. If you're new to the channel, make sure to subscribe. And if you're serious about payments, check out my full stack Stripe payments course, which you can find on Angular firebase.com, and is free to all pro members. To build this payment request button, the first thing I'm going to do is start with a fresh Angular 5 app. At this point, you'll also need a Stripe account and you want to reference the payment request button in the Stripe documentation. What we're building is just a simple component that has a random product I found on Amazon. And then when the buy now button is clicked, it will bring up the browser payments API.
When the user clicks pay, it's going to send the payment information off to Stripe, and Stripe will respond with the payment source. You can see we have a source ID here in the Console as well as information about the user's credit card, but no information that would actually be a client side security risk.
billing
customer support
Now jumping into our Angular code, the first thing we'll have to do is add the stripejs version 3 tag to index HTML. Stripe JS has its own Stripe class, so we need to register it with TypeScript and typings d t s. From there, we need to instantiate Stripe somewhere in our project. To do that, I'm going to use an Angular service which I'm calling the payment service. After we generate it with the CLI, we can go in there and instantiate it with our Stripe publishable key. For the sake of simplicity, I'm using the key directly in the Angular service, But a better approach would be to manage your keys in your Angular environment. That way, you can use your test key in your development app and your live key in your actual deployed production app. Now we can build the actual component that's going to do all the work. I'm calling it the Payment Request component. Because we're using Stripe elements in this component, We need to wait for the view to initialize before we can actually attach the payment button. To do that, we use the after view init lifecycle hook in Angular. We're also going to bring in our payment service and then we'll initialize a couple of input variables first.
The amount will be the amount of the payment that we're making and the label is whatever we're paying for. The input properties allow you to use this as a child component. For example, if you had a shopping cart, You could easily pass the total amount and label of that cart down to the child component. From there, we're going to set a few variables for the information that we get back from Stripe Elements including the elements object itself, the payment request, and the payment request button.
billing
We'll see these in action in just a minute here. Then to actually mount the element in the DOM, we use the view child decorator. Quickly, I'll jump over the HTML to show you how that looks. View child is pointing to a template reference variable called pay element. So all we do is set up an empty div here and then do hash pay element.
This div is going to be replaced by the actual Stripe Elements button. Switching back over to the TypeScript, we'll first inject the payment service in the constructor. Now we have about 5 different steps we need to go through, which I'll explain to you 1 by 1. The first step is to instantiate the payment request object. That object has a number of different parameters that you can pass to it, but the 2 we're going to pass to it for right now are just the amount and the label. We can access Stripe from our payment service and then call payment request, and we'll set the country, the currency, as well as the total amount and the label.
billing
Again, the amount in the label correspond to our input properties. Step 2 is to instantiate the Stripe elements object. Elements contain the actual UI components that we get from Stripe JS.
That's just an easy one line statement. Then we can move on to step 3 where we actually register an event listener or when the user submits their source to Stripe and Stripe responds back with the actual card details. When Stripe responds with the card details, That's the point when you would send a request to your back end to actually charge the card or just save the card on a customer account. That's a whole another challenge to overcome. So for right now, I'm just going to console log the event, and then I'm going to set a time out to simulate the call to the back end.
billing
customer support
Normally, you would use the Angular HTTP client to make a call to your back end. But for right now, I'm just going to pretend that I received a successful response and then call event complete success. You could also call event fail here or a number of other validation errors provided by Stripe. The next thing we do is create the actual instance of the UI button from Stripe Elements. So we say elements create payment request button, Then we tell it to reference the payment request object that we've already created. This part's optional, but you can also control the style and the theme of the button. Just pass the style object and then set the corresponding options that you want. That takes care of step 4. Now the final step is to mount the actual payment button in the DOM. To do this, I'm going to use an async function. You could technically use RxJS here, but I don't think there's really any advantage to doing The purpose of this function is to see if the browser supports the payments API.
To do that, we say payment request can make payment, which is going to return a promise. If we get a positive result, then we can go ahead and mount our payment request button to the native element that we retrieved from view child. Otherwise, the result is going to be null, so we can just console log a helpful error message.
billing
Now let's go into Chrome and test it out.
We should be good to go. Right? Well, not exactly. It looks like our button is not showing up here, and we're getting an error message from Stripe saying that we need to be serving over HTTPS. The problem here is that the browser payments API only works when you serve with an SSL certificate, and that goes for development on local host as well.
internet
It is possible to run ng serve with an SSL certificate if you happen to have an SSL certificate lying around, which not many people do and a self signed certificate is not going to work either.
Luckily, there's a pretty easy solution and that's It's a service called ngrok or at least I think that's how you pronounce it. It allows you to create an HTTP tunnel that will allow you to serve your app on local host while also forwarding it to a valid HTTPS connection that you can use with the payment request API.
networking
internet
You need to download the application on your local machine, which is going to vary by operating system, but the setup is really easy overall. Once you have it set up, you can create a custom command in your package JSON file to run this command quickly. The actual command you use might look a little bit different because you have to point to the actual ngrok install on your local machine. Then you call HTTP 42100, and I also had to set the host header to 8080 for just some random error that was coming up. Once you have that done, you'll first wanna run n g serve and then you'll open up a second terminal tab and run the npm run n grok command that we just created.
That's going to open up this window that's going to take you to the other side of the tunnel. The one we're looking at is the HTTPS endpoint that is forwarding from local host 42100. You can go ahead and copy and paste that into a browser, and then it should magically bring up the payment button that we had created before.
internet
networking
The forwarding process is really slow, but it does give you a reliable way to test the payment request button. Like I said at the beginning, I believe this is going to be the future of payments in the browser. It makes life so much easier for both the developer and the customer, and things like that tend to be opted pretty quickly. If this video helped you, please like and subscribe. And if you're serious about payments, consider becoming a pro member at angularfirebase.com. You'll get access to the Stripe payments project, which is designed for developers who are building Stripe features into real world applications. Thanks for watching, and I'll see you soon.
youtube
customer support
seasons
billing
Today, I wanna show you the future of checkout forms in progressive web apps using the browser payments API. Instead of giving users a long tedious checkout form that they're likely not to finish, we give them a simple buy now button that uses a credit card saved on their browser So it behaves a lot more like in app payments do on native mobile devices. This is very recent technology, and it's only available in Chrome and Microsoft dot edge. To facilitate this feature in Angular, we'll be using Stripe Elements, which has the added benefit of supporting Apple Pay on Safari browsers. If you're new to the channel, make sure to subscribe. And if you're serious about payments, check out my full stack Stripe payments course, which you can find on Angular firebase.com, and is free to all pro members. To build this payment request button, the first thing I'm going to do is start with a fresh Angular 5 app. At this point, you'll also need a Stripe account and you want to reference the payment request button in the Stripe documentation. What we're building is just a simple component that has a random product I found on Amazon. And then when the buy now button is clicked, it will bring up the browser payments API. When the user clicks pay, it's going to send the payment information off to Stripe, and Stripe will respond with the payment source. You can see we have a source ID here in the Console as well as information about the user's credit card, but no information that would actually be a client side security risk. Now jumping into our Angular code, the first thing we'll have to do is add the stripejs version 3 tag to index HTML. Stripe JS has its own Stripe class, so we need to register it with TypeScript and typings d t s. From there, we need to instantiate Stripe somewhere in our project. To do that, I'm going to use an Angular service which I'm calling the payment service. After we generate it with the CLI, we can go in there and instantiate it with our Stripe publishable key. For the sake of simplicity, I'm using the key directly in the Angular service, But a better approach would be to manage your keys in your Angular environment. That way, you can use your test key in your development app and your live key in your actual deployed production app. Now we can build the actual component that's going to do all the work. I'm calling it the Payment Request component. Because we're using Stripe elements in this component, We need to wait for the view to initialize before we can actually attach the payment button. To do that, we use the after view init lifecycle hook in Angular. We're also going to bring in our payment service and then we'll initialize a couple of input variables first. The amount will be the amount of the payment that we're making and the label is whatever we're paying for. The input properties allow you to use this as a child component. For example, if you had a shopping cart, You could easily pass the total amount and label of that cart down to the child component. From there, we're going to set a few variables for the information that we get back from Stripe Elements including the elements object itself, the payment request, and the payment request button. We'll see these in action in just a minute here. Then to actually mount the element in the DOM, we use the view child decorator. Quickly, I'll jump over the HTML to show you how that looks. View child is pointing to a template reference variable called pay element. So all we do is set up an empty div here and then do hash pay element. This div is going to be replaced by the actual Stripe Elements button. Switching back over to the TypeScript, we'll first inject the payment service in the constructor. Now we have about 5 different steps we need to go through, which I'll explain to you 1 by 1. The first step is to instantiate the payment request object. That object has a number of different parameters that you can pass to it, but the 2 we're going to pass to it for right now are just the amount and the label. We can access Stripe from our payment service and then call payment request, and we'll set the country, the currency, as well as the total amount and the label. Again, the amount in the label correspond to our input properties. Step 2 is to instantiate the Stripe elements object. Elements contain the actual UI components that we get from Stripe JS. That's just an easy one line statement. Then we can move on to step 3 where we actually register an event listener or when the user submits their source to Stripe and Stripe responds back with the actual card details. When Stripe responds with the card details, That's the point when you would send a request to your back end to actually charge the card or just save the card on a customer account. That's a whole another challenge to overcome. So for right now, I'm just going to console log the event, and then I'm going to set a time out to simulate the call to the back end. Normally, you would use the Angular HTTP client to make a call to your back end. But for right now, I'm just going to pretend that I received a successful response and then call event complete success. You could also call event fail here or a number of other validation errors provided by Stripe. The next thing we do is create the actual instance of the UI button from Stripe Elements. So we say elements create payment request button, Then we tell it to reference the payment request object that we've already created. This part's optional, but you can also control the style and the theme of the button. Just pass the style object and then set the corresponding options that you want. That takes care of step 4. Now the final step is to mount the actual payment button in the DOM. To do this, I'm going to use an async function. You could technically use RxJS here, but I don't think there's really any advantage to doing The purpose of this function is to see if the browser supports the payments API. To do that, we say payment request can make payment, which is going to return a promise. If we get a positive result, then we can go ahead and mount our payment request button to the native element that we retrieved from view child. Otherwise, the result is going to be null, so we can just console log a helpful error message. Now let's go into Chrome and test it out. We should be good to go. Right? Well, not exactly. It looks like our button is not showing up here, and we're getting an error message from Stripe saying that we need to be serving over HTTPS. The problem here is that the browser payments API only works when you serve with an SSL certificate, and that goes for development on local host as well. It is possible to run ng serve with an SSL certificate if you happen to have an SSL certificate lying around, which not many people do and a self signed certificate is not going to work either. Luckily, there's a pretty easy solution and that's It's a service called ngrok or at least I think that's how you pronounce it. It allows you to create an HTTP tunnel that will allow you to serve your app on local host while also forwarding it to a valid HTTPS connection that you can use with the payment request API. You need to download the application on your local machine, which is going to vary by operating system, but the setup is really easy overall. Once you have it set up, you can create a custom command in your package JSON file to run this command quickly. The actual command you use might look a little bit different because you have to point to the actual ngrok install on your local machine. Then you call HTTP 42100, and I also had to set the host header to 8080 for just some random error that was coming up. Once you have that done, you'll first wanna run n g serve and then you'll open up a second terminal tab and run the npm run n grok command that we just created. That's going to open up this window that's going to take you to the other side of the tunnel. The one we're looking at is the HTTPS endpoint that is forwarding from local host 42100. You can go ahead and copy and paste that into a browser, and then it should magically bring up the payment button that we had created before. The forwarding process is really slow, but it does give you a reliable way to test the payment request button. Like I said at the beginning, I believe this is going to be the future of payments in the browser. It makes life so much easier for both the developer and the customer, and things like that tend to be opted pretty quickly. If this video helped you, please like and subscribe. And if you're serious about payments, consider becoming a pro member at angularfirebase.com. You'll get access to the Stripe payments project, which is designed for developers who are building Stripe features into real world applications. Thanks for watching, and I'll see you soon.
Today,
today
I
i
wanna
wanna
show
show
you
you
the
the
future
future
of
of
checkout
checkout
forms
forms
in
in
progressive
progressive
web
web
apps
apps
using
using
the
the
browser
browser
payments
payments
API.
api
Instead
instead
of
of
giving
giving
users
users
a
a
long
long
tedious
tedious
checkout
checkout
form
form
that
that
they're
they're
likely
likely
not
not
to
to
finish,
finish
we
we
give
give
them
them
a
a
simple
simple
buy
buy
now
now
button
button
that
that
uses
uses
a
a
credit
credit
card
card
saved
saved
on
on
their
their
browser
browser
So
so
it
it
behaves
behaves
a
a
lot
lot
more
more
like
like
in
in
app
app
payments
payments
do
do
on
on
native
native
mobile
mobile
devices.
devices
This
this
is
is
very
very
recent
recent
technology,
technology
and
and
it's
it's
only
only
available
available
in
in
Chrome
chrome
and
and
Microsoft
microsoft
dot
dot
edge.
edge
To
to
facilitate
facilitate
this
this
feature
feature
in
in
Angular,
angular
we'll
we'll
be
be
using
using
Stripe
stripe
Elements,
elements
which
which
has
has
the
the
added
added
benefit
benefit
of
of
supporting
supporting
Apple
apple
Pay
pay
on
on
Safari
safari
browsers.
browsers
If
if
you're
you're
new
new
to
to
the
the
channel,
channel
make
make
sure
sure
to
to
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
payments,
payments
check
check
out
out
my
my
full
full
stack
stack
Stripe
stripe
payments
payments
course,
course
which
which
you
you
can
can
find
find
on
on
Angular
angular
firebase.com,
firebase.com
and
and
is
is
free
free
to
to
all
all
pro
pro
members.
members
To
to
build
build
this
this
payment
payment
request
request
button,
button
the
the
first
first
thing
thing
I'm
i'm
going
going
to
to
do
do
is
is
start
start
with
with
a
a
fresh
fresh
Angular
angular
5
5
app.
app
At
at
this
this
point,
point
you'll
you'll
also
also
need
need
a
a
Stripe
stripe
account
account
and
and
you
you
want
want
to
to
reference
reference
the
the
payment
payment
request
request
button
button
in
in
the
the
Stripe
stripe
documentation.
documentation
What
what
we're
we're
building
building
is
is
just
just
a
a
simple
simple
component
component
that
that
has
has
a
a
random
random
product
product
I
i
found
found
on
on
Amazon.
amazon
And
and
then
then
when
when
the
the
buy
buy
now
now
button
button
is
is
clicked,
clicked
it
it
will
will
bring
bring
up
up
the
the
browser
browser
payments
payments
API.
api
When
when
the
the
user
user
clicks
clicks
pay,
pay
it's
it's
going
going
to
to
send
send
the
the
payment
payment
information
information
off
off
to
to
Stripe,
stripe
and
and
Stripe
stripe
will
will
respond
respond
with
with
the
the
payment
payment
source.
source
You
you
can
can
see
see
we
we
have
have
a
a
source
source
ID
id
here
here
in
in
the
the
Console
console
as
as
well
well
as
as
information
information
about
about
the
the
user's
user's
credit
credit
card,
card
but
but
no
no
information
information
that
that
would
would
actually
actually
be
be
a
a
client
client
side
side
security
security
risk.
risk
Now
now
jumping
jumping
into
into
our
our
Angular
angular
code,
code
the
the
first
first
thing
thing
we'll
we'll
have
have
to
to
do
do
is
is
add
add
the
the
stripejs
stripejs
version
version
3
3
tag
tag
to
to
index
index
HTML.
html
Stripe
stripe
JS
js
has
has
its
its
own
own
Stripe
stripe
class,
class
so
so
we
we
need
need
to
to
register
register
it
it
with
with
TypeScript
typescript
and
and
typings
typings
d
d
t
t
s.
s
From
from
there,
there
we
we
need
need
to
to
instantiate
instantiate
Stripe
stripe
somewhere
somewhere
in
in
our
our
project.
project
To
to
do
do
that,
that
I'm
i'm
going
going
to
to
use
use
an
an
Angular
angular
service
service
which
which
I'm
i'm
calling
calling
the
the
payment
payment
service.
service
After
after
we
we
generate
generate
it
it
with
with
the
the
CLI,
cli
we
we
can
can
go
go
in
in
there
there
and
and
instantiate
instantiate
it
it
with
with
our
our
Stripe
stripe
publishable
publishable
key.
key
For
for
the
the
sake
sake
of
of
simplicity,
simplicity
I'm
i'm
using
using
the
the
key
key
directly
directly
in
in
the
the
Angular
angular
service,
service
But
but
a
a
better
better
approach
approach
would
would
be
be
to
to
manage
manage
your
your
keys
keys
in
in
your
your
Angular
angular
environment.
environment
That
that
way,
way
you
you
can
can
use
use
your
your
test
test
key
key
in
in
your
your
development
development
app
app
and
and
your
your
live
live
key
key
in
in
your
your
actual
actual
deployed
deployed
production
production
app.
app
Now
now
we
we
can
can
build
build
the
the
actual
actual
component
component
that's
that's
going
going
to
to
do
do
all
all
the
the
work.
work
I'm
i'm
calling
calling
it
it
the
the
Payment
payment
Request
request
component.
component
Because
because
we're
we're
using
using
Stripe
stripe
elements
elements
in
in
this
this
component,
component
We
we
need
need
to
to
wait
wait
for
for
the
the
view
view
to
to
initialize
initialize
before
before
we
we
can
can
actually
actually
attach
attach
the
the
payment
payment
button.
button
To
to
do
do
that,
that
we
we
use
use
the
the
after
after
view
view
init
init
lifecycle
lifecycle
hook
hook
in
in
Angular.
angular
We're
we're
also
also
going
going
to
to
bring
bring
in
in
our
our
payment
payment
service
service
and
and
then
then
we'll
we'll
initialize
initialize
a
a
couple
couple
of
of
input
input
variables
variables
first.
first
The
the
amount
amount
will
will
be
be
the
the
amount
amount
of
of
the
the
payment
payment
that
that
we're
we're
making
making
and
and
the
the
label
label
is
is
whatever
whatever
we're
we're
paying
paying
for.
for
The
the
input
input
properties
properties
allow
allow
you
you
to
to
use
use
this
this
as
as
a
a
child
child
component.
component
For
for
example,
example
if
if
you
you
had
had
a
a
shopping
shopping
cart,
cart
You
you
could
could
easily
easily
pass
pass
the
the
total
total
amount
amount
and
and
label
label
of
of
that
that
cart
cart
down
down
to
to
the
the
child
child
component.
component
From
from
there,
there
we're
we're
going
going
to
to
set
set
a
a
few
few
variables
variables
for
for
the
the
information
information
that
that
we
we
get
get
back
back
from
from
Stripe
stripe
Elements
elements
including
including
the
the
elements
elements
object
object
itself,
itself
the
the
payment
payment
request,
request
and
and
the
the
payment
payment
request
request
button.
button
We'll
we'll
see
see
these
these
in
in
action
action
in
in
just
just
a
a
minute
minute
here.
here
Then
then
to
to
actually
actually
mount
mount
the
the
element
element
in
in
the
the
DOM,
dom
we
we
use
use
the
the
view
view
child
child
decorator.
decorator
Quickly,
quickly
I'll
i'll
jump
jump
over
over
the
the
HTML
html
to
to
show
show
you
you
how
how
that
that
looks.
looks
View
view
child
child
is
is
pointing
pointing
to
to
a
a
template
template
reference
reference
variable
variable
called
called
pay
pay
element.
element
So
so
all
all
we
we
do
do
is
is
set
set
up
up
an
an
empty
empty
div
div
here
here
and
and
then
then
do
do
hash
hash
pay
pay
element.
element
This
this
div
div
is
is
going
going
to
to
be
be
replaced
replaced
by
by
the
the
actual
actual
Stripe
stripe
Elements
elements
button.
button
Switching
switching
back
back
over
over
to
to
the
the
TypeScript,
typescript
we'll
we'll
first
first
inject
inject
the
the
payment
payment
service
service
in
in
the
the
constructor.
constructor
Now
now
we
we
have
have
about
about
5
5
different
different
steps
steps
we
we
need
need
to
to
go
go
through,
through
which
which
I'll
i'll
explain
explain
to
to
you
you
1
1
by
by
1.
1
The
the
first
first
step
step
is
is
to
to
instantiate
instantiate
the
the
payment
payment
request
request
object.
object
That
that
object
object
has
has
a
a
number
number
of
of
different
different
parameters
parameters
that
that
you
you
can
can
pass
pass
to
to
it,
it
but
but
the
the
2
2
we're
we're
going
going
to
to
pass
pass
to
to
it
it
for
for
right
right
now
now
are
are
just
just
the
the
amount
amount
and
and
the
the
label.
label
We
we
can
can
access
access
Stripe
stripe
from
from
our
our
payment
payment
service
service
and
and
then
then
call
call
payment
payment
request,
request
and
and
we'll
we'll
set
set
the
the
country,
country
the
the
currency,
currency
as
as
well
well
as
as
the
the
total
total
amount
amount
and
and
the
the
label.
label
Again,
again
the
the
amount
amount
in
in
the
the
label
label
correspond
correspond
to
to
our
our
input
input
properties.
properties
Step
step
2
2
is
is
to
to
instantiate
instantiate
the
the
Stripe
stripe
elements
elements
object.
object
Elements
elements
contain
contain
the
the
actual
actual
UI
ui
components
components
that
that
we
we
get
get
from
from
Stripe
stripe
JS.
js
That's
that's
just
just
an
an
easy
easy
one
one
line
line
statement.
statement
Then
then
we
we
can
can
move
move
on
on
to
to
step
step
3
3
where
where
we
we
actually
actually
register
register
an
an
event
event
listener
listener
or
or
when
when
the
the
user
user
submits
submits
their
their
source
source
to
to
Stripe
stripe
and
and
Stripe
stripe
responds
responds
back
back
with
with
the
the
actual
actual
card
card
details.
details
When
when
Stripe
stripe
responds
responds
with
with
the
the
card
card
details,
details
That's
that's
the
the
point
point
when
when
you
you
would
would
send
send
a
a
request
request
to
to
your
your
back
back
end
end
to
to
actually
actually
charge
charge
the
the
card
card
or
or
just
just
save
save
the
the
card
card
on
on
a
a
customer
customer
account.
account
That's
that's
a
a
whole
whole
another
another
challenge
challenge
to
to
overcome.
overcome
So
so
for
for
right
right
now,
now
I'm
i'm
just
just
going
going
to
to
console
console
log
log
the
the
event,
event
and
and
then
then
I'm
i'm
going
going
to
to
set
set
a
a
time
time
out
out
to
to
simulate
simulate
the
the
call
call
to
to
the
the
back
back
end.
end
Normally,
normally
you
you
would
would
use
use
the
the
Angular
angular
HTTP
http
client
client
to
to
make
make
a
a
call
call
to
to
your
your
back
back
end.
end
But
but
for
for
right
right
now,
now
I'm
i'm
just
just
going
going
to
to
pretend
pretend
that
that
I
i
received
received
a
a
successful
successful
response
response
and
and
then
then
call
call
event
event
complete
complete
success.
success
You
you
could
could
also
also
call
call
event
event
fail
fail
here
here
or
or
a
a
number
number
of
of
other
other
validation
validation
errors
errors
provided
provided
by
by
Stripe.
stripe
The
the
next
next
thing
thing
we
we
do
do
is
is
create
create
the
the
actual
actual
instance
instance
of
of
the
the
UI
ui
button
button
from
from
Stripe
stripe
Elements.
elements
So
so
we
we
say
say
elements
elements
create
create
payment
payment
request
request
button,
button
Then
then
we
we
tell
tell
it
it
to
to
reference
reference
the
the
payment
payment
request
request
object
object
that
that
we've
we've
already
already
created.
created
This
this
part's
part's
optional,
optional
but
but
you
you
can
can
also
also
control
control
the
the
style
style
and
and
the
the
theme
theme
of
of
the
the
button.
button
Just
just
pass
pass
the
the
style
style
object
object
and
and
then
then
set
set
the
the
corresponding
corresponding
options
options
that
that
you
you
want.
want
That
that
takes
takes
care
care
of
of
step
step
4.
4
Now
now
the
the
final
final
step
step
is
is
to
to
mount
mount
the
the
actual
actual
payment
payment
button
button
in
in
the
the
DOM.
dom
To
to
do
do
this,
this
I'm
i'm
going
going
to
to
use
use
an
an
async
async
function.
function
You
you
could
could
technically
technically
use
use
RxJS
rxjs
here,
here
but
but
I
i
don't
don't
think
think
there's
there's
really
really
any
any
advantage
advantage
to
to
doing
doing
The
the
purpose
purpose
of
of
this
this
function
function
is
is
to
to
see
see
if
if
the
the
browser
browser
supports
supports
the
the
payments
payments
API.
api
To
to
do
do
that,
that
we
we
say
say
payment
payment
request
request
can
can
make
make
payment,
payment
which
which
is
is
going
going
to
to
return
return
a
a
promise.
promise
If
if
we
we
get
get
a
a
positive
positive
result,
result
then
then
we
we
can
can
go
go
ahead
ahead
and
and
mount
mount
our
our
payment
payment
request
request
button
button
to
to
the
the
native
native
element
element
that
that
we
we
retrieved
retrieved
from
from
view
view
child.
child
Otherwise,
otherwise
the
the
result
result
is
is
going
going
to
to
be
be
null,
null
so
so
we
we
can
can
just
just
console
console
log
log
a
a
helpful
helpful
error
error
message.
message
Now
now
let's
let's
go
go
into
into
Chrome
chrome
and
and
test
test
it
it
out.
out
We
we
should
should
be
be
good
good
to
to
go.
go
Right?
right
Well,
well
not
not
exactly.
exactly
It
it
looks
looks
like
like
our
our
button
button
is
is
not
not
showing
showing
up
up
here,
here
and
and
we're
we're
getting
getting
an
an
error
error
message
message
from
from
Stripe
stripe
saying
saying
that
that
we
we
need
need
to
to
be
be
serving
serving
over
over
HTTPS.
https
The
the
problem
problem
here
here
is
is
that
that
the
the
browser
browser
payments
payments
API
api
only
only
works
works
when
when
you
you
serve
serve
with
with
an
an
SSL
ssl
certificate,
certificate
and
and
that
that
goes
goes
for
for
development
development
on
on
local
local
host
host
as
as
well.
well
It
it
is
is
possible
possible
to
to
run
run
ng
ng
serve
serve
with
with
an
an
SSL
ssl
certificate
certificate
if
if
you
you
happen
happen
to
to
have
have
an
an
SSL
ssl
certificate
certificate
lying
lying
around,
around
which
which
not
not
many
many
people
people
do
do
and
and
a
a
self
self
signed
signed
certificate
certificate
is
is
not
not
going
going
to
to
work
work
either.
either
Luckily,
luckily
there's
there's
a
a
pretty
pretty
easy
easy
solution
solution
and
and
that's
that's
It's
it's
a
a
service
service
called
called
ngrok
ngrok
or
or
at
at
least
least
I
i
think
think
that's
that's
how
how
you
you
pronounce
pronounce
it.
it
It
it
allows
allows
you
you
to
to
create
create
an
an
HTTP
http
tunnel
tunnel
that
that
will
will
allow
allow
you
you
to
to
serve
serve
your
your
app
app
on
on
local
local
host
host
while
while
also
also
forwarding
forwarding
it
it
to
to
a
a
valid
valid
HTTPS
https
connection
connection
that
that
you
you
can
can
use
use
with
with
the
the
payment
payment
request
request
API.
api
You
you
need
need
to
to
download
download
the
the
application
application
on
on
your
your
local
local
machine,
machine
which
which
is
is
going
going
to
to
vary
vary
by
by
operating
operating
system,
system
but
but
the
the
setup
setup
is
is
really
really
easy
easy
overall.
overall
Once
once
you
you
have
have
it
it
set
set
up,
up
you
you
can
can
create
create
a
a
custom
custom
command
command
in
in
your
your
package
package
JSON
json
file
file
to
to
run
run
this
this
command
command
quickly.
quickly
The
the
actual
actual
command
command
you
you
use
use
might
might
look
look
a
a
little
little
bit
bit
different
different
because
because
you
you
have
have
to
to
point
point
to
to
the
the
actual
actual
ngrok
ngrok
install
install
on
on
your
your
local
local
machine.
machine
Then
then
you
you
call
call
HTTP
http
42100,
42100
and
and
I
i
also
also
had
had
to
to
set
set
the
the
host
host
header
header
to
to
8080
8080
for
for
just
just
some
some
random
random
error
error
that
that
was
was
coming
coming
up.
up
Once
once
you
you
have
have
that
that
done,
done
you'll
you'll
first
first
wanna
wanna
run
run
n
n
g
g
serve
serve
and
and
then
then
you'll
you'll
open
open
up
up
a
a
second
second
terminal
terminal
tab
tab
and
and
run
run
the
the
npm
npm
run
run
n
n
grok
grok
command
command
that
that
we
we
just
just
created.
created
That's
that's
going
going
to
to
open
open
up
up
this
this
window
window
that's
that's
going
going
to
to
take
take
you
you
to
to
the
the
other
other
side
side
of
of
the
the
tunnel.
tunnel
The
the
one
one
we're
we're
looking
looking
at
at
is
is
the
the
HTTPS
https
endpoint
endpoint
that
that
is
is
forwarding
forwarding
from
from
local
local
host
host
42100.
42100
You
you
can
can
go
go
ahead
ahead
and
and
copy
copy
and
and
paste
paste
that
that
into
into
a
a
browser,
browser
and
and
then
then
it
it
should
should
magically
magically
bring
bring
up
up
the
the
payment
payment
button
button
that
that
we
we
had
had
created
created
before.
before
The
the
forwarding
forwarding
process
process
is
is
really
really
slow,
slow
but
but
it
it
does
does
give
give
you
you
a
a
reliable
reliable
way
way
to
to
test
test
the
the
payment
payment
request
request
button.
button
Like
like
I
i
said
said
at
at
the
the
beginning,
beginning
I
i
believe
believe
this
this
is
is
going
going
to
to
be
be
the
the
future
future
of
of
payments
payments
in
in
the
the
browser.
browser
It
it
makes
makes
life
life
so
so
much
much
easier
easier
for
for
both
both
the
the
developer
developer
and
and
the
the
customer,
customer
and
and
things
things
like
like
that
that
tend
tend
to
to
be
be
opted
opted
pretty
pretty
quickly.
quickly
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
payments,
payments
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
access
access
to
to
the
the
Stripe
stripe
payments
payments
project,
project
which
which
is
is
designed
designed
for
for
developers
developers
who
who
are
are
building
building
Stripe
stripe
features
features
into
into
real
real
world
world
applications.
applications
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The future of checkout forms in progressive web apps is being discussed using the browser payments API. A buy now button is used using a credit card saved on a browser and Stripe Ace, which supports Apple Pay on Safari browser. Payment request components in Angular is explained, including setting up a Stripe account, registering a Stripeare class, and setting a payment request input property. The process of building a Payment Request component in a development app is explained, including setting up a Stripe account, registering a Stripeare class, and setting a payment request input property. The speaker then demonstrates how to mount the payment button in theipped component, including using an async function and configuring options. Finally, the speaker explains the difference between using an SSL certificate and using a service calledtoken referred to as Continental Gather, and encourages viewers to like and subscribe to the video.
The Future of Checkout Forms - Payment Request API
Today, I wanna show you the future of checkout forms in progressive web apps using the browser payments API. Instead of giving users a long tedious checkout form that they're likely not to finish, we give them a simple buy now button that uses a credit card saved on their browser So it behaves a lot more like in app payments do on native mobile devices. This is very recent technology, and it's only available in Chrome and Microsoft dot edge. To facilitate this feature in Angular, we'll be using Stripe Elements, which has the added benefit of supporting Apple Pay on Safari browsers. If you're new to the channel, make sure to subscribe. And if you're serious about payments, check out my full stack Stripe payments course, which you can find on Angular firebase.com, and is free to all pro members. To build this payment request button, the first thing I'm going to do is start with a fresh Angular 5 app. At this point, you'll also need a Stripe account and you want to reference the payment request button in the Stripe documentation. What we're building is just a simple component that has a random product I found on Amazon. And then when the buy now button is clicked, it will bring up the browser payments API. When the user clicks pay, it's going to send the payment information off to Stripe, and Stripe will respond with the payment source. You can see we have a source ID here in the Console as well as information about the user's credit card, but no information that would actually be a client side security risk. Now jumping into our Angular code, the first thing we'll have to do is add the stripejs version 3 tag to index HTML. Stripe JS has its own Stripe class, so we need to register it with TypeScript and typings d t s. From there, we need to instantiate Stripe somewhere in our project. To do that, I'm going to use an Angular service which I'm calling the payment service. After we generate it with the CLI, we can go in there and instantiate it with our Stripe publishable key. For the sake of simplicity, I'm using the key directly in the Angular service, But a better approach would be to manage your keys in your Angular environment. That way, you can use your test key in your development app and your live key in your actual deployed production app. Now we can build the actual component that's going to do all the work. I'm calling it the Payment Request component. Because we're using Stripe elements in this component, We need to wait for the view to initialize before we can actually attach the payment button. To do that, we use the after view init lifecycle hook in Angular. We're also going to bring in our payment service and then we'll initialize a couple of input variables first. The amount will be the amount of the payment that we're making and the label is whatever we're paying for. The input properties allow you to use this as a child component. For example, if you had a shopping cart, You could easily pass the total amount and label of that cart down to the child component. From there, we're going to set a few variables for the information that we get back from Stripe Elements including the elements object itself, the payment request, and the payment request button. We'll see these in action in just a minute here. Then to actually mount the element in the DOM, we use the view child decorator. Quickly, I'll jump over the HTML to show you how that looks. View child is pointing to a template reference variable called pay element. So all we do is set up an empty div here and then do hash pay element. This div is going to be replaced by the actual Stripe Elements button. Switching back over to the TypeScript, we'll first inject the payment service in the constructor. Now we have about 5 different steps we need to go through, which I'll explain to you 1 by 1. The first step is to instantiate the payment request object. That object has a number of different parameters that you can pass to it, but the 2 we're going to pass to it for right now are just the amount and the label. We can access Stripe from our payment service and then call payment request, and we'll set the country, the currency, as well as the total amount and the label. Again, the amount in the label correspond to our input properties. Step 2 is to instantiate the Stripe elements object. Elements contain the actual UI components that we get from Stripe JS. That's just an easy one line statement. Then we can move on to step 3 where we actually register an event listener or when the user submits their source to Stripe and Stripe responds back with the actual card details. When Stripe responds with the card details, That's the point when you would send a request to your back end to actually charge the card or just save the card on a customer account. That's a whole another challenge to overcome. So for right now, I'm just going to console log the event, and then I'm going to set a time out to simulate the call to the back end. Normally, you would use the Angular HTTP client to make a call to your back end. But for right now, I'm just going to pretend that I received a successful response and then call event complete success. You could also call event fail here or a number of other validation errors provided by Stripe. The next thing we do is create the actual instance of the UI button from Stripe Elements. So we say elements create payment request button, Then we tell it to reference the payment request object that we've already created. This part's optional, but you can also control the style and the theme of the button. Just pass the style object and then set the corresponding options that you want. That takes care of step 4. Now the final step is to mount the actual payment button in the DOM. To do this, I'm going to use an async function. You could technically use RxJS here, but I don't think there's really any advantage to doing The purpose of this function is to see if the browser supports the payments API. To do that, we say payment request can make payment, which is going to return a promise. If we get a positive result, then we can go ahead and mount our payment request button to the native element that we retrieved from view child. Otherwise, the result is going to be null, so we can just console log a helpful error message. Now let's go into Chrome and test it out. We should be good to go. Right? Well, not exactly. It looks like our button is not showing up here, and we're getting an error message from Stripe saying that we need to be serving over HTTPS. The problem here is that the browser payments API only works when you serve with an SSL certificate, and that goes for development on local host as well. It is possible to run ng serve with an SSL certificate if you happen to have an SSL certificate lying around, which not many people do and a self signed certificate is not going to work either. Luckily, there's a pretty easy solution and that's It's a service called ngrok or at least I think that's how you pronounce it. It allows you to create an HTTP tunnel that will allow you to serve your app on local host while also forwarding it to a valid HTTPS connection that you can use with the payment request API. You need to download the application on your local machine, which is going to vary by operating system, but the setup is really easy overall. Once you have it set up, you can create a custom command in your package JSON file to run this command quickly. The actual command you use might look a little bit different because you have to point to the actual ngrok install on your local machine. Then you call HTTP 42100, and I also had to set the host header to 8080 for just some random error that was coming up. Once you have that done, you'll first wanna run n g serve and then you'll open up a second terminal tab and run the npm run n grok command that we just created. That's going to open up this window that's going to take you to the other side of the tunnel. The one we're looking at is the HTTPS endpoint that is forwarding from local host 42100. You can go ahead and copy and paste that into a browser, and then it should magically bring up the payment button that we had created before. The forwarding process is really slow, but it does give you a reliable way to test the payment request button. Like I said at the beginning, I believe this is going to be the future of payments in the browser. It makes life so much easier for both the developer and the customer, and things like that tend to be opted pretty quickly. If this video helped you, please like and subscribe. And if you're serious about payments, consider becoming a pro member at angularfirebase.com. You'll get access to the Stripe payments project, which is designed for developers who are building Stripe features into real world applications. Thanks for watching, and I'll see you soon.
The future of checkout forms in progressive web apps is being discussed using the browser payments API. A buy now button is used using a credit card saved on a browser and Stripe Ace, which supports Apple Pay on Safari browser. Payment request components in Angular is explained, including setting up a Stripe account, registering a Stripeare class, and setting a payment request input property. The process of building a Payment Request component in a development app is explained, including setting up a Stripe account, registering a Stripeare class, and setting a payment request input property. The speaker then demonstrates how to mount the payment button in theipped component, including using an async function and configuring options. Finally, the speaker explains the difference between using an SSL certificate and using a service calledtoken referred to as Continental Gather, and encourages viewers to like and subscribe to the video.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : The Future of Checkout Forms - Payment Request API 
        and a small summary : The future of checkout forms in progressive web apps is being discussed using the browser payments API. A buy now button is used using a credit card saved on a browser and Stripe Ace, which supports Apple Pay on Safari browser. Payment request components in Angular is explained, including setting up a Stripe account, registering a Stripeare class, and setting a payment request input property. The process of building a Payment Request component in a development app is explained, including setting up a Stripe account, registering a Stripeare class, and setting a payment request input property. The speaker then demonstrates how to mount the payment button in theipped component, including using an async function and configuring options. Finally, the speaker explains the difference between using an SSL certificate and using a service calledtoken referred to as Continental Gather, and encourages viewers to like and subscribe to the video.
        [/INST]
        
        Generate the video : Today, I wanna show you the future of checkout forms in progressive web apps using the browser payments API. Instead of giving users a long tedious checkout form that they're likely not to finish, we give them a simple buy now button that uses a credit card saved on their browser So it behaves a lot more like in app payments do on native mobile devices. This is very recent technology, and it's only available in Chrome and Microsoft dot edge. To facilitate this feature in Angular, we'll be using Stripe Elements, which has the added benefit of supporting Apple Pay on Safari browsers. If you're new to the channel, make sure to subscribe. And if you're serious about payments, check out my full stack Stripe payments course, which you can find on Angular firebase.com, and is free to all pro members. To build this payment request button, the first thing I'm going to do is start with a fresh Angular 5 app. At this point, you'll also need a Stripe account and you want to reference the payment request button in the Stripe documentation. What we're building is just a simple component that has a random product I found on Amazon. And then when the buy now button is clicked, it will bring up the browser payments API. When the user clicks pay, it's going to send the payment information off to Stripe, and Stripe will respond with the payment source. You can see we have a source ID here in the Console as well as information about the user's credit card, but no information that would actually be a client side security risk. Now jumping into our Angular code, the first thing we'll have to do is add the stripejs version 3 tag to index HTML. Stripe JS has its own Stripe class, so we need to register it with TypeScript and typings d t s. From there, we need to instantiate Stripe somewhere in our project. To do that, I'm going to use an Angular service which I'm calling the payment service. After we generate it with the CLI, we can go in there and instantiate it with our Stripe publishable key. For the sake of simplicity, I'm using the key directly in the Angular service, But a better approach would be to manage your keys in your Angular environment. That way, you can use your test key in your development app and your live key in your actual deployed production app. Now we can build the actual component that's going to do all the work. I'm calling it the Payment Request component. Because we're using Stripe elements in this component, We need to wait for the view to initialize before we can actually attach the payment button. To do that, we use the after view init lifecycle hook in Angular. We're also going to bring in our payment service and then we'll initialize a couple of input variables first. The amount will be the amount of the payment that we're making and the label is whatever we're paying for. The input properties allow you to use this as a child component. For example, if you had a shopping cart, You could easily pass the total amount and label of that cart down to the child component. From there, we're going to set a few variables for the information that we get back from Stripe Elements including the elements object itself, the payment request, and the payment request button. We'll see these in action in just a minute here. Then to actually mount the element in the DOM, we use the view child decorator. Quickly, I'll jump over the HTML to show you how that looks. View child is pointing to a template reference variable called pay element. So all we do is set up an empty div here and then do hash pay element. This div is going to be replaced by the actual Stripe Elements button. Switching back over to the TypeScript, we'll first inject the payment service in the constructor. Now we have about 5 different steps we need to go through, which I'll explain to you 1 by 1. The first step is to instantiate the payment request object. That object has a number of different parameters that you can pass to it, but the 2 we're going to pass to it for right now are just the amount and the label. We can access Stripe from our payment service and then call payment request, and we'll set the country, the currency, as well as the total amount and the label. Again, the amount in the label correspond to our input properties. Step 2 is to instantiate the Stripe elements object. Elements contain the actual UI components that we get from Stripe JS. That's just an easy one line statement. Then we can move on to step 3 where we actually register an event listener or when the user submits their source to Stripe and Stripe responds back with the actual card details. When Stripe responds with the card details, That's the point when you would send a request to your back end to actually charge the card or just save the card on a customer account. That's a whole another challenge to overcome. So for right now, I'm just going to console log the event, and then I'm going to set a time out to simulate the call to the back end. Normally, you would use the Angular HTTP client to make a call to your back end. But for right now, I'm just going to pretend that I received a successful response and then call event complete success. You could also call event fail here or a number of other validation errors provided by Stripe. The next thing we do is create the actual instance of the UI button from Stripe Elements. So we say elements create payment request button, Then we tell it to reference the payment request object that we've already created. This part's optional, but you can also control the style and the theme of the button. Just pass the style object and then set the corresponding options that you want. That takes care of step 4. Now the final step is to mount the actual payment button in the DOM. To do this, I'm going to use an async function. You could technically use RxJS here, but I don't think there's really any advantage to doing The purpose of this function is to see if the browser supports the payments API. To do that, we say payment request can make payment, which is going to return a promise. If we get a positive result, then we can go ahead and mount our payment request button to the native element that we retrieved from view child. Otherwise, the result is going to be null, so we can just console log a helpful error message. Now let's go into Chrome and test it out. We should be good to go. Right? Well, not exactly. It looks like our button is not showing up here, and we're getting an error message from Stripe saying that we need to be serving over HTTPS. The problem here is that the browser payments API only works when you serve with an SSL certificate, and that goes for development on local host as well. It is possible to run ng serve with an SSL certificate if you happen to have an SSL certificate lying around, which not many people do and a self signed certificate is not going to work either. Luckily, there's a pretty easy solution and that's It's a service called ngrok or at least I think that's how you pronounce it. It allows you to create an HTTP tunnel that will allow you to serve your app on local host while also forwarding it to a valid HTTPS connection that you can use with the payment request API. You need to download the application on your local machine, which is going to vary by operating system, but the setup is really easy overall. Once you have it set up, you can create a custom command in your package JSON file to run this command quickly. The actual command you use might look a little bit different because you have to point to the actual ngrok install on your local machine. Then you call HTTP 42100, and I also had to set the host header to 8080 for just some random error that was coming up. Once you have that done, you'll first wanna run n g serve and then you'll open up a second terminal tab and run the npm run n grok command that we just created. That's going to open up this window that's going to take you to the other side of the tunnel. The one we're looking at is the HTTPS endpoint that is forwarding from local host 42100. You can go ahead and copy and paste that into a browser, and then it should magically bring up the payment button that we had created before. The forwarding process is really slow, but it does give you a reliable way to test the payment request button. Like I said at the beginning, I believe this is going to be the future of payments in the browser. It makes life so much easier for both the developer and the customer, and things like that tend to be opted pretty quickly. If this video helped you, please like and subscribe. And if you're serious about payments, consider becoming a pro member at angularfirebase.com. You'll get access to the Stripe payments project, which is designed for developers who are building Stripe features into real world applications. Thanks for watching, and I'll see you soon.
        