Facing difficulties while integrating FlutterFlow with Stripe? To help you our FlutterFlow experts have compiled a complete process that will assist you in integrating FlutterFlow with Stripe. So, let’s dive and check the process.
What Is FlutterFlow And Stripe?
FlutterFlow is a no-code app development platform that designers and developers can use to build applications without even writing a single line of code. Apps can be built using AI and a drag-and-drop feature allowing quick app development.
On the other hand, Stripe is a payment support platform that allows businesses to accept payments online or in person and grow their revenue. It also provides advanced payment features such as 3D secure 2 authentication, card updates, and automated retires.
Why
Choose Stripe As A Payment Processor?
Here are 3 major reasons why you should choose Stripe as your payment processor:
Easy to Create An Account
It’s much easier to create an account on Stripe as compared to other payment processors. The process is simple and easy, all you need to do is enter your busine
ss details and very yourself, after that, you can accept payments.
No Need For A Merchant Profile
Stripe provides its own merchant profile and processes payments, unlike other payment processors that require your merchant profile. Moreover, you don’t have to cover any additional cost, Stripe covers the cost in its plan.
No Need To Worry About PCI Compliance
By integrating Stripe you don’t have to worry about how the payments are getting processed on your platform. Stripe takes care of PCI compliance as its PCI level 1 service provider which is the best certificate in the payment industry.
How To Integrate FlutterFlow With Stripe?
Watch this video or follow the steps listed below to integrate FlutterFlow with Stripe.
Step 1: Setup A Stripe Profile
In this step, we will be informing you on how to create a key that is indeed in FlutterFlow Stripe integration.
-
- First, create a Stripe profile by registering on it, directly clicking here to register, or if you already have an account then log in.
- Now you will see a dashboard page, click on Developers, and at the top right of your screen enable Test Mode.
- Then switch to the API keys tab and return to your FlutterFlow project where you want to integrate Stripe.
- After that navigate to Settings and Integrations>In App Purchase & Subscriptions>Stripe. From there Enable Stripe Payments.
- Now switch back to the Stripe tab copy the Publishable key and Secret key and paste them into the respective field in FlutterFlow. Additionally, if you are using it under the test mode paste them inside the Test Credential section.
- Moreover, you need to follow these steps to confirm the integration:
- Merchant Country Code: A necessary option, you need to fill in the details of your country code. Fill in just the 3-digit ISO country code such as IND, DEU, or, USA.
- Merchant Profile Name: Enter your merchant profile name that will be showcased to your users while making the payment.
Step 2: Trigger Stripe Payments
To initiate a payment using Stripe you have to use the Stripe payment action, here are the steps that you need to follow:
- Select the widget where you want to add the Stripe payment option. It can be a button, a container, or anything else.
- Now on the right-hand side menu, select action from the properties panel and click Open. After that, you will see a new pop window has opened up for Action Flow Editor there click on +Add Action, and then on the right-hand side under integrations select the Stripe Payment.
- Under the Amount area, enter the total payment amount or use a variable. The value must be expressed in the smallest unit of the currency. For instance, ¥1925 can be supplied as 1925, while $24.99 needs to be passed as 2499 (as a round-off integer; otherwise, it would be automatically rounded).
- Enter the currency code (USD, EUR, BRL, etc.) that will be applied to the amount. If you enter an invalid currency code, the transaction will not be completed.
- The customer name (optional) and email address (mandatory) that will be used for the transaction must then be specified. You have two options: input the value for them or use a variable. These two values can be obtained from the Authenticated User if authentication is being used.
- Then specify a description of the purchase for your customer and your user.
- Turn on the corresponding toggle to make Google Pay or Apple Pay available as a payment option. You must follow these steps to set up a Merchant ID before you can utilize Apple Pay.
- After that select the right payment set theme among the system default, dark theme, or light theme and also specify the primary button color and button text color that you want to use on the payment dialog.
- If the transaction is successful, enter the name of the output variable where the payment ID will be saved. This variable can be passed to another app page or used elsewhere on the page in the future.
Step 3: Testing The Integration
To ensure the integration is successful before deploying it to the live server, follow these steps:
- Open FlutterFlow projects and hover to Settings & Integrations>In App Purchase & Subscriptions>Stripe.
- Check if “Is Production” is disabled.
- Now cross-check that you have entered the correct Test Credentials, such as Publishable Key, and Secret Key.
- After that Download and Run your project.
- In the end, use any of these test card numbers to test the purchase.
Step 4: Releasing To Production
- Login again to your Stripe account navigate to your developer’s page and disable the test mode.
- Next, navigate to API Keys from the left menu and copy the Publishable key and Secret Key.
- Follow these guidelines to launch your Android and iOS app.
Conclusion
Now, in the end, we hope that through this post you were able to gain knowledge on how to integrate FlutterFlow with Stripe. Moreover, if you are looking for a FlutterFlow development company, that can assist you in having compete solution then you must check out Appic Softwares.
We have an expert team of FlutterFlow developers that will assist you in launching your app 10X faster. So, what are you waiting for?
Contact us now!
