Subscriptions

📱 Mobile Subscriptions

In app Subscriptions are the best way to get a recurring revenue from your app.
They are managed by the app store and the play store. Apple and Google will handle all tax and payment methods for you. In exchange, they will take a 30% cut on your revenue. (15% before getting 1M revenue but you have to apply for this program).

You cannot use Stripe or any other payment method to handle subscriptions in your app. Apple and Google could reject your app or even ban your account.


Solution 1 - Subscription manager

We use Glassfy to manage subscriptions.
This is a great solution to manage subscriptions in your app and handling permissions, trials, etc. You can also use Revenuecat.

You must first create an account on glassfy.
Then create a new app and follow the instructions.

Why use glassfy or any subscription manager?

Apple store and play store are great to manage subscriptions but they are not perfect.

  • You don't have a regular webhook every time a subscription period has renewed.
  • You can't access all stats from one page
  • You can't manage trials, permissions, etc

Here is the glassfy documentation.

ℹ️ Glassfy is now free for everyone. Their pricing model is now based on support and features.

How to setup Glassfy with our template?

You must have a glassfy account and an app created on glassfy. After that create the subscriptions on the Apple Store and Google Play Store.

You don't have to install glassfy or anything. ApparenceKit is already configured to work with glassfy.

  1. Get your Glassfy API key in Settings > General > APIKey
  2. Paste it in your environment for the 'glassfyToken' field or set the 'GLASSFY_TOKEN' environment variable in your CI/CD. (See the setup your environment doc)
  3. Create your Sku according to the id of your subscriptions on the Apple Store and Google Play Store. Also set some extra fields like this. (You will be able to add your own but here is what we need) Glassfy Sku setup for mobile subscription
  4. Create your offers including your Sku Glassfy offer setup for mobile subscription
  5. Setup a webhook to get notified when a subscription has been renewed. (Check the glassfy documentation) This will be required for the subscription api
    (see /lib/modules/subscription/api/subscription_api.dart file)
    I will provide a firebase functions template including a webhook to handle subscription renewals in the future.

🤝 Congratulations.
You have now a working subscription system in your app.

Configure the paywall

Remember those extra fields we set in the Sku?
We will use them to show some extra information on the paywall premade widget.

Apparencekit starter paywall configuration


Apparencekit - Subscription module

We provides a subscription module to handle subscriptions in your app. This module includes

  • A subscription page to subscribe to an offer
  • An active subscription page to manage your subscription
  • A recover button to restore your subscription from another device
  • A Subscription state to handle subscription state in your app (see UserStateNotifier in lib/core/states/user_state.dart)

This module will check if the user has an active subscription and will show the right page. If you want to customize those pages

  • lib/modules/subscriptions/ui/component/active_premium_content.dart
    for the active subscription page
  • lib/modules/subscriptions/ui/component/premium_content.dart
    for the subscription page

Check the user subscription state

To listen to subscription state changes you can use the UserStateNotifier wherever you want in your app.

// ref comes from riverpod package
// if you don't understand how to use riverpod, check the documentation here: https://riverpod.dev/
final userState = ref.watch<UserStateNotifier>();
_userState.subscription.map(
    active: (state) => print('active'), 
    inactive: (state) => print('inactive'), 
    loading: () => print('loading'),
);

Customize the subscription state

  • You will find the user state in the lib/core/states/user_state.dart file.
  • The user_state_notifier.dart file is used to handle subscription state changes.

The user_state_notifier will be initiated at the start of the app and will listen to subscription state changes. Check this file to customize the subscription state with your own logic.


Solution 2 - Handling subscriptions in your backend

You must first install the in app purchase plugin. This plugin supports in-app purchases (IAP) through an underlying store, which can be the App Store (on iOS and macOS) or Google Play (on Android). (You can uninstall glassfy plugin from pubspec.yaml).

As I really don't encourage you to use this solution, I will not explain how to use it. Apple and Google API are really different and have many use cases. Those Subscriptions solutions like Glassfy or RevenueCat are here to help you to handle all those use cases.