In this video you will learn how to process credit card payments using stripe API and also We are going to create a pricing page where we will list multiple products and we are going to sell all of them dynamically . So, stay with me Hey, what's up guys Senaid here from codingpassiveincome.com the place where I help others to become a web developer much easier and faster than they will do it on their own. So if that's something that interests you Consider subscribing ! -> So before we actually start writting any code I would like to explain it the basics that you need to understand for this tutorial so that it's easier for you to understand everything So what we're going to do is we will first create one pricing page, so let's assume this is our pricing page and here we will use cards from Bootstrap 4 to display the price of the product, title and list some features and then pay button and since as I said in introduction that you are going to sell multiple products we will have a lot of these here, so it will be dynamically so really the number of these is not limited to anything, so what will happen is we will create it so that when someone click on this PayNow button The small pop-up will come here, and then the visitor will need to enter his credit card information Stripe API will verify and if everything is OK He will make a post to one page, so let's say here and this page will be our actually stripe API dot PHP file, so in this file all that we need to do is to verify Once again here, get the informations And then actually make a charge from that credit card and after we did that if everything is okay from here it's just optional what you are going to do you can just store information to some database or You can maybe send an email or whatever you would like to but the critical piece here Is to understand how to create dynamically the pricing page and also how to connect everything with stripe API So, let me now show you how to write the code So, now I'm here at my PHP Storm And I have created a new project, stripe payments and also I have created an empty pricing dot PHP file so first thing that I'm going to do is I will just create a normal HTML document nothing special, and I will specify the title as Pricing page So since we are going to design this page in bootstrap 4 we are going to download the latest version So go to getbootstrap.com download and Then I will just copy the BootstrapCDN link or maybe if you want I can show you how to download The source files, so let's I will use Compiled okay, and I will just download to this project folder, okay So I will extract everything Delete this archive and Then as you can see here. We have CSS Files and we have JS Files, but at the moment, we are just going to need CSS files. So, here I will say link relationship Style sheet, and then href I'll say bootstrap's folder CSS And then boostrap min dot CSS, ok so now First thing we need to define in bootstrap is ofcourse container, so maybe let me just zoom in a little bit Ok, so I will create one container and in this container I'm going to create one row and now in this row I will just create a card So I will say class card and in this card you are going to have Card header okay, and then I will just duplicate this and say card body ok and in this card body. I'm going to have one card title ok so this will be the title of our product, so let's say Product number one Okay, and then down below. We will have one list So I'll say list-group Okay, and then in this list They'll have different list group items So this will be like feature one so let me just duplicate this couple of times Okay, and that's it so here in the header I'm just going to say that you are going to have one. Let's say age 2 Class will be let's say pricing And then here we will have some price. Okay, so all of this We are going to create dynamically, but for now we are just going to create one Product to sell just create a design, so let's check this So this is how it looks like at the moment of course we can make it a little bit nicer so here I Will create some style Okay, we can use external file, but Let's add moment or just use inline here, so first. I want to move container down for let's say hundred pixels the next thing that I will love is to set For the card, let's save it to 300 pixels Okay So maybe the cool will be if we create some hover effect for the hover on The card so let's say It will say transform It will scale for 1.5. Or maybe 0-5 just a little bit and then transition Let's say Easy Okay, and then I will just delete this time Okay, so let's see what we have so far So refresh smooth ah it's bigger and when I go over with the mouse it looks nice, okay So next thing is I would love to remove this border in the list here, so Let's say that At list group Item, we will set border to the zero pixels and maybe add padding for five pixels So let's see okay, so this is looking I would be better So maybe here For this card body, which we can say Text to the center Okay and Then this card title maybe we can Make it a little bit bigger, so let's say h1 Okay Okay, and now I would love just to do this price to make what it looks at the bit nicer so maybe For pricing or maybe it was better if we said price price I Will say that font Size will be let's say to pixels something really big but then here for this dollar sign I've just to use span and I will create class. Let's say currency Okay, I'll see dollar Okay and now for The currency I'm going to set position to the relative and then maybe Let's say font size will be something really small in comparison with the price So let's say 25 pixels And then probably we will need to move This top, so let's I'm not sure how big it needs to be okay, so let's check this Click on the currency and then let's try to say - let's say 30 pixels, okay, so we are pretty close so Maybe let's do something like this okay So -31 pixels And then let's just set it to the center Okay, so now this is the basic design for our product so of course We should move this card to Separate column, let's say md4 So just copy here And then now if we want to duplicate all we need to do is to just copy paste like we have different products and Here's the result so this is three different Products and that is what you are going to create and basic We are able to have like hundred products or whatever number you would love okay, so I'll just Undo this and that's it ,so we have this one product and now let's create this dynamically so I will just Create a new file, so let's say new PHP file, and I will name it products Okay and Basically what I want to achieve is to have One associative array, so I'll name it products equal array, okay and Now in this products. We are going to have Different so let's say Each of them will have different ID so let's say this will be product number one. Okay. That's his ID and For that product. I'm going to have some basic informations like let's say title My amazing product number one, then we are going to have price Okay, so let's say the price for this one will be So as you can see I want say that price is $67 but I'm adding two zeros because it's like we are multiplied by 100 and that is how it needs to be for stripe API okay, so I will just do it like this and Then I will just say few features and features Can be an array again So let's say we say feature one Feature 2 - and then Feature three, okay, so that is The product one and we can duplicate it and say we will have another one so this will be product number two the price will be Let's say $147 okay and then We will have another one Let's say $37 Product number three, okay, so let's see how we are going to display now all those different products on the pricing page So as you can see we need to duplicate this Rose so here before it. I will say PHP and Here, I will say So first of course we need to encode it at the top Products So I'll say products PHP, and then here I will say that for Foreach Products as let's say product id And then The atributes Product attributes, okay, we are going to echo This so first I want to decide when we are going to echo this new row when we want to create new row So I will have one variable here. Let's see column number Equal one so first one is 1 so we will see if Column number equal 1 we will say echo and then get this Okay, and then down below we will go in say like if Column number equal 3 Okay, we need to close This Ok and We need to reset this column number to the 0 Else you'll see call number Plus plus we are just increasing ok So We can delete one of these Ok and now we just need to print this part so copy Ok and I will say here echo and just Paste this Here we go Okay so now from our products. We need to get title price and features So first one here is price, so I'll just get it by Attributes Price okay, and we need to divide by 100 to get the real price okay after that we need to get the name of the product So I'll see attributes title Okay, and now as you can see here We have the list of all the futures so we should use another for each Okay, so here. I will close the echo that we have Open another one just make sure nothing is wrong and then here. I will say for each Attributes feature as feature I'm just going to echo here That feature Like this Okay, so here. We are basically going through This array and going through all the filters that we have listed here Okay So let's see what we have got right now Do we have any mistake? so Pretty much. It is looking good. We have sixty seven dollars one hundred forty seven thirty seven Okay, and then we have this title quite big and then all the features, okay So maybe we should change this to page two To make up to be smaller So it looks a little bit nicer and now let's test. What will happen if we add another Product so I will duplicate. Let's say product number four Now let's say the price will be two hundred seven Okay, and then let's say future three two One just make a little bit of difference So refresh, and now you can see that it has been added down below. So maybe we can just add Here like break So let's see It's looking good, so As many times as we add a new product. It will be listed on the pricing page but Let's delete it for now We have only three at the moment. Okay, so now that is all. That's happening with the Basic design of pricing page and now the next thing that we need to do is to actually integrate The stripe API to this pricing page so in my previous tutorials I usually never go to the documentation and start explaining all the things that you need to read or know and I will just go straight away to the code, but I have noticed that the pattern that many of you guys don't understand quite a lot of the things and you just wonder from where I have got some parts of The code and for that reason I decide that this time we will go together through the document documentation and that I'm going to show you how you can learn and do something if Anything change in the future with this tutorial? Okay, so first thing that I want to go that you go is to the docs Check out and or maybe before that Just make sure that you log into dashboard.stripe.com because if you are logged in? Into the dashboard like I am at the moment in the docs they will just use all the Publishable and secret keys from your account which is amazing. You don't need to do that okay? So first we need to add paypal Sorry stripe button to this Pricing page so here you have clear explanation of What is happening and what is workflow? For the customer and what's happening in the background you can read that on your own I am not going through this I'm just going to focus on things that do matter and this is that all we need to do is to actually Copy this code, okay? and then we will just paste it into the our pricing page and As you can see if we analyze this you can see that This is basically a form we need to have some action and send all the details to our PHP code, we will use stripe API and then here as you can see we have data key, and this is as you can see my test publisher key and If you are not logged in you won't see anything here, so that's why it's important that you are all cool Sorry guys :) already logged in and Data amount is the price and then data name The name of your product and other things you can leave as is, so let's do this, so I will copy this okay, and Then I'll go to the pricing and then here below Closed list. I will make maybe let's say two breaks and then paste this code Okay Like this and now here I will modify action and let's say we will have one file Stripe ipn dot PHP okay, and that file you are going to pass ID of the product okay, so We will append and It is product ID that you are getting here in the for each loop Okay suppress ID the next thing is Data amount okay, and we have that in the attributes price Okay now we need the title here So I will say, attributes Title and Pretty much. That's it, so let's see what we have got so far So if we refresh you can see now that we have for each card for each product different Button so maybe let's remove one break too much Like this okay cool, so if we click on this one you can see that it tries to Charge 67 dollars Now if we do check this one it's hot 147 and this one is 37 so as you can see this is just how dynamically everything is working so far. Okay cool Now the next thing that we need to do is to create this stripe IP n dot PHP file So I'll go to the project go to the new PHP file Then stripe IP n okay And also while I'm here, I will just duplicate this and Create it like config dot PHP and in this part. We are just going to write everything related to the initialization of stripe APM Okay So now once we have created this on the client side we will need also the server-side code as you can see here, so just click there and Here is explanation on how you can write the PHP code and Here you have comments on every step What is happening so we are setting API key, then we are getting the details from our form, which is here and then we are creating a charge, okay, so I will just copy this and Paste in the stripe ap and file, but now as you can see here We have some red flags because we don't have this Namespace and that means that we didn't initialize already the stripe appian So maybe let's search like this github stripe API yes okay, and I'm just going to Download everything to the same folder And Now I'm going to extract everything here Okay, and delete the archive So now once you have extracted in this folder, you can see that we have all the different files and folders But actually all that you need is this init file and this then this library folder And if you open this we can see that it only requires all the files from the library folder okay So I will just select everything and exclude those two and then just do it, okay So now in the config. I'm going to require from the stripe folder Init file, and then maybe I'm just going to create one Let's say stripe details equal array, and then I will say here Since we need to have one Secret key and then publishable key, so I will say Secretkey, Okay, and then we need to have publishable Okay Okay And that's it so the secret key for me at the moment is this one Okay Here and the publishable is This one here so I'll get it and Included so that I? will just call it from This variable those keys and then any time that I want to go live all that I need to do is to just update The keys here, and I'm ready to do it okay, and then I will just copy this to my in it okay, so just copy and comment - and then he are Equal Okay so here I'll do it like this okay, and our API key is Stripe details, and then secret key, okay, and now on the pricing We need to go from stripe details publishable key then here, let's say I Include config and in the config. I will include products because we are going to need them in stripe API and file - Okay, so let's check our page So what is the problem permission denied that's because of? My server settings so let me just quickly Modify this Recursive And should be fine, yeah Okay, so this part is looking good so now when we try to pay all the details will be sent to the stripe APn and Phi and I want to show you what you are going to get as you can see they have already written that we will get Stripe token, but also I want to see what other details We are going to get so I will say ECHO free and then say var_dump POST Because I want to see everything and then I will hit exit So let's try this so let's say I will try to purchase this one so I will go pay with the card My email let's say test live.com and then I Will use this card so you can use this one? You can find test cards on stripe documentation So this is the one that I want to use and then we need to use some expiration date just in the future So let's say like this some random and then pay 147 So good, I'm redirected to stripe APN And now as you can see as an ID it's passed it as that we have walked product number two We have stripe token. Okay, we have stripe doc and card and we have stripe email Okay, so maybe let's just do like this so we have token already here, so I'll say email is Post stripe email and then product ID is ID Okay, and that's it So now before we create a charge on the users account first I want to verify that in our products. We actually have the product with this ID so I will say if not isset Products Product ID I will just let's say oh just read it person to them Pricing.php okay exit So let's try this So we have here product one product two product three it all looks good And if we refresh this it's all good It just says that we have problem with stripe document email okay, and That's okay, but let's now try to access product 4 and can see now I have been redirected to the Pricing PHP because I'm trying to cheat and now let's try to purchase this one with $67 Next time you will just use to remember Okay No 67 Okay, so now this part is looking good So guys if you get a problem like this as you can see the problem is that Stripe is not able to The STRIPE API is not able to communicate with the stripe and as you can see here it is error setting Certificate verify location Safa and most of the time the problem is because on our localhost we do not have SSL installed and basically for if even if you have live web server and for you to have an stripe API work properly you will need to have an SSL on your domain so the easy fix for you while you're working on localhost is just that you go here in the stripe APN and then just set SSL Certificates to the false okay, and now this means that we are we Force stripe API to work without SSL okay, and After this let's just make a test for this I will hit refresh continue and What is the processing or such token so That's a king. Let's try again, so let's out try to purchase this one Okay Okay Of course the price will be different it won't be $67 for now Because we didn't implement this part Okay, so this part here is looking good, and if we go to our striped dashboard hit refresh We can see the new sale just a moment ago for $9.99 Because that is what we are charging here in The stripe APN, okay, so first we can say that here if not isset this Product ID But before that we can say that if not isset Was token Or not isset this Okay, we are going to reddirect to them Okay That's it okay, so now here. We need to just Put all the details Here so in order to get an amount we will get it from our products and then by product ID and after that we will get just the price Currency is a key and not the description we will for our example just use The title of the product, okay like this and That's it, okay, so let's see what will happen So I'll hit refresh continue Okay, now. I am the pricing again because the token doesn't exist so I will now try to purchase this one We need again to insert all those details That's very boring sometimes Okay some random number pay, 147 so good I'm not sure what has happened right now So the charge is not here we have been redirected, but why Products, productID And we said if not isset not token but stripe token so that is our mistake, okay? Let's try again Okay, it looks good mom. They'll hit refresh And now You can see that we have got another sale Okay, there are two successful payments so I'll go to the payment and now we can see that we had made the first one and Then we have the second one as you can see here's an email amount USD and if we open Everything is looking just the way it needs to be and now from here once We have made a charge. We can decide what we want to do so from here. You can send an email okay, or You can store informations to the database Whatever it might be so of course for all of these you have clear explanation on my youtube channel and different video tutorials if you want to learn Each of those I'm going not going do it again, so I will just hear explain some message echo Success You have been charged, and then we it will just display the price So let's say here dollars, okay and That's it and let's make test once again So we can't use this token again Okay, let's try let's try out to purchase this one Okay, and now if we check our webpage here Payments and the payment is right here Okay, guys so pretty much. That's it. I hope that you have enjoyed this video It's quite a long video, but I really wanted to go into the details, and if you do enjoy it Please like it and share your friends and of course if you have any questions, please ask in the comments below Take care
