Skip to content

Commit 71ee407

Browse files
pinkeshmarspinkeshmars
committed
Added revenueCat
1 parent b5aec02 commit 71ee407

File tree

4 files changed

+241
-0
lines changed

4 files changed

+241
-0
lines changed

‎docs/Integrations/payments/_category_.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"label": "Payments"
3+
}

‎docs/Integrations/payments/adding-restore-purchase-action.avif

39.4 KB
Binary file not shown.

‎docs/Integrations/payments/error-while-creating-sub-in-play-console.avif

83.7 KB
Binary file not shown.

‎docs/Integrations/payments/revenuecat.md

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
---
2+
slug: revenuecat
3+
title: RevenueCat
4+
tags: []
5+
description: Learn how to integrate RevenueCat in your FlutterFlow app.
6+
sidebar_position: 1
7+
---
8+
9+
# RevenueCat
10+
11+
[RevenueCat](https://www.revenuecat.com/) simplifies implementing in-app purchases and subscriptions by handling all purchase validation operations.
12+
13+
<div style={{
14+
position: 'relative',
15+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
16+
height: 0,
17+
width: '100%'}}>
18+
<iframe
19+
src="https://demo.arcade.software/z3Fw57EiyR05PY6OPMG6?embed&show_copy_link=true"
20+
title=""
21+
style={{
22+
position: 'absolute',
23+
top: 0,
24+
left: 0,
25+
width: '100%',
26+
height: '100%',
27+
colorScheme: 'light'
28+
}}
29+
frameborder="0"
30+
loading="lazy"
31+
webkitAllowFullScreen
32+
mozAllowFullScreen
33+
allowFullScreen
34+
allow="clipboard-write">
35+
</iframe>
36+
</div>
37+
<p></p>
38+
39+
Integrating the RevenueCat in your app comprises the following steps:
40+
41+
1. [Setup RevenueCat](#1-setup-revenuecat)
42+
2. [Enable RevenueCat in FlutterFlow](#2-enable-revenuecat-in-flutterflow)
43+
3. [Retrieving in-app purchases and subscription details](#3-retrieving-in-app-purchases-and-subscription-details)
44+
4. [Add RevenueCat actions](#4-add-revenuecat-actions)
45+
5. [Testing](#5-testing)
46+
6. [Launch](#6-launch)
47+
48+
## 1. Setup RevenueCat
49+
50+
To set up the RevenueCat, follow these steps carefully:
51+
52+
1. Sign up for a new RevenueCat account [here](https://app.revenuecat.com/).
53+
2. [Create a project](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-create-a-project), [add your app](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-add-an-app--platform), and ensure that you [add service credentials](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-service-credentials) to help RevenueCat communicate with the app stores on your behalf.
54+
3. [Create subscriptions](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-store-setup) in the respective stores.
55+
1. While creating subscriptions in Google Play Console, if you see a message saying '***Your app doesn't have any in-app products yet**'* like in this picture, follow the steps below:
56+
![error-while-creating-sub-in-play-console.avif](error-while-creating-sub-in-play-console.avif)
57+
2. Return to FlutterFlow and navigate to **Settings & Integrations >** **In App Purchases & Subscriptions >** **RevenueCat**.
58+
3. Switch on the **Enable RevenueCat**. For now, just enter any random string as your API Key (eg. `testkey`). We’ll update this later.
59+
4. Now, from the toolbar menu, click **Download APK**
60+
5. In the Play Console, create a [Closed testing](https://play.google.com/console/about/closed-testing/) track and create a new release.
61+
6. Upload your **App Bundle** or **APK**, enter the release name, and create the release.
62+
7. Open the **Subscriptions** tab again. It should let you manage subscriptions now.
63+
4. [Create Products and Entitlements in RevenueCat](https://www.revenuecat.com/docs/getting-started/quickstart#%EF%B8%8F-configure-products-and-entitlements-in-revenuecat).
64+
65+
## 2. Enable RevenueCat in FlutterFlow
66+
67+
To enable RevenueCat in FlutterFlow, follow the steps below:
68+
69+
<div style={{
70+
position: 'relative',
71+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
72+
height: 0,
73+
width: '100%'}}>
74+
<iframe
75+
src="https://demo.arcade.software/sKSpoidCReEDlikhUbs3?embed&show_copy_link=true"
76+
title=""
77+
style={{
78+
position: 'absolute',
79+
top: 0,
80+
left: 0,
81+
width: '100%',
82+
height: '100%',
83+
colorScheme: 'light'
84+
}}
85+
frameborder="0"
86+
loading="lazy"
87+
webkitAllowFullScreen
88+
mozAllowFullScreen
89+
allowFullScreen
90+
allow="clipboard-write">
91+
</iframe>
92+
</div>
93+
<p></p>
94+
95+
## 3. Retrieving in-app purchases and subscription details
96+
97+
To display the in-app purchases and subscription details, such as price, description, etc., inside the UI elements, you need to retrieve this information from RevenueCat.
98+
99+
Here is an example of retrieving monthly subscription details:
100+
101+
<div style={{
102+
position: 'relative',
103+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
104+
height: 0,
105+
width: '100%'}}>
106+
<iframe
107+
src="https://demo.arcade.software/r5RpyXZaWp7n6DTikrHx?embed&show_copy_link=true"
108+
title=""
109+
style={{
110+
position: 'absolute',
111+
top: 0,
112+
left: 0,
113+
width: '100%',
114+
height: '100%',
115+
colorScheme: 'light'
116+
}}
117+
frameborder="0"
118+
loading="lazy"
119+
webkitAllowFullScreen
120+
mozAllowFullScreen
121+
allowFullScreen
122+
allow="clipboard-write">
123+
</iframe>
124+
</div>
125+
<p></p>
126+
127+
## 4. Add RevenueCat actions
128+
129+
To manage in-app purchases and subscriptions inside your FlutterFlow app, you have to use the RevenueCat Actions. Below are the types of RevenueCat action:
130+
131+
- **Paywall**
132+
- **Purchase**
133+
- **Restore Purchases**
134+
135+
### Paywall [Action]
136+
137+
This action checks whether a user has purchased an item. If not, you can open the Paywall (asking to buy an item or purchase a subscription).
138+
139+
Follow the steps below to see if a user is subscribed and take action accordingly.
140+
141+
<div style={{
142+
position: 'relative',
143+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
144+
height: 0,
145+
width: '100%'}}>
146+
<iframe
147+
src="https://demo.arcade.software/0m0oeM9PRbe7e5JbapCf?embed&show_copy_link=true"
148+
title=""
149+
style={{
150+
position: 'absolute',
151+
top: 0,
152+
left: 0,
153+
width: '100%',
154+
height: '100%',
155+
colorScheme: 'light'
156+
}}
157+
frameborder="0"
158+
loading="lazy"
159+
webkitAllowFullScreen
160+
mozAllowFullScreen
161+
allowFullScreen
162+
allow="clipboard-write">
163+
</iframe>
164+
</div>
165+
<p></p>
166+
167+
### Purchase [Action]
168+
169+
This action allows you to purchase the item. Here’s how you add it:
170+
171+
<div style={{
172+
position: 'relative',
173+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
174+
height: 0,
175+
width: '100%'}}>
176+
<iframe
177+
src="https://demo.arcade.software/95HnVG5vM9J7gi73vjxW?embed&show_copy_link=true"
178+
title=""
179+
style={{
180+
position: 'absolute',
181+
top: 0,
182+
left: 0,
183+
width: '100%',
184+
height: '100%',
185+
colorScheme: 'light'
186+
}}
187+
frameborder="0"
188+
loading="lazy"
189+
webkitAllowFullScreen
190+
mozAllowFullScreen
191+
allowFullScreen
192+
allow="clipboard-write">
193+
</iframe>
194+
</div>
195+
<p></p>
196+
197+
### Restore Purchases [Action]
198+
199+
Using this action, you can allow users to re-activate the subscription he has already paid for. This is helpful when a user has reinstalled the app or logged in to a new device.
200+
201+
:::info
202+
203+
- A good practice is to allow users to manually restore the purchase by showing a button or text (maybe on a paywall/settings page).
204+
- If you provide this option, please check [**How RevenueCat should respond to restore behavior**](https://www.revenuecat.com/docs/restoring-purchases#restore-behavior).
205+
206+
:::
207+
208+
![adding-restore-purchase-action.avif](adding-restore-purchase-action.avif)
209+
210+
## 5. Testing
211+
212+
You can test your subscriptions using sandbox environments, which simulate real store behavior without incurring costs. [This document](https://www.revenuecat.com/docs/test-and-launch/sandbox) provides detailed guidelines for testing purchases on [Android](https://www.revenuecat.com/docs/test-and-launch/sandbox/google-play-store) and [iOS devices](https://www.revenuecat.com/docs/test-and-launch/sandbox/apple-app-store).
213+
214+
## 6. Launch
215+
216+
Before launching your app to production make sure you go through the **Launch Checklist** of RevenueCat:
217+
218+
[In-App Purchase Launch Checklist – RevenueCatRevenueCat](https://docs.revenuecat.com/docs/launch-checklist)
219+
220+
## FAQs
221+
222+
<details>
223+
<summary>I don't see offerings or products</summary>
224+
<p>
225+
If you're testing in the sandbox and the products are not retrieved from Apple/Google, it's likely a configuration issue. To resolve this, ensure the following:
226+
227+
1. The product identifier set in RevenueCat matches exactly with the store.
228+
2. You're testing on a physical device and not a simulator.
229+
3. The bundle ID in Xcode [iOS] or package name [Google] matches what's in App Store Connect or Google Play Developer console.
230+
231+
For iOS only, ensure that products are in the 'Ready To Submit' or 'Approved' state, you've signed your 'Paid Applications Agreement', and you're not using a StoreKit Configuration file.
232+
233+
For Google only, ensure that the subscription product is in the Active state, your app is published on a closed track, and you've added a tester.
234+
235+
See more details [here](https://community.revenuecat.com/sdks-51/why-are-offerings-or-products-empty-124).
236+
</p>
237+
</details>
238+

0 commit comments

Comments
 (0)