Use Stripe Checkout and the Payment Intents API 💰 to process payments with the latest 3D secure strong authentication requirements in Europe - Full stack demo with Svelte and Node.js Cloud Functions. https://fireship.io/lessons/stripe-payment-intents-tutorial/

Stripe Payments https://stripe.com/payments
3D Secure https://en.wikipedia.org/wiki/3-D_Secure


#stripe #nodejs #svelte

Don't forget to take the quiz 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:31:08.355Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
9364ca22-b947-4cb6-b1c6-c2bcda8d4bba
a0fa712550a255dae775180981f364eabaf49c148d7ef6779ae1d32101dd9452
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
2019 has been an important year for the way developers handle online payments.
In September, banks in the EU started rolling out strong customer authentication.
This means that if you have customers in the EU, they may need to log in to their bank's website to authorize a payment before it can be processed.
In today's video, we'll look at 2 different strategies you can use with Stripe to accept payments in your app, both of which are fully compatible with this 3 d secure process.
If you're new here, like and subscribe, Drive, and check out the Stripe Payments Master Course for everything you need to know about building a payment system.
In today's video, we'll be looking at how to handle one time payments.
The easy way to get paid is with Stripe Checkout.
It can be implemented with 0 back end code, but has limited options for customization.
When we're done with that, we'll look at a more complex approach that combines Stripe elements with the payment intense API, and that will give us full control over the payment flow and user experience.
To get started, you'll need have a Stripe account, and then you'll also want some kind of Node.
Js back end.
We'll be using Firebase Cloud Functions for this video, but feel free to use any Node back end that you want.
In the front end application, we just have a single product and that is the only product that the user can buy.
When they click the purchase button, it will bring up the Stripe checkout UI.
This is a checkout flow that is completely handled by Stripe.
That means you don't have to handle any of the UI coding yourself.
Stripe will validate the credit card and process the payment all inside of this checkout page.
And it also handles the 3 d secured authentication process for customers in Europe.
If the user does not complete this process by signing in to their bank and authorizing the charge.
The payment will not go through.
When the payment is complete, you can specify a redirect URL, and Stripe will redirect the user to a access page along with the ID of the session so you can retrieve it if necessary.
And if the payment is unsuccessful or if the user cancels, you can go to a separate URL.
Once you've received a payment from a user, you then need to think about how you'll actually fulfill their purchase, and this is entirely dependent on how your business operates.
One option is to just go into the Stripe dashboard and do all that stuff manually.
But we're developers, so we want to do everything programmatically.
And the way you do that with Stripe checkout is with a webhook.
When the checkout process has been completed successfully, Stripe can send a webhook with some data to your back end server.
Auth.
So that means that you need to have a server that's accessible over HTTP, which is very easy to do and a perfect use case for Firebase Cloud Functions.
When your Cloud Function receives the webhook, it will contain data about the payment intent.
And you can use that data to implement some logic that updates your database or maybe sends an email to the user or something along those lines.
What's amazing about Stripe checkout is that we can build a payment system without writing a single line of back end code.
To get started, you'll first need a Stripe account.
Head over to the Stripe dashboard, and then make sure to flip the switch for development mode.
Under API keys, you'll see a publishable key.
Auth.
This key is perfectly safe to use in your front end code.
However, you should never use the secret key in your front end code.
We'll come back here to retrieve the secret key when we set up our webhook on Firebase Cloud Functions.
Now at this point, you should know that there are 2 different ways you can use Stripe Checkout.
The easiest approach is to use the client only integration.
To use this approach, we need to go into the products tab and create some details about a product that we wanna sell.
One of the big limitations with this approach is that we can't calculate our pricing dynamically.
All the data is static based on the values that we enter here in the dashboard.
If you have dynamic pricing or maybe you offer discounts on a per user basis, auth this.
You'll likely want to generate your checkout sessions on a server.
That allows you to generate products and their pricing based on your own internal logic, so you're not dependent on the products here in the dashboard.
We look at how to do that in the full course, but for this simple use case, we'll just stick with the client only integration.
After you've created a product, go ahead and add a SKU to it and then copy that SKU ID.
From there, we'll go ahead and open up a terminal session and use npx to create a new Svelte app.
Then inside the source directory, I'll create a component called product dot Svelte.
Now in order to run the checkout process, we need to include Stripe JS in this project.
Instead of installing Stripe with npm, we want to include a script tag in the head of the document.
So head into the public folder to the index HTML and add Stripe JS there.
This ensures that you always have the latest version of Stripe.
Js and also allows Stripe to perform things like fraud detection in the background.
From there, we can go into our product component, and the first thing we'll wanna do is initialize the Stripe SDK.
By including the script tag, we get a global namespace of Stripe, which we can initialize by passing it the publishable key from the Stripe dashboard.
And that is how Stripe identifies our account.
Next, we'll declare a few props for the product name, image, and SKU.
Now, if we want to redirect the user to the checkout process, all we have to do is set up an async function, and then we'll await Stripe redirect to checkout.
You can add multiple items to the checkout process and set a quantity for each one.
Then you'll want to set redirect URLs for successful payments and canceled payments.
If Stripe is unable to redirect the user at all, it will throw an error object.
So if we get an error, we'll just go ahead and show an alert message for now.
And now we just need a UI element for the user to trigger the checkout process.
So we'll go down here to the template and add a button that fires this method when clicked.
And it's also worth noting that when you're working with the mounts and stripe, they're based on a currency's lowest denomination.
So an amount of 1,999 would be $19 at 99¢ in US dollars.
So you'll probably want to divide the amount by 100 when showing that in your front end UI.
Auth.
And now we can use this product component somewhere else in the application.
So we'll go into the app component and then declare the product there, then pass in the props like the SKU and the amount that we want to use for this product.
And now we can run npm run dev to serve the app locally.
Auth.
When you click the checkout button, it should redirect the user to the checkout page with your specific product details.
After a payment is submitted, you'll be able to see it on the Stripe dashboard.
Customer, but now we need to do our part to fulfill the product.
When the payment intent has succeeded, Stripe will instantly send a webhook to a URL that we specify.
Auth.
The URL can point to an HTTP Cloud Function that will then handle the data for that payment intent and then fulfill the product for the user.
So to get started on the back end, we'll need to initialize Firebase Cloud Functions by running Firebase Net Functions from the command line, and I'll be using TypeScript in this project.
From there, we'll CD into the functions directory, and I'll be using Express JS, CORS, and also the Stripe SDK.
And then we'll also want to install types for Stripe and CORS.
This will give us IntelliSense for the entire Stripe API, which is incredibly useful when building a payment system on the back end.
Now, one minor thing we need to do for TypeScript is go into the ts config and use the esnextlib.
Now, in the index ts file, we'll start by initializing on Stripe by first importing it and then passing it the secret API key from the Stripe dashboard.
You can see I've just hard coded it to the source code here, but it's generally a better idea to save it as an environment variable in your Firebase project.
From there, I'm going to create an Express JS app so we can create multiple API endpoints with a single cloud function.
This is technically optional, but if you have a lot of different payment endpoints on your back end, it generally helps to use some sort of HTTP framework to help you manage that complexity.
Or in the full Stripe course, we use something called callable functions, which integrate with the Firebase SDK on front end to simplify both the front end and back end code, but it's beyond the scope of this video.
From there, we'll create a post endpoint for our webhook.
Auth.
And inside this hook, the first thing we'll wanna do is validate that it actually came from Stripe and not from some random hacker on the web.
We can do that by looking for a Stripe signature header.
And then we can use a value called the endpoint secret to decode the data that was in that request or webhook sent from Stripe.
The Stripe SDK has a special method called webhooks construct event.
That takes the body of the request, the Stripe signature, and the endpoint secret, and combines them all together into some JSON that we can actually use in our code.
Auth now the one thing we're missing is the actual secret key for this webhook.
Head over to the Stripe dashboard and create a new webhook.
Auth.
The URL should be the actual location that you've deployed your Firebase function to, which in our case would be our main function's URL followed by payments slash webhook.
Auth.
Then for this demo, the actual webhook that you wanna listen to is paymentintent.succeeded.
And you can also look at the paymentintent payment failed as well.
Now once you've created that webhook, go ahead and grab the secret code and then paste it into your Firebase project.
And, again, that would be better as a Firebase environment variable.
From there, we can simply set up a switch statement to handle the type of webhook that was sent.
I'm going to leave the code implementation details up to your auth imagination here, but you would most likely update the Firestore database or send an email to a customer or something along those lines.
It's entirely dependent on the business logic of your app and the product that you sell.
Then if the payment failed, you may want to send the customer an email saying you have an open invoice and here is where to pay it.
And you now have a full stack payment solution with Stripe, Node.
Js, and Svelte.
Nice.
But the main drawback of Stripe at checkout is that it offers very few options to customize the user experience.
So I want to finish off this video by giving you a rundown of how to use the payment intense authenti along with Stripe Elements to not only handle custom payments, but also to handle the 3 d secure authentication process if it's necessary.
In the Svelte app, you can see here that we enter some card details, and then if it needs to go through 3 d Secure, Stripe will automatically bring up that 3 d Secure process in your app's page.
So the user never really leaves your app to finish their payment.
Now, there's a lot more code involved in this process, and we're not going to go through it line by line.
Instead, we'll look at the implementation of 5 different steps that you need to take to handle payment intents with Stripe Elements.
Step 1 is to create a payment intent on the back end when the user signifies an intention to pay you money.
When that happens, you make a request to your back end for a payment intent object, which you can create with the Stripe SDK.
It takes an amount, currency, and some additional optional parameters as well.
In your front end code, you'll need to make a request to this endpoint.
Auth in the Svelte app, we'll handle that with the on mount life cycle hook, although you should only create 1 payment intent per user session.
In our case, we can request the payment intent using the browser fetch API and then take the response and set it as the payment intent property on the Svelte component.
Auth that returns the payment intent from our server, which contains an important value called the client secret.
Once we have the client secret, we can then move on to the 3rd step, which is collecting the user's credit card information and building the actual credit card form.
Stripe Elements provides prebuilt widgets that we can use to validate credit card details on the front end.
All we have to do is grab a dom element with Swelt, and then we'll mount the Stripe card on that element.
From there, we move on to step number 4, which is to process the payment, and that happens entirely on Stripe's server, not your own server.
You do that by calling handle card payment and it takes the client's secret that you return from your own server along with the card element where the user entered their card details here on the front end.
Its return value is an updated payment intent with any charges that have been added to that intent.
So it takes the payment intent you created on your back end, the card details the user entered on the front end, and turns that into an actual charge that you can fulfill.
At that point, you can show the user a confirmation in the UI, and then you should actually fulfill the purchase by running a webhook just like we did with the previous example.
So I'm gonna go ahead and wrap things up there.
I hope that gave you an idea of how to work with Stripe Checkout and the payment intense API.
And if you're serious about integrating payments into your progressive web app, Consider becoming a pro member at FireShip IO to get access to the full course.
Thanks for watching, and I will talk to you soon.
Oh, I I like money.

