Accept a one-time payment with iOS

what's going on we'll also be long in the different payment states to this output text view lastly we have an instance of an STP payment card text field this is the component that it was referring to right here it's a pre-built component in the stripe iOS SDK we're gonna lay it out on the screen and it'll allow us to enter credit card details so let's also go ahead and write some code to basically set up and lay out all these different views on the screen so I have just for simplicity sake I have hello and morning everyone welcome to another session of stripes developer office hours my name is Ellie great to meet everyone let's get started as I mentioned my name is Illyria's I'm a developer support engineer at stripe today I'll be walking us through our demo we're gonna create an iOS application that accepts card payments mobile payments have grown tremendously over the last decade so it's increasingly important for native applications to accept payments so today we're excited to demo how you would go build about how are you how you would go build about your iOS application using stripes iOS SDK how you'd collect card details and then complete a one-time payment using payment intents just as a reminder we do have stripe engineers handing hang hanging out in the YouTube live chat so please do ask any technical or API or developer focus questions you have they'll be more than happy to answer jumping through our agenda for today we'll just do a quick overview of the stripe iOS SDK what all the capabilities are then we'll go to an extensive code demo during that code demo we'll set up an iOS application using Xcode will write some code and by the end of that demo we'll be able to accept a one-time payment and to wrap we'll do a Q&A in chat so please try out the demo and after please do drop questions in the live chat and our team will respond try to respond as soon as they can so what is a stripe iOS SDK it's basically a client-side library that allows stripe users to tokenize cards as well as other payment methods such as SEPA debit ideal we check pay and FBX for instance it also provides access to low-level API is to strike primitives and it also provides a bundle of pre-built UI that you can use in your mobile applications the iOS SDK now also allows you to confirm payment intense right from your mobile application it's this is pretty similar to how strike J acts on the web works and lastly using the iOS SDK you can write an integration and which allows you to tokenize Apple pay encrypted tokens the SDK also provides a built pre-built seamless integration with Apple pay as well that you can use here's a couple of examples of the pre-built SDK components on the Left we have STP payment card text field this component allows you to accept credit card details and tokenize them we will actually be touching on this later eyes are a demo walkthrough uses this on the right we have an example of an STP ad card view controller this view controller frequent view controller allows you to collect card details as well as optionally billing details and there are other people to view controllers one allows you to display a list of the customers payment methods that are attached to them you can the customers can then modify add remove the payment methods in that list and there's also a STP shipping view controller which allows you to collect shipping details in your application so with that said I think we're ready to move on to our code walkthrough so just before we move on I just wanted to mention that our api's are constantly changing so if you're not watching the live with us today it is possible that the method names or accepted arguments have changed in the library since the publishing of this video we try to do our best in keeping the changelog in the developer office hours get up repository up to date and we also annotate these videos so please do keep in mind if you're watching this at a later time this code walkthrough is basically based on an implementation that's a snapshot as of today of the state of the library and the api's and one more thing if you do have any features you'd like to see in the iOS SDK or in general distant stripes api's please do let us know there is a link to the feed to a feedback forum in the video description so please do write in and with that said let's get started let's hop on over to our coding screen I have a iOS 11 simulator opened up let's go ahead and fire up Xcode we will create a new project that's just type on Windows create a single View application we'll name the project one-time payment next and our office RS will just create a new time payment folder and save our project to that folder great so that's a fresh Xcode project that's created for us we have our initial starting View controller delegate so let's just go ahead and run that to get that running on our simulator perfect looks like it compiles and run successfully now our next step is going to be to install the stripe iOS SDK and we're going to do that using cocoapods cocoapods is a dependency for iOS projects something similar to NPM so let's go ahead and fire up a terminal window font size here and jump into our project directory and here we're writing our project directory we have our Xcode Xcode project file so we're gonna use cocoapods to instantiate our pod file you can install a cocoa pods as a ruby gem I already have - salt so I'm gonna go ahead and call pod in it and this will create a pod file which is created in our directory right here you can think of a pod file similar to how your packaged or JSON file works with NPM you can specify the dependencies you want to install what version you want to install for to your project so let's go ahead and modify our pod file so we're going to come down here and into our one-time payment target we will write pod stripe so installs the strike pod will specify the 18-200 version which as of today is the latest version of the stripe by iOS pod we'll also go ahead and install Alamo Fire will stick to version 4 901 Alamo Fire is a dependency that helps in making HTTP requests we will set up a back-end server as part of this demo and we'll have to make post requests to an endpoint on this server so alamo fire is gonna help us do that so let's go ahead and save our pod file and now we have to run pod install and it's going to look to that pod file and install all the positive you specified so let's go ahead and do that we can see that ELMO fire 49.1 and stripe 18-200 were installed to our project so let's go ahead and close terminal window let's also close our Mexico project and open up the the workspace file for that project the workspace file basically allows the different pods that we installed to kick in so as you can see we have our project right here our source files and then the pod with the pod dependencies installed right here so to verify that our pods install correctly let's go ahead to our app delegate and call import stripe and as you can see it detects the stripe module so it looks like the stripe module is installed successfully now in our I did finish launching with options app delegate delegate method basically this this function is called when your application launches so we're gonna do is called stripe set default publishable key so here we're gonna set the publishable key for our stripe account here remember this is not your secret key this is just a publishable key which is used client-side so either on your front-end web page or in your client-side mobile SDKs so I'll go ahead and copy in my publishable key it starts with the PK prefix + great now let's move on to our view controller I'll start by importing stripe and let's also import Alamo fire because we'll be using that later in this in this view controller now just to kind of talk higher level what we're gonna do here is we will first set up some UI like buttons and labels to basically display the the check out to construct the check out page will also set up STP payment card text field from Straight by OS so the SDK provides a prebuilt credit card component which allows you to enter credit card details so we're going to use that from stripe iOS so I have some shortcuts set up for that so let's go ahead and let's first set up our UI view subclass properties so let's dive into a little bit of what we're doing here we're setting up to UI stack views just to lay out our different views we have a UI image view which will display a product image a UI product label which is a UI label just displaying what private product the user is going to purchase a pay button a loading spinner and output text view so this view is basically just to log debug strings to the to the to the iOS application screen it just helps in better debugging and to kind of know exactly what what's going on we'll also be long in the different payment states to this output text view lastly we have an instance of an SDP payment card text field this is the component that it was referring to right here it's a pre-built component in the stripe iOS SDK we're gonna lay it out on the screen and it'll allow us to enter credit card details so let's also go ahead and write some code to basically set up and lay out all these different views on the screen so I have just for simplicity sake I have set up some shortcuts to do that so our set up UI function basically sets up all these different UI elements on the screen adds them to the stack view add some 2d the view controller is view so we're just setting up the different components here our uitextview our payment text field our set pay button our loading spinners and we also have a few helpers for settest starting loading stopping loading and displaying status which basically just writes to the you hear we're adding attaching a function to trigger when the our pay button is tapped so we don't have this function which is by like so it's complaining so let's go ahead and add a mark or comment mark for button actions and create a pay function so there you go so right now all we're doing is we're setting up some UI putting it on the screen let's go ahead and call this function setup UI on viewdidload so whenever our view controller loads we want to set up all this UI let's go ahead and run this and what we're expecting to see is we're expecting to see all our UI elements on the screen button and STP payment card text field and once we have that we're gonna go ahead and start start running the rest of it oh I should I start at the eleventh row simulator I should restart to the iOS 11 simulator let's go ahead and fire it up awesome so we have our label or credit card text field where you can enter credit card details a pay button we should have an image here so I'm going to do is gonna open a Finder window jump into our assets folder and copy over assets to our XD assets file so it's just a sample image of a strike press book that we copied over we're referencing this here by image by a string name when we initialize a UI image and then set it to our product view image cool there you go so that's our checkout screen is we've laid it out let's dive in and start writing some code so on our pay button when you press R K button we want to do a few things so so first server-side you want to create a payment intent and then B client-side we want to confirm the payment intent payment intents are only can only be created server-side but they can be confirmed from the client-side whether you're using strike iOS SDK or on web if you're using strike j/s so in order to set up our server side component what I what we can do is we can actually leverage something called the example iOS back-end so stripes engineering team the mobile engineering team actually created a example iOS backend and it's built in Ruby it's a Sinatra web app it has some endpoints for creating payment intents creating customers it's basically an example back-end that you can use with the stripe iOS demo example app so we're actually going to go ahead and deploy this example back-end to Heroku instance before we do that if we were to dive into what the what the backend code here does is we have we have a post endpoint for call create slash create payment intent and what it basically does is it creates a payment intent for a particular amount for a currency and for payment method types of card and it basically returns us JSON object with the payment intent ID the payment intent client secret and the payment intent status and out of all these that premium and client secret is what we will be using to confirm the payment intent from the client side so basically we're just going to be using this bit from our pre-built server-side so let's go ahead and deploy this to Heroku it wants us we have to give an F in the app name so I'll go ahead and call it office hours one-time payment that's available and it's a handy little thing here we can enter your stripe test secret key and will be set into the as part of the config or environment variables and then when the the Heroku server boots up it'll automatically grab the stripe secret key and and go from there so let's go ahead and copy in my stripe secret key so this is this key that you would use server-side you would not be using this client-side let's go ahead and deploy this app it's going to go ahead and it's all I need appendixes deploy the web server great looks like it was deployed successfully you can click the View button here and it should just go to the the URL here which is office RS - one time - payment Heroku Heroku comp and we get the message from the fundus get in point here that your example back in is set up nice so now that that that's working let's go ahead and at the top create a variable called let's call it backend URL just a string variable and it basically is our the endpoint of our sorry the URL of our server side or our Roku server now to in order to create a server created the payment tent we have to make a post request to the slash make a post request to the slash create payment an endpoint so this is where Alamo part comes in let's go ahead and call Alamo fire dot request and what you'd be using this signature so it takes in a URL convertible and since the HTTP method parameter is encoding and hip headers so let's start with the URL let's go ahead and construct a URL here let's call it URL and initialize it with a string and back at URL is our our is the string URL that we initialize earlier and let's unwrap it additionally we want to append a path component to this which is create payment intent now for the arguments will pass URL the method we want it to be post for parameters we are just gonna pass nothing and we can get rid of the other arguments they're not relevant for now now let's go ahead and call the call validate with a to validate the status code so anything between $200 200 to 300 300 range okay with and let's call response JSON handler here and what that handler does is it takes a taking a completion and the parameter is response now in here we want to kind of look at the response dot result and verify whether it was a successful response or a failed response so let's go ahead and before we do that let's actually in our pay function let's move this out of our pay function into a new function let's call it create payment intent and this function we wanted to actually take a closure so we're passing a completion block and we want it to be a pen type SDP JSON response completion block and we're going to move our code out of the pay button and just move it into here and we'll call the create payment intent function from our pay button function and that's where we're passing the closure so that once this function is completed we can do and call further code after that so let's go ahead and switch on the response dot result our case should be dot let's try the failure case since and she does error so our completion block here the STP JSON response completion block if we look at the just jump into the definition it's a call takes in a json response optional dictionary and an optional error so that's what we're going to call our completion with so in the case of a failure we want to call completion where the dictionary response is nil and the error is the error that we just received for the case of I should do don't need those case dot success and let's call that JSON where it spawned JSON and here we want to call the completion block this time we do want to pass back a dictionary response so this past JSON and since it's a type any right now let's cast it to a dictionary and for the error it'll be no and okay perfect so we set up a URL and we construct the entire path which is our Roku server side endpoint slash create payment tent we use Alamo fire to make a post request to that endpoint and when the response we get back we call our completion handler with either a failure we pass an error or with success where we pass it back the JSON dictionary and no air let's go ahead and call this function from our pay button handler so do self dot create payment intent and I'll press ENTER to auto complete our callback parameters so the first one is a dictionary optional dictionary so let's call that payment intent response and our second one is an error so let's call that now in here want to check if we received an error in our callback or if we received a payment in response so let's unwrap the error if we do have an error one to print error and return if we don't have an error what we want to do is let's go ahead and cast our payment intent response to a dictionary payment as we want it to be a dictionary and if we are unable to cast it let's go ahead and print curb response okay so at this stage we should have if everything goes according to plan we should have a dictionary that is basically the key value pairs returned by our server-side endpoint so let's go ahead and get the client secret out of that key but a lot of the key value pairs we have at this point so response dictionary the key was secret got to wrap it as a straight let's go ahead and put a breakpoint here and let's run our code press R tap our button we want to see the pay button the pay button Henry called which calls creep payment which makes it push request and then calls the call back and the call back we basically want to retrieve the like secret that our server-side for the payment tent or server site just created let's go ahead and additionally also call self dot start loading here just to kind of get a better idea of when when we when are you just to reflect the UI we what we're actually doing let's call stop loading if we get an error here and if we get to let's also call self dot display message here and call Eric localized description here display status basically logs out the logs out to the text view here similarly let's print the response dictionary here and let's go ahead and run that ok so we have our so print a breakpoint here in case we do get an error in this callback so let's go ahead and call us the make payment the first time we call it there might be a a bit of a delay as the Heroku app kicks up ok so looks like looking at our window here we have the error nail and our payment intent response actually has three key value pairs so in our debugger here let's go ahead and close print out payment risk in town response and as you can see it's a it's an optional dictionary it has three elements a a key of status and a value for the payment intent status right now it's in status requires payment method key for secret which is the client secret of the payment intent this is what we're interested and we're going to use here lastly the interim intent ID so it looks like we're actually getting about response from our server which is great so let's go ahead and in our simulator session and continue on from here now that we have a client secret our next steps are to confirm the payment intent using a CP payment handler SE ppm and handler is a class provided by the iOS sdk it basically allows you to confirm payments that are that are created by payment intents just from your client side so from your iOS or Android app or from your web front-end and I mean the process of confirming the payment ICP payment a handler also presents any authentication UI for any payments that are SCA impacted or require a secondary form of authentication from the from customers SE b payment hey Laurie just presents all that whether that's to a web view or a native or whether it natively handles that authentication is able to do that so in order to use a CP payment handler we also have to implement delegates for a CP authentication context SP dedication context basically helps in presenting the authentication UI that I was just talking about so we need to implement that delegate so let's go ahead all the way to the top view controller declaration and implement the CP authentication context protocol it will complain it'll ask us to actually implement those protocol methods so let's go ahead and autofill that and move them all the way down as a separate mark and call it SCP authentication context delegate this elegant method is basically asking which authentication presenting which view controller represents the authentication UI in this case it's the view controller that we are so we'll just return cell okay now with that done let's call the shared singleton instance of a CP payment and ler if you call it that shared and the length of you're looking for is confirm payment so let's how to complete that so this function takes in three different arguments it takes a CP payment and ten params it takes in an instance that implements a CP authentication context and it takes in a callback called SCP payment handler action payment intent completion block so let's take it one by one let's construct our SCP a minute ten programs this is basically telling our the SP payment handler what payment intent we want to confirm and what card details that we want to confirm it with so let's go ahead and create our payment intent params intent sleepy payment intent params and the constructor actually can take in a client secret which we just referenced here out of our server side response so we want to pass in that rabl here so we have our payment intent params we'd set up with a client secret the second step is to identify the card details so remember earlier how we set up a SDP payment card text field we can actually get all the card details off that and set it to our payment intent params so let's go ahead and do that so intent params dot payment payment method params so you can pass it set a the property of payment method params to your payment M / M so let's go ahead and first create payment method params let's create variable for that method params has a constructor you can initialize because it's a payment methods are basically an abstraction of a few different payment methods like cards ideal SEPA fpx you can construct them with any of those pain details but we'll go with card because that's what we're working with today SCP so the user constructor takes STP payment method card params so we'll reference our payment text field dot card params so you'll actually there's a property which basically gives you all the card parameters now that were passed as I were typed into the payment card text field for billing details let's just pass nil and for metadata let's pass nil so we have our payment method params now on payment intent params we want to set this instance of payment method perhaps there you go now that we're payment and Temper ends are set up we can pass them in to our confirm payment function so that's payment that should be payment intent params for the second parameter we need to pass in the instance that implements the authentication context which in this case is the view controller itself lastly we want to pass in the completion parameters so the first one is payment handler action status let's call that status yeah second one is an optional SDP payment intent object so let's call that payment intent allow see we have an optional error that's an error so this at this point we basically have a payment intent that was that confirmation was attempted on it could either have been cancelled failed or could have succeeded so let's go ahead and switch through those different cases off our status so case dot start with canceled let's pre fill all the failed and in case dot succeeded additionally we want to do in each of these three cases is we want to setup a result string as an empty string and for each of these statuses we want to print out something different as a result so let's call it payment canceled on the bail scenario let's call say we want to print out payment failed please try a different card and for the status exceeded we want to print out a MIT successful at this point once we have confirmed our payment intent and we also also want to call stop loading let's go ahead and call that additionally let's print out the result string and let's also log it to our display status and log out the result string okay so let's go ahead and go ahead and run this I place a breakpoint oh we're missing something here oh I'm missing a colon here let's go ahead and run so why don't we go ahead and we should also actually yeah I want to print out a few more details here to these output text field that we have set up so when you call it create payment intent if we do get a valid response let's go ahead and first call self dot play status creating payment intent next we want to at this point we want to log out created a team in intent and then lastly we'll be printing out the status of what happened with our parent and that's one that cool so without entering any card details let's just go ahead and click Submit payment we're creating a payment intent or loading spinner shows up and we have a payment tent created and if we go ahead and so we are in the confirmed payment completion block and since we didn't enter any card details we should see a fail they fail please try a different card because we didn't enter a card here let's go back and add in the four to four to test tokens is the test visa card swipe token and now let's go ahead and submit payments so we're going to see it's going to try to create a new payment it's created that it's trying to going to try and confirm and if we break point here our status is succeeded and it's going to print out payment successful so we just accepted our first test payment with stripe iOS let's go ahead and use some of the other stripe test tokens these are all available on strike comm slash dot slash testing it's a bunch of different test tokens let's try one that we know will fail so there's a token which automatically declines any charges created by that token let's use that this is zero zero zero two card let's go ahead and create that payment creates a payment intent payment field please try a different card so our app is able to tell us that that car did not work let's try a different one let's try a card that requires a time decay authentication in order to be used so this is going to demonstrate how SCP payment handler is able to present any authentication UI for customers to authenticate their payment with their bank if I go ahead and submit payment the three one five five card requires authentication so it's creating a payment intent it's going to try to confirm it without any extra code we automatically have a web view show the the test payment page where you can either authenticate or fail at indication so in the real use case customers would see their bank page which would ask them to verify their identity with either notification in a text message or some other method so if you go ahead and complete the authentication it completes when close out web view and we come back to our app and which drops us back into our completion block here and payment successful and try again with the same card this time we'll go ahead and fill a ten occation and if we close that payments failed we gotta try a different card additionally we can also use the the three secure to card which presents instead of redirecting to a a web view it actually presents the native UI which that's pretty different let's go ahead and try that it's three two two zero card and as you can see that's the the native modal displaying the 3d secure to test screen so we'll go ahead and complete all communication it dismisses and payment successful and that about covers the extent of this depo we were able to set up the SDP payment card text field we set up a button pressing the button we make a request up to our server we create a payment intent back to our client side we use the client secret of that payment intent and using the card details from SDP payment card text field and using SCP payment handler to confirm the payment we were able to confirm payments that our regular one-time payments we're also able to confirm payments that require authentication all to basically one class and one component so yeah that about covers our our demo up back to our slides we have links to some helpful resources here the first one is a guide on how you would accept one-time payments using the iOS SDK it's a really helpful guide pretty much covers what we built today on how you would set up your server side and your mobile app and create and confirm a payment intent the second link here is a link to the stripe iOS SDK reference this basically covers all the different classes that are available in the iOS SDK the different capabilities of each class and the different functions that are available to you in all those different classes lastly we have the stripe iOS get AB repo definitely keep an eye on that for any updates and bug fixes as they come in there just want to highlight that our team is still available in chat so if you have any developer focused questions any API questions any technical questions please do fire away the team is standing by right to answer and that concludes this week's developer office hours thank you all so much for joining today it was super great to see everyone join in watch dropping questions I really hope that you found this useful I just want to let you know that we are here for you and we want to enable you to grow your business offer and your business if you enjoyed this episode and would like to see more officers videos please give that a subscribe button a click we also have monthly developer die just emails where we share highlights of new features invites to in-person workshops talks about the API and SDK updates so please do subscribe to that if you're interested there's also a link in the video description to the github repository where you can clone this project and run it under your machine we're also trying to always improve the way we deliver these videos so please do share feedback if you have we'd really like to hear from you there's a link to a feedback form in the description of this video so please do write in and share your thoughts thank you all again so much for joining this is Ellie signing off have a good one

Channel: Stripe Developers

Views: 5,620

Rating: 4.7674417 out of 5

Keywords: stripe, credit-cards, api, swift, ios, stripe payments, accept a one-time payment with iOS, Accept Stripe with iOS, iOS payments, Accepting a one-time payment with Stripe on iOS, stripe-ios, Stripe iOS SDK, Stripe iOS Client Library

Id: s5Ml41bZidw

Length: 47min 44sec (2864 seconds)

Published: Wed Dec 04 2019