Live Coding #1: Stripe payment integration - By @MarcoCodes

[Music] [Music] one two three boom and we're live hello folks good morning good day good afternoon wherever you are how did we end up with this live stream i'm very excited to have you all here uh watching listening and hopefully coding along also and i just want to give you a bit of background info now i've been a bit i got over the years i got a bit tired of in technology all these discussions arguments framework wars religion how to do things right how to do things wrong what's going on how to build software and whatnot and at the same time it's also that rarely do people want to be looked over the shoulder while they're building something while not everything is perfect and they just want to show off the perfect result so i thought it would be quite cool if you could just watch someone build something um well it's not perfect unscripted real life and we built something from the very scratch to the very end so we're going to deploy something to a server at the very end as i like dog fooding it's very important i thought of what could we build what is not just a simple hello world application so not just you know having some calculator something technical abstract whatever by the way hi guys joining so when i'm looking over to the right side i'm just having a look at the chat seeing what's happening and because i want to keep this stream a bit both ways not just me spreading out info to the world but also you know having a look at the questions intact with you and all that kind of stuff but um back to the program we're going to build i thought let's build something with skin in the game so let's have a payment form because it moves money it is important that when you enter your credit card numbers that you get built the correct amount it's something you can actually build in one hour or two hours people can use it and it is a very nice example of a real world life application without a ton of technology without a ton of you know kubernetes a ton of all these stuff we're just going to build a pragmatic modern simple application which we can build upon in the in our next sessions hopefully right and for the guys asking if this will be available to watch later on yes the recording will be available to watch later on you can join me in just um coding along basically you need an ide you need java installs and you need a stripe account you can register a stripe account in almost every country and you can just sign up with the email address and you will get test credentials which will make it very simple to just follow me along you don't have to have a live stripe account to do this what we're doing right and i think that is the intro i'm already down for the next sessions i like that turns on yes yeah because to be to be honest apparent integration is something that can take ages so basically weeks if you haven't done a payment integration before especially if you talk about testing all that kind of stuff because it's not a very simple straightforward thing to do but before i get into the depths of it let me show you what we're going to build one by one so i have this is the end result a very simple payment page so welcome to transparent software developer you will be built some amount of money when you fill out this format and when you hit that button down here you can enter your email address and you can enter your credit card number a visa credit card number you have an expiry date and i guess most of you are familiar with credit card payment forms basically so you just hit pay and that's everything we're going to do for now simple payment form this is on localhost 8080 it's just a simple form what that's what's going to look like what what's going to happen at the end of our session i have however a website live.marcobiller.com you can actually go to it you'll see there's a 502 a bad gateway because we're going to build something from scratch we're going to build a deployable jar file upload it to that server and then hopefully you'll be able to go to the website enter your credit card details pay make me a happy man and then we have our fully working project available basically just having a quick look at the hello guys just having a quick look at the the questions you can use any ide that you want to follow me along i'm going to use intellij idea because i've been a long time intellij user i'm going to use the intellij idea ultimate edition also but i will tell you once something is not available in the free community edition features and functionality i'm using in the ultimate edition does that sound fair right then i think we can give it a go and yes it is i also like the kickstarter id tencent basically yeah let's see if at the end of this stream you basically like seeing what i did and fill out your credit card details here and hit the pay button but now let's not take too much away for now so there's one tiny thing there's a bit before we start rushing straight into uh development implementation there's a tiny bit of details about how these payment forms work which you need to know some theory and you're going to be happy because as i said if you start out from scratch it's going to take you a couple of days a couple of weeks reading out reading about stripe about different payment forms about different payment flows and i'm trying to condense all of that into basically a couple of minutes before we start working with it when you hit that pay button when you enter your credit card details here and your cvc and whatever and you hit that pay button your credit card data never touches my server it's a very important concept so it goes directly the browser talks directly with stripe so that i do not have your credit card details and i cannot do anything with those details so i hit pay and stripe gets contacted the interesting thing is my server does only get notified of the payment by a web hook from stripe so it's an asynchronous payment web workflow basically so browser sends something to stripe and stripe sends back to my server which makes it very interesting if you're building wizards when you hit pay and then you want to get redirected to a different page in the same application but again that's something which we might have a look at in the next episode basically and even more so when you hit pay there's actually two things involved and for that let me just search for stripe accept payments there is a pretty good documentation page which you should open up could open up and it will explain you in detail how strike payments work just a quick note if you're following me along if you're searching for a stripe accept payments accept the payment there are basically two payment workflows pre-built checkout page which means whenever you pay something you will be redirected to a stripe specific page and then redirect it back to your application that's not what i want to do instead i want to use a custom payment flow i want to be in app and you'll you have my own checkout page and just because i saw that quentin will i follow a tdd methodology the interesting thing is stripe there's a ton of stuff to integrate with and one of those things what i'm keen on if you start with stripe there is literally no way i've never seen anyone start with tdd from scratch what we're going to do is we're going to get used to the stripe api work with that get something working because it's not so easy to get something working and then we talk about tests in the next episodes basically yes or you already implemented it so yeah we're going to have a look at tests in the next episodes right back to however the payment workflow let me make that a tiny bit bigger for you i mentioned already the customer goes to the client and the client talks with stripe it's not entirely true there's actually two pieces to it i got to the payment page so i go to this page now in the background what actually happens is that the page sends a request to my server so to the the service we're going to build and my server sends a request to stripe saying hey there's a user who intends to buy something i need to create a so-called payment intent so there's a user on my site and he's about to spend like 10 euros stripe says well okay here's a new payment intent and i give you a secret a secret id back to the browser so when i open up that page here i have a secret id already from stripe that i'm about to pay something and when i hit that pay button now then there's the second step happening i hit pay there's some javascript happening javascript confirms a payment with that client secret i got in the first step and some card details the payment is done and then the payment either works or it doesn't work that happens directly with stripe and then we already finished with the payment form and then we need to care about later the web hook or we get an event back from stripe saying hey a payment happen do something about it so for example unlock a video unlock an ebook give the user customer account status whatever but these this is what we have to take care of for now what's the benefit a quick question from joseph what's the benefit of coding it so that it's on your own server then on your stripe payment page the benefit is if you want to integrate with multiple payment providers for example if you want to integrate with paypal with stripe someone else it is actually a nice exercise to do everything inside of your app so the user can just click a button and say hey i want to pay now instead of being redirected to different providers obviously being redirected to stripes page to paypal's page whatever also works but it is actually quite cool just like on my website to be in the app to not leave anything and just push a button and then you can essentially pay so it's a user experience thing and just asking the client secret yes it's unique whenever you go whenever a user is about to pay then stripe needs to give you a payment intent with the client secret it's unique to that purchase basically all right so then i think what i would do is uh even if i had to implement this in a legacy application if i had to implement it new basically i would always create a tiny proof of concept project because i never worked with the api before well i did in this case but you might not have worked with the api before and i would just want to have a tiny project a tiny spring boot project in this case where i can play with the html form work and play with the javascript where i can play with my server and my back end and that's when we start the real development so as i mentioned feel free to code along open up your ide and we can get started so this is actually my plan b if nothing works with what i'm about to do i coded this once if nothing works we'll just have to look at that source code but we're actually going to start entirely from scratch so just in intellij new project right and this is maybe a time difference already in intellij community ultimate i can already go to spring initializer here and create my spring boot project straight out of intellij if you do not have intelligent ultimate then please go to start dot spring io open up the spring initializer home page and just create a project like i'm doing here in intellij one of the tiny convenience features in intellij right i'm gonna call this com marco biller artifact stripe payments maybe right i'm gonna make it a maven project again if people uh want to use a great project that's also fine with me i'm just want to keep it simple now just going to go with maven i'm also going to go with java by no means you have to do that go with kotlin go with groovy whatever you feel comfortable with packaging yes a jar file we want to just deploy a jar file no docker no kubernetes no nothing just a jar file containing our code java version 11 sounds about right because i don't know if java 15 is installed on my server otherwise we could have used java 15 but 11 is absolutely fine the version is fine strike payments are fine yeah that looks about right now and by the way if someone now thinks this is uh a how what is spring boot unfortunately it's not a really a what is a spring boot or what a spring and whatever if you want to know what spring boot is if you're a complete beginner you might appreciate the guides on my site i also link them in the description of the of the um of the of the stream but this is more about how you will professionally professionally build such an application right now i'll go with the dev tools right just as the as a default i know i need to build um web services uh basically a website writes some rest services i also want uh thyme leaf as a template engine i want uh spring data jdbc right we're not to use jpa for now i'm just going to keep it really simple just with some spring data jdbc i want an h2 database i want my my sql driver because in production we're going to use a mysql database even though i'm not quite sure if we're going to make it uh to using a database in this session but still we have the dev tools we have web theme leaf spring httpc i think we can add whatever we need actually later on if there's still something we need now let's create that project and as you can see it is a really straightforward springbook application from scratch there's nothing inside you can just run your spring application and you're good to go now how would we start in real life how would we start with stripe and by the way just mike yes white theme uh it is the y theme because a lot of people complain about the black theme about the dark theme when watching my videos so that's why i actually put the white theme on even though i'm usually on the black theme on the dark theme so i guess you'll you'll have to live with that somewhat right when you start out with stripe just like i did what you're gonna do is essentially you're gonna read it you need a tutorial i mentioned already there's a gazillion workflows to integrate with stripe so what i'm gonna do is i'm just going to open up actually a different page stripe.com go to developers accept online payments right and here you'll find a link saying accept online payments and the beauty is you can choose well what frontend technologies to use we're just going to go with html and plain javascript we're not going to add react just now again we're going to be pragmatic the back end we're going to write it in java if you're not from java crowd you can also use rubypythonphp.net that will actually work flawlessly that's not um not going to be a big issue again we're using the custom payment flow so we're going to be in my application not on the stripe application and then stripe gives me a pretty long tutorial of what i essentially need to do to integrate with stripe and for you if you have a stripe account if you're logged in you can simply follow that tutorial on your own time later on after i finish that with a video and i get everything working so it's not just my stream but you can also always go through that tutorial basically now just roughly checking out because going through every line of the tutorial will take a bit too much time but just having a look at what we roughly need to do so set up the server that sounds a bit like yes our spring boot application right where we need to create that payment intent i talked about earlier then we need a checkout page yes that's the atm html page the user is going to see what we need some javascript our payment form right and then complete the payment on the client this is some javascript which sends everything to stripe basically right and then step number four is already testing the integration so it seems to be pretty straightforward hopefully let's see stripe gives you the code for every integration you have so i i have a server.java file here which seems to be a spark server i'm not entirely sure what that is but i'm trying to go through it and trying to understand what's happening there basically so i have my server here and i see some classes there seems to be a create payment intent dto there seems to be a create payment response dto yeah that looks about right some calculate order amount yeah that also looks to be right and there seems to be a main method so that is basically what my spring application my spring boot application is doing and in that main method the only thing that really happens is i have i seem to have a handler method for posts so there's a an endpoint being called createpaymentintent that seems to be the browser calls this endpoint and this endpoint has to call stripe to create the payment intent so i'll tell you what i'm just gonna copy the whole thing just like so i'm gonna go back and a bit of let's say um what's it called not convenience but convention i'm just going to put my controllers in the controller package and we can argue about that in a bit also so i'm just going to have my payment controller right it's going to be i know it's going to be a rest controller and um let me not just paste that in here but i know i need a post mapping i'm not entirely sure at the moment what uh this method is going to return right but i'm just going to post everything inside here for now right this looks like my post mapping could need a ul like so create payment intent we can get rid of that we don't need to set a response type with with spring and then i see some manual conversion going on they try to use json which is not jackson to convert whatever the the browser sends to a create payment class and at the end they convert everything that stripe sent me back to the browser also with json so i need a couple of things i need json because the stripe api is pretty dependent on json and also we need the stripe api on our in our libraries so let me just quickly add that pom-xml i'm just gonna add first of all i'm just gonna add json it is in springboot's dependency management i'm also going to add stripe java which is um stripes java api basically and also i can tell you something which basically um cost me hours trying to code this once now springboot uses jackson by default the json marshaller i added json and there are some edge cases where it's a problem when you have both on the class path so i need to make sure to exclude jackson uh actually and because i never know how to do it i'm going to search for spring boot make gsn default let's see and there's i'm a simple guy i'm just going to click the the first link on google so i can see uh here's my json that i added already there seems to be a property but i know a better way than the property when i go down right i can actually exclude starter json from starter web that's what i'm going to do so i'm just going to copy that in here and then i see a ton of people struggle with that you need to hit that button here in the upper right reload your maven changes otherwise that stuff won't work right so hopefully i can see my libraries here i have stripe here right and i have json on my class path that looks good let's go back to my payment controller so the request body is the payment class create payment class let's put that in here create payment and actually i cannot auto complete that class so it means it must be from the tutorial let's go back to the tutorial it's these two classes these dto classes we saw earlier right so i'm just gonna again uh paste them in here now the interesting thing is some people have issues with just copy and pasting their code immediately thinking of when do i need to put these classes what's the perfect package structure the funny thing is what i want to come to is that you have such a powerful ide you can essentially do anything that you want with these classes so for example if i'm fed up with create payment living inside here i'm just going to say well i can move create payment to an upper level i can make it its own class and i don't want to put it into a controller package for example i can put it into a dto package which doesn't even exist and intellij will just create it for me and then i could say well hey why is the controller just in the controller package that controller should be in a web package so i'm going to create a web package i'm just going to move my controller and everything i'm just going to move it inside the web package the same with the dto package so you can use your ide to your advantage and just use all these refactorings and not be scared of having the perfect structure at the very beginning right uh payment controller let me see what else do we have we have our credit payment response let me just quickly move that also right so we have these two classes these are just dtos that the browser sends to our server and the server sends back to the browser let me just have a quick tiny look at the questions because i saw when you yes you can see my shortcuts that i'm using on the bottom of the screen what you want to do in the pom xml is you want to click alt insert to insert these maven packages maven dependencies and you get auto complete and whatnot and you can just search for them uh it's a it's a handy shortcut pretty much alt insert not just alt enter if you're inside the pom xml file right back to our endpoint this is stripe specific api we want to create a payment intent that is stripe specific api again and at the end we just want to return a payment response like so someone a streamer i'm watching said that when you're coding and streaming at the same time you have 50 of your brain power and it sounds about right that you have 50 of your brain power talking while coding so even with this now um i said earlier i don't i just put a void return type here because what i like to do is i just say return you create payment response hit alt enter and then let intellij change the return type for me i'm even that lazy so i'm returning a create payment response i know that this is um a request body object coming in a json object create payment right and now let's have a look at what we do here this is the call to stripe payment intent create with some parameters which is basically a simple builder object we want to say usd dollars and the amount is what did we say what do we have on our page i don't know at the moment i'm just going to put 15 dollars here we can change it later and stripe always wants cents so that's why i'm multiplying by 100 here uh 15 times 100 and this creates the payment intent on the stripe site it basically says there's a user who wants to pay 15 on your page please create a payment intent that's what the front end needs and actually you can see the create payment the object we're sending in isn't even being used at the moment because it was used here create payment uh what products does user want to buy how much does product cost there so now that we're just hard coding uh the price we don't even need the object that is being sent in right spring boot is just auto configuration this is what you're seeing is spring boot yes and it's auto configuration yes and if you want to have a look at the guides again on my page there's a guide what is spring framework there's a guy what is spring boot and whatnot you can also take my course it is literally they tell you everything you need to know about what i'm doing here and what's happening behind the scenes if you are uncomfortable with post mappings and these annotations and what is going on here yeah so please have a look at my site at my guides first and then try to basically re-implement this okay this is the another question from tencent city question not using final vowels for payment related classes i'm not using any final vars at the moment this is not even omitted for brevity at the moment this is just omitted for i want to get something done as quickly as possible actually let me create i think i need to create a couple of let me see for gsin this is emitted because i wanna take i'm doing this imagine i'm doing this for the very first time and the only thing i wanna do is i wanna get started as quickly as possible so i don't wanna think about for now at the moment again what is should everything be should it be fine should not be final uh what is this should i use constructor injection should i use field injection whatever i want to take that tutorial and get basically a quick bang for the buck it doesn't mean we're gonna end up with dirty code uh later on no we're going to make it clean as clean as possible but i want to do it on the fly basically yeah so for now i'm just going to quickly copy and paste and get done with it we have our payment controller and there's nothing to see at the moment there's nothing to do nothing exciting going on here we need our step number two from that stripe tutorial which is the checkout page let's have a quick look the browser so step number one that's what we did we set up the server we added uh stripe java to our pomxml file we created a payment intent and we just copy and pasted that code we didn't test it that's another thing tess next episode i just want to get it done manually see that it's just working just once again no tdd no bdd no nothing no kubernetes at this point just get it get done with it i can see build a checkout page on the client a load stripe.js define a payment form initialize stripe.js fetch your payment intent initialize stripe elements oh boy a checkout form create a card element oh that looks like a lot of stuff and if i'm looking at it there is a quite a long javascript file here on the on that page and i'm just going to copy that for now we're not going to go through it line by line we're just going to hope that the tutorial does something right client.js file let's go back to the server static client js i'm just gonna paste it in here right the only thing that is interesting for now we're gonna we're gonna we're gonna see that javascript in action in a second but the only thing that's gonna happen is there seems to be that javascript fetches my endpoint the one i just built create payment intent with some json and then does something a fair amount of something and that is something that you can have a look at uh either after the stream yeah but i'm just going to show you the important parts of that javascript file once we go um once we have our html page so client.js we have that which is not yet an html file let's go back that was not the right there's so many windows open you can only see half of my screen i have a second screen where your chat messages are popping and popping up where i have my streaming software open so i'm trying to get everything done the right way back to our tutorial there seems to be a checkout html page right i'm just gonna actually i'm just again i'm gonna be lazy now i'm not gonna go through that i'm gonna hope when i open the page up that it shows me something exciting so i'm just going to go inside here i'm going to call it index a template right and paste in that html which seems rather simple for now it's just a form which has uh one div where stripe injects the credit card element where you can enter the credit card number and whatnot you have a button a pay button you have an error paragraph and you have a success message it sounds fairly simple it references the client.js file which is added and we have a global css file which we haven't yet so let's get in some styles actually global css and i think if i saw that right the tutorial showed me that global css file as well yes it did so i'm just gonna well look at that lines and lines of css we're just gonna copy that like so we have our index.html file and i'm actually i'm going to create a tiny web controller it's a bit premature but i know that when you go to later on i need to put in some variables so into that home page let's return a string return index right i know in a second uh that i essentially when i call the index page uh i need to put in my stripe api keys and whatnot so i'm just preparing for that but now let's actually see if what i'm what i'm doing here is working if i forgot something if everything is correct if you can already tell me you did it wrong marco there's something missing there's a lot of stuff missing let's see once we boot up and we go to the index page if anything is working at all so i booted up everything local 3080 look at that i have a page where i can enter my credit card number i have a pay button and hold on a second i think that page when i do an inspect hopefully you guys can see that here create payment intent there seems to be a 500 the page calls my create payment amp endpoint set your stripe api key yes there's something missing but it actually worked so what happened is that this website tried to call my server my springboot application my springboot application called try to call stripe and i just was missing my api key let us change that because that looked already really good actually there's a cool thing about the stripe documentation let me just find the documentation by so many windows i'm already a bit confused when you go up you can see in the document here in server java there is a stripe api key and it's actually my because i'm logged in it is my test api key please don't take that api key now i'm going to change it after the session it's just for testing but when you register your stripe account you'll get your own strive api key so just copy that it's really live documentation and something i really really appreciate so now i don't have to go to the stripe dashboard find my api key i can just take that code example and it just simply works now a stripe api key where are we gonna put the stripe api key actually let's because we have to just set it once i'm gonna make it simple i'm gonna put it into my spring boot application i'm just gonna set it here right that should hopefully do the trick because you only have to set it once on the java side and we also have to make it configurable in a second actually because i have a different key in my live production systems so let's see what my payment form says my payment form says that the create payment request worked with a 200 which is pretty cool which means i can i have a credit card payment form already let me show you what that means let me enter a number here hit pay and it says payment succeeded see the result in your stripe dashboard what is happening what is happening let me open that let me open the dashboard the stripe dashboard so i'm here in my striped test data dashboard dashboard and you can see well someone just paid 15 with a stripe card or with a with a credit card the amount is 15 us dollars converted to 12 euros roughly uh the exchange rate there seems to be a fee of 60 cents here so i'm getting 11 euros 51 and whatnot it seems like that payment already worked which is pretty crazy so we didn't do that much what we did is we created one endpoint pasted in a bit of javascript on the on the front-end side and suddenly we can talk with stripe already and do actual payments let me show you a couple of tricks though because it's not so simple what we essentially did is stripe has and that is a very cool feature of stripe stripe has test card numbers so we're hooked up with stripe but there's essentially the question is can i just put in in any number here and no there's a set of test numbers you can use from stripe to trigger successful payments to trigger a two-factor authentication the 3d secure authentication and whatnot to trigger decline payments all that kind of stuff and when you search for the testing on the stripe site you can see four two four two four two is a very popular stripe testing number for visa card it works with any date in any three digits or whatever you just paste it in it works but you can also use master cards american express and whatnot and when i scroll down for example i can see here's my 3d secure test card numbers so let me just copy that number which i couldn't remember refresh my page paste in the number here with any again any expiry date any zip code the last one here is a zip code let's hit pay and let's see what happens and what happens is that the stripe javascript opens up a test uh two-factor authentication that is what your bank would usually do they would send you a text message a push-up notification whatever it's all handled by stripes javascript file and now you can say well complete the authentication fail the authentication when you hit complete again the javascript without the data ever going to your server handles all the communication between the browser and stripe let's see that should have worked again a new payment another 15 dollars with a different visa card and i can even see the payment was verified with 3d secure and that worked as expected pretty cool and i see that chat is going down which means the chat doesn't think it it is as cool as i'm thinking it is but i think it's pretty sexy to get started with just a couple of lines of javascript but let me just see alexander how can we be sure that our post controller is called from our index page and not from an external site yes we would need that's a very good point we would need to protect against that we would need to do a ton of protections and again this is something to get started with payment endpoints this is rather simple and then at the end the question is how can we make everything secure so that not someone is creating payment intents without you know payment intents and payment intents but the thing is with the payment intent itself you cannot do anything so it's just something like the user wants to pay something but um again we would need to make sure to really clean things up and and do that yeah that that is something uh to to keep in mind very good point what i so far didn't show is again the javascript i just said it's a huge page that we copied from the tutorial and let me just quickly go through that client js page that i just copied out of the tutorial just once and start at the top at the top again so i said this block basically here is when the user goes to the page you create a payment intent and the payment intent our server called stripe user wants to pay returns a secret yes that's how we basically get back to secret and then the stripe has a javascript library which is called stripe elements and what you can see here and i'm just going over this here is when you call elements create on a specific div in our example then stripe will insert this credit card payment form into the div that's what that code basically does you create a card and you mount it to a div and then you get that really nicely working credit card payment form with the credit card number with the cvc expiry date and whatnot you get that from stripe and you can obviously choose to change the styles and whatnot but this is everything that comes with the stripe.js that we include at the top of our html file right and then at the end what you'll see is that we have our payment form this is our html form just our payment form we have a javascript submit listener called pay with card and what pay with card does is again it calls strive api it calls stripe confirm card payment basically with that card div where you entered all the um the details right so this is just quickly what my custom javascript code does from tutorial and also what the stripe api does but in the end it is really just two calls you create a payment intent and then at the end you have to call at some point the real payment happens here the confirm card payment so you just say boom the user wants to pay put in the client secret this is the secret from the payment intent you put in the card that the user submitted and everything happens between stripe and the browser and i my server never sees your data why are you not using promise with try catch it's very simple because for what if you started watching this stream from the beginning you see that everything i did here i copy and pasted that code from the stripe docs and what is very important for me uh to uh to tell you is that i'm see at the beginning of my career so i started developing professional professionally over a decade ago it was very important for me to say this is right this is wrong you're doing it right you're doing it wrong why are you not doing this why you're not doing that and now i just want to be pragmatic i want to get everything done i just going to copy and paste the code this code works it's not about nitpicking about why didn't you use javascript why didn't you use why are you just using plain javascript not react not quarkus not everything else so i just you know want to get away from the fixation on technology because i really want to get a working payment card form done uh sooner or later hopefully and we have yet some yeah some stuff to do it's already 46 minutes i'm just seeing on my other timer running 46 minutes and i need to hurry up a tiny bit because we need to do some more before we actually deploy this whole thing all right we have the credit cards payment working and yes i am i am a german like that's true right there's just something that we need to prepare for i already told you that when i went to my payment what was it in my application there was a stripe api key actually let's make a quick property out of it straight i'm just going to call it straight a stripe api key for now i'm just gonna put that in here like so going back i know i'm just gonna inject it and please don't kill me because i'm using field injection here stripe api key like so and in my client.js i can also see there's a public key i'm using and we're just going to fake that stripe public key quickly we're going to reference a variable here which we have yet to declare stripe public uh public key just gonna put that in here like so and we're just gonna quickly add this public key here so vas try public key i hope that is what the variable was called let's see let's try public key we're going to put it in here i always have to look up how i need to do thymeleaf javascript in lines so how to inline uh javascript with timely if yes uh let me see my code uh the block yeah i think that should work just fine corresponds to corresponds to a text let's see that is obviously not what i not entirely what i wanted let's see like so equals uh stripe public key right let me actually double check because that doesn't look about right i'm guess i'm missing something if someone from the stream already knows what i'm missing please let me know with the inlines uh the in line right this is actually the example i usually go always to so i always go to that page that simple page i never know how to inline stuff and then i just copy this uh inside here so yes that is what i wanted stripe public key it is a stripe public key let's set it to null by default and it's also very important to just show that that sometimes you just copy and paste and sorry for using that second link which is old and which was cruel and whatever but sometimes you just need to copy and paste stuff right stripe public key stripe public key is the property stripe public key and we need to still set that we're going to set it here model at attribute destroy public key stripe public key like so we're just going to create a field a value field stripe public key so the strike public key is in the properties file it gets injected into web controller it gets set to the model of the home page and inside the home page it is being set to strike public key before the client.js and finally client.js picks it up let's see if our payment is still working i'm just going to restart the application actually see if if that works as expected right so let me open up let's go away from concrete page oh there was a ton of ads yeah that was a bad page but as you can see i can still open up my payment form when i pay i see the payment succeeded so everything that we did worked and just to take that away these properties i already put a properties file on my live server and on my live server i have my real stride key so hopefully later on the real payment will work with the stripe keys because the beauty of about stripe is the api and everything else is exactly the same it doesn't matter if you're testing it doesn't matter if production it's the same endpoints the only difference is your keys which makes inserting the keys a let's say a 4i principle thingy on production um and um yeah that's that's that i left a script thank you very much that's the beauty of um having the other 50 uh inside the chat helping me out with uh with these leftover tags right after 50 minutes we have the front end flow working what i now wanted to do and what is what is uh already important hopefully in in the last half hour before we deploy this uh this thing is stripe sends me back um that someone paid something so the browser isn't talking to me but i'm getting a synchronous web hook from stripe and that's what we need to have a look at now next so let's actually see in the documentation from stripe one of the 50 million tabs i have open we did set up setting up the server we did building a checkout page on the client that looks uh beautiful completing the payment on the client that was the javascript we had a look at earlier right and again please feel free to step through the documentation on your own time we tested the integration we ran the server we made a couple of test payments so that actually looks pretty cool already now stripe tells me not two things hey you could make us i.e stripe send an email receipt let's click that option yeah it's not too bad and they say well just add a email field to your payment form this is something we can quickly do so i'm just going to put in actually i forgot something so welcome to the transparent software developer let's make it a bit nicer and maybe make it even make it bold so we know on what page we are and also if you hit pay if you hit the pay button you will be billed what did we say did we say we will build 15 usds for now right just making the form a bit nicer we now have an email field let's also make that required so people have to enter that right and back sorry for all this switching i just entered the email field and i guess i need to change some javascript yes i do this stripe confirm card payment call which we saw earlier we just need to add our receipt email there so let's do that and that seems to be it interesting note again is why how can we test that how can we test that stripe sends out these receipt emails and that everything is correctly there's a ton of testing questions which is super interesting to get to into in the next in the next episodes but the funny thing is stripe even doesn't send emails for test payments so only in production and there's um there's a couple of interesting challenges ahead testing all of this stuff so receive the email i'm just going to copy and paste that in right um in our client.js there was somewhere confirm card payment right that looks about right so i'm just going to put that in here i'm not going to test it now just you know manually hope that everything praying that everything is working is expected and just to answer a couple of questions uh why the title transparent software developer um because i thought i'm being transparent you can see me code it's unscripted it is i so i did code it once but it's not like i have a script lying around here and then everything everything being picture perfect i just want to be transparent about what i'm doing here and what you can expect so you can watch me over the shoulder and uh that's why it's transparent and as for is strike better than klan and whatever there's a ton of different payment providers uh stripe is really easy to get started with uh it accepts credit cards and that is everything we want to do in this in this stream accepting credit card payments so it's not about one being by miles better than the other and there's even many many many more payment providers right uh what is the best way to protect your api key by the way the best way to protect your ipi api key is uh to not you know certainly not push it somewhere i would refrain from especially with payments just posting it on a public wrap or whatever you could obviously choose to encrypt it and you would need to have more technology and technology on top of it so it's not something i can get into in this episode but um for now we're just i'm hoping you're not abusing my test stripe key right now let's go back to the browser again because we're not yet finished with the tutorial save card after payment um is something that we again doesn't fit into this stream so the thing is when you do the payment now um i never know basically what your card details were and what not and they are lost but if i implement the safe card after payment workflow i get a token from stripe which identifies you and which means if you want to purchase something again on my website you do not have to enter your credit card details again i can just use your token to issue those payments which um i guess um we can do uh in in later episodes but finally what i wanted to come to after the payment fulfillment set up a web hook to fulfill orders after payment succeeds that is exactly what we want to do we need a web hook because stripe sends us stuff back and on that we need to create a customer we give you access enable you know later on an ebook downloads and whatever or whatever you bought essentially that all happens on that web hook and what you can see is again it's a long tutorial setup an endpoint handle request from stripe tester web hook next question is how do you test a web hook that's very interesting so the thing is you have a web hook how do you spawn these events and stripe has a couple of very nice tools but again to test your web hooks but again it doesn't really um suit the tdd approach yeah because there's no way you're just going to start out i have my test now i want to fulfill that and then use the stripe cli tool to spawn web hook responses you can do that but first of all get used to the stripe api so where are we we have our web book and also we need to the same problem with the create payment intents we need to secure our web hook because otherwise someone anyone could send us uh stuff which we don't really want and i cannot actually already um you know put the secure your web hook inside here toggle that feature so i i can see the code and um as you can see it's just one server class again it's spark i mentioned at the beginning i don't want to do anything with spark i'm having a spring boot so it's just going to be a weapon controller and i'm just gonna copy that code here which looks like it does roughly what i'm about to do let's see i'm just gonna copy that i'm gonna create a new controller i'm gonna call call it stripe wepo controller for now it's a rest controller post mapping i actually know already there's something on the live system i have stripe configured that it sends webhooks to stripe events so i need to make it called stripe events and public void handle stripe event for example and paste in that wall of code and again i hope we're going to make it a bit simpler in a second now let's see what it does here replace this endpoint seeker with your endpoints unique secret so there seems to be an endpoint secret we need again new property endpoint secret value and i cannot tell you how often i forgot to put in the dollars here and what not i'm actually happy stripe webhook secret secret actually let me just double check and hopefully you cannot see that on a different screen i just need to quickly double check what the property is called on the live system so that in a second when we're going to deploy this thing that yeah web hook secret that looks about right webhook secret i'm overwriting the correct properties right so we have that this is fine uh post webhook we don't need that we don't need that the web hook is always supposed to return a status 200. if you're not returning a status 200 then stripe sends you these web hooks again and again i think three times by default so it doesn't matter if you have an error on your side or whatever always return the 200 once you accepted a web webhook event so we're going to return a string here then let's see there's this here is actually not what we need this is just manual parsing of stuff let me make that real simple this is a bit quick really but i don't want to spend a total amount of time going through every line of this webhook code but they're going to send a header a signature header which i need to have a look at to see if the event that comes in is basically a real event from stripe or an event that you guys just forked right then let's see if the endpoint secret if the second endpoint secret if the sticker is null we just return right this like so let me just import all these stripe specific classes i'm just hitting alt enter a ton of stripe specific classes right the stripe object event get type right we need an event event event and the only thing what i'm going to do is actually let me that's one one thing i i like is instead of system i'll print on i like to use loggers so i'm just going to put in um a logger here get a reference to a logger like so and instead of system our printing down here i'm just gonna go hey someone of you guys sent in an event um which has an invalid signature and we need to put in um the string payload request body string payload like so so we're going to get a string event basically from and by the way stuart thank you for importing all for for the shortcut of importing all imports something that i rarely use someone tells me every year so that i could i could just use that import but i always tend to forget it so thank you very much for for bringing that to my attention yeah so um the payload we have the payload comes in as a string there's a strive specific api where it says let's try to create a event class a stripe specific event class from that string from the endpoint secret which we have yet to configure and from our header from our signature that it also comes in and this method will fail if someone is trying to spoof the um if someone's trying to spoof the event and then what happens is there's a ton of amount of stripe code going on um there's basically we're gonna switch through the event and this here the payment intent is what where it's at payment intent succeeded means the user paid something the other ones we don't even need and i'm just gonna go quickly i'm just also here i'm just gonna go uh the payment succeeded so i'm just gonna go payment succeeded paste that in here instead of the string concatenation and payment method attach we don't need and here we're just gonna go logo one for example there's an unhandled event type something happened like so and in real life in the next episodes or so we would have um a method handle payment intent succeeded and this would need to do something so save the user in a database and i'm afraid we won't be able to make that in this episode because we're already past 65 minutes of this stream but save a using a database save the payment information the token and database enable the login and whatever that that would have to happen in that handle payment intent succeeded method right now there's still a point stripe webhook secrets what is the stripe web hook secret we need to have that property let me see we need to put something in here and now the question is where does that webhook secret come from and how can i test my web hook that it works do i now need to configure you know in the stripe dashboards configure somehow my localhost url i mean it i'm developing locally so i would need like a service like ngrok where stripe could send a message to a specific url which forwards it to my localhost 8080. that is certainly possible that is something you can do but stripe has a pretty wicked command line tool which you'll find about in this hopefully somewhere at the end it says you have a yes download finally there it is it says download the stripe c live which is a command line tool you can install it and you can log in to your stripe account with that command line tool and then you can call this here i'm just going to copy them i'm going to show you live what this thing does so what it does is basically it says everything that comes in a payment in test mode redirected to localhost 8080 stripe events so forward everything to my localhost 8080 which is pretty cool and it gives me a secret that's the secret we've been missing so i can just paste that in here so without that command line tool it would be a bit tricky to test this whole thing yeah but just download it install it configure it you get a secret and you're good to go now let me see if that actually worked um there's one tiny i'm just going to restart i just want to make sure that i have my stripe weapon controller did we miss anything in the stream so payment succeeded we're just logging out that the payment succeeded basically at the moment um that should hopefully work my payment controller i'm just double checking things here is a rest controller post mapping stripe events so actually let's give it a try let's see if this thing works localhost 8080 uh look at that welcome to the transparent software developer if you had to pay button you'll be billed 15 us dollars my email address is marco marcobila.com uh the card number i'm just going to enter the test card number for 24242 with random data pay then the payment worked so well that worked already before let's see what happens you can see that the command line tool says it got a couple of payment intent created payment intent succeeded so it already forwarded everything to localhost 8080 stripe events so that seemed to work quite okay and if i open up my my console here and i hope you guys can see that you can see my stripe weapon controller says the payment succeeded for 15 dollars it does it twice don't be scared that you're thinking that the payment happened twice it's the same payment but stripe sends me the event a couple of times because it took me too long to basically acknowledge it you always have to imagine that the event can come one too many times and you can actually see it let me just redo that for id if you enter the payment intent id you'll see it's the same payment intent it's not a duplicate payment essentially yeah that happened so don't be scared but again to harden things up we would we would need to make sure that this stuff works flawlessly and we don't register user twice and we don't you know save his payment method twice we always have to take care of all of these kind of things yeah right let me just quickly try that again i'm just going to refresh that page mark where blah i'm just getting a bit uh lazy entering my number here right i'm just going to go pay again right i can see again in the console that worked flawlessly and i can see right the payment intent for id you can see hopefully you guys can see that my face is not over it now it looks a bit better the payment for id so it's the same idea but just getting the event multiple times so there's no duplicate payments so yes john we have to worry about item potency a bit yeah that is that is very cool and we have to worry about testing a bit because now imagine we want to run automated tests for our weapon controller does that mean we need to put our stripe cli tool into a docker container run it in our build pipeline and spawn these payments and whatnot there's a ton of discussions around that and we can only figure it out in the next sessions basically do we need the command in production auto we don't need the command in production because what i'm what we do is in production and i cannot show you that because otherwise you would see my live stripe api keys and whatnot there's a setting in stripe where you say any payments you get please send them to a ul to a specific url and i already configured that ul to send it to live marcobila.com stripe events so you don't need that cli tool in real life you just need to make sure you have an endpoint which works and which is there and responds to these events basically good i think if card 42 is designed for success yes card 42 is basically uh my prime uh test card for stripe so 42 42 42 i type that number so often uh it's it's an it's an interesting number i don't know any of the other test numbers off the top of my head i always have to copy and paste them but 42 42 42 uh gives me it gives me good feelings basically yeah so 10 sun jar it and ship it what can possibly go wrong sorry about that you're absolutely right i should stop talking um let me just do exactly what you guys said so i'm just gonna call package here i'm just gonna jar it and ship it so you can do it in the command line i'm just gonna pack everything up without any tests here but you saw everything i did there's no magic involved uh so far so we have that and um what i'm gonna do is i'm gonna open up a i'm on windows i'm going to open up a wsl vsl shell basically and i'm just gonna quickly go to users screencasts ah what is the folder called uh stripe payments right i have my target folder i have my java file i'm just gonna copy that and that is basically what again what's going on here walter i don't know how you how you got that recommended we're basically building a payment form and you're happy to when when that goes live in a second to enter your credit card details uh in in a payment form but otherwise you can always go back and um have a look at what we did though you have to watch 70 minutes or so of content up until now so what i'm going to do is again very simple and this is so important for me very simple deployment for the beginning we have a jar file we just want to copy it to a server we don't want to dockerize it we don't want to keep a need to use it whatever we don't want to scale and whatnot so i'm very happy that um i'm very confident that the application my server which is one of the cheapest i think a three dollar server whatever will handle you guys a couple of uh guys going to that to that page so i'm just going to copy that to um the live.microbial.com server i have my ssh keys set up in the background and on that server i have var vvv i have historically again convention that i do it like so i put my codes on the www the domain name and then folder java for java for example right so we're just going to copy that that is the deployment and now yes we have to uh do the deployment manually so livemarcobilia.com java let's see what's in here there's my old that is my old file that i deployed once but we're gonna do what we hopefully you guys can see that yes i think you can see that we're gonna boot it up and see what happens let's see i'm i'm actually pretty excited to see if that that is happening so the application started in five seconds which means if i go now let me see if that actually works live.microbilla.com it opens up a credit card payment page dude my heart is actually a bit pumping yeah so it's deployed you can go to live.marcobili.com let me have a look at my server so there's nothing happening just yet that i saw so actually everything is working as expected no error messages no nothing so i did it and everything we did so far seems to be working right now obviously is the time if you want to if you want to see really see if it's working put into your email address put into your real credit card number make me a happy man right hit the pay button you will be billed 15 us dollars you will not get them back just to say that once but otherwise [Music] let me just breathe for a tiny second i am pretty happy that all of this stuff worked because i wasn't able i wasn't a couple of weeks ago i was not entirely sure that i could really pull it off because the live coding and the talking and then having a look at the chat so when i'm looking over to the side is always uh it's pretty challenging pretty um it's pretty challenging also having people who might say you're doing it wrong and what not and i i thought for one night i thought ah man i'm gonna scratch it i'm not gonna i'm not gonna pull it off and then i slept over it for one night and i thought let's give it a try i'm just going to code through this example see where we how far we can go i initially wanted to do the whole database stuff also but we're already at one hour 20 minutes and it's sunday evening and i don't want to spend another half an hour adding databases and whatnot on the on the webhook controller but i noticed i can actually pull it off i can get something to run make it somewhat hopefully interesting and exciting and just deploy something you know dog fooding uh having skin in the game making something that that works and that you can actually use as for the server yeah dbdb equals need to be done yeah almost i wanted to be make it a bit more professional what i'm using is i'm not using aws what i'm really falling back to is hetzener a german company super cheap and the server i'm using basically is i think i'm using the cloud server let me show you which one i think i'm using the uh the four euro the four euro 51 a month yeah so um you can essentially use any server you want it doesn't really matter too much the two euro 96 one would have also worked just you know displaying one web page and routing some payment data for this live stream that's pretty much it yeah um but to come to some sort of a close i need to if you have feedback on that session if you liked it if you enjoyed it please let me know not just in the chat send me a mail to marco marcobilla.com or informability.com what you thought about it uh i need to see what the feedback is how verb how valuable you guys found that session how i can pull it off um and how we can if if i can continue streaming because it's quite time intensive and even though it's unscripted there's a ton of preparation going into this so that the technological side and stuff works like that but i'll need to figure it out and i'd like to get in touch with you guys uh per mail and uh just chat with you what you thought what you think and how we can do it how we can pull it off other than that the only thing i can say is uh thank you guys for uh watching this you're very welcome um and i really enjoyed doing that um enjoy have a good uh have a good actually i just noticed so one of the things i just noticed is you didn't even see me now in big so just one one final uh big face of mine uh just saying goodbye have a nice sunday or have a nice evening night day afternoon whatever wherever you're watching enjoy i am out have a good one you

Channel: Marco Behler

Views: 57,353

Keywords: java, spring boot, spring, stripe

Id: BIDNKRluql4

Length: 80min 16sec (4816 seconds)

Published: Sun Jan 31 2021