PHP, MySQL & Stripe API Payment App - Part 1

[Music] hey guys if you're interested in machine learning edge wanax has a really interesting course coming out that focuses on building real-world projects including a stock market clustering project credit card fraud detection some health based detection projects and more if you're interested in backing this course check out the Kickstarter link in the description below hey what's going on guys so today we're gonna be building a payment application with PHP and the stripe API now I didn't know Jas and stripe API video where we use the pre-made form that stripe offers and we were able to make a payment charge a customer and have all that happen in the stripe dashboard but this is gonna be more in depth we're actually going to create a custom form and not only charge a customer and store it in stripe but also implement our own back-end with PHP and MySQL so we're gonna create a customers and a transactions table to store the info that we get back from the API and we're also gonna create some pages where we can see that data within our application now this isn't a beginner tutorial I'm expecting that you do know some PHP if you don't I'd suggest my PHP front-to-back course on YouTube and if you want to go further than that my course on udemy which I'll put a link in the description for we're actually going to be using PDO to interact with our MySQL database and we're actually going to use the same PDO class that we used in the udemy course now we're gonna be focusing on object-oriented programming with classes for our models and so on to store our data and to fetch our data so it's going to be a decent-sized project the only thing that I'm not going to do just yet unless the series really gained some traction is authentication ok to see the transactions and so on but of course you guys can add that on your own as well you could even make a pull request to the git repository if you want alright and I'm guessing this will be a couple videos but we'll see all right so let's do a quick demo this is the landing page it's a pay page for a product I'm just saying that it's for an intro to react course for fifty dollars so you would put your name in here and we're gonna make it so that you could put whatever fields you want I'm just having a first last name and email address and then the credit card number alright so we'll do first and last name and email and then the card number now with the stripe API they give you a credit card number that you can use as a test which is just for two all the way down so just all four tubes it can be any expiration date we'll say for twenty two the code can be anything zip can be anything and that should actually work if we have something that isn't correct it'll tell us that it's not correct and this is going to be coming from the charge dot J's file okay we will be doing a little bit of JavaScript but we're gonna mostly get that from the documentation all right so this should be valid so we'll submit our payment and then what's going to happen is it's going to charge it's it's gonna show up in our stripe dashboard it's gonna get added to our database and then it's going to redirect us to the success page where it'll say thank you for purchasing whatever the product is give us our transaction ID and tell us to check our email for more info and stripe actually sends like an invoice to your email showing you that you paid for it and then we can just go back to the form alright now if I go to and by the way I'm using xampp as my environment here but if I go to transactions dot PHP will see that transaction with the ID the customer ID the product the amount and the date we can also go to customers dot PHP and we'll see that customer alright and if we go back to the pay page and do one more let's say Tom Smith again we're gonna use the test number and submit okay so now if we go to transactions and I don't have a link to it from here because you wouldn't do that this is kind of like a back-end page and now you can see we have that that transaction as well with the new customer ID all right and if we go to our backend of our stripe dashboard if I reload we see those two payments that went through and if I go down to customers we're going to see those two customers Brad and Tom all right you know and it gives us the card it's not going to give us the actual card number it'll give us the last four digits and the expiration the way that the stripe API works is it uses a token it doesn't actually give you the card number it uses a token to charge the card okay and if you look in our PHP myadmin database you can see in customers it stored the customers we're using the customer ID that came back from stripe as our primary key same thing with the transaction we have the transaction ID all right I'm trying to think of anything else this is the PDO class we'll be using its Anna Geist file I'll go over it a little bit but we'll probably just paste that into a library folder and if you did if you did watch my you to me PHP course then you're probably going to be familiar with that all right so that's what we building guys it'll like I said we'll probably take a couple videos there's quite a bit of code to do as you can see over here we have our models we have our customer model our transaction model we have our deep PDO library that's the file I just showed you in the gist we're gonna be using the stripe API to do our charges charge the customer create the customer and so on and then we have our JavaScript file which is gonna basically take care of the validation of the credit card and also putting the form element on the page okay this right here or is it's this here so this whole thing is powered by the charge dot j s file all right so that's what we'll be building guys and let's go ahead and get started all right so if you guys are going to be following along then you need to go to one of the documentation pages which is stripe comm Doc's stripe J s elements slash quickstart and this is going to give us some HTML CSS and JavaScript to basically create this here okay so it's it's just the simple credit card number form and it includes all the validation and stuff if we put something that's not correct it'll give us the error message these three files combined will basically give us something like this now as you saw in our application we're gonna add a first name last name email all that stuff so we're going to be customizing it quite a bit we're gonna be using bootstrap so we're gonna customize it but I just want to get this down first alright and this alone isn't gonna actually charge anything it's basically just to give you the form and to validate the card it's not gonna if you submit it it's not gonna actually do anything except for give you a token where then your server-side would take over and then you would use the stripe SDK in our case with PHP to charge the card all right so let's go ahead and go into our server I'm in my htdocs folder in my xampp if you're using WAMP or lair agon or something like that or just a regular lamp stack that's fine just go into your server folder okay and then we're gonna create a folder called pay page and I'm going to open that up with vs code all right so from here we want to create our index now in this case we're not going to have an HTML page it's gonna be a PHP page so we're gonna say index dot PHP and then for the CSS and JavaScript I'm going to put those into their own folders so we'll have CSS and j/s CSS let's say new file style dot CSS and then for the j/s new file and we'll say charge j/s okay so we'll start off with our feet with our HTML which will go into our index.php so I'm gonna add in just some basic head body tags here with Emmet we'll change the title to pay page and let's link our stylesheet so that's in the CSS folder style dot CSS and then what I'll do is just grab this I mean there's a lot of stuff we're gonna add to this but let's grab the form so the beginning form tag to the ending form tag and let's stick that in there and then let's grab this script to this the stripe version 3 javascript file and let's put that down here right above the ending body tag and we'll tab this over all right so we'll save that and then if we click on the CSS tab there's some styling we want so we're gonna grab this for all the stripe element stuff paste that in our style sheet and save and then we're going to go to the JavaScript and grab all this stuff and copy that and put that in the charge j/s and then one thing we're missing here is it's calling a stripe token handler function that's actually down here so if you scroll down let's see where is it's right here so this the stripe token handler we're just gonna grab that and put that at the very bottom all right so what this is doing is basically it's going to initialize stripe with our client-side key now if you are logged in looking at this documentation your key is already going to be put in here this is my key and if I go to my dashboard and I go to API you'll see my publishable key which is right here it's the same thing okay so it's XW right here alright if you're not logged in you won't see it in the documentation and you'll have to log in and grab it and stick it in there okay make sure you use your own don't use mine and then we're going to just create an instance of elements some custom styling here that can be passed as an option you can see that's being passed right here into this elements dot create and then we're going to mount to an ID of card element and that's basically going to put that right in here see this ID of card element that's where that field is going to be put and it's just going to be the credit card field nothing else we're gonna add the other stuff in a little in a little bit and then it's going to handle all the validations so if the card isn't isn't valid or something like that it'll it'll handle it it'll handle the form submission and then it'll call stripe token handler which will send the Tokra to its token to your server and that function is right here it'll finally submit the form all right so if I go ahead and save this make sure all these files are saved and we go to our local host pay page we just let's see why is that not showing up that's because we didn't include the charge J's file so we want to make sure we go down here and let's add that so it's gonna be charge dot J s actually it's in the JavaScript folder so let's do that alright so we'll save and there we go so now we basically have just the credit card field and we and it will work if we put something in here that's not valid it'll actually check if we put our valid number that'll work if I submit it it's gonna it's gonna get submitted to charge because that's where the form is actually submitting to okay up to up to this point we're just we basically just have our front end we now need to build our server side which is going to handle the rest now we don't want this to go to Chuck discharge we want this to go to charge dot PHP which is going to be a file that that we're gonna create all right so I'm actually gonna put dot slash charge PHP so above this actually let's bring in bootstrap so I'm gonna go to get bootstrap com hopefully with me so far and we're gonna grab the link to the stylesheet and paste that in now once I do that if I go back to our page you'll see that it messes up and that's because we need to add that that bootstrap form control class so right on the card element this ID card element we're also going to add a class of form control okay so now we get that the form back and we're gonna add a bunch of other things we're gonna wrap everything inside of a container class so let's take this div and just we're gonna wrap everything the whole form so right here we'll have that ending div just to put everything into a container okay so that pushes it into the middle let's see what else are we gonna do I don't want the label this label right here I'm gonna get rid of that and the button I want to format that as bootstrap now the button isn't you can clearly see it's not in the HTML it's generated in JavaScript so we're gonna have to do a little bit of Dom manipulation through our JavaScript so what I'll do is go right under this style and we're just gonna let's say style button with bootstrap so we'll say document dot get not yet I'll do query selector and it's inside the payment form it has an ID of payment - form if we look at the HTML here if we open up our chrome tools and let's see right here so the form has an idea of payment form and we want the button that's inside of that which is right here this button so we need to add a class - to that or a couple classes so we'll say payment form button and then we're gonna do dot class list and this is pretty much the only JavaScript we're gonna be doing guys it's gonna be mostly PHP after this we want to add BTN BTN - primary BTN - block and let's do a margin top four alright so if we save that and reload let's see class list is not a function what did I do here query selector oh I'm a dummy class list equals that it's not a function it's a property there we go so now we have our nice button so now what we'll do is add the rest of the fields so we're gonna go back to index.php and right above the form i'm just gonna put in h2 with the class let's say my - 4 that'll give us margin on the top and bottom and then let's also do a text center class and we'll just say the name of the project product which is intro to react course and we'll put the price of $50 alright so if we were to look at that there we go now for the rest of the fields we're gonna go into our form into the form row div right here and let's add an input and I'm gonna give it a class of form control okay we're also gonna give it a class of mb3 margin-bottom three to move everything down we're also gonna give it that stripe element class to kind of match the the credit input so stripe element and then we also want to do stripe element - - empty like that okay and then I'm just gonna put a placeholder so placeholder will be first name so let's see what that looks like all right so there's our first name field now we want to do the same thing for the other two fields so I'm going to copy this down to two times and this second one is gonna be the last name so we'll say last name for the placeholder whoops and let's see oh you know what I forgot is the name attribute we definitely need those because that's how we retrieve the data in the backend so let's say name first underscore name and then the last name will be last on the score name and let's see the final field here we're gonna give a name of email let's also make it a type of email and we'll change the placeholder to email or email address so let's take a look at that and there we go so there's our forum one thing I forgot is the stripe API it doesn't need jQuery I believe so we're gonna grab the jQuery CDN I'm just gonna go ahead and paste that and I'm just using the one from Google api's jQuery three-two-one and then we should be all set for our forum now it's telling us that we can test our stripe integration over HTTP which is what we're doing obviously if you were to deploy this to a remote host you would need an SSL certificate you'd want HTTPS okay so it's just telling us that it's also telling giving us this message saying that the use of the line height property is discouraged which I find weird because they actually included it in this style right here so I guess if I mean if we get rid of this that'll make that warning go away but I think that's weird that they that gives us that warning yet they give us that in the documentation but whatever it's fine so that's gonna do it for the form and basically the the entire front end so now when we submit this it should go to a file called charge dot PHP because that's what we put as the action so let's go ahead and create that in our route here so we'll say charge dot PHP and let's put in a PHP tag and all I'm gonna do is echo submit it just to make sure that this actually works all right so let's put in a name card number so if we put something that isn't right it's gonna tell us let's put in the correct one and submit and there we go so we know it's it's submitting to charge dot PHP so this is where we want to start to use the stripe SDK and make our charge so I'm gonna go to the the github page for stripe - PHP is what it's called and we're gonna use composer to install it very simple we just need to install it with this command and then we just need to require it in our script with this alright so if you don't have composer if you're on Windows you can go to get not get bootstrap you want to go to get composer dot org and just download it and install it okay it's a GUI installer it's really easy and then once you have that installed you'll be able to use the composer command if you're on Mac you might want to use homebrew to install it if you're on Linux you can use whatever package manager okay I already have it installed so I'm not going to go through that but what we want to do is this so I'm going to open up my terminal my vs code integrated terminal here and we're gonna run this command so it's gonna be composer require and what is it so stripe slash stripe dot peach was it thought PHP - PHP alright - PHP so we're going to run that and what that'll do is create a composer dot Jason file right here as you can see okay and it should Creek yup and it creates a vendor folder and now that's installed so what we want to do now is require it so we would just want to add this line right here to our charge dot PHP so I'm going to just add that there and now we can use the stripe SDK for PHP now let's see if this shows any documentation yeah so we want to include our server-side key now okay because now we're on our server so we basically want this here so we'll put that in and I'll put links to the github page and all the stuff that we're gonna look at within this project but from here you want to replace this with your server key so you want to go to your dashboard API and then reveal the test key token and we want to grab that okay and put that in here and then you have your server key so now we want to do is get the we want to get the form data that's being submitted so to do that if you have any experience with PHP probably know that you can get it with the post array because we're submitting it as a post request so for instance to get our first name field we can do post first-name because that's what we gave it as a name attribute so we want all that stuff and we want the token which we can get with post stripe token now just to be safe I want to filter all of I want to filter the entire post array I want to sanitize it so that if people put something that's harmful it'll sanitize it as a string so let's go ahead and do that say sanitize post array so I'm gonna create a new variable called just just money sign post and then set that to the PHP filter underscore var underscore array function and then we just want to pass in money sign underscore post saying we want to filter that and we want to sanitize it with filter underscore sanitize underscore string I spell that right yeah so sanitize string and then what we'll do is create our variables like first name and then set it to post and you want to use just money sign posts not underscore because we set this to the filtered post array so now we want to set that to two post first name all right and then we're gonna just copy that down three more times let's do the last name and let's do email oops and we want the stripe token which is the most important thing here so we'll call this just token all right so that should get all the form values now if we want to test this out we could let's just echo out the token all right so we'll go back to our form and let's resubmit and there we go so now we're getting a token that means that the credit card we put in was valid of course it was the the just the test credit card but if we were in production mode and we put in a real credit card that worked then we would get a token like this all right so now that we have the token we want to create a customer and when I say create a customer I mean within stripe not within our database or we're not doing our database until after we're able to actually make it charge okay so let's go ahead and do that let's say create customer in stripe so we're going to create a variable called customer we're gonna set it to backslash stripe back slash customer double colon create and then we want to pass in an array and inside this array we just want to put email and we can get this from the email variable because we have that set right here to whatever was sent in with the form in addition to that we need to assign the source which is going to be the token okay so just like that that'll create the customer but now we need to charge the customer okay so to do that we're going to create a variable called charge we're going to set that equal to back slash stripe back slash charge double colon create and just like above we're gonna pass in an array and we're gonna put the amount so the amount is gonna be $50 now with stripe there's we just we do it like this we don't actually put the decimal point but that's what it is it's this is $50 okay and then the currency that we want to use which is going to be USD and let's do a description this is this isn't required but it's good because it'll show up in your back-end what did what did they actually buy so I'm going to say intro to react course and then finally the customer that bought it is gonna be from that customer variable and we want the ID all right so that should charge the customer now all I'm going to do after that's done is just go ahead and print our which will print out an array of charge okay because we're gonna see what we get back from this charge variable once we charge the customer so let's save this and I'm gonna go in my dashboard and you see how I have some test stuff here payments and customers I want to get rid of that and it's very easy to do that you just go to business settings data and then delete test data so we want to get rid of everything so anytime you want to start from scratch get rid of anything you just do that now if I go to payments there's nothing there okay so we're ready to try it out and this should actually charge and add the payment and the customer and all of that okay so let's go ahead and try this so let's say John Doe say J Doe at gmail.com put in our card number and submit hopefully it works okay so you can see that this is what it gave us back but before we look at this let's look at our dashboard let's reload and there it is our $50.00 charge for intro to react we have our ID our customer email the date and then if I go down to customers we should see J Doe at Gmail with with the customer ID it also gives us the card the brand the last four digits and the expiration date okay so up to this point we're able to actually charge a customer and if that's all you wanted to do that's fine you could do that but I want to take it a step further and add it to our database so we actually have some local data for our charges for our customers and this is all the stuff that you get back so this is the transaction ID which we can get with chart we could get it from charge ID like that so we could get any of these fields back so the ID the amount amount refunded a lot of this stuff we're not going to use but it is available balance transaction the created at the date the currency the customer ID which we'll be using the description which is the product let's see what else the risk level which is normal the seller message payment complete receipt email so we can get the email back the customer email what else we didn't do an address or anything like that the zip code we can get that we can get the last four or is it right here so we can get the last four digits of the credit card if we want the expiration date expiration month and year status which is succeeded so we're going to use some of this stuff to insert it into our database after we charge the customer but for now what I want to do is just redirect to a success page because obviously if they go through and they they purchased the course we don't want this to be displayed so what we'll do here is do a redirect I'll say redirect to success so in PHP we use the header function and in here we say location and we want to go to success PHP which will create and I want to add some parameters here I want to add the transaction ID as well as the description of the product so that we can use that in the displaymessage so to put a parameter we want to put a question mark and then I'm gonna use tid for transaction ID and then we're just going to concatenate with a dot and we're gonna say charge I D alright then we're going to concatenate again back to a string and we're gonna put another parameter so we use an ampersand and we'll say product equals and then concatenate on to that charge and then we get that from description okay as you can see up here whereas it's right here description is going to be intro to react course so we want to pass those things along in the URL so let's save it and then let's create a success page so success dot PHP and we're gonna want some head body tags let's say right here the title we'll just say thank you and then I'm gonna grab the bootstrap link we don't need like the style sheet here we don't need these scripts or anything because it's just a simple success page but we do need bootstrap and then in the body let's put a div with the class of container and then let's just do Mt margin top four okay and then here we'll put an eight in h2 and we'll say thank you for purchasing and then I'm gonna put a PHP variable in here we're going to echo out product and I'll create that variable in a second and then under that we'll put in HR and then let's put a paragraph and we'll say your transaction ID is and then we'll echo out a variable called tid okay then we'll put another paragraph will say check your email for more info and then I'll just gonna put another paragraph with a go back button or go back link so we'll do an a tag with a class of BTN BTN light and let's do margin top - okay and this is just going to go to index dot PHP which is our landing page and we'll say go back alright now this will give us an error because it doesn't know what product and tid is so what we want to do is go up to the top above the markup and put in our PHP tags and when we want to get the parameters from the URL because we're gonna have it like tid equals something product if we want to access those we access them in the get array just like we have a post array when we submit a form with a post requests we can get get variables so we first need to check for those okay so we're gonna say if not empty not empty we want to put an exclamation here if not empty money sign underscore get and we want to look for tid and not empty product okay so if both of those are not empty then I want to filter the get array so I'm going to say get equals and again use filter var array and we're gonna pass in the get array and we want to sanitize it as a string or each value as a string so filter underscore sanitize string okay so now what I'll do is set the tid variable equal to money sign get tid and then we're gonna do the same thing with the product alright and then we will just want to do an else if those two things aren't here then we just want to redirect back to the index page okay so let's see what's going on here I forgot what did I do here this is wrong this should be get product like that all right is that right yeah all right so it's just checking not empty get tid not empty get product if that's true it's gonna filter the get array and then we're gonna set these variables else it's gonna redirect so if I were to just go to success dot php' it's just going to redirect us it needs those values so let's try this again we'll say Jack Jack Bauer for you 24 fans and let's do Jack at yahoo.com submit payment and there we go thank you for purchasing the react course gives us a transaction ID good and then if we go to our stripe dashboard and reload let's say customers we should see Jack and if we go to payments we should see his payment awesome so I mean you could stop here and and just have it like this but if you want your own back-end your own database with your own data then let's go ahead and do that in the next video hey guys so machine learning is really popular right now and edge wanax is releasing a cutting-edge project-based course that focuses on things like clustering algorithms linear regression analysis fraud detection and much more it's a deep learning course with projects that will use real-world data and it's a course for serious developers but at the same time being fun and engaging so to learn more check out the Kickstarter link in the description below

Channel: Traversy Media

Views: 179,424

Keywords: php stripe api, stripe api, php & mysql, php stripe, php credit cards, php ecommerce, php mysql stripe, mysql, php

Id: EildM6OMcoQ

Length: 40min 25sec (2425 seconds)

Published: Wed Feb 21 2018