Stripe Integration with SwiftUI Application (Client and Server)

hello everyone and welcome to awesome sharp weekly in this video you're going to learn how to integrate stripe api with your ios swift ui application so let's go ahead and get started now in order to integrate with stripe api they have a really good documentation so let's go ahead and first start with there by going to stripe.com docs over there you can find a link to getting started and we're going to be doing online payments so let's go ahead and select online payments overview and you can see that there are multiple ways of doing integrations you can do integration using stripe payment links you can do integration using stripe checkout or even stripe elements which will provide you some elements that you can integrate with your surf ui or ui kit application we're going to select stripe elements over here on the toolbar you can see that stripe integration is available for web ios android front-end we're using swift objective-c and back-end using many different technologies we're going to use ios swift and node now one of the things to point out over here is that we can literally copy all of the code for node and make adjustments as necessary but one other thing that is important is this key that we have so this is the important part you do need this key and the question is how do you access the key well in order to access the key in order to get the key you need to be signed in you can already see that i am signed in as azam sharp so you have to make sure that on stripe.com you are going to create an account as a developer so that you can get access to the keys public keys and private keys if i go ahead and open up the dashboard this is going to take me to the dashboard i can show you where you can find all your keys when you're on the dashboard you can select developers you can open up the test mode also you can see that i have been doing a couple of different api requests and right over here you can find the api keys you can see that you have two different api keys available publishable key and a secret key so secret key is for you so make sure that you are not revealing it or you're not giving it to anyone and a publishable key is the key that you basically publish i mean that is necessary in order to publish with uh stripe api all right okay let's go back you can see all the code over here on the right hand side this is stripe code and this has already integrated my api key i can simply go ahead and copy it and now i need to host this somewhere now one of the things where you can go host is glitch i have used glitch before but if you haven't used glitch simply go to glitch we can go to glitch website and you can see there are there's a link to create a project so i'm going to go ahead and click on a new project and there are many different options hello hello node project react project website i'm going to select hello node this is going to create a project for me on glitch server now i believe that by default the glitch server is running fastify and i don't really want to use fastify i want to use express okay so how do we use express so what i'm going to do is i'm actually going to delete everything from there in order to use express i need to install express that will be as a package so i will open up the package.json file add a package search for one of the packages which is called express i will simply click on it and it will install the other package i need is for codes let's go ahead and add that cross region request and another package i will need which is the main package which is for stripe this is going to allow us to integrate our node or communicate our node express application with stripe so let's go ahead and install that just by clicking on it you can already see that i have installed these three different packages let's go to the server.js and we can now copy this code so i'm just going to copy this and i'm going to paste it right over here all right so this is fine it is going to give us one single route to create a payment intent so this is our intention or intent for the payment and we're going to change this a little bit so that it calculates the correct amount you can see that in order to calculate the amount they have a function called calculate order amount although you can name your function anything and they are always returning you 1400 that's 14 so this is in cents so 1400 cents 14 dollars the currency amount is us dollars all right so this is what we're going to use right now but we will eventually change this stuff so this is a server side but we will change it okay all right let's go back to our application fruit store so this is the application that we'll be working on it's called fruit store some parts of the application have already been implemented so that i'm not going to start from the very scratch because we are just creating some hard-coded data we are creating some buttons displaying them in the list but i do want to show you that how the application actually looks like so let's go ahead and first see that how the application actually looks like because it's not really much going on in the application it's just going to list certain items that we are selling like apple and bananas and oranges and those kind of things and then it will allow us to add the items to our cart but let's first make sure that our application is actually able to run so we can look at it we can see that how it's working correctly all right so here it is if i go ahead and run the application you can see that it displays us products page product screen and we have couple of different products like apple for one dollar banana for two dollars cherry for three dollars and watermelon for five dollars there is also a cart icon so if i go ahead and add some stuff to my cart it increments and then eventually i can go ahead and check out which doesn't really work right now all of these items all of these products are represented by the product class or the product structure each product has a photo and a price and you can see that all of these products are just simply hard-coded products all right whenever you try to add a particular product so what we do is we have created a cart class which acts as a global state so we use the add to cart function and in the items which is declared as an array of items we add the item which is simply a product and that's it so let's go ahead and try to integrate our app with the stripe now the first thing that they tell you to do when you are building the stripe application is to register an id that's the most important part the default publishing key that's something that you need to register and you need to do that as early as possible but before we even do that you need to make sure that you have the strike package the strike framework because currently you can see that i don't have any strive framework so i can't really access stripe or anything related to stripe let's go ahead and click on file add packages and you can see that recently i viewed a package called stripe ios you can simply paste this and it will add the package but if i go ahead and try to copy it and put it right there you can see that i can simply select the stripe package make sure that the branch of that package is mastered let's go ahead and add the package by clicking on the add package button over here which package or bridge product package product we want to add i'm just going to say stripe is fine it's going to be added to the target fruit store that's the only target that we have right now and now you can see that we have a dependency on the stripe package let's go ahead and build our app okay once the app is built we want to make sure that we are registering the stripe api default publishing key the first thing i'm going to do is i will import stripe and we want to do that as soon as possible when the app is launched so i'm in the fruit store app file and in the initializer i can simply use the stripe api dot default publishing key and we can go ahead and put the key you can get these keys on the stripe developer dashboard as i've shown you earlier okay great what will be the next step well looking at the page over here let's say the content view we can see that we have all of these items and we have a checkout button but the checkout button doesn't really do anything so what we want to really do is when you click on the checkout button it's going to make a request to our server and it is going to get something called a client secret id that's what we want all right because without that we won't be able to perform the actual checkout so we need to get that id we need to get that stuff and then we probably have to save it somewhere all right so let's go ahead and call our function start checkout this is going to return us something we are kind of ignoring right now okay and i'm using xcode 13. all right here we go so start checkout so now we can work on starting the actual checkout this is not like paying this is just performing the checkout meaning that we are interested in these items the first thing we need is a url and the whole point of this checkout is to use our own server the one that we implemented in glitch and get the client secret from that particular server so let's go ahead and see how we can do that we can also calculate the items and all those kind of things all right so let's go ahead and first type in the name of the server you can get the name of the server by simply changing the url this is a server just copy that url and the route that we are trying to go is called create payment intent and this will be the url so once we have created the url we can go ahead and create the request http method as well as the items and everything there we go you can see that we are you you are creating a url request http method is post content hybrid application json http body what we are sending is actually the items and each or the items array which is the array of products now we can use urlsession.shared.datatask with request we can pass in the request we just created we're going to get the data we're going to get the response hopefully and the error and obviously don't make sure to call resume we can check a couple of things over here that if the data is returned and the response code is 200 only then we will move forward all right now when i say over here json decoder dot decode so basically we were talking about the response the actual data that we got from the server if you look over here in the create payment intent the actual data that you're getting from the server it kind of looks like this it's just contain one property called client secret and it also contains the value of that secret that's exactly what we want so on our client side meaning on our iphone side or our app side we need to create some sort of a model in which we can decode this stuff so i'm going to go ahead and create a model called checkout intent or checkout intent response and that is going to map to client secret so this means that i can decode the data into it so we're going to decode it to call it check out intent dot self data and this is going to be try optional this is going to return us check out intent response okay once we get the checkout intent response we can fire the completion handler and we can get the checkoutintendresponse.clientsecret this is going to give us at least a client secret that's what we wanted from the completion or start completion now if we scroll down in the start checkout this is where we are getting the client secret so let's go ahead and say client secret we want to put the client secret somewhere so what i have done is i have created a payment configuration share dot payment intent client secret and i can simply go ahead and assign the client secret to it not a big deal because if you look at the payment config it's simply a shared place where i can put something and one of the things and only thing i'm putting or assigning is the payment intense line secret so that i can access it in a different pages you might be thinking that well why don't you put it in the environment object you can if you want to but for now we're just putting it over here because i think environment object i would use it preferably for more data kind of a scenario rather than some keys and values other thing that we're going to do is we're going to activate this to true so that we can eventually jump on to the checkout screen since we might be in a different thread i'm just going to make sure that we are on the ui thread when we set his active to true let's go to build it all right now a couple of different things we want to change over here on our server over here we want to change it one of the things that i really want to change over here is that how this is calculating the order you can see that right now it's calculating the order and it's not really taking into account that what kind of information we are calculating the first thing i'm going to do is i'm going to not extract out the items but i'm just going to assign the items over here because our body itself is already in items so we don't really need there's no property in the body called items our body is the items the other thing that i want to do is i want to calculate the actual amount so based on the items so items dot reduce i will get the previous item i will get the current item and we will have the current value so we're just using the items.reduce it's a array helper there we go and we are going to to calculate the price plus current.price this is going to give us some sort of a total and since the price have to be returned in cents so i'm just going to multiply by 100 all right so hopefully that is going to give us calculate the total number of price and then it's going to create this payment in 10 based on the amount so whatever like if it's for 1800 so this means it's 14 dollars and then we will send the client id back all right so by using this particular client intent so this is our intent to charge person three dollars five dollars or twenty dollars all right so this looks fine let's go ahead and resume this and see what happens if we try to add certain items to our cart and try to check out so we are adding some items i'm going to go ahead and say checkout all right so you can see that it's not really taking us right now and if i go to the tools over here uh terminal probably well not really terminal so how to get rid of that now log messages it's throwing some errors i'm not sure why it is throwing an error because i'm multiplying total by so make sure that we are saving it correctly not sure why it is giving us issues over here so let's go ahead and try it again all right so it was a weird issue uh but what i did is i changed the port from four to four to or whatever the port was 28080 so i'm now running on 8080 and it should be running fine now so let's go ahead and go back to our application and try to see that if it takes us to the preview or the checkout screen or not once the i'm adding the item so i'm just gonna add two items i'm gonna say check out and there we go so two items total five dollars and now i need to pay there's a button for pay but there's no way to enter the credit card number so we need to work on that part now so let's go to the checkout view the first thing we need is to show credit card number to ask for the user to enter credit card number i'm going to go ahead in the checkout view and import stripe this is where the user will be entering the credit card number now the good thing is that stripe already consists of a shift ui control that will create a payment credit card text field so let's go ahead and do that it's called stp payment card text field dot representable so that we can represent this ui kit control in safe ui dot init and now we can pass in a payment method params which is a binding argument so we need to make sure that we are creating a payment binding arguments so let's go on the top and we will go ahead and create this so state private var payment method params which is stp payment method params there we go and we can simply pass it right here as a bindable argument so dollar sign payment method perhaps and as soon as we do that you will see that it will start creating the text field to enter the credit card so if i go ahead and edit some items and i go check out you can see that this automatically starts coming up this is from stripe now since we are running simply a test you can simply click over here and enter some information this is four two four two four two this can be anything you want just make sure it's not expired this is a cvc code and then make sure that you have the zip code so this is the correct information for testing and you can click on pay but the pay doesn't really do anything right now you can see that there is a pay function when it is fired when you click the button but the pay function doesn't really do anything so we need to figure out what goes in the pay function well the first thing we need to do in the pay function is we need to find out that do we have the secret the payment intent client secret key so let's go ahead and do that client secret payment config dot shared dot payment intent client secret else this what will we do in else well not really anything let's return it what if we do get the secret then we can create a stp payment intent params so i'm just going to call it payment intent parameters stp payment intent params which will allow us to pass in the client secret so now i can pass in the client secret there we go payment intent programs dot payment method params and now i can say payment method params now in order to actually submit the payment we will create what i call the payment gateway all right now you can call this anything you want but i'm just going to go ahead and create a payment gateway so i'm just going to add a new file and in that example they're using a controller so i'm just going to use also the controller payment gateway controller there we go and in the payment gateway controller i'm going to implement the actual payment gateway all right so a couple of different things i need to import i need to import stripe i need to import ui kit and i will create a class called payment gateway controller which is going to be a ui view controller and one of the things about this will be that we are creating an extension on payment gateway controller so that it will also be conforming to stp authentication context protocol that's the important part that is why we are using a uiviewcontroller and in order to conform to that we need to create a function called authenticationpresentingviewcontroller and return itself now another function that i'm going to implement is going to call submit payment this is the actual function that submits the payment but instead of doing anything inside the function what this function will actually do is it's going to take in the intent and it's going to fire a completion handler giving you the opportunity to do anything with the status intent or the error so you can see over here that we got the payment handler stp payment handler the scribe payment handler we fire in the payment confirming the payment but instead of doing anything over here we simply return back a completion to the caller so the caller can decide what they want to do so this means that now we can go back to our checkout view and we can start using our payment gateway controller payment gateway controller make sure that we are creating an instance of it somewhere so let's go on the top and first create an instance payment gateway controller dot submit payment we will pass in the intent which in this case is payment intent params and we will get the result which will consist of the status of the payment the intent and the error in this case the status is actually the important part for us so we can go ahead and perform a switch on the status because the status can be anything we will check if the status is failed well then on the message we will say fail this message property is simply a string that we have created earlier there we go what about if it's cancelled or if it is some other let's go ahead and do that canceled then message can be and you can be more descriptive over here i'm just trying to save a little bit more time and write a little bit less there we go message and your payment has been successfully completed all right let's go ahead and run this okay so that should be okay we should have a text somewhere which is going to give us the information the final result that if the payment has been succeeded or not and with that with those changes let's go ahead and run the application there we go let's go ahead and add some items we're going to add two three and we can perform a checkout you can see it's five dollars i can go ahead and enter something over here let's say four two four two you this you have to enter four two four two because or else it's not going to work that is the dummy uh credit card that we have to use and i'm going to say pay and your payment has been successfully completed so looks like our payment has been successfully made for five dollars you can always go to your stripe and check out all the different payments and everything you can see right over here we just got the payment pretty cool right so we were able to complete this payment successfully all right so this is all in the test mode and there you have it you have successfully created or integrated stripe with your sif ui application if you like this video and want to support my channel then check out my courses on udemy you can see that i have a lot of different courses at udemy and including my latest course which is surf ui cookbook which consists of over 100 recipes for building your ios applications i also have courses for mvvm design combine core data rx swift intermediate swift async and await and a lot more check out the links in the youtube description and thank you so much for your support

Channel: azamsharp

Views: 948

Keywords: SwiftUI, SwiftUI Stripe, Swiftui payment, ios development

Id: De7EL_1jv0c

Length: 30min 45sec (1845 seconds)

Published: Thu Oct 07 2021