How Webhooks work in Bubble

let's talk about webhooks so as always I want to start with a silly analogy so let's say this is you this is your friend you want to send a package to your friend so that's what you do you enlist the help of the Postal Service here represented by this guy who takes your package delivers it all the way to your friend but now of course you pay for tracking you want to know that this package has actually been delivered right so in that scenario the Postal Service represented by this this lovely little sketch of a postman here they notify you this is the way it would really be represented they notify you when that package has been delivered now the critical part of this relationship here is that you don't know unless this Postman or Postal Service or the post woman tells you that the package has been delivered okay you could continuously call call Apple email the postal service and say hey is my packager over has my package arrived has my package arrived but that's quite labor awesome and gonna take a lot of effort and half the time or more potentially the ass is going to come back no so this is a much more efficient and elegant way isn't it is you've told the postal service by virtue of the fact that you paid for this tracking service that you want to be notified when that package is delivered so this notification here this kind of backwards communication path is conceptually the same thing as a webhook so to bring it into reality you might have a scenario like this this is a very very common use case is you've got a user who's buying something on your site right in your application stripe is processing the payment there on behalf of the user right the user is actually inputting their payment information into stripe system what that means is that you don't actually know that the payment's gone through unless stripe tells you right the users over here they've completed their payment with stripe and your replication has no real way of knowing when that payment was successful so the way that you can know when that payment was successful is by enlisting stripe or instructing stripe I should say to send you a web Hook when that payment has been successful right so it's essentially here a little little web hook which says that the payment was successful and again in this case you could continuously ping stripe and say hey is the payment successful hey is the payment successful yet hey is the payment successful yet and this is sort of you know the same thing as if you've got your kids in the back seat and you're driving to go on holiday and they're continuously asking are we there yet are we there yet are we there yet right that's a very inefficient way for them to find that information Nation from you they could just say hey mummy and daddy could you please let me know when we've arrived in in the location uh and so that is then uh you being instructed to send your kids a web Hook when you've arrived so it's the same thing conceptually here hey guys sorry to interrupt just to avoid any confusion in this video you're going to hear me talk about previous lessons and Concepts and some magical thing called the course and that's because this video as well as the sort of companion video on webhook security which I'll link to somewhere up here those videos were originally recorded as lessons in my bubble course think it build it but I wanted to put them up on YouTube make them accessible to everybody because I think they're really important topics for people to understand of course if you do want to dive deeper into bubble if you appreciate my work and want to support me please do check out the course I'll link to it below otherwise enjoy this video as it is so there's loads of scenarios where this kind of thing is going to be is going to be useful the videos in this course for example right they are actually streamed to you within the course website using a service called mux and what I had to do to get all of that set up was upload my videos to Max essentially I needed to ingest them into Max's system and then Max would do all of this processing it would take my videos and it would create all these different kind of versions it would sort of blast them out into its Network into its content delivery Network as it's called so that it's they live all the video files live on all these different servers and depending where you're you're viewing this course right you're gonna get a certain file delivered to you based on your location and your internet speeds and and other factors that that Max takes into account right Max is going to generate all this metadata on the video for on my behalf like the duration all right there's all this processing that Max is doing once my video has been adjusted but I don't know when it's been ingested right I need some way to uh to be notified that my video is ready to be streamed out to my students okay and so what I've done what I did I should say is uh is registered a web hook with Max so that every time a new video is ready for streaming right when the ingest ready event fires within Max's system then they send off a web hook to me to let me know okay another example calendly right many of you probably have used calendar or a server similar to Kevin Lee that lets people book times on your calendar okay you could set up an integration with your app and calendly so that every time somebody books a slot on your calendar you get a web hook in your in your application right so you can track and save data about the events that people are scheduling within your web application right rather than continuously or on a recurring basis calling some endpoint within the Canon the API and seeing what events are there and potentially seeing what events are new and comparing that to the events that you already know exist and then doing some kind of filtering to save the new events in your database and blah blah blah kind of gets confusing quick right you can just say to calendly hey let me know when I have a new event scheduled and then they'll send you a web hook and with the the receiving of that wordpode once it's in your application you can do all kinds of information with it right like when this web Hook is received within my application right that can then trigger a sequence of actions or a sequence of business logic right consider a workflow in my application in our analogy here when I receive this notification that the parcel has been delivered right well then I can go off and do nice things I can ask my friend via WhatsApp what do they think I can maybe register it in my little spreadsheet that I use to track all the parcels that I send out to to my friends because obviously I've got so many friends and send so many gifts and I can also sleep easy so there's all these things that I can do as a consequence of receiving this web hook of receiving this notification in my web application okay so that's webhooks conceptually but let's get practical now right let's set up a web hook within our application what we're going to do actually is we are going to emulate this approach here we're going to emulate an integration with stripe where they're going to send us a web hook whenever a user successfully completes a payment or to be more specific when they complete a checkout session so I've got sort of this test set up in my application here where when a user clicks purchase they go to this checkout page right and remember this checkout page this checkout experience is hosted here with stripe so all of the user credit card details and the and the inputs are handled by stripe I just send stripe some information about how I want them to handle this interaction with the user specifically right I send them things like the name of the product that the user is going to buy the price and I can also send a whole bunch of other information to help stripe configure this this experience on my behalf but the the important point here is that the user here right they're on a stripe hosted page right they're not in my web application anymore so they are literally on a different location on the web right so I won't know about the things that they do in this new location right on this page that's being provided by stripe servers any more than I can know about their behavior on Airbnb or the latest tweets that they posted right I've got no idea that about what they're doing on those sites unless those sites tell me and so this is where we need to ask stripe to tell us when certain things happen within their world like the the user right completing a checkout session here now one important footnote here is that what we've done in previous lessons in the course is we've actually used the bubble native stripe plugin in order to charge users all right so we've used instead of when this button purchase is clicked these actions which I'll go through in a minute we've used the charge the current user action and passed in some some parameters here okay now that's absolutely fine for simple use cases and the plug-in that bubbles created here will actually handle the registering of a successful payment so that you don't need to set up an additional web hook here right it's that functionality is built into the plugin but there are circumstances and this is why I chose stripe specifically to demonstrate this there are circumstances in which rather than using that that stripe plug-in that bubbles developed you want to create a custom integration with the stripe API and what that means of course is referencing the API documentation that stripe has provided and it's a very robust documentation in order to create a custom integration which then gives you just a ton more flexibility and power to handle you know more Creative Solutions that you might want to have in application when it comes to charging and paying out users so specifically in the setup for this video what we're doing here is we're creating a checkout session right in a checkout session is just represented by this interface here basically a checkout session captures the fact that you are trying to charge a user for a specific thing okay it's a time-bound window essentially where stripe is is able to charge a user on your behalf for a particular thing okay and one of the great things about stripe is they provide this checkout experience that's kind of hosted interface for you to be able to do that you don't have to create all this interface yourself you can of course do that you can create your own interface with your own inputs to capture credit card information all that kind of stuff it's a little bit more advanced and so the the recommended approach for Indie hackers and solo entrepreneurs like us is to use this checkout experience which is which is very robust and does the job for us out of the box so when we create a checkout session right there's a bunch of parameters that we have to provide in order to to set that up and you can see here that there are a lot a lot of different a lot of different things that we can we can set here more things than we can set by using this this native plugin action right another one stripe has this product called stripe tax where you can have stripe automatically calculate the sales tax for a transaction based on the user's location and based on the category of thing that's being sold okay that's not something that you can toggle on using uh using this this native action here okay so those are just a few of the reasons why you might want to set up a a custom integration as I've mentioned so in terms of this specific setup let's just walk through it for a second I'll show you what I have set up in my application right now just as background context for this for this lesson so I've set up an integration with Stripe Right if you followed the API lessons this should all be relatively familiar to you there's an authorization component of course and then I've got an integration with a single endpoint which is where we actually create the checkout session okay and there's a bunch of fields here A bunch of parameters that we're providing I'll go through this in a second but just at a high level here what's happening I'll break it down here is what we're doing here is we are sending a post request to create a checkout session with stripe right we're sending that request to stripe what stripe then does as a response is it returns a checkout you URL it returns a specific web page that looks just like this where we can then redirect our users so if I was just to I won't re-initialize but I'll show you the call that the response that came in here so if I make that if I make this call to stripe one of the fields that I get back is this URL field okay this URL field that if you paste it into a browser and it won't work right now I will reinitialize this actually there we go so I've reinitialized and if I scroll all the way down I get this URL which I'll just grab it and copy and I'll just paste that literally into my browser here and you'll see there we go that's a checkout session so it won't last forever but this is a place where I can charge basically a particular user for a particular item we'll get into what this how these work in a second just just for context within a certain period of time so stripe will return that check checkout URL to our application and once they've done that let me just move this back up a little bit once they've done that then I can have some logic I'll just make this a different color so we can see what's going on then I can have some logic to redirect to redirect the user so here's the user right I've I've got this checkout URL now back in my application and I can send my user to that URL which actually lives of course in stripe system so in terms of the workflows this is how it looks basically right I'm creating a checkout session by calling the SoundPoint within my application and then one of the things that's returned here you can see I'm grabbing it from risotto Step One is the URL so I've just I'm just putting that inside of an open and external website action which then means that the user is going to be navigated to that URL so what that looks like yes I click that button and then boom the user ends up on that checkout page super banned it but then of course now we're back to the reason why we want web hooks in the first phase which is that when a user completes this form they're over here on Stripes system and we still need we still need to get a web hook for when the checkout session was completed which is another way of saying that the user entered the right credit card information and clicked confirm to pay right so that's what we're going to set up just to complete the kind of the context here of what's going on because this isn't necessarily uh super clear some of these fields are just things that stripe requests that you that you submit within the call and they're all notice they're all got this query string parameter ticked okay that's just the way that the stripe API requires this information to be provided by ticking query string here we essentially well we do we put the field here in the URL so cast estimate email equals Matt you know you get the idea made it blah blah blah so all of these parameters here get basically pushed into the URL that we sent to stripe and then stripe can of course extract the values of each of those parameters so that's all that's meant here by query string some of these things are also pretty straightforward like we've got a success URL here that's a page in our application where once the user completes the checkout session successfully they're redirected we've got a corresponding one for a cancel URL that's where if the user clicks this back button stripe sends them to that cancel URL okay so that's all information this is all information that stripe actually needs right from us otherwise stripe has no way to know where to send the user if they if they cancel so by creating this custom integration these are things that we have to add right so success URL a cancel URL which is actually optional I guess if we don't provide it they'll just send the user back to the place where they came and sort of a whole bunch of different things here one of them is this parameter customer creation customer creation is a field that you can set to true and that means that a user will always be created when a checkout session is credit you'll always have a corresponding customer within within stripe and then you've got these two bits these two parameters here which is kind of the most idiosyncratic that you may not have seen before we've got this kind of the strange syntax with line items Then followed by a number Within These square brackets and followed by Price okay what on Earth does that mean well if we take a look at the documentation for a second sort of the most important field here right at the top is this field line items we can until this show child parameters which gives us a clue as to how this works so this line items is a list of items right so already we know right out of the gate that this parameter is taking an array right a list of things not just a single thing and for each of them it looks like we have to provide either the ID of something called a price which we don't quite understand yet and a quantity what this means is that there could be several objects within this line items array and for each of them they can have a price and they can have a quantity so when we're passing that information uh about the price the line items that we want to submit to to stripe we need to provide each of those fields these are those attributes price and quantity for each of the items in this line items array and the Syntax for how we do that is we start with line items so this is basically like the parent object okay and then we have to go and access one of the children and say hey this is the price that we're setting for the first item in the list and this is the quantity that we're setting for the first item in the list because we may have that we may be charging the user here for are multiple items at once right this is just a checkout session where they're purchasing one thing but we may be charging them for multiple things at once so this line items just like how you would have an invoice but which might have multiple line items right this allows us to charge a customer for multiple things at once so this syntax here means for the first line item which is represented here by this zero this is because the array is what they call indexed at zero right it starts at zero so the first item is actually the zero if item so for that first item that zeroth item this is the price attribute that we're setting and here is the value for the zero if line items quantity this is the value that we're setting we could just as easily now if we were going to have multiple line items we could have we could specify the second one with a one right and then set the quantity and the price like that and have new values down here okay in our case we're not doing that so then finally what on Earth is this is this price ID in the first place well you know reading the documentation helps a lot with this but in short within your stripe dashboard you have this section called products you can create a new product and when you do so you can set one or more prices for that product okay and it's actually the price that you that you populate this checkout session with it's a price that you charge a user for because you might have multiple prices for the same product and depend on some logic within your application you're going to charge the user with this price and not this price there's a different thing than using discounts but we're not going to go into that here so I've just got one price here which is you know 500 USD I could easily create another price here right maybe it's a subscription kind of price so you can pay either as a one-off or you can pay um ten dollars every every month or something like that right so if I add that price right now I've got a new ID that I can pass into my my checkout here so that's all this is here that's all this this price uh ID represents so that's all the context out of the way let's Now set up this this web Hook from stripe okay because once we've done that that means that when a user completes this form we can know about it in our application and that's important because then we can you know we can save on the user the fact that they're a paid customer and give them access to parts of the application that they wouldn't otherwise have access to right so there's all kinds of business logic that is obviously dependent on whether a user has paid or not so it's very important that we have that right if we go back to the schema it kind of gives us a clue as to where to start right the arrow the arrow is going this way it's going from stripe back to our application so that tells us that probably we're gonna to register the fact that we want them to send a webhook with stripe so let's go into the dashboard I'm in test mode here just note right but the same logic applies if you're in live mode when I click on this developer section then I'm going to come over to webhooks and I'm going to click here to add an endpoint okay adding an endpoint is the same thing as saying hey where do you want us to send this notification where do you want us to send this web hook so this here this endpoint URL would actually be an endpoint in your application that you can receive things on but just to test this out step by step I'm going to use a site here called webhook.site okay which can receive these web hooks on our behalf so it's as if right here in this setup this is actually webhook.site so let's just set it up this way just to keep things simple take things step by step and then we'll swap this out for a page in our own application but this is just a really handy kind of initial way for us to test out this webhook functionality so webhog.site gives us an address right so this is the place that they're going to notify us that a checkout session has been complete right they need some way to find us right they go back to our silly analogy yeah with the postal service right when they let us know that the package has arrived they need to know where to reach us do we give them a phone number so they call us do we give them an email so they email us those are all valid ways that they can communicate with us they're valid kind of addresses where they can reach us but they need one they need one and conceptually the same thing is true here stripe needs to know where to send this Web book where to send this notification so when we're using webpoc.site we get kind of a test address a dummy address that can receive these events so I'm going to copy that and I'm going to paste it in here okay and then we need to tell stripe what events we want them to notify us about right because there's there's all kinds of different things that could happen within stripe system invoices being created payouts being created a new subscription recurring service a payment failing on behalf of a customer a customer customer being created I mean go through the API documentation and you'll see or just look at this little section here you can see these are all the different types of events that could happen a refund being processed there's all kinds of different things we're after we're after this this checkout section here okay and specifically just this one here when a checkout session has been successfully completed sign when I click add events right that's the event that we are listening to or that stripe is listening to on our behalf and then I just click add endpoint okay so now this web Hook is set up in stripe system all right if I go back to this web hook section you can see there it is here okay so it's now waiting for the first event to be triggered basically so let's go through that I'm actually I've still got checkout session open here so I'm just going to add all of the sort of the test payment information that stripe provides all of this doesn't really matter and then we'll hit pay and then if we come over to webhook.site or you'll see it's already come through beautiful so here is the payload for the webhock that stripe just sent all the way to webhook.site so notice the structure here right it was a post request right to this endpoint it had a bunch of headers attached and then it had this what looks like Json payload here right okay so this is kind of maybe a good point a good place to point out that all a web Hook is right is another type another sort of category of HTTP request okay remember that from our API videos that any time that two web services are talking to one another like this they are using the HTTP protocol to do so right which is just a set of conventions a structure for how information should be transmitted specifically right the HTTP protocol says that you know you can send different types of requests get requests post requests patch requests put requests delete requests that you have this kind of headers section where you can have a key name and then a key value and you can have a whole bunch of those headers and then you have this body section for post requests not forget requests where you have this yeah you have this this body where you can structure data in different ways and Json is one of the kind of the common ways that you can you can structure that so all that this this web Hook is is an HTTP request that is originating with stripe and being sent to our application in the same way as when we call the endpoint on stripe to create that checkout session right which we do over here right this is just another HTTP request it's an outgoing request from our application to their application and when this event fires that the checkout session is completed that's an HTTP request that's originating with stripes account and ending up in our application okay so you can think about it as in both cases they're calling and Point we've integrated with stripes API but conversely Stripes integrated with our API right we have right in effect here configured an API endpoint it's not in our application yet because we're using this webpoc.site but this is essentially an endpoint right an API an application programming interface right an interface through which stripe can communicate with us so this is really awesome and you'll see here now we've got a bunch of information about the checkout session as well by virtue of the fact that we've received this event then we know that the payment was successful but we've also got you know things like things like a status which is complete there's some other certain kind of objects that are created in stripe system like like a pay payment intent we've got the ID for the customer okay we've got this field here called a client reference ID it's a really handy thing that we can provide for stripe when we when we call this endpoint right is this client reference ID okay a client that reference ID is just basically a unique piece of data that we can send to Stripe Right that we can send with this post call that they will then conversely send back to us when the checkout session was completed right the checkout session corresponding to the one that we created in this first step so that's really useful for doing things like for example I've got it set up over here to populate that client reference ID with the unique ID of the current user and you see here right that this looks suspiciously like the unique ID for a bubble user and that can be useful because then once if we have this been sent back from stripe then we can associate the successful payment or the successful checkout session with that user right we can find them in our database and kind of create a relationship between maybe a payment object that we that we create upon receipt of this webhook and that that current user will get into that in a minute all right so this uh webhook.site has done its job let's swap this out now instead of this being webpoc.site we want this to be right our bubble our Bubble app so we need now to configure an endpoint in our Bubble app that stripe can call and send this webhook so the way that we do that is going down to back-end workflows and configure a new API workflow so back-end workflow API workflow bubble uses these terms interchangeably it basically exposes an endpoint that either you can call from within your application to do different things right like we've done in earlier parts of the course offload some computationally heavy work or you could actually expose these endpoints to the outside world to other services that can then trigger logic in your own application so you can think of them as workflows right that are just sitting here waiting to be triggered why once they're triggered either from within your own application or from some external service right then that sequence of actions Cascades right and that sequence of action takes place so we'll just call this checkout session completed right in fact we probably should call it stripe checkout session completed just to be very very specific we want to make sure here that expose as a public API workflow is ticked and also that this workflow can be run without authentication it's ticked now that might set off some alarm bells for you there is definitely a security aspect to this I'm going to cover that in the next lesson for now let's just ignore that right let's just see if we can get this set up in a simple way and we'll revisit the security Dimension uh in the in the next lesson cool so this is that endpoint setup and now we basically need to Define all of the different inputs all of the different parameters that this endpoint can receive right and then we can do stuff with them in subsequent actions the same as the back-end workflows that we've set up when we're creating the airdesk app and so some of the things that we might want to Define are Fields like you know the user the user ID for example or the amount which is actually in sends here okay but what we really want is is a one-to-one mapping right between the fields that come in from the web hook right and the fields that we might Define here right like like amount the best way to do that is instead of defining these manually we're going to go detect request data and then we're going to click here detect data this gives us now basically an admin or a temporary version of this endpoint that when an external service calls it right bubble will automatically detect all of the different parameters that come in right so bubble will automatically detect all of this stuff right all of these fields all of these attributes so I've got that copied to my clipboard what I want to do now is edit that webhook endpoint in my stripe dashboard so I'm going to go update details and I'm going to paste in here that that endpoint which has this as this initialize path right at the end okay and just notice the structure here of of this endpoint so all endpoints that you create start with this kind of Base URL here that corresponds to your application and then there's a path just like we have paths for pages right you've got a path for an endpoint that corresponds to that name that we just gave it right that name that we just gave it down here stripe checkout session completed right corresponds of course exactly to this path here right at the end so this is basically the root domain the root address for all of your API endpoints and you can see that as well if you go down into your settings under the API section you can go and see here's the root URL for your workflows right for your backend workflows and then the path that comes after this WF which stands for workflows will be the name for the the API workflows themselves okay so let's go back into detect data we need this to be open for this to work and we now see okay we're waiting for events to come in for for this address so let's go and test this flow out again so when we hit pay here this should trigger that checkout session completed event within stripe and since we've set up this web hook within stripe The Next Step should be for them to Route another HTTP request but from their end back to our application specifically to this endpoint here which is set up in such a way here bubble's giving us this kind of convenience feature to automatically detect all of the fields that correspond or all of the fields that are present in in the body here in the Json body so let's see let's hit pay and then I'm going to come over to my bubble application and there you go you saw now they all now they all came in okay so if I just scroll to the bottom here this is just like setting up an API integration the other way around basically you'll see here's the raw body that came in right all of these individual fields and what bubble has done is for each of them it's made again yes as to what type of thing that it is and that means that we can then access these fields in subsequent actions which which we'll see in a moment okay so I'm going to hit save right and now I can do something like you know this is a good practice to get into I'm going to create a log object so this is an object that I created earlier just to now basically test hey am I receiving these these things okay right so I'm going to call I'm going to give it a title stripe check out session completed and then sort of add some fields that are just going to allow me to uh to debug if I need to right so I might just pull out here a couple of the fields that I think are going to be useful so notice the structure here of which I've still got conveniently open in webhook.site but which we could also see if we come back over to the API endpoint and we click here modify types all right then we can see then we can see this structure here and we can see how things like this CS test okay the Cs test which actually corresponds to the ID for the checkout session CS checkout session how that is nested inside of this Json object which in turn is nested inside of this data Json object and if we scroll up right to the top you'll see how bubble is let's sort of create a naming convention for these things right so we've got this thing called an object ID and object ID which seems to correspond to that checkout session okay so if I now want to if I now want to say check out ID and then add that ID that we're going to pull out dynamically what I'll do is I'll go request data right so that's the HTTP request that we received the web hook that we received right I can now pull out any of the fields there that bubble has mapped for us and we know object ID that's actually the one that we want right we know that because we just went in here and had a look and we saw that object ID is the name that bubble has given to this piece of data that we've deemed something worthwhile to track just for testing purposes okay but you can see there's lots of different fields here that might be relevant for us including right including here just to show you right I could add in the client reference ID which if I go back to modify types let me just see if I can find this quickly right object client reference ID is the term that bubbles given to this unique ID that we passed in when we created the checkout session to begin with right so this is where I could now I could Now sort of just add a little label here that says client reference ID and and save that field or I could go one step further and I could just you know to double check that it actually corresponds to a user I could do something like like do a search for right a specific user where the unique ID is equal to is equal to that client reference ID okay and then display for example if I have to grab the first item from that list I could pull out the email value for that user instead and for this to work we need to do one more thing right because we can't at the moment search through all users based on privacy rules right the default permissions for any any agent is not to be able to find a user that's not yourself in searches so what we want to do here is Tick ignore private servers when running the workflow that's going to allow this search to actually execute without any limits okay and so now we could we could just test this again right um now after some time the events that you have triggered will appear here and you can actually just click to read run them which is really handy but sometimes stripe takes a little while for them to appear so we're just going to go through this this flow again in order to trigger this but just before we do I just remembered there's one thing that we need to change right if we look at the web hook address that we've got set up here it's this initialize version of the endpoint okay but this isn't actually a real endpoint in our application right that initialize we only used in order for bubble to detect automatically the the attributes that were coming through in the request body so we actually we actually want to remove this initialize component update the endpoint and now this endpoint corresponds exactly to this endpoint in our application and so that we can test that it's working we're going to create a log in our database so that if we go over to to look at our logs then we should see an entry here once this chick art session is completed so let's try it let's go hit pay [Music] okay that's gone through what we can also do to test this out is we can go here to view the different logs and and I just had to refresh and you can see here that one of the logs that's just happened right this has just happened is this one here all right where stripe is has posted to uh to a web hook and um this is actually a sort of an event within stripe system we can make better sense of this by coming over to a vet and we could see here hey a checkout session was completed right and this is the event that just fired and you can see here that a web hook that was attached to this event was succeeded I can click on this in order to see all of the all of the attributes that were sent to this endpoint and in fact from here I can hit resend that's that's one way to uh to to speed this up I can hit resend so let's go into our app now let's see and we've in fact do have a log right we have a log where we have this checkout ID and we don't have a user here that may be because I'm not actually logged into the application so let's try it when I know for sure that I'm that I'm logged in okay now I've got a new log and in fact now I'm seeing uh now I'm seeing my my email and just to show you this this this recent functionality right so that you don't have to go through that whole checkout process uh again if I just come back to events here this was the latest checkout session and I can just go over to this webhook attempt hit resend okay that will re-trigger this guy here right this will re-trigger this web hook and so I should see in my bubble app a third log now corresponding to uh to that checkout session being completed and now you can also see if you come over to the web hook section of this developers uh Tab and you go into the endpoint well now I'm actually seeing all of the events Associated so it took a little bit of time for for stripe to populate them but now it's really convenient because for any of these I can just hit resend in order to continue testing to make sure that these web hooks are being received okay okay so just to complete the picture here let's kind of make it um practical and useful and functional like why we would want to receive this web hook in the first place so in this kind of example application we may want to create a record of when a user is actually trying to purchase something but we we also want a way to record when that payment was successful right at this point here right probably just before we open an external website we could insert an action where we create a payment a payment object in our database right and we've got this is paid field here this is paid field which is just a yes no field that defaults to no okay so I don't really need to populate that right now it's going to have the it's Creator field filled out with the current user that's fine right but maybe there's other things that I want to save here like the amount and maybe the uh the checkout ID as well in case I want to find it easily within uh within stripe system right and so when I create a new payment here because I've added this action after this first one well very conveniently I can grab the checkout ID from the result of step one which is going to be this this ID field here I know that from reading the stripe documentation because I know that when I create this post request to create a checkout session okay which is represented by by this part in Stripes documentation here I can see this is basically an example of what I would the information that I would post and this is the response that I get back from stripe and you can see here one of those fields is this checkout ID field right here now one of the other fields that is returned here is the amount okay the amount and really the amount is something that I'm that's being pushed through to stripe based on the relationship with this price object remember because each each product has has a price here a price right in Stripes dashboard but you know it's it's it's it can be a good idea to to save that amount directly as from the response that you get here so you know everything's in sync right so I could go the result of Step one's amount total okay this is actually in cents okay the the the uh amount field with stripe is always and since so I could divide that by 100 in order to get the value in dollars right so now if I go and test out this flow and just click this purchase button and I should already now see in my database right a payment object and in fact I do right five hundred dollars here's the checkout ID no it's not paid and here's the the user who created it okay and ideally what I want to do is on this back end workflow right when I know that the users paid right when the checkout session is completed ideally right I want to make changes to a a payment right a payment type thing I don't know how I'm going to find it yet but I want to make changes to a payment and Mark Mark the is paid field to yes right so this is where now webhooks start to become really useful because I've got a payment object in my application database right there's a corresponding event a checkout session being completed within stripe system okay and I want to make a connection between the two specifically I want to make a connection when the checkout session and stripe system is complete I want to make a change right to the corresponding payment in my system and the way that we are linking them right is fire via that checkout ID right we've already got a checkout ID saved here and we know that when we get the web hook back from stripe here one of the fields that we're going to receive to my web hook here we'll see that one of the event one of the values that we're going to receive is a checkout ID right so we're getting a checkout ID from stripe we've already got to check out ID in our database on a payment okay we can compare the two right we can use this this checkout ID that we're getting from stripe in order to filter down and find a particular payment in our bubble database that's what we're going to do here I'm going to go check out ID and I'm going to set this to be equal to the request status object ID which we know from before represents uh the ID for this checkout session okay and you know and we could also do something like you know making changes to um to the user as well by finding the user based on based on their unique ID that we're finding or we're receiving back through this web hook right we know that in the request data we've got this client reference ID so we can find a particular user based on based on that and we're going to grab the first user and now we could do something like we could mark them as as a customer you know this is a are they a customer you should maybe they should use camel case is customer and and if by default we're saying that all users when they're created are not customers and then if we're going to confer certain benefits to them when that field is set to yes right when they have become a paying customer then we open up all these new features to them that would otherwise be restricted right for another basis of all kinds of freemium uh SAS models then we could set this field to be yes also within this workflow let's try it out so at the moment our dummy kind of user here he's not a customer he's not a customer we've got this payment that's this checkout session that's being created by Him okay but it's not paid yet and so if we click this pay button this little workflow here should trigger right we should Mark the payment as yes and then we should Mark the user as a Pay customer and in fact I've got one little issue here that we should make sure we fix searching for payments make sure to fill up the constraint ah okay so it looks like this maybe I didn't say this properly so that checkout ID is the is the object ID that we're receiving here from the web hook right that's the search constraint uh actually yeah I set it I set it down here I should this is not a field that we're changing it's already set it's rather a field that we are using to filter down payments in our database that's all set up let's see what happens I'm gonna fill out this information pay okay we've just paid we'll go into my database I should have a new log that's kind of the first thing I want to check and I do have a new log okay that's great those fields are being populated let's see we've got this payment it's now marked as in as is paid brilliant and our user are they a customer yes they are so we know that this or executed beautifully and now we can use the fact that this user is a customer and they've got a payment um you know like I said to unlock all this functionality in their account so that's web hooks in a nutshell but as I said really important component here is the fact that anyone on the web can call this endpoint now this is basically a public address where if somebody knew the structure of the data that we were expecting here they could basically cause havoc in our application because they could trigger this workflow they could trigger payments being created that could trigger users being marked as customers who aren't actually being marked as customers and just cause our application you know our service to do a whole bunch of work that they they don't want to do or don't need to do okay so we have to make sure that these web hooks here this this these web books are actually coming from stripe and aren't coming from some malicious actor instead who is emulating those requests from stripe emulating those web hooks from stripe so we're gonna work out how to protect ourselves from that in the next lesson [Music] foreign [Music] [Music]

Channel: Matt Neary

Views: 4,717

Keywords:

Id: T6zXcy5uLmI

Length: 51min 57sec (3117 seconds)

Published: Fri Jul 14 2023