Stripe Payments | FlutterFlow University

in this video I want to show you how to set up stripe payments so the first thing is you have to enable stripe payments so in the inapp purchases in subscription section you can just select stripe and enable stripe payments now in order to use stripee payments you're going to need to have a Firebase project and authentication set up which I've already set up before this and we have other videos and documentation for that your Firebase account also needs to be on the blaze plan you need that because we use a Firebase Cloud function for these stripe payments that's what happens when you click this deploy button we deploy a cloud function which will handle the stripe payments next we're going to need these keys right here and you get those in the back end of stripe so sign up for a stripe account and we'll jump in there okay so we're here in stripe and stripe has this great feature called test mode that you want to turn on that allows you to use all of the stripe features so you can run charges without actually running them on real credit cards with real customers okay so next go over to developers and this is where we'll get our API Keys which are right here so these are the two keys we need this publishable and secret you can just hover over and click on them and then paste them into flutter flow just keep in mind that we're currently in our test mode right here so here we have our test credentials that's our publishable key so let's paste that in next let's grab our secret key and same thing and copy and paste and next we need our production keys so to grab those let's go out of test mode and grab the same Keys keep in mind that you'll only be able to see the secret key once and so if you don't have it somewhere secured you're going to have to regenerate it great next you need your Merchant name this will be the name that they see in their credit card statement for the purchase and finally Merchant country code so we're just going to add us finally we've got our Apple merchant ID that we'll use when we set up Apple pay so we'll come back there okay so we're all ready to deploy just keep in mind you've got got this production toggle right here so it's by default off which means when we're testing this we'll be using the test credentials once we toggle this on then we'll use our production credentials so those will be real charges whenever we use it okay so let's deploy this awesome now keep in mind that if this failed it's probably because Firebase or authentication has not been set up right and remember you need to be on the blaze plan great now let's set up a real payment or a real test payment so let's come over to the Builder and we've got this UI right here and we want the action to trigger when this container button here is clicked all right so let's go into our action flow editor let's just open it up so we've got some more room and add an action and let's just look for stripe payment beautiful first we've got the amount now I've created a page State variable that computes the total value and you might think we can just dump that in but actually the stripe API requires that the amount be in the currencies smallest unit so the smallest unit in USD is cents so instead of $10.50 it would have to be 1,50 so you just have to times it by 100 and a code expression is great for that so the return type is going to be an integer that's right and we're going to dump into here a double and we're going to call it the amount and set that to our page State variable beautiful now we just need to write the code this also needs to be an integer so I'm just calling this 2 int method on it and then multiplying by 100 beautiful and confirm that next the currency code which is USD customer email is our authenticated users email the customer name we can just bind to the display name the description of the purchase this is helpful on their statement so they know exactly what they were charged for and this is tacos and let's jump over the Google pay and Apple pay for a second and here you can specify some of the design the theming for the payment popup so here we have a system default but you also have light and dark theme and the option to set the button color so I'm just going to set the primary color to my main brand color and the text color I want to be white okay finally Google and Apple pay so if you want to support these then you would check them on now remember that these are only going to be available when you're user is on their mobile device and we've got a little additional setup for Apple pay so let's do that now and we do this in two steps first we're going to do some configuration in the Apple developer account and then in stripe so you're going to need an apple developer account and a membership which costs $100 a year so sign up for that and then we'll jump into the Apple developer account all right so here we are and let's jump into our account and we need to create a merchant ID and so you want to come down here to identifiers and just hit the plus to create a new identifier and just scroll down and we want this merchant ID right here and continue and you can just put anything in the description and the naming convention for the identifier is typically Merchant followed by your package name so if we jump back into flutter flow and go into your settings right here and into app details it is this right here so you can just copy that and paste it in and hit continue there's our merchant ID and let's register it next we need to add the Apple pay capability to this identifier so we need to jump into our apps identifier our app ID and it's here but it's hidden right now and that's because we have this filtered list we're just looking at the merchant IDs and we want to see the app IDs ah there it is so let's grab this and if you don't see your app ID in this list it's because you haven't done your app deployment step and I'll leave a link for documentation below for that and what we want to enable is our Apple pay right there beautiful and come into configure and we're associating that merchant ID that we created with this app and save it all right this is everything in your app or developer account and we're almost done we just need to do one more thing in stripe so let's jump over there so from here let's come into the top right here to settings and payment methods and you can just scroll down to wallets here and you want to open up Apple pay and click configure down here in iOS certificates we want to add a new application and that'll download a certificate signing request file that's great let's continue and this is just going to give you directions as to what we're about to do because we need to upload that certificate in our developer account so let's jump back over there so once again let's grab our merchant ID so filter there and there and create certificate and no now upload that file we just downloaded awesome and continue and download that certificate now we're going to go back to stripe and upload that certificate so continue and let's upload it beautiful lastly let's add that Apple merchant ID in flutter flow so we can just post that in here great all right so let's test this out all right so let's purchase beautiful we can see our branding setup and stripe has a test card that you can use with these numbers any month and year is fine and pay beautiful let's go look at that payment inside of stripe all right so we're here in the back end and you can just go to payments right here and I've got this one payment right here for the amount and that's how to set up stripe payments in flutter flow

Channel: FlutterFlow

Views: 9,986

Keywords: FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, No Code App, FlutterFlow App Builder, No Code App Builder, FlutterFlow University, flutterflow tutorial, stripe, payments

Id: o1PDssN8o9A

Length: 7min 34sec (454 seconds)

Published: Tue Oct 31 2023