Skip to content

Commit 43fa207

Browse files
pinkeshmarspinkeshmars
committed
Added stripe
1 parent a5e71d5 commit 43fa207

File tree

3 files changed

+274
-0
lines changed

3 files changed

+274
-0
lines changed

‎docs/ff-integrations/payments/imgs/adding-apple-merchant-id.png

67 KB
Loading

‎docs/ff-integrations/payments/imgs/unknown-error-occured.avif

131 KB
Binary file not shown.

‎docs/ff-integrations/payments/stripe.md

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
---
2+
slug: /integrations/payments/stripe
3+
title: Stripe
4+
description: Learn how to integrate Stripe in your FlutterFlow app.
5+
tags: [FlutterFlow, Stripe, Payments, Integration]
6+
sidebar_position: 1
7+
keywords: [FlutterFlow, Stripe, Payments, Integration]
8+
---
9+
10+
# Stripe
11+
12+
Stripe helps integrate payment processing into your FlutterFlow app. Using this payment service, you can easily sell products directly inside your application and manage transactions easily.
13+
14+
While using Stripe as the payment provider, users can buy products using credit cards, Apple Pay, or Google Pay.
15+
16+
<div style={{
17+
position: 'relative',
18+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
19+
height: 0,
20+
width: '100%'}}>
21+
<iframe
22+
src="https://www.loom.com/embed/9ee91ed7807d4b3d81b8cb1c87a8bed2?sid=fe448cd6-e92b-4dad-b696-aad9a5452c60"
23+
title=""
24+
style={{
25+
position: 'absolute',
26+
top: 0,
27+
left: 0,
28+
width: '100%',
29+
height: '100%',
30+
colorScheme: 'light'
31+
}}
32+
frameborder="0"
33+
loading="lazy"
34+
webkitAllowFullScreen
35+
mozAllowFullScreen
36+
allowFullScreen
37+
allow="clipboard-write">
38+
</iframe>
39+
</div>
40+
<p></p>
41+
42+
:::info[Prerequisites]
43+
44+
Before starting to set up payments, make sure you have,
45+
46+
1. Complete [**Firebase Setup**](../../ff-integrations/firebase/connect-to-firebase-setup.md) for your project.
47+
2. Enabled [**Firebase Authentication**](../authentication/firebase-auth/auth-initial-setup.md) for your project.
48+
3. Upgraded your Firebase project to [**Blaze Plan**](https://firebase.google.com/pricing). We use [**Firebase Cloud Functions**](https://firebase.google.com/docs/functions) to process a transaction.
49+
:::
50+
51+
52+
## Stripe Integration
53+
54+
Integrating the Stripe Payments in your app comprises the following steps:
55+
56+
1. [Setup Stripe payment](#1-setup-stripe-payment)
57+
2. [Apple Pay setup (optional)](#2-apple-pay-setup-optional)
58+
3. [Trigger Stripe payment](#3-trigger-stripe-payment-action)
59+
4. [Testing](#4-testing)
60+
5. [Releasing to production](#5-releasing-to-production)
61+
62+
### 1. Setup Stripe payment
63+
64+
Setting up the Stripe payment includes acquiring the keys from your Stripe account and adding them to FlutterFlow.
65+
66+
:::warning
67+
You should always try out payments in test mode before releasing them to your production app. Hence, the instructions below will guide you on how to get the test keys.
68+
:::
69+
70+
Follow the steps below to set up payment using Stripe:
71+
72+
1. Create a new **Stripe account** from [here](https://dashboard.stripe.com/register). If you already have an account, [login](https://dashboard.stripe.com/login).
73+
2. From the dashboard page, click **Developers**.
74+
3. Enable **Test Mode** (top right side of your screen).
75+
4. Switch to the **API keys** tab.
76+
5. Return to the FlutterFlow project and navigate to **Settings and Integrations** > **In App Purchases & Subscriptions** > **Stripe**. Use the toggle to **Enable Stripe Payments**.
77+
6. Copy the **Publishable Key** and **Secret Key** from the Stripe API keys page and paste them into the respective fields inside FlutterFlow. If you are using Stripe in test mode, make sure you paste them inside the **Test Credentials** section.
78+
7. Under the **Additional Settings**, you need to specify the following:
79+
1. **Merchant Display Name** (*Required*): Enter a name for the merchant (you) that the user will see while performing the payment.
80+
2. **Merchant Country Code** (*Required*): Enter your country code. This must be the 3-digit ISO country code, such as USA, IND, and NGA.
81+
3. **Apple Merchant ID** (*Optional*): You need to enter this if you want to accept payments through Apple Pay as well. The instructions for using Apple Pay are in [this section](#2-apple-pay-setup-optional).
82+
8. Click **Deploy**.
83+
84+
<div style={{
85+
position: 'relative',
86+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
87+
height: 0,
88+
width: '100%'}}>
89+
<iframe
90+
src="https://www.loom.com/embed/0e4ba1f7f055433e96a7fa6cede2c127?sid=400ef912-1580-44ad-81a9-25051bed0256"
91+
title=""
92+
style={{
93+
position: 'absolute',
94+
top: 0,
95+
left: 0,
96+
width: '100%',
97+
height: '100%',
98+
colorScheme: 'light'
99+
}}
100+
frameborder="0"
101+
loading="lazy"
102+
webkitAllowFullScreen
103+
mozAllowFullScreen
104+
allowFullScreen
105+
allow="clipboard-write">
106+
</iframe>
107+
</div>
108+
<p></p>
109+
110+
This would deploy the Stripe payment service as a Firebase Cloud Function. Now, you are ready to trigger payments inside your app.
111+
112+
### 2. Apple Pay setup (optional)
113+
114+
Setting up Apple Pay comprises the following steps:
115+
116+
1. [Creating Apple Merchant ID](#21-creating-apple-merchant-id)
117+
2. [Uploading Payment Certificate in Stripe](#22-uploading-payment-certificate-in-stripe)
118+
3. [Adding Apple Merchant ID in FlutterFlow](#23-adding-apple-merchant-id-in-flutterflow)
119+
120+
#### 2.1 Creating Apple Merchant ID
121+
122+
To create Apple Merchant ID:
123+
124+
1. Go to Apple's Developer Center and select [**Certificates, Identifiers & Profiles**](http://developer.apple.com/account).
125+
2. Under **Identifiers**, select ***Merchant IDs***.
126+
3. Click the **Add button** (+) in the upper-right corner.
127+
4. Enter a **Description** and specify an **Identifier**. The identifier is usually defined in the format `merchant` followed by the *Package Name* of your app (you'll find it inside the ***Settings and Integrations*** page of FlutterFlow), for example, `merchant.com.domainname.appname`.
128+
5. Click **Continue**.
129+
6. Review the settings, and click **Register**.
130+
7. Click **Done**.
131+
8. Now, again under **Identifiers**, select ***Apps IDs***.
132+
9. Select your app's identifier from the list.
133+
10. Under **Capabilities**, check the ***Apple Pay Payment Processing*** option.
134+
11. Click **Configure**.
135+
12. Select the merchant account that you just created, and click **Continue**.
136+
13. Click **Save** and then **Confirm** in the dialog.
137+
138+
<div style={{
139+
position: 'relative',
140+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
141+
height: 0,
142+
width: '100%'}}>
143+
<iframe
144+
src="https://www.loom.com/embed/705e799700de453cab3a0157ac4eecdd?sid=9f65c690-de5d-4b7e-b1ae-d9b056d2f805"
145+
title=""
146+
style={{
147+
position: 'absolute',
148+
top: 0,
149+
left: 0,
150+
width: '100%',
151+
height: '100%',
152+
colorScheme: 'light'
153+
}}
154+
frameborder="0"
155+
loading="lazy"
156+
webkitAllowFullScreen
157+
mozAllowFullScreen
158+
allowFullScreen
159+
allow="clipboard-write">
160+
</iframe>
161+
</div>
162+
<p></p>
163+
164+
#### 2.2 Uploading Payment Certificate in Stripe
165+
166+
To upload a payment certificate in Stripe:
167+
168+
1. First, go to the [**Settings**](https://dashboard.stripe.com/settings) page from your Stripe dashboard and select the **Payment methods** option.
169+
2. Expand the **Apple Pay** tab under the **Wallets** section.
170+
3. Click **Configure** to navigate to the [**Apple Pay settings**](https://dashboard.stripe.com/settings/payments/apple_pay) page.
171+
4. Under **iOS certificates**, click **+ Add new application**.
172+
5. This will download the **Certificate Signing Request (CSR)** file on your system and click **Continue**.
173+
6. Select the **Merchant ID** with which you want to associate this certificate, and click **Create Certificate**.
174+
7. Follow the instructions to **upload the CSR file** that you downloaded from Stripe.
175+
8. To enable the certificate, click **Activate**. Then click **Download** to save it locally.
176+
9. Go back to the Stripe page where the dialog box is displayed, and click **Continue**.
177+
10. Upload the new certificate file.
178+
11. Once uploaded, you should see the certificate listed under **iOS certificates**.
179+
180+
#### 2.3 Adding Apple Merchant ID in FlutterFlow
181+
182+
To add Apple Merchant ID in FlutterFlow:
183+
184+
1. Navigate to **Settings and Integrations** > **In App Purchases & Subscriptions** > **Stripe**.
185+
2. Under the **Additional Settings**, enter your **Apple Merchant ID**.
186+
187+
![Adding Apple Merchant ID in FlutterFlow](imgs/adding-apple-merchant-id.png)
188+
189+
### 3. Trigger Stripe payment [Action]
190+
191+
In order to initiate a payment using Stripe, you have to use the **Stripe Payment** action.
192+
193+
Follow the steps below to add this action to any widget.
194+
195+
1. Select the **Widget** (e.g., Container, Button, etc.) on which you want to add the action.
196+
2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window.
197+
3. Click on the **+ Add Action**.
198+
4. On the right side, search and select the **Stripe Payment** (under *Integrations*) action.
199+
5. Enter or use a variable for specifying the total payment amount under the **Amount** section. The value should be specified in the currency's smallest unit. For example, *$24.99* should be passed as *2499* (as a round-off integer, otherwise it would be automatically rounded), whereas *¥1925* can be simply passed as *1925*. For more information check out [this page](https://stripe.com/docs/currencies#zero-decimal).
200+
6. Enter the **Currency Code** to be used for the amount, for example, *USD*, *EUR*, *BRL*. Make sure you enter a valid currency code otherwise, the transaction won't go through.
201+
7. Next, you need to specify the **Customer Email** (required) and **Customer Name** (optional) to be used for the transaction. You can either use a variable or enter the value for them. If you are using authentication, these two values can be retrieved from the ***Authenticated User**.*
202+
8. Specify a **Description** of the purchase for both your and the user's record.
203+
9. To enable **Google Pay** or **Apple Pay** as the payment method, turn on the respective toggle. To use Apple Pay, you have to set up a *Merchant ID* by following the steps [here](#2-apple-pay-setup-optional).
204+
10. Select the **Payment Sheet Theme** among ***System Default***, ***Light Theme***, or ***Dark Theme**.*
205+
11. Specify the **Primary Button Color** and **Button Text Color** to be used on the payment dialog.
206+
12. Enter an **Output Variable Name** where the payment ID would be stored on a successful transaction. Later, you can use this variable elsewhere inside the page or pass it to a different page of the app.
207+
208+
:::warning
209+
Make sure the user is authenticated before triggering the Stripe Payment Action. Otherwise, it will result in an error.
210+
:::
211+
212+
<div style={{
213+
position: 'relative',
214+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
215+
height: 0,
216+
width: '100%'}}>
217+
<iframe
218+
src="https://www.loom.com/embed/88bebdf2381547659f542a42726a7b72?sid=bd1fb3e3-8cca-43da-9a13-7a59ef00e457"
219+
title=""
220+
style={{
221+
position: 'absolute',
222+
top: 0,
223+
left: 0,
224+
width: '100%',
225+
height: '100%',
226+
colorScheme: 'light'
227+
}}
228+
frameborder="0"
229+
loading="lazy"
230+
webkitAllowFullScreen
231+
mozAllowFullScreen
232+
allowFullScreen
233+
allow="clipboard-write">
234+
</iframe>
235+
</div>
236+
<p></p>
237+
238+
### 4. Testing
239+
240+
You can test Stripe payments on mobile and the Web before deployment. To do that:
241+
242+
1. Go to the FlutterFlow project and navigate to **Settings and Integrations** > **In App Purchases & Subscriptions** > **Stripe**.
243+
2. Make sure the **Is Production** is disabled.
244+
3. Make sure you have entered the correct **Test Credentials,** such as **Publishable Key** and **Secret Key**.
245+
4. [Download](../../testing-deployment-publishing/exporting-code/ff-cli.md) and [run](../../testing-deployment-publishing/running-your-app/run-your-app.md) your project..
246+
5. To test the purchase, you can use any of these [basic test card numbers](https://stripe.com/docs/testing#cards).
247+
248+
### 5. Releasing to production
249+
250+
Before you release the app to production, complete the following steps:
251+
252+
1. [Login](https://dashboard.stripe.com/login) to your Stripe account and navigate to the **Developers** page.
253+
2. Disable the **Test Mode** (top right side of your screen).
254+
3. Select **API keys** from the left menu and copy the **Publishable Key** and **Secret Key**.
255+
4. Return to FlutterFlow; under the **Production Credentials** section, paste the **Publishable Key** and **Secret Key**.
256+
5. To deploy the Android app, follow the [Google Play Store Deployment](../../testing-deployment-publishing/publishing/google-playstore-deployment.md) guide.
257+
6. To deploy the iOS app, follow the [App Store Deployment](../../testing-deployment-publishing/publishing/apple-appstore-deployment.md) guide.
258+
259+
---
260+
261+
## FAQs
262+
263+
<details>
264+
<summary>I am getting "Error: Unknown error occurred"</summary>
265+
<p>
266+
When encountering the "Error: Unknown error occurred" message, consider these troubleshooting steps:
267+
268+
1. **Stripe Settings Adjustment**: In FlutterFlow's Stripe settings, verify the Merchant country code is a 3-digit code, like "USA" instead of "US". If needed, remove previously deployed functions in the Firebase console and redeploy them after updating the country code.
269+
2. **User Authentication Requirement**: Stripe payments require an authenticated user session. Ensure you're attempting the Stripe action after a user has successfully logged in to the app.
270+
3. **Cloud Functions Permissions**: Check that your cloud functions have the 'Cloud Functions Invoker' permission set for allUsers in the Google Cloud console. This permission is typically assigned by default, but it's good practice to double-check.
271+
272+
![unknown-error-occured](imgs/unknown-error-occured.avif)
273+
</p>
274+
</details>

0 commit comments

Comments
 (0)