Speaker 0: 2019 has been an important year for the way developers handle online payments. In September, banks in the EU started rolling out strong customer authentication. This means that if you have customers in the EU, they may need to log in to their bank's website to authorize a payment before it can be processed. In today's video, we'll look at 2 different strategies you can use with Stripe to accept payments in your app, both of which are fully compatible with this 3 d secure process. If you're new here, like and subscribe, Drive, and check out the Stripe Payments Master Course for everything you need to know about building a payment system.

In today's video, we'll be looking at how to handle one time payments. The easy way to get paid is with Stripe Checkout. It can be implemented with 0 back end code, but has limited options for customization. When we're done with that, we'll look at a more complex approach that combines Stripe elements with the payment intense API, and that will give us full control over the payment flow and user experience. To get started, you'll need have a Stripe account, and then you'll also want some kind of Node.

Js back end. We'll be using Firebase Cloud Functions for this video, but feel free to use any Node back end that you want. In the front end application, we just have a single product and that is the only product that the user can buy. When they click the purchase button, it will bring up the Stripe checkout UI. This is a checkout flow that is completely handled by Stripe.

That means you don't have to handle any of the UI coding yourself. Stripe will validate the credit card and process the payment all inside of this checkout page. And it also handles the 3 d secured authentication process for customers in Europe. If the user does not complete this process by signing in to their bank and authorizing the charge. The payment will not go through.

When the payment is complete, you can specify a redirect URL, and Stripe will redirect the user to a access page along with the ID of the session so you can retrieve it if necessary. And if the payment is unsuccessful or if the user cancels, you can go to a separate URL. Once you've received a payment from a user, you then need to think about how you'll actually fulfill their purchase, and this is entirely dependent on how your business operates. One option is to just go into the Stripe dashboard and do all that stuff manually. But we're developers, so we want to do everything programmatically.

And the way you do that with Stripe checkout is with a webhook. When the checkout process has been completed successfully, Stripe can send a webhook with some data to your back end server. Auth. So that means that you need to have a server that's accessible over HTTP, which is very easy to do and a perfect use case for Firebase Cloud Functions. When your Cloud Function receives the webhook, it will contain data about the payment intent.

And you can use that data to implement some logic that updates your database or maybe sends an email to the user or something along those lines. What's amazing about Stripe checkout is that we can build a payment system without writing a single line of back end code. To get started, you'll first need a Stripe account. Head over to the Stripe dashboard, and then make sure to flip the switch for development mode. Under API keys, you'll see a publishable key.

Auth. This key is perfectly safe to use in your front end code. However, you should never use the secret key in your front end code. We'll come back here to retrieve the secret key when we set up our webhook on Firebase Cloud Functions. Now at this point, you should know that there are 2 different ways you can use Stripe Checkout.

The easiest approach is to use the client only integration. To use this approach, we need to go into the products tab and create some details about a product that we wanna sell. One of the big limitations with this approach is that we can't calculate our pricing dynamically. All the data is static based on the values that we enter here in the dashboard. If you have dynamic pricing or maybe you offer discounts on a per user basis, auth this.

You'll likely want to generate your checkout sessions on a server. That allows you to generate products and their pricing based on your own internal logic, so you're not dependent on the products here in the dashboard. We look at how to do that in the full course, but for this simple use case, we'll just stick with the client only integration. After you've created a product, go ahead and add a SKU to it and then copy that SKU ID. From there, we'll go ahead and open up a terminal session and use npx to create a new Svelte app.

Then inside the source directory, I'll create a component called product dot Svelte. Now in order to run the checkout process, we need to include Stripe JS in this project. Instead of installing Stripe with npm, we want to include a script tag in the head of the document. So head into the public folder to the index HTML and add Stripe JS there. This ensures that you always have the latest version of Stripe.

Js and also allows Stripe to perform things like fraud detection in the background. From there, we can go into our product component, and the first thing we'll wanna do is initialize the Stripe SDK. By including the script tag, we get a global namespace of Stripe, which we can initialize by passing it the publishable key from the Stripe dashboard. And that is how Stripe identifies our account. Next, we'll declare a few props for the product name, image, and SKU.

Now, if we want to redirect the user to the checkout process, all we have to do is set up an async function, and then we'll await Stripe redirect to checkout. You can add multiple items to the checkout process and set a quantity for each one. Then you'll want to set redirect URLs for successful payments and canceled payments. If Stripe is unable to redirect the user at all, it will throw an error object. So if we get an error, we'll just go ahead and show an alert message for now.

And now we just need a UI element for the user to trigger the checkout process. So we'll go down here to the template and add a button that fires this method when clicked. And it's also worth noting that when you're working with the mounts and stripe, they're based on a currency's lowest denomination. So an amount of 1,999 would be $19 at 99¢ in US dollars. So you'll probably want to divide the amount by 100 when showing that in your front end UI.

Auth. And now we can use this product component somewhere else in the application. So we'll go into the app component and then declare the product there, then pass in the props like the SKU and the amount that we want to use for this product. And now we can run npm run dev to serve the app locally. Auth.

When you click the checkout button, it should redirect the user to the checkout page with your specific product details. After a payment is submitted, you'll be able to see it on the Stripe dashboard. Customer, but now we need to do our part to fulfill the product. When the payment intent has succeeded, Stripe will instantly send a webhook to a URL that we specify. Auth.

The URL can point to an HTTP Cloud Function that will then handle the data for that payment intent and then fulfill the product for the user. So to get started on the back end, we'll need to initialize Firebase Cloud Functions by running Firebase Net Functions from the command line, and I'll be using TypeScript in this project. From there, we'll CD into the functions directory, and I'll be using Express JS, CORS, and also the Stripe SDK. And then we'll also want to install types for Stripe and CORS. This will give us IntelliSense for the entire Stripe API, which is incredibly useful when building a payment system on the back end.

Now, one minor thing we need to do for TypeScript is go into the ts config and use the esnextlib. Now, in the index ts file, we'll start by initializing on Stripe by first importing it and then passing it the secret API key from the Stripe dashboard. You can see I've just hard coded it to the source code here, but it's generally a better idea to save it as an environment variable in your Firebase project. From there, I'm going to create an Express JS app so we can create multiple API endpoints with a single cloud function. This is technically optional, but if you have a lot of different payment endpoints on your back end, it generally helps to use some sort of HTTP framework to help you manage that complexity.

Or in the full Stripe course, we use something called callable functions, which integrate with the Firebase SDK on front end to simplify both the front end and back end code, but it's beyond the scope of this video. From there, we'll create a post endpoint for our webhook. Auth. And inside this hook, the first thing we'll wanna do is validate that it actually came from Stripe and not from some random hacker on the web. We can do that by looking for a Stripe signature header.

And then we can use a value called the endpoint secret to decode the data that was in that request or webhook sent from Stripe. The Stripe SDK has a special method called webhooks construct event. That takes the body of the request, the Stripe signature, and the endpoint secret, and combines them all together into some JSON that we can actually use in our code. Auth now the one thing we're missing is the actual secret key for this webhook. Head over to the Stripe dashboard and create a new webhook.

Auth. The URL should be the actual location that you've deployed your Firebase function to, which in our case would be our main function's URL followed by payments slash webhook. Auth. Then for this demo, the actual webhook that you wanna listen to is paymentintent.succeeded. And you can also look at the paymentintent payment failed as well.

Now once you've created that webhook, go ahead and grab the secret code and then paste it into your Firebase project. And, again, that would be better as a Firebase environment variable. From there, we can simply set up a switch statement to handle the type of webhook that was sent. I'm going to leave the code implementation details up to your auth imagination here, but you would most likely update the Firestore database or send an email to a customer or something along those lines. It's entirely dependent on the business logic of your app and the product that you sell.

Then if the payment failed, you may want to send the customer an email saying you have an open invoice and here is where to pay it. And you now have a full stack payment solution with Stripe, Node. Js, and Svelte. Nice. But the main drawback of Stripe at checkout is that it offers very few options to customize the user experience.

So I want to finish off this video by giving you a rundown of how to use the payment intense authenti along with Stripe Elements to not only handle custom payments, but also to handle the 3 d secure authentication process if it's necessary. In the Svelte app, you can see here that we enter some card details, and then if it needs to go through 3 d Secure, Stripe will automatically bring up that 3 d Secure process in your app's page. So the user never really leaves your app to finish their payment. Now, there's a lot more code involved in this process, and we're not going to go through it line by line. Instead, we'll look at the implementation of 5 different steps that you need to take to handle payment intents with Stripe Elements.

Step 1 is to create a payment intent on the back end when the user signifies an intention to pay you money. When that happens, you make a request to your back end for a payment intent object, which you can create with the Stripe SDK. It takes an amount, currency, and some additional optional parameters as well. In your front end code, you'll need to make a request to this endpoint. Auth in the Svelte app, we'll handle that with the on mount life cycle hook, although you should only create 1 payment intent per user session.

In our case, we can request the payment intent using the browser fetch API and then take the response and set it as the payment intent property on the Svelte component. Auth that returns the payment intent from our server, which contains an important value called the client secret. Once we have the client secret, we can then move on to the 3rd step, which is collecting the user's credit card information and building the actual credit card form. Stripe Elements provides prebuilt widgets that we can use to validate credit card details on the front end. All we have to do is grab a dom element with Swelt, and then we'll mount the Stripe card on that element.

From there, we move on to step number 4, which is to process the payment, and that happens entirely on Stripe's server, not your own server. You do that by calling handle card payment and it takes the client's secret that you return from your own server along with the card element where the user entered their card details here on the front end. Its return value is an updated payment intent with any charges that have been added to that intent. So it takes the payment intent you created on your back end, the card details the user entered on the front end, and turns that into an actual charge that you can fulfill. At that point, you can show the user a confirmation in the UI, and then you should actually fulfill the purchase by running a webhook just like we did with the previous example.

