Selling Digital Content in Angular with Stripe Payments - Part 3

Key Takeaways

welcome to part three of strike payments with angular and firebase in the last two episodes we integrated the stripe check out and charge the card with firebase cloud functions in this third episode we're going to use that charge to enable the user to purchase digital content in our app in this example we keep a balance on the user's account which can be increased by making payments or decreased by purchasing content when a user has sufficient funds on their account they can click a button that will bring up a modal window to confirm or cancel the purchase if they click confirm their account balance is automatically updated with the new balance the database will be updated with a purchases collection which tracks the user ID and the item IDs that they purchased the users current balance will be tracked on their actual account with a new property called balance which takes a number let's start by updating the cloud function we need it to update both the charge as well as the users balance in the same operation we want it to be atomic meaning if the charge fails the user balance update will fail also and vice-versa the first step is to create a balance variable defaults to zero and then when we get the customer record we'll update it with their existing balance when we get the stripe charge back we'll first check to make sure it exists and we'll also check to make sure that it's actually paid if these conditions are met we create an object where the key is a reference point in the database and the value is the data we want to update this allows us to update multiple database locations at the same time but be careful it performs a set operation so make sure you point to the very deepest node that you want to update now we can use the charge amount from stripe to increase the users balance and then send these updates together to the root of the database back in the app we can see the users balance is updated by the cloud function when they make a payment now we need to update the service to handle the payment process in order to get the user balance we first need the auth user ID so we'll use the switch map operator on the in Euler fire off observable we'll move this out into its own function and then subscribe to it and then struktur the balance itself will be emitted as an object so we just want to map that object to its actual value so we just get a number back in the observable from there we need to determine if the user has already purchased a product which we can do by seeing if that key exists under their purchases in the database this will also return an observable and we'll map it to a boolean value to get the true false value back instead of the entire object itself and the last step is to create a function that enables the user to actually make the purchase it requires the unique ID of the item being purchased as well as the amount and it records the time stamp from the firebase server this will guarantee your time stamps are consistent which would not be the case if you just use the JavaScript data object this function also needs to make an atomic update to update the balance as well as the purchase history in the same operation so we'll create another updates object and pass it the corresponding data the user balance gets decreased by the amount of the purchase and the purchase history gets the purchase object we can then pass these updates to the root of the database and call the update function now let's create a new component called the Buy Now component it's designed to be reusable so we'll take the viable ID as well as the amount from the parent component the buyable ID just represents any item that can be purchased we also create a variable to toggle the visibility of the modal during ng on an it we define the variables for the user balance observable and that has purchased observable then we create an event handler to change the visibility of the modal and the last function we need is for the user to actually confirm the purchase so this will just run the buy digital content function that we defined in the service when the purchase is complete we close the modal and you could also consider adding a success message or confirmation at this point but before we get into the HTML we're going to create a custom stripe pipe to format currency amounts this is strictly for the user and it will turn the value into a string with the proper decimal now striped amounts are 1/100 of the underlying currency so 500 and stripe equals five US dollars from a parent component we passed the unique ID as well as the price to the Buy Now component in the component itself we add the is active class when the show modal variable is true this is specific to Bulma CSS we can unwrap the balance observable to see if the user has sufficient funds on their account to make the purchase if so we'll show them that confirm or cancel buttons we can also show the user what their current balance is and what their balance will look like after the purchase the confirm button will actually make the purchase and the cancel button will just toggle the modal back to false if the user doesn't have enough money we'll show different modal content that says insufficient funds with their current balance the last step is to create a button that will open the modal in the first place if the users already purchased the item then we'll go ahead and just show button it says already purchased it's disabled notice how we always unwrap the observables in parentheses using the async pipe and then call any logic outside those parentheses before we start using the system let's also add some back-end data security rules on firebase when a purchase is made we want to make sure that user ID always matches the current auth user ID and we also want to prevent purchasers from being updated or deleted after they've been created so the data exists then we won't allow any write operations to take place now going back to the app we can take a look and make sure that everything is working as expected I currently have five dollars on my account which is insufficient to buy this product so we'll add additional credits through stripe which should increase the account balance from $5 to $25 and we'll see the account balance here update asynchronously once it's done processing then scribe and now we have sufficient cleanse on the account so we should be able to go ahead and buy the product that pulls up the confirmation screen if we click confirm it should reduce the balance by twenty dollars which it does and now we're back at five dollars again and we have access to the product that's it for stripe payments if this video helped you please like and subscribe and if you want a free copy of that book the angularfire Bank Survival Guide consider becoming a pro member or just 9 bucks a month you'll get a free copy of that book as well as access to our proton slack or one on one project consulting thanks for watching and I'll see you next time [Music]