Accepting Payments in Flutter Using Stripe | The Right Way

integrate a payment Gateway like a stripe into your app and watch your bank account grow faster than popcorn in a microwave stripe has become a household name in the world of online transtions providing developers with a robust and secure platform to handle payment seamlessly whether you are building a mobile application a website or any digital platform integrating stripe can elevate your user experience to new heights Brands like digital ocean and Shopify trust strive to handle their transactions highlighting its reliability and efficiency on a large case the first step is to create a stripe account head over to dashboard. stripe.com register to set up your stripe account if you are testing things out don't forget to activate the test mode for integration and testing purposes let's move on to obtaining the API Keys navigate to developers and then API keys in your stripe dashboard here you will find both the publishable key and the secret key these keys are crucial for integration process with our stripe account setup let's switch to our flutter project open your pope. file and add the necessary depend es we will need the flutter _ stripe and htdp packages don't forget to run flutter PBG to install them in your mean method at the stripe. publishable key equal to your publishable key this connects your flutter app to your stripe account we need to create the back end to send user secret key to client and to create payment intent so let's create a node project first by using the command npm in it- y and here you can see our project is created now let's install necessary dependencies by using this command as our dependencies installed let's open up our project we will declare an Express variable and create an instance of express application additionally we need to import the stripe Library set up your stripe API key as a constant variable and create a new instance of stripe class using this key moving on we will handle incoming Json requests that will take amount and currency and return the client secret Keys utilize the app.use function for Express Json and set up another app.use function to pass incoming URL encoded request now create a post and point at API / payment to manage payment request in this endpoint extract properties from the request object and create payment intent using the stripe Library specifying the currency and amount finally W the entire function in a triy catch block to catch any errors start the express application and make it listen on your Port log a message indicating the application has started it's time to integrate stripe with flirter first let's create a function named create payment intent with two parameters amount and currency in this fun function we are going to hit the same API we created in node project and to do so first let's create a map named body where we pass amount and currency and then we hit our post API at the end we return the response next we need to create the second function make payment in this make payment function we will utilize the create payment intent function we developed earlier first we will call the create payment intent function and saves its response in a variable named payment intent next we initialize our payment sheet by calling stripe. instant. payment sheet and provide the necessary parameters here this payment intent client secret is the secret we are getting from the API we created let's move on to the third and final function the displayed payment sheet function here we use the present payment sheet function from the stripe Library we will use the do then function and if the payment is successful we will show a snip bar that's it we have set up the entire payment process now let's put it all together create a simple button to call the make payment function when the button is T the payment sheet opens simply enter your test card details and here you can see your payment is successful let me show you on the stripe dashboard there you have it a successful payment if you are interested in developing applications website or backend servers using flirter here flirter is the perfect solution with over 7 years of expertise and a track record of crafting numerous applications and website we have got the experience you need simply go to hl.com provide your details and let's begin building together

Channel: HeyFlutter․com

Views: 2,252

Keywords: flutter, dart, flutter app development, flutter stripe, stripe integration, flutter payment gateway, stripe payment gateway, flutter payments, flutter tutorail, dart payment stripe, stripe implementation, stripe payment in flutter, implement strip, flutter and stripe, flutter stripe payments, flutter and dart, flutter inapp purchases, flutter purchases, flutter stripe integration

Id: ODt1ORP0SpM

Length: 4min 4sec (244 seconds)

Published: Wed Apr 17 2024