Try Payment Field with airSlate SignNow

Try payment field

hi I'm Shannon skipper here from square today we're taking a look at squares in-app payments plugin for flutter so to get started you'll want to first install flutter which you can do by following the flutter getting started guide check out the description in the link once you've done that let's start by creating the basic flutter demo app you can do this by running flutter create and then we'll pick an app name let's say charge underscore card so we'll CD into charge card and then open this project up in Android studio flutter works for both iOS and Android but I'm going to use Android studio today and focus on the Android app so here's the basic flutter app let's go ahead and get it started in our emulator so I'll open up a little pixel phone here and we'll go ahead and launch the app so while the app launches we'll take a look at what flutter has generated for us here with flutter create charge card so this is a stateless widget we have the swatch color and like my homepage title so let's go ahead and edit those so we'll instead of flutter demo homepage we'll say flutter payments app ok great and then let's look down at what this app does so there's an int counter so this is a counter and then an increment variable let's go ahead and remove this counter will not be using it and we'll change our main function from increment counter to pay before we do that let's take a look at what the app does so we press the button it increments the counter that is it this is what this demo app does so we have changed the title let's go ahead and change the color from blue to green since we're taking a payment and when we hit save a neat thing about flutter is it's going to do a hot reload here so it still has the we hit the button nine times now it's a green background so let's get into it so if we go down to this button it says you press the button this many times let's change that to something like make a payment okay perfect so reload and there it reflects on the screen and we don't need this counter so I'm gonna get rid of the text with the number and then let's also delete this function contents for incrementing the counter and just replace it with a placeholder to pay and then we'll get rid of the counter and change the call back in the on pressed to be pay and then we'll change a couple of these tooltips for payments and then icon we get some nice code completion here we can get payment and then we reload and we have a charge button so if we click it it does nothing because right now that function is actually unimplemented we just have the placeholder stub here so let's go ahead and add the square and app payments plugin so to do that we'll open up the directory and we'll go down to the post spec yamo where flutter dependencies are declared and then in there we'll add square in-app payment and it is version 1.1 point oh okay in-app payments plural and then when we save okay great and then I know that we've generated an app that has an older SDK version so let's jump into the Android app build.gradle and we'll bump the min SDK version up to 21 this is just because the flutter plug-in is pretty new so on later versions of Android studio you want you to do this but right now we do so now that the app has reloaded we have square it net payments available so let's hop back to our main Lib main dart and we'll go ahead and implement and payments so first things first let's do the import so import start typing it's gonna automatically mint start perfect so we need to add our semicolons here and then the grayed out nature of these shows that we're currently not using them as we actually use the methods from these two modules then we will see those come back to normal color so under void pay let's go ahead and start typing in app payment so we can autocomplete out and the first thing we're going to want to do is set our square application ID so this ID you can get from the square developer portal I have it pulled up here on safari so let's make a new application what do we call this charge card so I've copied the application ID and I'll paste that in this field so the in-app payments of function could actually be called just once but it doesn't matter here we're just going to go ahead and call it inside the pay function so the meet of what we want to do here is actually pop up a credit card entry so someone can enter a credit card on their own mobile device so let's go ahead and do in-app payments and we need to do SH let's see let's look at the autocomplete options it is start card entry flow so this function is gonna need two callbacks that we can name ourselves so we need to do on card Nantes request success and I will just lazily name our callback function card nonce request success and then we also need to do on card entry cancel so basically the two options here are you've successfully entered your card and get back the nonce which is a one-time use token or the user has cancelled the payment flow and we want to go back to our shopping cart or whatever it is we're doing so I'll just again lazily name on card entry cancel card entry cancel and we have now defined our pay function so you'll notice that the card Nantes request success and card entry cancel are both underlined in red that's because we haven't defined those functions so let's go ahead and do that so first off we'll do it'll return void we'll do the card entry cancel that's an easy one so in our case there's actually nothing we want to do when a user cancels the input there might be in your case but it's fairly typical to just have this not really do anything because you might want to edit your shopping cart or whatever it is you're charging for so we'll just put a note in here that says cancelled card entry and then so that that went blue fantastic and then we'll do another function we'll define when we do get a successful card knots requests so we'll do card nonce request success I'll just paste that we can name these anything we want I'm just calling them based on their functions okay great so in card knots request success so actually it's still red here because it this function is actually going to give us back card details so perfect we'll go ahead and add that this is the type it's a card details and we'll just call this result so perfect so if you successfully enter a card we'll just print here the result and the knots this is the bit that we're trying to get back fantastic and then let's do the meet of the thing so if you are successful you will get two in-app payments dot and it'll be complete card entry and again this is going to let us name what we want the function callback to be called so once again I'm going to just name it after this function and you don't have to do that but that makes it so we don't think about naming so on card entry complete we'll call card entry complete and it's complaining because we have not implemented the function so let's implement this function as well card entry complete and we'll just on this one put a leap Moses a success okay great so let's go ahead and reload flutter I'll go ahead and just do a full reload here so it can grab the in-app payments plug-in and while we do that let's look over the code so we have a green background it should say flutter payments app up top and then we are going to have a button a payment button that before did nothing and now it will pop up a card so while this loads other things we could do with the in-app payments plug-in we could add popular wallets we could add Google pay Apple pay we could also customize the look and feel of the card entry so we'll see here in a moment look it's at launch so let's go ahead and hit the card and fantastic so here's the card we could customize the color of the title bar where it says add card up here or the error numbers or the all sorts of aspects of this the font so let's go ahead and start entering a card so if we start entering one we see this a nice animation I'm gonna use for one one one one which is just sort of a demo card and you see if there's errors here they'll pop up in the card flow let's go ahead and do a successful one so when I hit save fantastic and success we have a nonce to make a payment so in the output you'll see we got a card nonce back the way this works is that the user enters their card details and if they've entered a potentially valid card we receive a nonce this is a one-time use token which we will send to your back-end to make a payment using squares API so that's it for a nap payments for flutter we also have in-app payments for react native iOS Android and support for popular wallets like Google pay and Apple pay take a look at the links in the description and let us know if you have any questions or comments we'd love to hear from you thanks for watching [Music]