Stripe Checkout Payments with Angular and Firebase - Part 1

Key Takeaways

in this episode we're going to integrate stripe payments into an angular 4 project with Firebase on the back end this is the first installment of a multi-part series on handling payments in angular in this first part you'll learn how to trigger the stripe checkout modal to collect the customer's credit card and then receive the payment token back from stripe before we get into the code let's take a look at how the whole stripe payment process works the user will enter their credit card details through the angular app with stripe checkout then stripe will respond with the payment token which we then want to save in the Firebase database this will automatically trigger a cloud function which sends the token back to stripe stripe will charge the card and then respond with the charge details Firebase and angular have a real-time connection so the user will always stay up to date on the status of their payment throughout this process let's start by getting the initial setup out of the way first you'll need a stripe API key which you can get from stripe.com then go to the checkout documentation and we'll be modifying the custom integration to work with angular in your app environment file add the stripe API key and make sure it's the test key from there we need to add the stripe checkout library to the index.html file and the final step is to make typescript aware of the stripe checkout class which you do in the typing. D.S file the next step is is to create a feature module to handle all of our payment components and services when you're done with this lesson your payment module should look something like this from there we can generate the service specifying the payment module then import angular fire database and angular fire off and first we'll get the user ID by subscribing to the angular fire off State the only other thing our service needs to do at this point is save the stripe token to the Firebase database the payment object will just be the stripe token as well as the amount that we want to charge the customer let's take a look at how this data is actually structured in the database every payment is nested under its Associated user ID the payment object has an amount which is just a number and the token and charge properties are objects that are return from stripe they contain all kinds of useful information that we'll see later in this lesson now can start building the component that will trigger the stripe checkout window we'll use the host listener decorator and we'll also want to inject the payment service into the component and we'll need the environment variable with our stripe API key we set variables for the Handler which is the stripe checkout object and also the amount which we'll just hardcode to 500 500 is equal to $5 in stripe everything's counted as one/ 100th of the underlying currency the Handler is defined during NG on a knit and we Define a few properties in there including the stripe API key as well as a default logo image but the most important part is the token property which is a function that we can use to handle the token when it's sent back to us from stripe in this case we send it back to the service to update it in the database the next function is just an event handler that you can attach to a button click and this will actually trigger the stripe window to pop up the last step is to use host list to listen for the window pop State event this will happen if the route redirects or if the user clicks the back button so if you redirect to a confirmation page you'll definitely want to implement this function let's go back into the app and make sure it's working using a test credit card from stripe we can send a test request to the API once the charge is complete we should see the database updated with the token details the most important part here is the token ID which we send back to Stripe from our backend to actually charge the card so it's important to note at this point that the card hasn't actually been charged we just have a token that we can use to charge it on the back end in the next part of this series we'll go over how to actually charge the card with Firebase Cloud functions that's it for part one if this video helped you please subscribe and if you're serious about stripe payments I recommend getting a pro subscription at angular firebase.com you'll get exclusive content related to angular stripe and Firebase base as well as access to our Pro channel on slack for one-on-one project Consulting thanks for watching I'll see you in part two [Music]