You can now restrict your app’s content to paid customers only.
Shoutem supports only auto-renewable subscriptions connected with either one or more specific screens in your app, or all screens combined.
The auto-renewable subscription period is set by you, it can be weekly, monthly, yearly, etc. We do not hold onto that, but you should have in mind Google Play and the Apple App Store have their In-app purchase options set in stone from which you can select the best option.
In this article, we will guide you through the In-App purchase setup process. To give you a brief overview, the process is done in four parts separately:
- App Store Connect In-App purchase setup
- Google Play Store In-app purchase setup
- IAPHUB app setup
- Shoutem builder Settings page verification
The order flow of the process is entirely up to you, we listed each set up in order of how we find it most convenient with fewer possibilities something will be forgotten. There is a lot of back and forth between these elements, certain information needs to be copied from the Stores to builder Settings page, and vice versa. The same applies to IAPHUB settings and Stores. Everything must be linked.
Before you could proceed with the setup process in the Stores, we will need to set up your app there (i.e. create required submission certificates, fill in Store metadata information). With that being said, please inform us to do our part once the following steps are completed:
- Store metadata pages in the builder are populated with the required information
- We have access to your Google Play and iOS developer accounts. For the iOS access, it can be granted via invitation for organization-based accounts.
- The app is sent to our publishing team by clicking on the Publish button in the builder
Install In-App purchase extension in Shoutem builder
Most extensions in the builder are already pre-installed, but this particular extension needs to be installed from the Extension marketplace before you could complete configuring in-app purchases in the Shoutem builder area.
In the builder under the Extensions tab, click on the + symbol from where the Extension marketplace window will be opened. You can use the Search bar for easier exploration.
This particular feature doesn’t have any additional screens that should be managed in the Screens tab in the builder, the whole setup will be completed in the Settings tab.
In-App purchase settings have the following sections:
- GENERAL – here you can enable or disable the feature and are required to set up Store products and IAPHUB settings. Under Store products, the IDs are copied from Google Play and the Apple App Store, and IAPHUB settings are filled with details generated after setting up the app on your IAPHUB account
- SUBSCRIPTION RESTRICTIONS – a section where you can select the screens which will require subscription status before app users could see the content
- TERMS OF SERVICE – Your URL of your Terms of Service which will be visible on the Subscription screen
- SUBSCRIPTION SCREEN – a section where you need to add details of a screen that will be displayed on locked screens only in situations where the app doesn’t have an active subscription status
Once you have completed these settings, reach out to us immediately so that we can do our part!
App Store Connect In-App purchase setup
Once we have done our part, it is your turn to configure the iOS In-app purchase setup. Before you start, make sure the Paid apps agreement is Active here or you won’t be able to select the required auto-renewable subscription option.
Tutorial provided by IAPHUB on their official Documentation page SET UP iOS is a bit plain and shares with you the last step, therefore, we will give insights through bullets of the steps you will go through the in-app purchase wizard setup before Shared Secret Key is generated:
- You will create the auto-renewable subscription with a Reference Name and Product ID per your choice
- In the Subscription Prices section, you will define your subscription’s price
- Introductory Offers is a free trial time, you will be offered to set up its availability, select if it is free or paid and how long it will be available for all new users
- Offer codes and Promotional Offers are not mandatory for the IAP set-up, but you can use these options when you find suitable
Under the App Store Information, do not forget to populate Localizations fields.
Your app will go under two Apple reviews at the same time, one review will be a standard review of your app’s content, performance, and metadata, and the second one will be tied to your In-app purchase setup. Therefore, make sure to provide Review Information as well.
For a more detailed clarification of each section in the In-App Purchase, please visit the official support page by Apple.
Once you are done with the App Store Connect flow, do not close the window just yet, your generated Shared Secret Key and Product ID will need to be saved in repetitive fields later during the process.
Google Play Store In-App purchase setup
Once we have done our part, it is your turn to configure the Android In-app purchase setup. Before you start, make sure you have a Google Payments merchant account. Please go through the tutorial provided by IAPHUB on their official Documentation page SET UP ANDROID.
It is important to generate the JSON file, make sure to save it as it will be required later during the process.
In the Google Play Console, you will set up the details such as price, free trial time, subscription’s name here in the Subscriptions sections. Do not forget to mark it as Active at the end.
IAPHUB App setup
As one of the IAPHUB partners, we are proud to offer an option to use in-app purchases within our mobile app builder. You are required to have your IAPHUB account because here you will be managing your in-app subscription from both Apple App and the Google Play Stores, and be able to see a general overview of current, canceled, and renewed subscriptions as displayed on the following screenshot.
In case you would like to have more than one app with in-app purchases, you can have them all set-up under one IAPHUB account. It is neat, much easier to manage, and keep an eye on the status of in-app purchases in one place.
Is IAPHUB service free?
Yes, the IAPHUB service can be used for free, or if you would like to access certain premium features they offer, you can subscribe to one of their pricing plans. Before making any decisions, make sure to review Plan levels on IAPHUB’s official pricing page. Please have in mind this is a third-party service and separate possible fee from the Shoutem subscription.
Regardless of the plan levels, you are required to add your billing card details in the dashboard.
IAPHUB Key points to complete
The tutorial is shared on their official Documentation SET UP APP page. On the first registration step, you will create an app by entering the app’s Name, your Currency and Time zone.
In IAPHUB’s dashboard, you will navigate to the Settings section from the left menu navigation where you will configure the Android and iPhone app. You will need your Bundle ID information for both Android and iPhone app. This information can be found in the Shoutem builder under Settings tab, App Info section under launch screen graphic.
Copy paste Android bundle ID from the Shoutem builder, and configure the app by uploading the JSON file you previously created in the Android IAPHUB tutorial.
Copy paste iPhone bundle ID from the Shoutem builder, and save the Shared secret key you previously created in the iPhone IAPHUB tutorial.
Once you’ve completed the steps for iPhone and Android, add your in-app purchase to Products tab.
Shoutem builder configuration
Last step but not least is to link all three setups with your Shoutem app, therefore, certain key pieces will need to be saved in the repetitive fields in the builder. Open your app in the builder, and navigate to the Settings page of the In App Purchases extension. In the General section, fill in the following:
iOS product ID is copied from the App Store Connect.
Android Product ID is copied from the Google Play Store.
These values are copied from the IAPHUB Settings page. Copy App id and Client api key and save in the builder under IAPHUB App ID and IAPHUB API key.
When everything is set, do not forget to Enable subscription in-app screen!
In-App purchase feature in the Preview simulator
In the simulator provided in the builder, you will not see your price but Undefined value. Nothing to worry about, that is intended behaviour. Your price will be visible once the app is approved and actually installed on your mobile device.
Free trial time in the app
In your Shoutem app, the free trial time will always be counted in days. That is how the feature is developed. Also, your app users will not see the free trial time if it’s not available to them (i.e. when restoring subscription).
If my app is already published in the Stores and I want to add In-app purchases, do I need to resubmit my app again?
Yes, if this feature is added additionally, the app must be resubmitted in both Stores with the new app file. In that case, please contact our Support team.