So I'm gonna go ahead and wrap things up there. I hope that gave you an idea of how to work with Stripe Checkout and the payment intense API. And if you're serious about integrating payments into your progressive web app, Consider becoming a pro member at FireShip IO to get access to the full course. Thanks for watching, and I will talk to you soon. Oh, I I like money.
2019 has been an important year for the way developers handle online payments. In September, banks in the EU started rolling out strong customer authentication. This means that if you have customers in the EU, they may need to log in to their bank's website to authorize a payment before it can be processed. In today's video, we'll look at 2 different strategies you can use with Stripe to accept payments in your app, both of which are fully compatible with this 3 d secure process. If you're new here, like and subscribe, Drive, and check out the Stripe Payments Master Course for everything you need to know about building a payment system. In today's video, we'll be looking at how to handle one time payments. The easy way to get paid is with Stripe Checkout. It can be implemented with 0 back end code, but has limited options for customization. When we're done with that, we'll look at a more complex approach that combines Stripe elements with the payment intense API, and that will give us full control over the payment flow and user experience. To get started, you'll need have a Stripe account, and then you'll also want some kind of Node.
customer support
billing
banking
Js back end. We'll be using Firebase Cloud Functions for this video, but feel free to use any Node back end that you want. In the front end application, we just have a single product and that is the only product that the user can buy. When they click the purchase button, it will bring up the Stripe checkout UI.
This is a checkout flow that is completely handled by Stripe. That means you don't have to handle any of the UI coding yourself. Stripe will validate the credit card and process the payment all inside of this checkout page. And it also handles the 3 d secured authentication process for customers in Europe. If the user does not complete this process by signing in to their bank and authorizing the charge. The payment will not go through. When the payment is complete, you can specify a redirect URL, and Stripe will redirect the user to a access page along with the ID of the session so you can retrieve it if necessary. And if the payment is unsuccessful or if the user cancels, you can go to a separate URL. Once you've received a payment from a user, you then need to think about how you'll actually fulfill their purchase, and this is entirely dependent on how your business operates. One option is to just go into the Stripe dashboard and do all that stuff manually.
billing
banking
purchasing
customer support
But we're developers, so we want to do everything programmatically.
And the way you do that with Stripe checkout is with a webhook. When the checkout process has been completed successfully, Stripe can send a webhook with some data to your back end server. Auth. So that means that you need to have a server that's accessible over HTTP, which is very easy to do and a perfect use case for Firebase Cloud Functions. When your Cloud Function receives the webhook, it will contain data about the payment intent. And you can use that data to implement some logic that updates your database or maybe sends an email to the user or something along those lines.
internet
What's amazing about Stripe checkout is that we can build a payment system without writing a single line of back end code. To get started, you'll first need a Stripe account. Head over to the Stripe dashboard, and then make sure to flip the switch for development mode. Under API keys, you'll see a publishable key.
billing
banking
Auth. This key is perfectly safe to use in your front end code. However, you should never use the secret key in your front end code. We'll come back here to retrieve the secret key when we set up our webhook on Firebase Cloud Functions. Now at this point, you should know that there are 2 different ways you can use Stripe Checkout.
security
The easiest approach is to use the client only integration. To use this approach, we need to go into the products tab and create some details about a product that we wanna sell. One of the big limitations with this approach is that we can't calculate our pricing dynamically. All the data is static based on the values that we enter here in the dashboard.
commerce
sales
modeling
If you have dynamic pricing or maybe you offer discounts on a per user basis, auth this. You'll likely want to generate your checkout sessions on a server.
That allows you to generate products and their pricing based on your own internal logic, so you're not dependent on the products here in the dashboard. We look at how to do that in the full course, but for this simple use case, we'll just stick with the client only integration.
purchasing
programming
logic
products
After you've created a product, go ahead and add a SKU to it and then copy that SKU ID. From there, we'll go ahead and open up a terminal session and use npx to create a new Svelte app. Then inside the source directory, I'll create a component called product dot Svelte. Now in order to run the checkout process, we need to include Stripe JS in this project. Instead of installing Stripe with npm, we want to include a script tag in the head of the document. So head into the public folder to the index HTML and add Stripe JS there. This ensures that you always have the latest version of Stripe. Js and also allows Stripe to perform things like fraud detection in the background. From there, we can go into our product component, and the first thing we'll wanna do is initialize the Stripe SDK. By including the script tag, we get a global namespace of Stripe, which we can initialize by passing it the publishable key from the Stripe dashboard. And that is how Stripe identifies our account. Next, we'll declare a few props for the product name, image, and SKU. Now, if we want to redirect the user to the checkout process, all we have to do is set up an async function, and then we'll await Stripe redirect to checkout.
You can add multiple items to the checkout process and set a quantity for each one. Then you'll want to set redirect URLs for successful payments and canceled payments. If Stripe is unable to redirect the user at all, it will throw an error object. So if we get an error, we'll just go ahead and show an alert message for now.
billing
And now we just need a UI element for the user to trigger the checkout process. So we'll go down here to the template and add a button that fires this method when clicked.
And it's also worth noting that when you're working with the mounts and stripe, they're based on a currency's lowest denomination. So an amount of 1,999 would be $19 at 99¢ in US dollars. So you'll probably want to divide the amount by 100 when showing that in your front end UI.
billing
Auth. And now we can use this product component somewhere else in the application. So we'll go into the app component and then declare the product there, then pass in the props like the SKU and the amount that we want to use for this product.
And now we can run npm run dev to serve the app locally. Auth. When you click the checkout button, it should redirect the user to the checkout page with your specific product details. After a payment is submitted, you'll be able to see it on the Stripe dashboard. Customer, but now we need to do our part to fulfill the product.
billing
When the payment intent has succeeded, Stripe will instantly send a webhook to a URL that we specify. Auth. The URL can point to an HTTP Cloud Function that will then handle the data for that payment intent and then fulfill the product for the user. So to get started on the back end, we'll need to initialize Firebase Cloud Functions by running Firebase Net Functions from the command line, and I'll be using TypeScript in this project. From there, we'll CD into the functions directory, and I'll be using Express JS, CORS, and also the Stripe SDK. And then we'll also want to install types for Stripe and CORS.
This will give us IntelliSense for the entire Stripe API, which is incredibly useful when building a payment system on the back end. Now, one minor thing we need to do for TypeScript is go into the ts config and use the esnextlib. Now, in the index ts file, we'll start by initializing on Stripe by first importing it and then passing it the secret API key from the Stripe dashboard.
programming
You can see I've just hard coded it to the source code here, but it's generally a better idea to save it as an environment variable in your Firebase project. From there, I'm going to create an Express JS app so we can create multiple API endpoints with a single cloud function. This is technically optional, but if you have a lot of different payment endpoints on your back end, it generally helps to use some sort of HTTP framework to help you manage that complexity.
Or in the full Stripe course, we use something called callable functions, which integrate with the Firebase SDK on front end to simplify both the front end and back end code, but it's beyond the scope of this video. From there, we'll create a post endpoint for our webhook. Auth.
programming
And inside this hook, the first thing we'll wanna do is validate that it actually came from Stripe and not from some random hacker on the web. We can do that by looking for a Stripe signature header. And then we can use a value called the endpoint secret to decode the data that was in that request or webhook sent from Stripe. The Stripe SDK has a special method called webhooks construct event. That takes the body of the request, the Stripe signature, and the endpoint secret, and combines them all together into some JSON that we can actually use in our code. Auth now the one thing we're missing is the actual secret key for this webhook. Head over to the Stripe dashboard and create a new webhook.
Auth. The URL should be the actual location that you've deployed your Firebase function to, which in our case would be our main function's URL followed by payments slash webhook. Auth. Then for this demo, the actual webhook that you wanna listen to is paymentintent.succeeded. And you can also look at the paymentintent payment failed as well. Now once you've created that webhook, go ahead and grab the secret code and then paste it into your Firebase project. And, again, that would be better as a Firebase environment variable.
internet
From there, we can simply set up a switch statement to handle the type of webhook that was sent. I'm going to leave the code implementation details up to your auth imagination here, but you would most likely update the Firestore database or send an email to a customer or something along those lines.
It's entirely dependent on the business logic of your app and the product that you sell. Then if the payment failed, you may want to send the customer an email saying you have an open invoice and here is where to pay it. And you now have a full stack payment solution with Stripe, Node. Js, and Svelte. Nice. But the main drawback of Stripe at checkout is that it offers very few options to customize the user experience. So I want to finish off this video by giving you a rundown of how to use the payment intense authenti along with Stripe Elements to not only handle custom payments, but also to handle the 3 d secure authentication process if it's necessary.
customer support
billing
customers
purchasing
banking
In the Svelte app, you can see here that we enter some card details, and then if it needs to go through 3 d Secure, Stripe will automatically bring up that 3 d Secure process in your app's page. So the user never really leaves your app to finish their payment. Now, there's a lot more code involved in this process, and we're not going to go through it line by line. Instead, we'll look at the implementation of 5 different steps that you need to take to handle payment intents with Stripe Elements. Step 1 is to create a payment intent on the back end when the user signifies an intention to pay you money. When that happens, you make a request to your back end for a payment intent object, which you can create with the Stripe SDK. It takes an amount, currency, and some additional optional parameters as well. In your front end code, you'll need to make a request to this endpoint.
billing
Auth in the Svelte app, we'll handle that with the on mount life cycle hook, although you should only create 1 payment intent per user session. In our case, we can request the payment intent using the browser fetch API and then take the response and set it as the payment intent property on the Svelte component. Auth that returns the payment intent from our server, which contains an important value called the client secret. Once we have the client secret, we can then move on to the 3rd step, which is collecting the user's credit card information and building the actual credit card form. Stripe Elements provides prebuilt widgets that we can use to validate credit card details on the front end. All we have to do is grab a dom element with Swelt, and then we'll mount the Stripe card on that element.
From there, we move on to step number 4, which is to process the payment, and that happens entirely on Stripe's server, not your own server. You do that by calling handle card payment and it takes the client's secret that you return from your own server along with the card element where the user entered their card details here on the front end. Its return value is an updated payment intent with any charges that have been added to that intent. So it takes the payment intent you created on your back end, the card details the user entered on the front end, and turns that into an actual charge that you can fulfill. At that point, you can show the user a confirmation in the UI, and then you should actually fulfill the purchase by running a webhook just like we did with the previous example. So I'm gonna go ahead and wrap things up there. I hope that gave you an idea of how to work with Stripe Checkout and the payment intense API. And if you're serious about integrating payments into your progressive web app, Consider becoming a pro member at FireShip IO to get access to the full course. Thanks for watching, and I will talk to you soon. Oh, I I like money.
billing
finance
internet
customer support
customers
2019 has been an important year for the way developers handle online payments. In September, banks in the EU started rolling out strong customer authentication. This means that if you have customers in the EU, they may need to log in to their bank's website to authorize a payment before it can be processed. In today's video, we'll look at 2 different strategies you can use with Stripe to accept payments in your app, both of which are fully compatible with this 3 d secure process. If you're new here, like and subscribe, Drive, and check out the Stripe Payments Master Course for everything you need to know about building a payment system. In today's video, we'll be looking at how to handle one time payments. The easy way to get paid is with Stripe Checkout. It can be implemented with 0 back end code, but has limited options for customization. When we're done with that, we'll look at a more complex approach that combines Stripe elements with the payment intense API, and that will give us full control over the payment flow and user experience. To get started, you'll need have a Stripe account, and then you'll also want some kind of Node. Js back end. We'll be using Firebase Cloud Functions for this video, but feel free to use any Node back end that you want. In the front end application, we just have a single product and that is the only product that the user can buy. When they click the purchase button, it will bring up the Stripe checkout UI. This is a checkout flow that is completely handled by Stripe. That means you don't have to handle any of the UI coding yourself. Stripe will validate the credit card and process the payment all inside of this checkout page. And it also handles the 3 d secured authentication process for customers in Europe. If the user does not complete this process by signing in to their bank and authorizing the charge. The payment will not go through. When the payment is complete, you can specify a redirect URL, and Stripe will redirect the user to a access page along with the ID of the session so you can retrieve it if necessary. And if the payment is unsuccessful or if the user cancels, you can go to a separate URL. Once you've received a payment from a user, you then need to think about how you'll actually fulfill their purchase, and this is entirely dependent on how your business operates. One option is to just go into the Stripe dashboard and do all that stuff manually. But we're developers, so we want to do everything programmatically. And the way you do that with Stripe checkout is with a webhook. When the checkout process has been completed successfully, Stripe can send a webhook with some data to your back end server. Auth. So that means that you need to have a server that's accessible over HTTP, which is very easy to do and a perfect use case for Firebase Cloud Functions. When your Cloud Function receives the webhook, it will contain data about the payment intent. And you can use that data to implement some logic that updates your database or maybe sends an email to the user or something along those lines. What's amazing about Stripe checkout is that we can build a payment system without writing a single line of back end code. To get started, you'll first need a Stripe account. Head over to the Stripe dashboard, and then make sure to flip the switch for development mode. Under API keys, you'll see a publishable key. Auth. This key is perfectly safe to use in your front end code. However, you should never use the secret key in your front end code. We'll come back here to retrieve the secret key when we set up our webhook on Firebase Cloud Functions. Now at this point, you should know that there are 2 different ways you can use Stripe Checkout. The easiest approach is to use the client only integration. To use this approach, we need to go into the products tab and create some details about a product that we wanna sell. One of the big limitations with this approach is that we can't calculate our pricing dynamically. All the data is static based on the values that we enter here in the dashboard. If you have dynamic pricing or maybe you offer discounts on a per user basis, auth this. You'll likely want to generate your checkout sessions on a server. That allows you to generate products and their pricing based on your own internal logic, so you're not dependent on the products here in the dashboard. We look at how to do that in the full course, but for this simple use case, we'll just stick with the client only integration. After you've created a product, go ahead and add a SKU to it and then copy that SKU ID. From there, we'll go ahead and open up a terminal session and use npx to create a new Svelte app. Then inside the source directory, I'll create a component called product dot Svelte. Now in order to run the checkout process, we need to include Stripe JS in this project. Instead of installing Stripe with npm, we want to include a script tag in the head of the document. So head into the public folder to the index HTML and add Stripe JS there. This ensures that you always have the latest version of Stripe. Js and also allows Stripe to perform things like fraud detection in the background. From there, we can go into our product component, and the first thing we'll wanna do is initialize the Stripe SDK. By including the script tag, we get a global namespace of Stripe, which we can initialize by passing it the publishable key from the Stripe dashboard. And that is how Stripe identifies our account. Next, we'll declare a few props for the product name, image, and SKU. Now, if we want to redirect the user to the checkout process, all we have to do is set up an async function, and then we'll await Stripe redirect to checkout. You can add multiple items to the checkout process and set a quantity for each one. Then you'll want to set redirect URLs for successful payments and canceled payments. If Stripe is unable to redirect the user at all, it will throw an error object. So if we get an error, we'll just go ahead and show an alert message for now. And now we just need a UI element for the user to trigger the checkout process. So we'll go down here to the template and add a button that fires this method when clicked. And it's also worth noting that when you're working with the mounts and stripe, they're based on a currency's lowest denomination. So an amount of 1,999 would be $19 at 99¢ in US dollars. So you'll probably want to divide the amount by 100 when showing that in your front end UI. Auth. And now we can use this product component somewhere else in the application. So we'll go into the app component and then declare the product there, then pass in the props like the SKU and the amount that we want to use for this product. And now we can run npm run dev to serve the app locally. Auth. When you click the checkout button, it should redirect the user to the checkout page with your specific product details. After a payment is submitted, you'll be able to see it on the Stripe dashboard. Customer, but now we need to do our part to fulfill the product. When the payment intent has succeeded, Stripe will instantly send a webhook to a URL that we specify. Auth. The URL can point to an HTTP Cloud Function that will then handle the data for that payment intent and then fulfill the product for the user. So to get started on the back end, we'll need to initialize Firebase Cloud Functions by running Firebase Net Functions from the command line, and I'll be using TypeScript in this project. From there, we'll CD into the functions directory, and I'll be using Express JS, CORS, and also the Stripe SDK. And then we'll also want to install types for Stripe and CORS. This will give us IntelliSense for the entire Stripe API, which is incredibly useful when building a payment system on the back end. Now, one minor thing we need to do for TypeScript is go into the ts config and use the esnextlib. Now, in the index ts file, we'll start by initializing on Stripe by first importing it and then passing it the secret API key from the Stripe dashboard. You can see I've just hard coded it to the source code here, but it's generally a better idea to save it as an environment variable in your Firebase project. From there, I'm going to create an Express JS app so we can create multiple API endpoints with a single cloud function. This is technically optional, but if you have a lot of different payment endpoints on your back end, it generally helps to use some sort of HTTP framework to help you manage that complexity. Or in the full Stripe course, we use something called callable functions, which integrate with the Firebase SDK on front end to simplify both the front end and back end code, but it's beyond the scope of this video. From there, we'll create a post endpoint for our webhook. Auth. And inside this hook, the first thing we'll wanna do is validate that it actually came from Stripe and not from some random hacker on the web. We can do that by looking for a Stripe signature header. And then we can use a value called the endpoint secret to decode the data that was in that request or webhook sent from Stripe. The Stripe SDK has a special method called webhooks construct event. That takes the body of the request, the Stripe signature, and the endpoint secret, and combines them all together into some JSON that we can actually use in our code. Auth now the one thing we're missing is the actual secret key for this webhook. Head over to the Stripe dashboard and create a new webhook. Auth. The URL should be the actual location that you've deployed your Firebase function to, which in our case would be our main function's URL followed by payments slash webhook. Auth. Then for this demo, the actual webhook that you wanna listen to is paymentintent.succeeded. And you can also look at the paymentintent payment failed as well. Now once you've created that webhook, go ahead and grab the secret code and then paste it into your Firebase project. And, again, that would be better as a Firebase environment variable. From there, we can simply set up a switch statement to handle the type of webhook that was sent. I'm going to leave the code implementation details up to your auth imagination here, but you would most likely update the Firestore database or send an email to a customer or something along those lines. It's entirely dependent on the business logic of your app and the product that you sell. Then if the payment failed, you may want to send the customer an email saying you have an open invoice and here is where to pay it. And you now have a full stack payment solution with Stripe, Node. Js, and Svelte. Nice. But the main drawback of Stripe at checkout is that it offers very few options to customize the user experience. So I want to finish off this video by giving you a rundown of how to use the payment intense authenti along with Stripe Elements to not only handle custom payments, but also to handle the 3 d secure authentication process if it's necessary. In the Svelte app, you can see here that we enter some card details, and then if it needs to go through 3 d Secure, Stripe will automatically bring up that 3 d Secure process in your app's page. So the user never really leaves your app to finish their payment. Now, there's a lot more code involved in this process, and we're not going to go through it line by line. Instead, we'll look at the implementation of 5 different steps that you need to take to handle payment intents with Stripe Elements. Step 1 is to create a payment intent on the back end when the user signifies an intention to pay you money. When that happens, you make a request to your back end for a payment intent object, which you can create with the Stripe SDK. It takes an amount, currency, and some additional optional parameters as well. In your front end code, you'll need to make a request to this endpoint. Auth in the Svelte app, we'll handle that with the on mount life cycle hook, although you should only create 1 payment intent per user session. In our case, we can request the payment intent using the browser fetch API and then take the response and set it as the payment intent property on the Svelte component. Auth that returns the payment intent from our server, which contains an important value called the client secret. Once we have the client secret, we can then move on to the 3rd step, which is collecting the user's credit card information and building the actual credit card form. Stripe Elements provides prebuilt widgets that we can use to validate credit card details on the front end. All we have to do is grab a dom element with Swelt, and then we'll mount the Stripe card on that element. From there, we move on to step number 4, which is to process the payment, and that happens entirely on Stripe's server, not your own server. You do that by calling handle card payment and it takes the client's secret that you return from your own server along with the card element where the user entered their card details here on the front end. Its return value is an updated payment intent with any charges that have been added to that intent. So it takes the payment intent you created on your back end, the card details the user entered on the front end, and turns that into an actual charge that you can fulfill. At that point, you can show the user a confirmation in the UI, and then you should actually fulfill the purchase by running a webhook just like we did with the previous example. So I'm gonna go ahead and wrap things up there. I hope that gave you an idea of how to work with Stripe Checkout and the payment intense API. And if you're serious about integrating payments into your progressive web app, Consider becoming a pro member at FireShip IO to get access to the full course. Thanks for watching, and I will talk to you soon. Oh, I I like money.
2019
2019
has
has
been
been
an
an
important
important
year
year
for
for
the
the
way
way
developers
developers
handle
handle
online
online
payments.
payments
In
in
September,
september
banks
banks
in
in
the
the
EU
eu
started
started
rolling
rolling
out
out
strong
strong
customer
customer
authentication.
authentication
This
this
means
means
that
that
if
if
you
you
have
have
customers
customers
in
in
the
the
EU,
eu
they
they
may
may
need
need
to
to
log
log
in
in
to
to
their
their
bank's
bank's
website
website
to
to
authorize
authorize
a
a
payment
payment
before
before
it
it
can
can
be
be
processed.
processed
In
in
today's
today's
video,
video
we'll
we'll
look
look
at
at
2
2
different
different
strategies
strategies
you
you
can
can
use
use
with
with
Stripe
stripe
to
to
accept
accept
payments
payments
in
in
your
your
app,
app
both
both
of
of
which
which
are
are
fully
fully
compatible
compatible
with
with
this
this
3
3
d
d
secure
secure
process.
process
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
Drive,
drive
and
and
check
check
out
out
the
the
Stripe
stripe
Payments
payments
Master
master
Course
course
for
for
everything
everything
you
you
need
need
to
to
know
know
about
about
building
building
a
a
payment
payment
system.
system
In
in
today's
today's
video,
video
we'll
we'll
be
be
looking
looking
at
at
how
how
to
to
handle
handle
one
one
time
time
payments.
payments
The
the
easy
easy
way
way
to
to
get
get
paid
paid
is
is
with
with
Stripe
stripe
Checkout.
checkout
It
it
can
can
be
be
implemented
implemented
with
with
0
0
back
back
end
end
code,
code
but
but
has
has
limited
limited
options
options
for
for
customization.
customization
When
when
we're
we're
done
done
with
with
that,
that
we'll
we'll
look
look
at
at
a
a
more
more
complex
complex
approach
approach
that
that
combines
combines
Stripe
stripe
elements
elements
with
with
the
the
payment
payment
intense
intense
API,
api
and
and
that
that
will
will
give
give
us
us
full
full
control
control
over
over
the
the
payment
payment
flow
flow
and
and
user
user
experience.
experience
To
to
get
get
started,
started
you'll
you'll
need
need
have
have
a
a
Stripe
stripe
account,
account
and
and
then
then
you'll
you'll
also
also
want
want
some
some
kind
kind
of
of
Node.
node
Js
js
back
back
end.
end
We'll
we'll
be
be
using
using
Firebase
firebase
Cloud
cloud
Functions
functions
for
for
this
this
video,
video
but
but
feel
feel
free
free
to
to
use
use
any
any
Node
node
back
back
end
end
that
that
you
you
want.
want
In
in
the
the
front
front
end
end
application,
application
we
we
just
just
have
have
a
a
single
single
product
product
and
and
that
that
is
is
the
the
only
only
product
product
that
that
the
the
user
user
can
can
buy.
buy
When
when
they
they
click
click
the
the
purchase
purchase
button,
button
it
it
will
will
bring
bring
up
up
the
the
Stripe
stripe
checkout
checkout
UI.
ui
This
this
is
is
a
a
checkout
checkout
flow
flow
that
that
is
is
completely
completely
handled
handled
by
by
Stripe.
stripe
That
that
means
means
you
you
don't
don't
have
have
to
to
handle
handle
any
any
of
of
the
the
UI
ui
coding
coding
yourself.
yourself
Stripe
stripe
will
will
validate
validate
the
the
credit
credit
card
card
and
and
process
process
the
the
payment
payment
all
all
inside
inside
of
of
this
this
checkout
checkout
page.
page
And
and
it
it
also
also
handles
handles
the
the
3
3
d
d
secured
secured
authentication
authentication
process
process
for
for
customers
customers
in
in
Europe.
europe
If
if
the
the
user
user
does
does
not
not
complete
complete
this
this
process
process
by
by
signing
signing
in
in
to
to
their
their
bank
bank
and
and
authorizing
authorizing
the
the
charge.
charge
The
the
payment
payment
will
will
not
not
go
go
through.
through
When
when
the
the
payment
payment
is
is
complete,
complete
you
you
can
can
specify
specify
a
a
redirect
redirect
URL,
url
and
and
Stripe
stripe
will
will
redirect
redirect
the
the
user
user
to
to
a
a
access
access
page
page
along
along
with
with
the
the
ID
id
of
of
the
the
session
session
so
so
you
you
can
can
retrieve
retrieve
it
it
if
if
necessary.
necessary
And
and
if
if
the
the
payment
payment
is
is
unsuccessful
unsuccessful
or
or
if
if
the
the
user
user
cancels,
cancels
you
you
can
can
go
go
to
to
a
a
separate
separate
URL.
url
Once
once
you've
you've
received
received
a
a
payment
payment
from
from
a
a
user,
user
you
you
then
then
need
need
to
to
think
think
about
about
how
how
you'll
you'll
actually
actually
fulfill
fulfill
their
their
purchase,
purchase
and
and
this
this
is
is
entirely
entirely
dependent
dependent
on
on
how
how
your
your
business
business
operates.
operates
One
one
option
option
is
is
to
to
just
just
go
go
into
into
the
the
Stripe
stripe
dashboard
dashboard
and
and
do
do
all
all
that
that
stuff
stuff
manually.
manually
But
but
we're
we're
developers,
developers
so
so
we
we
want
want
to
to
do
do
everything
everything
programmatically.
programmatically
And
and
the
the
way
way
you
you
do
do
that
that
with
with
Stripe
stripe
checkout
checkout
is
is
with
with
a
a
webhook.
webhook
When
when
the
the
checkout
checkout
process
process
has
has
been
been
completed
completed
successfully,
successfully
Stripe
stripe
can
can
send
send
a
a
webhook
webhook
with
with
some
some
data
data
to
to
your
your
back
back
end
end
server.
server
Auth.
auth
So
so
that
that
means
means
that
that
you
you
need
need
to
to
have
have
a
a
server
server
that's
that's
accessible
accessible
over
over
HTTP,
http
which
which
is
is
very
very
easy
easy
to
to
do
do
and
and
a
a
perfect
perfect
use
use
case
case
for
for
Firebase
firebase
Cloud
cloud
Functions.
functions
When
when
your
your
Cloud
cloud
Function
function
receives
receives
the
the
webhook,
webhook
it
it
will
will
contain
contain
data
data
about
about
the
the
payment
payment
intent.
intent
And
and
you
you
can
can
use
use
that
that
data
data
to
to
implement
implement
some
some
logic
logic
that
that
updates
updates
your
your
database
database
or
or
maybe
maybe
sends
sends
an
an
email
email
to
to
the
the
user
user
or
or
something
something
along
along
those
those
lines.
lines
What's
what's
amazing
amazing
about
about
Stripe
stripe
checkout
checkout
is
is
that
that
we
we
can
can
build
build
a
a
payment
payment
system
system
without
without
writing
writing
a
a
single
single
line
line
of
of
back
back
end
end
code.
code
To
to
get
get
started,
started
you'll
you'll
first
first
need
need
a
a
Stripe
stripe
account.
account
Head
head
over
over
to
to
the
the
Stripe
stripe
dashboard,
dashboard
and
and
then
then
make
make
sure
sure
to
to
flip
flip
the
the
switch
switch
for
for
development
development
mode.
mode
Under
under
API
api
keys,
keys
you'll
you'll
see
see
a
a
publishable
publishable
key.
key
Auth.
auth
This
this
key
key
is
is
perfectly
perfectly
safe
safe
to
to
use
use
in
in
your
your
front
front
end
end
code.
code
However,
however
you
you
should
should
never
never
use
use
the
the
secret
secret
key
key
in
in
your
your
front
front
end
end
code.
code
We'll
we'll
come
come
back
back
here
here
to
to
retrieve
retrieve
the
the
secret
secret
key
key
when
when
we
we
set
set
up
up
our
our
webhook
webhook
on
on
Firebase
firebase
Cloud
cloud
Functions.
functions
Now
now
at
at
this
this
point,
point
you
you
should
should
know
know
that
that
there
there
are
are
2
2
different
different
ways
ways
you
you
can
can
use
use
Stripe
stripe
Checkout.
checkout
The
the
easiest
easiest
approach
approach
is
is
to
to
use
use
the
the
client
client
only
only
integration.
integration
To
to
use
use
this
this
approach,
approach
we
we
need
need
to
to
go
go
into
into
the
the
products
products
tab
tab
and
and
create
create
some
some
details
details
about
about
a
a
product
product
that
that
we
we
wanna
wanna
sell.
sell
One
one
of
of
the
the
big
big
limitations
limitations
with
with
this
this
approach
approach
is
is
that
that
we
we
can't
can't
calculate
calculate
our
our
pricing
pricing
dynamically.
dynamically
All
all
the
the
data
data
is
is
static
static
based
based
on
on
the
the
values
values
that
that
we
we
enter
enter
here
here
in
in
the
the
dashboard.
dashboard
If
if
you
you
have
have
dynamic
dynamic
pricing
pricing
or
or
maybe
maybe
you
you
offer
offer
discounts
discounts
on
on
a
a
per
per
user
user
basis,
basis
auth
auth
this.
this
You'll
you'll
likely
likely
want
want
to
to
generate
generate
your
your
checkout
checkout
sessions
sessions
on
on
a
a
server.
server
That
that
allows
allows
you
you
to
to
generate
generate
products
products
and
and
their
their
pricing
pricing
based
based
on
on
your
your
own
own
internal
internal
logic,
logic
so
so
you're
you're
not
not
dependent
dependent
on
on
the
the
products
products
here
here
in
in
the
the
dashboard.
dashboard
We
we
look
look
at
at
how
how
to
to
do
do
that
that
in
in
the
the
full
full
course,
course
but
but
for
for
this
this
simple
simple
use
use
case,
case
we'll
we'll
just
just
stick
stick
with
with
the
the
client
client
only
only
integration.
integration
After
after
you've
you've
created
created
a
a
product,
product
go
go
ahead
ahead
and
and
add
add
a
a
SKU
sku
to
to
it
it
and
and
then
then
copy
copy
that
that
SKU
sku
ID.
id
From
from
there,
there
we'll
we'll
go
go
ahead
ahead
and
and
open
open
up
up
a
a
terminal
terminal
session
session
and
and
use
use
npx
npx
to
to
create
create
a
a
new
new
Svelte
svelte
app.
app
Then
then
inside
inside
the
the
source
source
directory,
directory
I'll
i'll
create
create
a
a
component
component
called
called
product
product
dot
dot
Svelte.
svelte
Now
now
in
in
order
order
to
to
run
run
the
the
checkout
checkout
process,
process
we
we
need
need
to
to
include
include
Stripe
stripe
JS
js
in
in
this
this
project.
project
Instead
instead
of
of
installing
installing
Stripe
stripe
with
with
npm,
npm
we
we
want
want
to
to
include
include
a
a
script
script
tag
tag
in
in
the
the
head
head
of
of
the
the
document.
document
So
so
head
head
into
into
the
the
public
public
folder
folder
to
to
the
the
index
index
HTML
html
and
and
add
add
Stripe
stripe
JS
js
there.
there
This
this
ensures
ensures
that
that
you
you
always
always
have
have
the
the
latest
latest
version
version
of
of
Stripe.
stripe
Js
js
and
and
also
also
allows
allows
Stripe
stripe
to
to
perform
perform
things
things
like
like
fraud
fraud
detection
detection
in
in
the
the
background.
background
From
from
there,
there
we
we
can
can
go
go
into
into
our
our
product
product
component,
component
and
and
the
the
first
first
thing
thing
we'll
we'll
wanna
wanna
do
do
is
is
initialize
initialize
the
the
Stripe
stripe
SDK.
sdk
By
by
including
including
the
the
script
script
tag,
tag
we
we
get
get
a
a
global
global
namespace
namespace
of
of
Stripe,
stripe
which
which
we
we
can
can
initialize
initialize
by
by
passing
passing
it
it
the
the
publishable
publishable
key
key
from
from
the
the
Stripe
stripe
dashboard.
dashboard
And
and
that
that
is
is
how
how
Stripe
stripe
identifies
identifies
our
our
account.
account
Next,
next
we'll
we'll
declare
declare
a
a
few
few
props
props
for
for
the
the
product
product
name,
name
image,
image
and
and
SKU.
sku
Now,
now
if
if
we
we
want
want
to
to
redirect
redirect
the
the
user
user
to
to
the
the
checkout
checkout
process,
process
all
all
we
we
have
have
to
to
do
do
is
is
set
set
up
up
an
an
async
async
function,
function
and
and
then
then
we'll
we'll
await
await
Stripe
stripe
redirect
redirect
to
to
checkout.
checkout
You
you
can
can
add
add
multiple
multiple
items
items
to
to
the
the
checkout
checkout
process
process
and
and
set
set
a
a
quantity
quantity
for
for
each
each
one.
one
Then
then
you'll
you'll
want
want
to
to
set
set
redirect
redirect
URLs
urls
for
for
successful
successful
payments
payments
and
and
canceled
canceled
payments.
payments
If
if
Stripe
stripe
is
is
unable
unable
to
to
redirect
redirect
the
the
user
user
at
at
all,
all
it
it
will
will
throw
throw
an
an
error
error
object.
object
So
so
if
if
we
we
get
get
an
an
error,
error
we'll
we'll
just
just
go
go
ahead
ahead
and
and
show
show
an
an
alert
alert
message
message
for
for
now.
now
And
and
now
now
we
we
just
just
need
need
a
a
UI
ui
element
element
for
for
the
the
user
user
to
to
trigger
trigger
the
the
checkout
checkout
process.
process
So
so
we'll
we'll
go
go
down
down
here
here
to
to
the
the
template
template
and
and
add
add
a
a
button
button
that
that
fires
fires
this
this
method
method
when
when
clicked.
clicked
And
and
it's
it's
also
also
worth
worth
noting
noting
that
that
when
when
you're
you're
working
working
with
with
the
the
mounts
mounts
and
and
stripe,
stripe
they're
they're
based
based
on
on
a
a
currency's
currency's
lowest
lowest
denomination.
denomination
So
so
an
an
amount
amount
of
of
1,999
1,999
would
would
be
be
$19
$19
at
at
99¢
99¢
in
in
US
us
dollars.
dollars
So
so
you'll
you'll
probably
probably
want
want
to
to
divide
divide
the
the
amount
amount
by
by
100
100
when
when
showing
showing
that
that
in
in
your
your
front
front
end
end
UI.
ui
Auth.
auth
And
and
now
now
we
we
can
can
use
use
this
this
product
product
component
component
somewhere
somewhere
else
else
in
in
the
the
application.
application
So
so
we'll
we'll
go
go
into
into
the
the
app
app
component
component
and
and
then
then
declare
declare
the
the
product
product
there,
there
then
then
pass
pass
in
in
the
the
props
props
like
like
the
the
SKU
sku
and
and
the
the
amount
amount
that
that
we
we
want
want
to
to
use
use
for
for
this
this
product.
product
And
and
now
now
we
we
can
can
run
run
npm
npm
run
run
dev
dev
to
to
serve
serve
the
the
app
app
locally.
locally
Auth.
auth
When
when
you
you
click
click
the
the
checkout
checkout
button,
button
it
it
should
should
redirect
redirect
the
the
user
user
to
to
the
the
checkout
checkout
page
page
with
with
your
your
specific
specific
product
product
details.
details
After
after
a
a
payment
payment
is
is
submitted,
submitted
you'll
you'll
be
be
able
able
to
to
see
see
it
it
on
on
the
the
Stripe
stripe
dashboard.
dashboard
Customer,
customer
but
but
now
now
we
we
need
need
to
to
do
do
our
our
part
part
to
to
fulfill
fulfill
the
the
product.
product
When
when
the
the
payment
payment
intent
intent
has
has
succeeded,
succeeded
Stripe
stripe
will
will
instantly
instantly
send
send
a
a
webhook
webhook
to
to
a
a
URL
url
that
that
we
we
specify.
specify
Auth.
auth
The
the
URL
url
can
can
point
point
to
to
an
an
HTTP
http
Cloud
cloud
Function
function
that
that
will
will
then
then
handle
handle
the
the
data
data
for
for
that
that
payment
payment
intent
intent
and
and
then
then
fulfill
fulfill
the
the
product
product
for
for
the
the
user.
user
So
so
to
to
get
get
started
started
on
on
the
the
back
back
end,
end
we'll
we'll
need
need
to
to
initialize
initialize
Firebase
firebase
Cloud
cloud
Functions
functions
by
by
running
running
Firebase
firebase
Net
net
Functions
functions
from
from
the
the
command
command
line,
line
and
and
I'll
i'll
be
be
using
using
TypeScript
typescript
in
in
this
this
project.
project
From
from
there,
there
we'll
we'll
CD
cd
into
into
the
the
functions
functions
directory,
directory
and
and
I'll
i'll
be
be
using
using
Express
express
JS,
js
CORS,
cors
and
and
also
also
the
the
Stripe
stripe
SDK.
sdk
And
and
then
then
we'll
we'll
also
also
want
want
to
to
install
install
types
types
for
for
Stripe
stripe
and
and
CORS.
cors
This
this
will
will
give
give
us
us
IntelliSense
intellisense
for
for
the
the
entire
entire
Stripe
stripe
API,
api
which
which
is
is
incredibly
incredibly
useful
useful
when
when
building
building
a
a
payment
payment
system
system
on
on
the
the
back
back
end.
end
Now,
now
one
one
minor
minor
thing
thing
we
we
need
need
to
to
do
do
for
for
TypeScript
typescript
is
is
go
go
into
into
the
the
ts
ts
config
config
and
and
use
use
the
the
esnextlib.
esnextlib
Now,
now
in
in
the
the
index
index
ts
ts
file,
file
we'll
we'll
start
start
by
by
initializing
initializing
on
on
Stripe
stripe
by
by
first
first
importing
importing
it
it
and
and
then
then
passing
passing
it
it
the
the
secret
secret
API
api
key
key
from
from
the
the
Stripe
stripe
dashboard.
dashboard
You
you
can
can
see
see
I've
i've
just
just
hard
hard
coded
coded
it
it
to
to
the
the
source
source
code
code
here,
here
but
but
it's
it's
generally
generally
a
a
better
better
idea
idea
to
to
save
save
it
it
as
as
an
an
environment
environment
variable
variable
in
in
your
your
Firebase
firebase
project.
project
From
from
there,
there
I'm
i'm
going
going
to
to
create
create
an
an
Express
express
JS
js
app
app
so
so
we
we
can
can
create
create
multiple
multiple
API
api
endpoints
endpoints
with
with
a
a
single
single
cloud
cloud
function.
function
This
this
is
is
technically
technically
optional,
optional
but
but
if
if
you
you
have
have
a
a
lot
lot
of
of
different
different
payment
payment
endpoints
endpoints
on
on
your
your
back
back
end,
end
it
it
generally
generally
helps
helps
to
to
use
use
some
some
sort
sort
of
of
HTTP
http
framework
framework
to
to
help
help
you
you
manage
manage
that
that
complexity.
complexity
Or
or
in
in
the
the
full
full
Stripe
stripe
course,
course
we
we
use
use
something
something
called
called
callable
callable
functions,
functions
which
which
integrate
integrate
with
with
the
the
Firebase
firebase
SDK
sdk
on
on
front
front
end
end
to
to
simplify
simplify
both
both
the
the
front
front
end
end
and
and
back
back
end
end
code,
code
but
but
it's
it's
beyond
beyond
the
the
scope
scope
of
of
this
this
video.
video
From
from
there,
there
we'll
we'll
create
create
a
a
post
post
endpoint
endpoint
for
for
our
our
webhook.
webhook
Auth.
auth
And
and
inside
inside
this
this
hook,
hook
the
the
first
first
thing
thing
we'll
we'll
wanna
wanna
do
do
is
is
validate
validate
that
that
it
it
actually
actually
came
came
from
from
Stripe
stripe
and
and
not
not
from
from
some
some
random
random
hacker
hacker
on
on
the
the
web.
web
We
we
can
can
do
do
that
that
by
by
looking
looking
for
for
a
a
Stripe
stripe
signature
signature
header.
header
And
and
then
then
we
we
can
can
use
use
a
a
value
value
called
called
the
the
endpoint
endpoint
secret
secret
to
to
decode
decode
the
the
data
data
that
that
was
was
in
in
that
that
request
request
or
or
webhook
webhook
sent
sent
from
from
Stripe.
stripe
The
the
Stripe
stripe
SDK
sdk
has
has
a
a
special
special
method
method
called
called
webhooks
webhooks
construct
construct
event.
event
That
that
takes
takes
the
the
body
body
of
of
the
the
request,
request
the
the
Stripe
stripe
signature,
signature
and
and
the
the
endpoint
endpoint
secret,
secret
and
and
combines
combines
them
them
all
all
together
together
into
into
some
some
JSON
json
that
that
we
we
can
can
actually
actually
use
use
in
in
our
our
code.
code
Auth
auth
now
now
the
the
one
one
thing
thing
we're
we're
missing
missing
is
is
the
the
actual
actual
secret
secret
key
key
for
for
this
this
webhook.
webhook
Head
head
over
over
to
to
the
the
Stripe
stripe
dashboard
dashboard
and
and
create
create
a
a
new
new
webhook.
webhook
Auth.
auth
The
the
URL
url
should
should
be
be
the
the
actual
actual
location
location
that
that
you've
you've
deployed
deployed
your
your
Firebase
firebase
function
function
to,
to
which
which
in
in
our
our
case
case
would
would
be
be
our
our
main
main
function's
function's
URL
url
followed
followed
by
by
payments
payments
slash
slash
webhook.
webhook
Auth.
auth
Then
then
for
for
this
this
demo,
demo
the
the
actual
actual
webhook
webhook
that
that
you
you
wanna
wanna
listen
listen
to
to
is
is
paymentintent.succeeded.
paymentintent.succeeded
And
and
you
you
can
can
also
also
look
look
at
at
the
the
paymentintent
paymentintent
payment
payment
failed
failed
as
as
well.
well
Now
now
once
once
you've
you've
created
created
that
that
webhook,
webhook
go
go
ahead
ahead
and
and
grab
grab
the
the
secret
secret
code
code
and
and
then
then
paste
paste
it
it
into
into
your
your
Firebase
firebase
project.
project
And,
and
again,
again
that
that
would
would
be
be
better
better
as
as
a
a
Firebase
firebase
environment
environment
variable.
variable
From
from
there,
there
we
we
can
can
simply
simply
set
set
up
up
a
a
switch
switch
statement
statement
to
to
handle
handle
the
the
type
type
of
of
webhook
webhook
that
that
was
was
sent.
sent
I'm
i'm
going
going
to
to
leave
leave
the
the
code
code
implementation
implementation
details
details
up
up
to
to
your
your
auth
auth
imagination
imagination
here,
here
but
but
you
you
would
would
most
most
likely
likely
update
update
the
the
Firestore
firestore
database
database
or
or
send
send
an
an
email
email
to
to
a
a
customer
customer
or
or
something
something
along
along
those
those
lines.
lines
It's
it's
entirely
entirely
dependent
dependent
on
on
the
the
business
business
logic
logic
of
of
your
your
app
app
and
and
the
the
product
product
that
that
you
you
sell.
sell
Then
then
if
if
the
the
payment
payment
failed,
failed
you
you
may
may
want
want
to
to
send
send
the
the
customer
customer
an
an
email
email
saying
saying
you
you
have
have
an
an
open
open
invoice
invoice
and
and
here
here
is
is
where
where
to
to
pay
pay
it.
it
And
and
you
you
now
now
have
have
a
a
full
full
stack
stack
payment
payment
solution
solution
with
with
Stripe,
stripe
Node.
node
Js,
js
and
and
Svelte.
svelte
Nice.
nice
But
but
the
the
main
main
drawback
drawback
of
of
Stripe
stripe
at
at
checkout
checkout
is
is
that
that
it
it
offers
offers
very
very
few
few
options
options
to
to
customize
customize
the
the
user
user
experience.
experience
So
so
I
i
want
want
to
to
finish
finish
off
off
this
this
video
video
by
by
giving
giving
you
you
a
a
rundown
rundown
of
of
how
how
to
to
use
use
the
the
payment
payment
intense
intense
authenti
authenti
along
along
with
with
Stripe
stripe
Elements
elements
to
to
not
not
only
only
handle
handle
custom
custom
payments,
payments
but
but
also
also
to
to
handle
handle
the
the
3
3
d
d
secure
secure
authentication
authentication
process
process
if
if
it's
it's
necessary.
necessary
In
in
the
the
Svelte
svelte
app,
app
you
you
can
can
see
see
here
here
that
that
we
we
enter
enter
some
some
card
card
details,
details
and
and
then
then
if
if
it
it
needs
needs
to
to
go
go
through
through
3
3
d
d
Secure,
secure
Stripe
stripe
will
will
automatically
automatically
bring
bring
up
up
that
that
3
3
d
d
Secure
secure
process
process
in
in
your
your
app's
app's
page.
page
So
so
the
the
user
user
never
never
really
really
leaves
leaves
your
your
app
app
to
to
finish
finish
their
their
payment.
payment
Now,
now
there's
there's
a
a
lot
lot
more
more
code
code
involved
involved
in
in
this
this
process,
process
and
and
we're
we're
not
not
going
going
to
to
go
go
through
through
it
it
line
line
by
by
line.
line
Instead,
instead
we'll
we'll
look
look
at
at
the
the
implementation
implementation
of
of
5
5
different
different
steps
steps
that
that
you
you
need
need
to
to
take
take
to
to
handle
handle
payment
payment
intents
intents
with
with
Stripe
stripe
Elements.
elements
Step
step
1
1
is
is
to
to
create
create
a
a
payment
payment
intent
intent
on
on
the
the
back
back
end
end
when
when
the
the
user
user
signifies
signifies
an
an
intention
intention
to
to
pay
pay
you
you
money.
money
When
when
that
that
happens,
happens
you
you
make
make
a
a
request
request
to
to
your
your
back
back
end
end
for
for
a
a
payment
payment
intent
intent
object,
object
which
which
you
you
can
can
create
create
with
with
the
the
Stripe
stripe
SDK.
sdk
It
it
takes
takes
an
an
amount,
amount
currency,
currency
and
and
some
some
additional
additional
optional
optional
parameters
parameters
as
as
well.
well
In
in
your
your
front
front
end
end
code,
code
you'll
you'll
need
need
to
to
make
make
a
a
request
request
to
to
this
this
endpoint.
endpoint
Auth
auth
in
in
the
the
Svelte
svelte
app,
app
we'll
we'll
handle
handle
that
that
with
with
the
the
on
on
mount
mount
life
life
cycle
cycle
hook,
hook
although
although
you
you
should
should
only
only
create
create
1
1
payment
payment
intent
intent
per
per
user
user
session.
session
In
in
our
our
case,
case
we
we
can
can
request
request
the
the
payment
payment
intent
intent
using
using
the
the
browser
browser
fetch
fetch
API
api
and
and
then
then
take
take
the
the
response
response
and
and
set
set
it
it
as
as
the
the
payment
payment
intent
intent
property
property
on
on
the
the
Svelte
svelte
component.
component
Auth
auth
that
that
returns
returns
the
the
payment
payment
intent
intent
from
from
our
our
server,
server
which
which
contains
contains
an
an
important
important
value
value
called
called
the
the
client
client
secret.
secret
Once
once
we
we
have
have
the
the
client
client
secret,
secret
we
we
can
can
then
then
move
move
on
on
to
to
the
the
3rd
3rd
step,
step
which
which
is
is
collecting
collecting
the
the
user's
user's
credit
credit
card
card
information
information
and
and
building
building
the
the
actual
actual
credit
credit
card
card
form.
form
Stripe
stripe
Elements
elements
provides
provides
prebuilt
prebuilt
widgets
widgets
that
that
we
we
can
can
use
use
to
to
validate
validate
credit
credit
card
card
details
details
on
on
the
the
front
front
end.
end
All
all
we
we
have
have
to
to
do
do
is
is
grab
grab
a
a
dom
dom
element
element
with
with
Swelt,
swelt
and
and
then
then
we'll
we'll
mount
mount
the
the
Stripe
stripe
card
card
on
on
that
that
element.
element
From
from
there,
there
we
we
move
move
on
on
to
to
step
step
number
number
4,
4
which
which
is
is
to
to
process
process
the
the
payment,
payment
and
and
that
that
happens
happens
entirely
entirely
on
on
Stripe's
stripe's
server,
server
not
not
your
your
own
own
server.
server
You
you
do
do
that
that
by
by
calling
calling
handle
handle
card
card
payment
payment
and
and
it
it
takes
takes
the
the
client's
client's
secret
secret
that
that
you
you
return
return
from
from
your
your
own
own
server
server
along
along
with
with
the
the
card
card
element
element
where
where
the
the
user
user
entered
entered
their
their
card
card
details
details
here
here
on
on
the
the
front
front
end.
end
Its
its
return
return
value
value
is
is
an
an
updated
updated
payment
payment
intent
intent
with
with
any
any
charges
charges
that
that
have
have
been
been
added
added
to
to
that
that
intent.
intent
So
so
it
it
takes
takes
the
the
payment
payment
intent
intent
you
you
created
created
on
on
your
your
back
back
end,
end
the
the
card
card
details
details
the
the
user
user
entered
entered
on
on
the
the
front
front
end,
end
and
and
turns
turns
that
that
into
into
an
an
actual
actual
charge
charge
that
that
you
you
can
can
fulfill.
fulfill
At
at
that
that
point,
point
you
you
can
can
show
show
the
the
user
user
a
a
confirmation
confirmation
in
in
the
the
UI,
ui
and
and
then
then
you
you
should
should
actually
actually
fulfill
fulfill
the
the
purchase
purchase
by
by
running
running
a
a
webhook
webhook
just
just
like
like
we
we
did
did
with
with
the
the
previous
previous
example.
example
So
so
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
I
i
hope
hope
that
that
gave
gave
you
you
an
an
idea
idea
of
of
how
how
to
to
work
work
with
with
Stripe
stripe
Checkout
checkout
and
and
the
the
payment
payment
intense
intense
API.
api
And
and
if
if
you're
you're
serious
serious
about
about
integrating
integrating
payments
payments
into
into
your
your
progressive
progressive
web
web
app,
app
Consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
IO
io
to
to
get
get
access
access
to
to
the
the
full
full
course.
course
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
Oh,
oh
I
i
I
i
like
like
money.
money
success
The Stripe Payments Master Course discusses two strategies for handling one-time payments through Stripe, including using Stripe Checkout and a webhook. The process involves setting up a payment process within the checkout flow, creating a dynamic pricing environment, and using TypeScript and Stripe SDK. The speaker provides instructions on how to use Stripe in the full course and suggests becoming a pro member to access the full payment process.
Stripe Payments Basics -  Including New 3D Secure Requirements for EU Customers
2019 has been an important year for the way developers handle online payments. In September, banks in the EU started rolling out strong customer authentication. This means that if you have customers in the EU, they may need to log in to their bank's website to authorize a payment before it can be processed. In today's video, we'll look at 2 different strategies you can use with Stripe to accept payments in your app, both of which are fully compatible with this 3 d secure process. If you're new here, like and subscribe, Drive, and check out the Stripe Payments Master Course for everything you need to know about building a payment system. In today's video, we'll be looking at how to handle one time payments. The easy way to get paid is with Stripe Checkout. It can be implemented with 0 back end code, but has limited options for customization. When we're done with that, we'll look at a more complex approach that combines Stripe elements with the payment intense API, and that will give us full control over the payment flow and user experience. To get started, you'll need have a Stripe account, and then you'll also want some kind of Node. Js back end. We'll be using Firebase Cloud Functions for this video, but feel free to use any Node back end that you want. In the front end application, we just have a single product and that is the only product that the user can buy. When they click the purchase button, it will bring up the Stripe checkout UI. This is a checkout flow that is completely handled by Stripe. That means you don't have to handle any of the UI coding yourself. Stripe will validate the credit card and process the payment all inside of this checkout page. And it also handles the 3 d secured authentication process for customers in Europe. If the user does not complete this process by signing in to their bank and authorizing the charge. The payment will not go through. When the payment is complete, you can specify a redirect URL, and Stripe will redirect the user to a access page along with the ID of the session so you can retrieve it if necessary. And if the payment is unsuccessful or if the user cancels, you can go to a separate URL. Once you've received a payment from a user, you then need to think about how you'll actually fulfill their purchase, and this is entirely dependent on how your business operates. One option is to just go into the Stripe dashboard and do all that stuff manually. But we're developers, so we want to do everything programmatically. And the way you do that with Stripe checkout is with a webhook. When the checkout process has been completed successfully, Stripe can send a webhook with some data to your back end server. Auth. So that means that you need to have a server that's accessible over HTTP, which is very easy to do and a perfect use case for Firebase Cloud Functions. When your Cloud Function receives the webhook, it will contain data about the payment intent. And you can use that data to implement some logic that updates your database or maybe sends an email to the user or something along those lines. What's amazing about Stripe checkout is that we can build a payment system without writing a single line of back end code. To get started, you'll first need a Stripe account. Head over to the Stripe dashboard, and then make sure to flip the switch for development mode. Under API keys, you'll see a publishable key. Auth. This key is perfectly safe to use in your front end code. However, you should never use the secret key in your front end code. We'll come back here to retrieve the secret key when we set up our webhook on Firebase Cloud Functions. Now at this point, you should know that there are 2 different ways you can use Stripe Checkout. The easiest approach is to use the client only integration. To use this approach, we need to go into the products tab and create some details about a product that we wanna sell. One of the big limitations with this approach is that we can't calculate our pricing dynamically. All the data is static based on the values that we enter here in the dashboard. If you have dynamic pricing or maybe you offer discounts on a per user basis, auth this. You'll likely want to generate your checkout sessions on a server. That allows you to generate products and their pricing based on your own internal logic, so you're not dependent on the products here in the dashboard. We look at how to do that in the full course, but for this simple use case, we'll just stick with the client only integration. After you've created a product, go ahead and add a SKU to it and then copy that SKU ID. From there, we'll go ahead and open up a terminal session and use npx to create a new Svelte app. Then inside the source directory, I'll create a component called product dot Svelte. Now in order to run the checkout process, we need to include Stripe JS in this project. Instead of installing Stripe with npm, we want to include a script tag in the head of the document. So head into the public folder to the index HTML and add Stripe JS there. This ensures that you always have the latest version of Stripe. Js and also allows Stripe to perform things like fraud detection in the background. From there, we can go into our product component, and the first thing we'll wanna do is initialize the Stripe SDK. By including the script tag, we get a global namespace of Stripe, which we can initialize by passing it the publishable key from the Stripe dashboard. And that is how Stripe identifies our account. Next, we'll declare a few props for the product name, image, and SKU. Now, if we want to redirect the user to the checkout process, all we have to do is set up an async function, and then we'll await Stripe redirect to checkout. You can add multiple items to the checkout process and set a quantity for each one. Then you'll want to set redirect URLs for successful payments and canceled payments. If Stripe is unable to redirect the user at all, it will throw an error object. So if we get an error, we'll just go ahead and show an alert message for now. And now we just need a UI element for the user to trigger the checkout process. So we'll go down here to the template and add a button that fires this method when clicked. And it's also worth noting that when you're working with the mounts and stripe, they're based on a currency's lowest denomination. So an amount of 1,999 would be $19 at 99¢ in US dollars. So you'll probably want to divide the amount by 100 when showing that in your front end UI. Auth. And now we can use this product component somewhere else in the application. So we'll go into the app component and then declare the product there, then pass in the props like the SKU and the amount that we want to use for this product. And now we can run npm run dev to serve the app locally. Auth. When you click the checkout button, it should redirect the user to the checkout page with your specific product details. After a payment is submitted, you'll be able to see it on the Stripe dashboard. Customer, but now we need to do our part to fulfill the product. When the payment intent has succeeded, Stripe will instantly send a webhook to a URL that we specify. Auth. The URL can point to an HTTP Cloud Function that will then handle the data for that payment intent and then fulfill the product for the user. So to get started on the back end, we'll need to initialize Firebase Cloud Functions by running Firebase Net Functions from the command line, and I'll be using TypeScript in this project. From there, we'll CD into the functions directory, and I'll be using Express JS, CORS, and also the Stripe SDK. And then we'll also want to install types for Stripe and CORS. This will give us IntelliSense for the entire Stripe API, which is incredibly useful when building a payment system on the back end. Now, one minor thing we need to do for TypeScript is go into the ts config and use the esnextlib. Now, in the index ts file, we'll start by initializing on Stripe by first importing it and then passing it the secret API key from the Stripe dashboard. You can see I've just hard coded it to the source code here, but it's generally a better idea to save it as an environment variable in your Firebase project. From there, I'm going to create an Express JS app so we can create multiple API endpoints with a single cloud function. This is technically optional, but if you have a lot of different payment endpoints on your back end, it generally helps to use some sort of HTTP framework to help you manage that complexity. Or in the full Stripe course, we use something called callable functions, which integrate with the Firebase SDK on front end to simplify both the front end and back end code, but it's beyond the scope of this video. From there, we'll create a post endpoint for our webhook. Auth. And inside this hook, the first thing we'll wanna do is validate that it actually came from Stripe and not from some random hacker on the web. We can do that by looking for a Stripe signature header. And then we can use a value called the endpoint secret to decode the data that was in that request or webhook sent from Stripe. The Stripe SDK has a special method called webhooks construct event. That takes the body of the request, the Stripe signature, and the endpoint secret, and combines them all together into some JSON that we can actually use in our code. Auth now the one thing we're missing is the actual secret key for this webhook. Head over to the Stripe dashboard and create a new webhook. Auth. The URL should be the actual location that you've deployed your Firebase function to, which in our case would be our main function's URL followed by payments slash webhook. Auth. Then for this demo, the actual webhook that you wanna listen to is paymentintent.succeeded. And you can also look at the paymentintent payment failed as well. Now once you've created that webhook, go ahead and grab the secret code and then paste it into your Firebase project. And, again, that would be better as a Firebase environment variable. From there, we can simply set up a switch statement to handle the type of webhook that was sent. I'm going to leave the code implementation details up to your auth imagination here, but you would most likely update the Firestore database or send an email to a customer or something along those lines. It's entirely dependent on the business logic of your app and the product that you sell. Then if the payment failed, you may want to send the customer an email saying you have an open invoice and here is where to pay it. And you now have a full stack payment solution with Stripe, Node. Js, and Svelte. Nice. But the main drawback of Stripe at checkout is that it offers very few options to customize the user experience. So I want to finish off this video by giving you a rundown of how to use the payment intense authenti along with Stripe Elements to not only handle custom payments, but also to handle the 3 d secure authentication process if it's necessary. In the Svelte app, you can see here that we enter some card details, and then if it needs to go through 3 d Secure, Stripe will automatically bring up that 3 d Secure process in your app's page. So the user never really leaves your app to finish their payment. Now, there's a lot more code involved in this process, and we're not going to go through it line by line. Instead, we'll look at the implementation of 5 different steps that you need to take to handle payment intents with Stripe Elements. Step 1 is to create a payment intent on the back end when the user signifies an intention to pay you money. When that happens, you make a request to your back end for a payment intent object, which you can create with the Stripe SDK. It takes an amount, currency, and some additional optional parameters as well. In your front end code, you'll need to make a request to this endpoint. Auth in the Svelte app, we'll handle that with the on mount life cycle hook, although you should only create 1 payment intent per user session. In our case, we can request the payment intent using the browser fetch API and then take the response and set it as the payment intent property on the Svelte component. Auth that returns the payment intent from our server, which contains an important value called the client secret. Once we have the client secret, we can then move on to the 3rd step, which is collecting the user's credit card information and building the actual credit card form. Stripe Elements provides prebuilt widgets that we can use to validate credit card details on the front end. All we have to do is grab a dom element with Swelt, and then we'll mount the Stripe card on that element. From there, we move on to step number 4, which is to process the payment, and that happens entirely on Stripe's server, not your own server. You do that by calling handle card payment and it takes the client's secret that you return from your own server along with the card element where the user entered their card details here on the front end. Its return value is an updated payment intent with any charges that have been added to that intent. So it takes the payment intent you created on your back end, the card details the user entered on the front end, and turns that into an actual charge that you can fulfill. At that point, you can show the user a confirmation in the UI, and then you should actually fulfill the purchase by running a webhook just like we did with the previous example. So I'm gonna go ahead and wrap things up there. I hope that gave you an idea of how to work with Stripe Checkout and the payment intense API. And if you're serious about integrating payments into your progressive web app, Consider becoming a pro member at FireShip IO to get access to the full course. Thanks for watching, and I will talk to you soon. Oh, I I like money.
The Stripe Payments Master Course discusses two strategies for handling one-time payments through Stripe, including using Stripe Checkout and a webhook. The process involves setting up a payment process within the checkout flow, creating a dynamic pricing environment, and using TypeScript and Stripe SDK. The speaker provides instructions on how to use Stripe in the full course and suggests becoming a pro member to access the full payment process.