Skip to main content

Plug&Play Paywall

The IAPHUB Paywall component will display all the UI necessary to sell your auto-renewable subscriptions.
The component supports one or multiple subscriptions belonging to the same subscription group. It is extremely easy to set up and will load the subscriptions directly from IAPHUB (allowing you to configure your subscriptions directly from the IAPHUB dashboard).

Insert IAPHUB Paywall​

You should first set the background color of your Paywall screen, the default IAPHUB Paywall won't render nicely with a white background. It is also possible to have a white background but you'll have to change the background color of the paywall components (in the Style menu).

After that you can finally insert the Paywall component. The component only needs to know your language code.
Make sure it fits the whole screen height/width, by default the component has an empty banner of 240px height allowing you to display anything you want (you can add a title, a description about your subscription, an image...). You can configure the banner height in the Style menu if needed.

info

The 3 subscriptions (1 month, 6 months, 1 year) you can see are only displayed as an example, they are not real.
You'll have to publish your iOS app on TestFlight and your Android app on the Google Play internal testing in order to test your paywall with real subscriptions (for more info take a look at sandbox testing).

You can also edit a few options in the Tests section in order to see how it would look like with a different configuration.



Configure actions​

You can configure six actions on the component:

  • When the purchase is successful
  • When the purchase fails
  • When the restore is successful
  • When the restore is empty (restore successful but no transactions found)
  • When the restore fails
  • When a transaction is restored (can be triggered multiple times)

In this example we're only going to need to add actions when the purchase is successful and when the restore is successful.
All the other actions (except the one triggered when a transaction is restored) will display an alert (you can disable an alert if you need to customize it). The action triggered when a transaction is restored is only necessary if you need to save your transactions in a database.

For our example we're going to redirect the user to a screen restricted to users with an active subscription.

If your app has an authentication system and you've added a property hasActiveSubscription for the logged user just like we did in our guide explaining how to set up the start component, you should also add an action updating the property to "true".



You'll have to do exactly the same when the restore is successful. You should also use the property "Has active subscription" returned by the action in order to make sure the user has an active subscription after the restore.



Next step​

After that just make sure the paywall is rendered correctly on the web preview and that's it, congrats!
The next step is to create the products you would like to sell, you can find the instructions here.