Hasura ❤️ Stripe: Build No-Code Marketplaces with Stripe Connect & Hasura

[Music] [Applause] [Music] [Music] [Music] [Music] so [Music] [Applause] [Music] [Music] [Applause] [Music] [Music] [Music] [Music] so [Music] [Music] so [Music] [Applause] [Music] [Music] hello everybody uh my name is gavin ray i am a technical evangelist here at hussera uh thank you for tuning in today and today we are going to talk about uh stripe it's really cool uh hussera also really cool and ways in which you can use them together uh specifically we're going to start with the connect apis and some of the cool new stuff that's been done there and we are joined today by charles from the stripe team hello hey gavin thanks for having me man really excited to be here yeah so um charles uh absolutely thank you so much for coming on the show um i was so excited when i got the email uh kind of talking about uh the new apis uh for those of you who might not be subscribed to stripe developer emails because that doesn't sound like the most interesting thing in the world to you they've done some really cool stuff lately and one of those really cool things is that you can use their connect apis for multi-merchant marketplaces and sort of this low code no code sort of way and i reached out to charles and i was like hey uh would you be open to speaking about that and maybe some other neat stuff and he was like hey sure so that's kind of what we're going to be talking about today yeah true story um um like i'm super excited to be talking about connect like like you said we have like essentially um we have no code solutions for multi-platform or like multi-merchant transactions and just to give you know folks who may be watching the stream who have never heard of strike before a little bit of context stripe is a company that builds infrastructure for the internet we started out in payments um so you know accept the payments online like paypal or braintree or adding or what have you and over time we've like added more and more um solutions one of those solutions one of those products is connect essentially what allows you to do is to build these multi-merchant platforms um or just like platforms in general so think of something like a lift right that's a multi-merchant that's a multi-merchant situation um that's a multi-party situation where like if you call it call a lift right you get picked up by a driver and you pay some money now when you pay that money um most of it goes to the driver some of it goes to lyft now being able to actually move money in that way is really really complex but what strike connects does is essentially takes that really complex thing that's like really tough and makes it a few api calls and at this point it's not even a few api calls it's a few clicks in a dashboard and a few links that you send people so for this stream we're going to start off and i'm going to show you how to do that um using this new uh product that we have called payment links let's do it i i actually have never used this one myself uh being somewhat of a straight veteran so i am super stoked to learn how to use this one as well oh yeah it's it's really cool um yeah so i think we got a few people in the stream where's everybody coming from i see we got jose from spain anybody anybody else out there let us know where your uh where you're watching from but uh in the meantime let's like let's just like get right into it so just gonna go take over here share my screen all right so all right everybody can see my screen right right gavin yeah i'm ready all good sweet okay because i can't see anything anymore um so i'm just going to hop into docs really really quickly because there are a few things that i think is worthwhile explaining about connect so connect is a general it's a general product for doing multi-party payments and right now i'm just like on the strike docs um there are tons of docs to read but i think the doc that is most important when you're thinking about connect once you understand what it does uh is this particular doc that just outlines three different flavors of connect so there's um standard express and custom and what really differentiates them is the amount of integration effort right how you integrate um what the onboarding looks like and how much how much uh involvement stripe has in terms of like communications with the end customer and you can think about it as like a spectrum right so if you want a connect platform that is like the lowest integration effort where like your relationship with strike is like super super clear um and out there and using lots of host options and things like that you will go with standard right and in that case like your uh your sub merchants are essentially um making their own strike accounts and then they're like linking to your stripe account as a platform um and then you're helping them facilitate payments right and then on the other side of the spectrum is custom connect and that's like uh the highest integration effort and generally like stripes completely in the background uh a custom connect platform is a platform where uh the customer might not even know that you're using stripe unless they like look into your terms uh your terms of services for for instance and then right in the middle is express so for this particular stream we're going to be talking about express and so one one way of looking at it too is that you're essentially trading um your ability to customize that user interaction as far as their uh experiences with stripe and the flexibility of the ui for ease of onboarding where at one extreme it's just like here's the generic ui components and this is what you're gonna get but that's almost no integration effort and on the other end it's like you're gonna do most of this yourself but you could be really flexible about what the ui looks like and people may not even know that you're using stripe but it's going to cost you a lot of effort definitely yeah if you want to own the entire experience that's generally going to be custom now i see custom like less often than i see standard in express um but yeah like if you're doing custom that's a significant amount of um that's a significant amount of effort but if you want to own that in an experience um that's generally the option that people go for in those cases and gavin we were chatting when you were um when you were working i guess at another job and you had to do some stuff with strike uh which one of these did you did you end up integrating with south carolina uh yeah express it's i just think it's the best trade-off between them uh and it's also the point uh if you go custom you don't get access to things like them the uh client overview portals for account balances and analytics and stuff like that as well because those are stripe hosted and you're you own the the user experience and obviously stripe can't provide you those sort of like account management portals and analytics reports if you're completely masking the fact that you're using stripe so i definitely found uh that express just generally seems to be the best kind of trade-off there yeah i i tend to agree like if i were building something i would probably build off of express myself but totally depends on you know um your particular use case so this is like these are the three flavors of of connect but like how does connect work um essentially it's gonna look pretty much like this someone pays in and then with express and custom in particular the charge happens on like the platform right so the money goes to the platform and then automatically some of the money is transferred to the merchant now the place that the money is transferred is called a connected account and a connected account is linked to the merchant's bank account so to go back to that list example when you make a charge uh the money goes to lyft and then um lyft probably keeps a small fee and then the remainder of the money is transferred to the connected account which in this case is the driver and the driver's bank account is connected to that connected account so that uh the money you know automatically or manually is paid out to that driver's bank account and that's pretty much how it works that's that's connecting a nutshell essentially now uh in terms of like what we're going to be doing today we're basically going to be doing this exact flow but we're going to be doing it in a no code way right so in order to do that we're going to need to do um i'm just going to stop sharing real quick but there we go so in order to um actually like do this we're going to need to do at least two things right so first we're gonna need some way to actually like get people to sign up that's like so that people can onboard and be on your platform in the first place and then the second thing we're gonna need to do is we're gonna need some way for them to actually do a payment so uh in this particular case there you know you can use apis and build custom forms there's a hosted option and things like that but in our case we're going to use a relatively new product called is a no code way to accept payments on strike and it's as of i think like a month ago a no-code way to like accept payments as a platform on stripe so let's hop into that one real quick all right so i'm just gonna go back and share my screen one more time all right and can you see my screen all good all right is this font good it looks big to me but i don't know what it's like for the audience i i can read it yes cool all right cool cool so what i got here is just like a stripe dashboard when you sign up for stripe this is what you get um so let's go ahead and let's see what was our first thing that we needed to do we need some way for people to actually like sign up um sign up for the platform so what you would want to do and if anyone's following along you would want to go to connect right and right now you'll see i'm in test mode um with stripe you have like a test mode in a live mode you don't need like a test account your account has like kind of like a shadow of itself um called test mode so i have that activated because you know we're going to be doing some testing um now let's see we want to we want to create a link so that we can onboard new accounts so let's see how we go about that we go to connected accounts we go to create and again this is like the loco way of doing it we pick our account type so we're going to stick with express the country is going to be the united states click continue and here is our link now what you would do with this link is it's a one-time link you send it to your users so if you're like super scrappy you're building a no code platform which you would do is every time you have a user who wants to onboard with your once to onboard you would essentially go here get this link and then you send it to them and as long as they complete it within seven days um you'll get like a nice email to let you know whether or not you'll get a nice email to let you know that they actually like signed up for your platform so like what does this actually look like though let's just take a quick look here so i'm just going to go here all right so here it is this is a hosted um onboarding form actually this is the oauth form it's a little bit different than a hosted onboarding form um but this is a hosted onboarding form itself hosted by stripe and it's also customizable so you'll see that like uh it has the husura logo which you can add in your settings the name of the company which in this case is uh asura demo and also just like a message to let whoever is being onboarded know that they partner with strike so that's again like with express it's pretty clear that you partner with strike similar to uh similar to standard connect so let's do this real quick we can pick which type of business we are so let's say that we're like an individual let's add a test phone number here and then we can do uh let's see maybe not that one test uh email at example.com continue it's test code and then i'll just walk us through the onboarding essentially so i can add in my name say my name is jenny frozen and it can be www.realsight.com [Music] or if you don't have a website you can also do a product description so let's say we sell frozen i don't know um i don't know socks you're sorry this sucks sounds like i don't know maybe maybe uh not just socks really fancy socks i dig it fancy sucks right who knows who knows um so you would put your bank account really important to have the bank account because again you need this to in order for strike to be able to pay you out right so um you'd add your bank account and then in addition to that you add some information about yourself so let's see got oh yes memorizing these dates from the docs was one that took a while yes and that's a good call out so like right now i'm in tesmo so i am adding in certain values that seem nonsensical like the date of birth in 1901 uh and it's just that these values are essentially like test values so when i type this in it's going to verify same thing with the social security number right yeah yeah that that one's buried in the docks yeah so it's verifying so it can take up to about a minute and if i actually typed in the right values it should verify we'll see but being a live demo who knows yeah you know it is the law the immutable law of live demos yeah the thing that worked five minutes ago will break on screen a hundred percent every single time i think i'm gonna just i'm tempted to just submit it because this can happen asynchronously also like oh that's neat it should yeah it's it should it's great if you can do it because then we'll see it in the dashboards again verified but i'm just going to submit it for now all right cool and that's the that's onboarding essentially so you now that that whole business if you're a real business at this point you are just completely able uh for me to start uh transferring and processing payments uh kind of you know doing all those financial things with you that's that's pretty much it right yeah that's pretty much it like if if that little verifying uh loading screen had been completed and it was a green check we would have been all good to go in general when it's not a demo that happens in about a minute when it is a demo it does demo things um but let's hop back into our accounts because we might actually be able to see this new account that we created let's just do a quick refresh oh no all righty all right i'm just going to drop go off screen yeah again whenever you need uh whenever you need to do these types of things so i have one random question um the only kind of uh thing i ever ran into with the stripe apis is uh you know how you have a bank account and the bank account is attached to the connected account and that's where the payouts work yeah maybe about two or three years ago as i recall i don't think there's a way unless you go with custom to handle if a connected account has multiple bank accounts do you know if they've updated that since now or are you still kind of like forced into custom just because of the way those apis are built oh man let's see i actually don't know that when i off hand i don't blame you it's a really niche circumstance it's a little yeah that one's a little niche um just quick uh quick quick one here how about how am i sounding here that's i think i got a quick message from someone in austin saying that i might have the wrong microsoft phone on i don't know if you hear me uh yeah i can hear you um it may be that you have the wrong microphone it's not like the clearest thing in the world but it's also not unclear any better basically the same ah it's really no good i don't know what's going on there um if it's if it's bearable um yeah you sound fine yeah yeah let's see it sounds like uh let me take a look here ah how's that oh yeah yeah that that's definitely that microphone okay thank you uh thank you uh random youtube people i really appreciate it no that's that's actually funny um cool so let me let me hop back into uh stream let me hop back into uh strike and let's get back to uh doing what we were doing shall we okay so all right we can all see everything right yeah and you got the buttery smooth tones coming out of that microphone now oh that's perfect that's exactly what i was going for okay and the great part about that brief intermission is that it gave us time to actually like uh get this account completed so it did complete and verify asynchronously so we can actually see it here um yep test hyphen email so this is the account so our next step now that we've onboarded this user really quickly with this sim like simple link now we need to do is set up some way for them to accept payments right okay so we said that we were going to sell stocks so what we're going to do is we're going to go to payments and then we're going to payment links and let's add a new payment link now what a payment link is it's a hosted it's a hosted onboarding form that allows you to accept you know credit card payments um with a by essentially just giving someone a static like a single link and anyone can go to that link they'll be presented with this checkout page and they'll just be able to like make the purchase essentially you also have like a variety of different options you can allow promotion codes you can allow customers to adjust the quantity you can collect customers addresses if you need it for fulfillment so in this case let's go ahead and like add a product so we said we wanted to sell fancy socks and let's see the description is going to be really fancy socks really really fancy truly i mean we need to emphasize this really really fancy socks i don't have an image of these socks but assume that they are extremely fancy use your imagination exactly they're going for 25 a pair right um so let's go ahead we'll just add this product so we're getting there with our checkout form here um let's see maybe we collect customers addresses right and we can show a confirmation page with a default message so we can say you know thank you for buying my really she's really fancy socks and uh here's how we actually route the money between the platform and the submergent right so after the payment you can split the payment with a connected account so we can select from the accounts that we've already signed up now the one that we just signed up was uh test hyphen email and we can put in a percentage that you know we as a platform should keep so gavin are we like like what how much should we keep apparently we should keep something higher than zero percent definitely higher than zero percent okay that's the advice so uh we should keep uh ten ten percent let's be savage oh my goodness truly savage okay so let's go ahead and do this oh one last call out so if you're looking at this page you'll notice that it has some custom branding has a logo here and some coloring and that's all handled by the branding settings i like to pick this color so you can do some you can do some light customization of this hosted form so let's create this link and here's our payment link and let's see is there a way for me to share this with folks on the stream so i can get some people to buy these fancy socks oh you should yeah we have a i think we have a chat right we totally do um so i'm gonna stop sharing for a second actually i've already done it let's see you can you share it out i'm not i don't think i can like um i can't respond to the comments directly um you yeah yeah you can do that that's weird we go please buy these socks people nice all right let's let's see if we can um let's give it a second i want i wonder how many uh pairs of socks we can get we can get bought but essentially um when you think about it how long have we been doing a stream 30 almost 30 minutes that was the entire process of onboarding accounts with one link and then also creating essentially creating a product that people can make purchases on with a single link so it takes about 15 minutes if you want to take the low code route it's just uh it's unreasonable you know you think back to like a ruby on rails days in like the early 2000s like 2012 just how long would it have taken you to build that custom like oh man we're spoiled technology has spoiled us oh absolutely like once you use payment links it's uh it's pretty tough oh one thing for folks for folks who are gonna try the link right so with stripe and gavin alluded to this already um there are certain like tokens that you use in order to do certain types of test payments so if you want to complete this test payment successfully um you got two options if you have a digital wallet you can just try it yeah otherwise it's four one one one one etc or you can go with the other one the four two four two and if anyone wants to guess why it's just four two four two over and over and over again please put it in the string i wonder who gets that one first i actually don't know no someone someone someone knows why it's why it's four two four two over overnight if you if you know please post please post i'll try and send you socks oh no we'll see um so let's see uh maybe some folks have made a transaction so i'm just gonna go back i'm gonna hop back into it so we can do some more stretch stuff cool all right so let's see did we get any payments maybe right all right the money's oh look at that the money's rolling in we got something from from will sarwan bw this is great we're rich we've already made 75 dollars worth of revenue in like 10 seconds this is doing we're doing pretty well here okay so this is the low code approach so you know what to do with stripe so i think the question the next question is like how does this connect with hasura right so let's talk about that for a second so gavin what what i'm thinking we should do is there's like two pieces of information that we're like creating right now that i think is like pretty important um the first are these like payments themselves right we should probably track that somewhere and these are probably associated with some type of order after all people are buying socks they expect their socks we should make sure that we have some way to keep track of that in a database yeah and i'm thinking right yeah i can't send them the socks we don't track who buys and then let's see the other thing that we're creating here is uh let's see we're also creating these connected accounts like it's great that we can always just go into stripe and see which connected accounts um are currently complete we can see what the balance is what the volume looks like and stuff like that but ideally we would store that outside of stripe as well right yeah so we can keep track of like which which merchants we have maybe we do some analytics or something like that who knows right yeah mvp mvp customers buying all socks 100 100 percent so i think we have a good idea of like which which which database and which which um which data store to use we should go with sora right so let's see you know i might be slightly biased but i would say so okay so let's give that a shot so if we hop into asura i already have um two projects one that i used to like learn asura and this one for this stream so if you want to follow along um if you want to follow along i'm going to share a quick project that you all can use i'm you i'm going to be doing a lot of stuff in glitch essentially what we're going to do we're going to build like a very very basic back end so that when someone signs up to stripe on your platform like they create a connected account we can add that into a store and keep track of it we're also going to create um another uh integration another integration where essentially when someone makes a payment we are going to store that payment inside of soar so we can do fulfillment let's see here um i have a glitch and a glitch is just a nice way to really quickly like write an app share it with people if you're doing like a really basic demo this is a really great place to start if you if anyone on the stream wants to code along or so you're watching this afterwards let's let's actually um [Music] let's share this so everyone everyone can uh follow along if they if they care for you sheridan coming up so let me i'll share that one with you and into the chat it goes all right cool so in order to to actually use um this glitch that i've shared um you're going to want to have a few different things um first you're going to need some secret like your secret creepy from stripe and then you're also going to need uh your hasura admin secret is that is that the right name for it right okay cool so let's go ahead and get those do that share my screen one more time all right cool so um we have a project here it's a really really basic project i'll just walk you through it super quick so we have our server.js and this is just like a fastify server here it's really similar to express if you've ever used express um it's basically expressed with it with a different name it feels like faster faster express it's faster exactly right um so just going through this file really really quickly we have a m file here and this is where we're going to store all our secrets so um we have a stripe secret key a connect secret for our web hooks and we're going to get into that a little bit later as well as a platform secret for our platform web hook um we have this uh content parser we'll get into that a little bit later but it's essentially so that we can do things like uh verify web hook signatures to make sure that they actually come from stripe we have this really basic page just to let us know that our api is up um and then we have some different endpoints that we might want to use now the endpoints we're going to focus on today are just going to be web hooks actually um so speaking on web hooks when something happens in stripe essentially you will it creates a an event like if an object is is created or modified like if someone creates a payment um or someone uh creates an account two things happen the first thing is that like stripe actually creates that thing and stores it and then the second thing is that stripe sends uh creates an event and these events can be sent to a back-end endpoint through what's called a a web hook so stripes sends these web hooks so that you can keep stay on different things that are happening within stripe so in our case what we're going to be doing is we're going to be using two wet books the first web hook is going to be the connect web hook let me make this a little bit bigger so it's a little bit easier to see the first web hook is going to be this connect webhooks and essentially what this is going to do is whenever someone signs up on the platform and creates an account it's going to create an account and it's also going to send an event and that event is going to be called account dot updated and this updated event just lets you know that an account was updated in some way or possibly it and we're going to do is we're going to take that account we're going to take the information from that webhook and then we're going to essentially push it to hasura the next thing we're going to do is we're going to do something similar for payments we're going to uh listen for uh payment link completions and if someone completes a payment link it's going to create an event and it's going to be called checkout.session.compleated we're going to do we're going to grab the information from that um web hook from that web hook and then we're just going to push it into asura for uh fulfillment later and that's our game plan sound good sounds solid one didn't uh didn't you folks also recently revamped the the web hooks dashboard on the stripe web ui yes oh my goodness gavin your a man after my own heart man you you're really following stripe and i love it um yes we have so like let's take a look here um so this is our new web hook experience and this is where you're gonna actually create those web hooks so let's see here we have a web hook for we have two web hooks right now we have our direct web hook and we have our connect web hook now these are for actually a different slightly different glitch than what we have here so let's make a new one just so we can see what this looks like so our um when you want to create a web hook uh you got two options one for one um you can just like add it if you already have your webhook handler set up or if you want to test it you can actually um use what's called the stripe cli to essentially forward web hooks to like a a local server if you have it in this case like we're using glitch so we can just add an endpoint and we'll build it out in glitch so let's go ahead and do that so i'm just going to go to server and i need the url of this glitch this is like the live site here and if we go back to the web hook let's see which one should we build out first so the first thing we're going to be doing is like uh first thing that we want to focus on is just like making sure that when someone makes an account they're actually um we're like saving their account in our back-end so let's go ahead and do that so let's say um that's signed up we're gonna listen to events on the connected account and we'll go to account and we just care right this is it's a lot slicker than it used to it dude yeah this is so nice it is is definitely an improvement for certain so if we add the um web hook and that's pretty much it um once you when you when you in terms of like adding it on the on the gavin's lab because he's like that's not it we got a lot more work to do no i mean it just i saw the implementation code on the right and that's like coach end from the the events that you choose so it's just i mean it just gave you the webhook handler and was like here drop this in and then you just fill in the business logic i mean that's pretty nice it is it is oh my goodness let me you know what i want that back i totally do because it's it's like to be able to drop that in let me see i want to try and go back so i can i can get that code here we go let me just grab this you're right we we can legitimately just we can literally just snatch this and we're done so yeah can i i might be able to replace all of this i think it was already in the try no it wasn't so kevin's right you can just drop this in let's format it a little bit all right there you go so this this is pretty much the web hook we can just test to see if this works let's just um let's see does it already have a yeah so it'll reply and send true so let's just test it let's see if it works so i'm going to go back i'm going to go to which one that just create i think it was this one yeah so let's test the let's actually like test the event so in order to actually test it we're going to need to grab our secret and this lighting secret is just don't steal nobody's stealing please don't steal this um i really appreciate it if you if you if you don't steal my um secret uh let's see so we're gonna drop this in we're gonna drop in our connect secret let's see what else um you also need our stripe secret key so let's grab that too also please don't steal this for the next like 20 minutes please later on you can do whatever you want um so i'm gonna just grab this one as well all right cool so if i hop back into my code here we got stripe it's using my secret key we got the connect web hook secret is using the connect web hook secret here and let's see here yep so i'm doing the verification of the web hook and this is just what that seeker is for it just essentially lets you know if if it's legit it's actually coming from stripe so this should be good let's let's um let's go back to the web hooks and give it a give it a try so we're going to send the event we can include some connect parameters and this is just going to like send a mocked webhook and it worked oh received true and the response yeah that's exactly what we were sending if we change it will the response change so if we make it like received two or something yeah oh boy all right let's go ahead and try this real quick and if we send it again boom oh man that's nice it makes it really easy so now that we have we kind of have like the the stripe part set up like we have our web hook handler we we've tested it it works it verifies the signature and all that good stuff um the next step i guess would be to just like hop into asura and then try to add this to the database right yes sir let's let's give it a shot let's do it okay so i'm gonna go to historic console and um all right let me go ahead and just grab my secret here so i'm gonna copy that and i'll go back here to my glitch and i'm going to throw this in here so that's my hasura secret now in order to actually be able to like make um queries against asura i have um this really simple wrapper around axios right i'm going to just be essentially hitting like my hasura cloud endpoint and i'm just going to be passing in some queries and some query variables and that all makes sense right i actually just learned graphql uh pretty recently oh do you like it what are your thoughts ah man i want to be honest like getting a 200 when there's an error feels weird but other than that i kind of really like it actually yeah it's pretty nice yeah yeah you did that 200 error thing is weird but that's why there's like clients that just wrapped the response and like internally throw the error yeah what's a what's like your favorite client by the way um i'm really partial to um your ql urkel which is basically like a lighter weight apollo and there's a really neat tool called graphql zeus that can basically like you just give it the url to your graphql server it works with any graphql api and it auto generates typescript types which like if you're not a typescript person um obviously has no allure to you but it basically makes it so that if you had like an automatically typed like orm pretty much because you could just be like you know db.users.where and then it like strongly autocompletes all the like things that you can filter on and the return type it's it's pretty cool oh that sounds dope i don't do a lot of typescript but i want it for the autocomplete right yeah that's the that's the big benefit there right it's just super nice okay so okay so if this if this works out uh let's see what we got here so i have my asura strike demo uh project so let me see here i'm gonna go into data and i think i've already connected my database and actually might already have a table too let's see yeah i have a table i could recreate the table but i don't think there's any need um let's see here i am going to delete some stuff though let's delete all of this stuff here and let's just really quickly look at our table so our table is going to have just a few columns right we're going to have an id and that's going to be like the connect account id when it was created whether the charges are enabled like that's super important because if the charges are not enabled there's really no point in trying to set up like a payment link or anything like that the country um the email of the person that set it up the business type whether it's an individual sole proprietorship or like a company and then just like the name of the business right and so what we're going to try and do is we're just going to try and use hasura to add this to this graphql uh to add this to this postgres database so let's see here um just going to go back to go back here and uh let's see so i can basically just like mock out what i want my um query to look like here right yeah do you want to do a insert data or a query for data you know i want to do i want to do a mutation let me okay yeah yeah so yep there you go all right cool so i'm looking good here so far yep yep and then you can just like click away all right so i can literally just click i can just click all these things yeah and then fill in the boxes if you want nice nice okay so i wanted to insert in uh stripe account right just one one yeah okay so i'm gonna grab this uh i want to update all of these things and if i want them to be variables do i just like click this thing here yes sir okay let's do that and then charges enable we can have that be a variable as well and it's yelling at me if you want to know a secret there's um so if you click on the right hand side docs like on the very far right there's like a little expander thing yeah and then click mutation root the yellow one and then search for insert stripe accounts one and so yeah click insert to subaccounts1 and the the variable type is insert stripe accounts insert uh stripe accounts insert input and that will let you pass any uh combination of those variables so basically if you just give it this type so if you do it like um if you do it like this so if you do it like um object is uh insert insert stripe ounce one oh my god if you do it like that then it will basically let you pass in all of these oh man uh i i want what you just said in in text form um yeah i put it in a chat okay let me see if i can grab it from the chat real quick is it in this chat or the oh look at that oh there we go yeah so basically where you have all those like variables at the very top of the query that's like name get rid of all of those and then just put that one thing yeah and then for the type of object make it um object and then dollar sign object and then that that will let you pass all of them oh that's clutch yeah so i can i can just do this yeah and then you just have to make a selection of what you want to be returned okay i just want the id cool so what is my what does my query variable look like in that case uh press control or command space and it will if you do um if you do open parentheses open brackets and then uh controller command space to auto complete like in vs code it should give you a suggestion um but basically be like uh quote object and then inside of that will be another nested object all right and then it would be the individual variable names in there all right so let's see so it'd be something like id and then how does how does that work do i have to do like a id or what uh you could put like uh one so you basically just give the value for each thing but it's just like a regular value so be like the literal number one oh nice okay okay nice all right let me see here so i can just do test um created before here country i totally did not know you could do that yeah it it doesn't it's not very intuitive i didn't figure it out until like a really long time oh that's super cool um let me just raise this up so people can see it and let's see here charges enabled true let's see i think that's it i think i have all of my things here except for the email i forgot the email yeah okay does not appear in the graphql query um does it you mean insert stripe that counts one yeah oh is this oh uh no that's definitely the right type input type insert stripe accounts one can i like change it to yeah it seems like this would be it right yeah i don't know why it's doing that oh well let me see here yeah it doesn't like that either yeah it doesn't it's not digging any of those all right let me see here um [Music] i have i think i have some stuff here that i can use so i just wanted to do an insert right so let me just go ahead i'm just gonna grab this mutation real quick i have a little snippet here so if i get rid of this object here i think this could work too oh it doesn't like that country does not appear so yeah i didn't have country originally so just for context i had a snippet just in case because of demo so let's see here and id should be a type of string so four oh got it this should work right yeah all right let's give it a let's do it let's give it a let's give it a shot all right so yeah i'm running it oh here we go we got our data okay cool so this query works and then also these variable works so essentially all we need to do um really quickly is let's grab this mutation essentially and grab this mutation i'm going to go back into [Music] my uh go back into glitch and um i guess we make a we can just make a new function that lets us just like do a insert um based on the information that we get from a web hook that makes sense right so let's let's try that um we can do cons is this caught up insert what's uh what's the difference between an insert and uh just like postgres yeah so the the upsert will basically either insert or update depending on whether it already exists and that's pretty much the only difference nice okay all right so here is here's our um see so here's the mutation that we just had and then let's just make a really really basic function let's call it uh absurd stripe account i guess and uh let's see it'll be a sync and it's going to take in just like uh stripe account info and uh inside of this thing what we're going to do is we're just going to use this asura gql function that we have and it's going to use this let's see it takes in a query and then query variables we're going to use this query and then we're going to use the stripe account info variables and we're gonna return it and we're gonna wait it and uh finally we just need to um what's we need to do we need to export this got this all right cool so this should work uh executing this function here should uh do our mutation we just need to make sure we're passing in the right information so if we go back to [Music] server we can i'm going to uncomment this out so that we can pull in that function that we just made i have the name of it let's see here we are building out the connect web hooks and let me make this a little bit bigger okay so after we verify the web hook uh signature and we're just going to check the type of the event what we want to do is uh let's see here what do we want to do so the first thing we're going to need to do is we're going to have to grab the information from the event now if so when you get an event from like stripes web hooks it like sends a like a body and it includes all the information about like what actually changed like the current state of the object so in the case of like an account being updated you're going to get an event and the event is going to have some information um about the account and the account is going to be um inside of the event.data.object so if you grab the object inside of the event um whatever object type it is um that's where the object is located so in the case of account update if you want to actually get to the account information you just event data object so once you have that's for every web hook right yeah it is okay for every web hook um let's see here so what exactly do we want here we want we don't need the entire account though i guess like what we actually want is um what we actually want is just like the id um what do we want um we want the id we want the we want the name let me let me think about this a little bit more so actually it might be useful to go to the docs actually let me just go to the api reference so these are the reference docs this is really helpful for seeing what the different objects look like so then in the case of an account i'm just going to look at an account to see where everything is so the id is a top level attribute the business type is the top level attribute the email um but where's the business name i think that one's actually in the business profile so we have to go business profile.name okay so maybe we just grabbed the entire account so let's say uh stripe account is equal to that and uh let's see let's see let's see so we could do um a weight function we can just put everything in here actually so the id is just going to be the stripe account dot id the uh name is just going to be a stripe account dot business profile dot name we just saw that the email is going to be the stripe account dot email be uh see what else do we have i think we had created so stripe account dot created and then the business type is just going to be that's also top level so we can do business type and then whether the charges are enabled and you can accept payments that's also um there as well so we could have constructed these it's fine now all right cool so uh this should be it so what's going to happen is we're going to do a test web hook really quickly and i'm getting the app warning here what am i getting an app warning okay all right so code's fine though so what we're going to do is we're going to get a web hook for whether our account has been updated and once this web hook is received by our fastify backend we're going to call this function upsertstripe account and that's going to use a graphql mutation to add it to our postgres uh database that's the story does that does that match on the source side yeah okay cool let's actually do this now uh it took a little bit longer than i expected it to um let's go to the web hook and um we're just going to do send test event let's see okay okay all right okay oh no huh 404 that's weird let's see but it's sent received this set is received too yeah maybe i'm missing a break somewhere let's see what happened oh i must have had an error somewhere oh and then it caught it and returned 404 yeah i actually don't know what the error is though i'd like to know what the error actually is let's see here so we got our stripe account stripe account um email business type charges enabled this is async all right we're gonna have to do some guest some guest driven development here so forgive me yeah so that failed and connection refused okay let's hop back into our environmental variables something's missing here so we have our admin secret we got our connect secret we don't have our sewer project um which means that we're like making a request to know where exactly um [Music] where where what should what should that actually be not supposed to be just this let's see here just making requests to nowhere and let's see here um i would expect this to uh expect this to just yeah it's just in here that's weird um i don't know have to look at that later so let's uh let's try this one more time hopefully this works okay okay all right all right so this part looks right we can't trust this though this thing seems like is is the data in the db yes that is the question let's hop into the db um okay let's look at the web hook real quick just to make sure let's see so what we should see is an account underscore 0 0 over and over and over again so fingers crossed that's what we see when we go to stripe accounts and there we go it's in there we can actually do a real test too to to do that as well but yeah that's that this is essentially the pattern uh for web hooks if you wanted to like keep state on different things happening um happening inside of your stripe account and hosor actually makes this super easy like i i have not done a demo that involves a database um generally because it requires a decent amount of work right if you're just doing it with surah it takes like you know 15 minutes if you know graphql better than me you know it that's yeah man it's really cool um somebody from the audience appears to have caught a mistake which is we were sending the received event even after catching the error so yeah you're right oh you're right good great good catch good catch yeah yeah it's a great catch that's a really nice but yeah i know this is super cool i learned a bunch of stuff that i i didn't know too um and i think that you know slightly over an hour to go from nothing to uh we have an account on stripe we have businesses connected to us we're processing payments we're storing that info in a database we have an api it's just like modding technology is crazy man it is but yeah um that is i guess pretty much uh that's all we have time for today uh we went a little bit over actually getting in the weeds there uh not that i minded i had a super great time uh charles thank you i did thanks to ton for attending that was really fun um and thank you everyone who is still here um question can you code web hooks can you code web hooks or his serverless functions directly inside of sarah unfortunately you cannot you can't put your business logic right realm right so you can't put your business logic directly inside of surah um at the moment you can do it with there's a way you can do it using like database add-ons that run like regular languages and using them as sql functions and there's some other like convoluted answers but like the for what you're asking now the answer is not at the moment um and i'll just kind of leave it at that uh you could if you really wanted to but for what you're asking like not the way that not the way that i know that you're asking about it um though hopefully in the future that is something that i personally think would be really cool uh because then you don't have to manage bunch of infra you can just kind of like here's like a serverless javascript handler and like that's your action code and it just runs with syria but um yeah thank you uh thank you everybody for uh hanging out with us i hope that you had fun um charles do you have anything that you want to plug uh for stripe oh man what an opportunity so many things uh definitely check out definitely um check out you know our channel as well if you're interested in learning more about connect uh in general if you're getting started and you want to like bootstrap a platform really really quickly you can definitely use the things that we just used here um stripe payment links and connect oauth onboarding make it super simple to get started and hasor makes it really easy to keep state and like have a database with a really minimal amount of code um other than that it's just been really awesome to be on this channel and just like test out hasura and do cool things yeah thanks for having me um yeah and uh you can uh i'll just put it out there i think charles uh he is on twitter i do have a twitter handle i can put it up on the screen yes please okay i'm gonna find i'm gonna find your twitter handle charles w underscore dev okay that's easy enough it is this okay android let's i'm going to put that on the screen um yeah mine's at gavinry dev so it's super generic dev handles you know in tech but uh yeah um that's pretty much it i guess i don't really know how to end this thing in like a non-awkward way as i'm sure many of you can empathize with so uh i'm gonna say goodbye and charles if you want to say goodbye and then i'll push the button that stops the thing yeah absolutely thanks again for watching that's all friends i don't know that's all folks bye

Channel: Hasura

Views: 497

Keywords:

Id: C94Rktkx_UE

Length: 72min 4sec (4324 seconds)

Published: Tue Oct 05 2021