In the previous guide he described how to customize buttons UI and design. In this guide, we will explain how to customize the number of subscription buttons, the text displayed on them, and how to use tags to automatically display information such as price, duration, and intro periods on your paywall.

Examples of use:

Access the Edit screen mode:

Add a Paywall screen from templates on the flow by drag and drop

Click on the screen you've added to the onboarding flow.

Press the Pencil button to enter the "Edit Screen" mode.

Also, you can configure the screen for the whole theme. The options for customizing will be the same.

Reminder how to customize Paywalls for the theme

For New Onboarding: After selecting a theme, customize the screen by clicking on the Edit button.

For Existing Onboarding: Click on the Settings icon in the upper right corner of the onboarding flow.

Then edit the screen for the entire theme.

Access Subscriptions items settings on Edit screen

On the Edit screen, locate the Subscriptions section.

In this article, we will work with the 'Subscriptions items' section

Here you can manage the subscription items on your panel: set their amount, enter text, and products that the user will purchase, and use tags for price, duration, or intro displaying.

Manage Subscriptions items amount

Adding Buttons with Subscriptions on Your Paywall

Adding Buttons: To add a subscription button, click on the "Add" button. A new button will be added with the same design settings as the other buttons, but you will need to fill in the text and subscription ID separately.

In the Horizontal view kind, only the first two items will be displayed.

For Vertical view, you can add as many buttons as you want, but ensure they fit on the screen and are visible to the user.

Removing Button with Subscriptions

To remove a subscription button, click on the trash icon next to the item.

Be aware that removing all items from the list will prevent the purchase process from starting. Ensure at least one item remains in the list.

Fill in the Subscription ID field

Enter the product ID of the subscription that is created in the App Store Connect or Stripe. This is essential for linking the button to the correct product.

Here is a detailed guide on how to fill in the Subscription ID field

Important Notes:

For iOS SDK: Entering an incorrect or non-existing subscription ID will prevent the subscription button from displaying on the paywall.
For Stripe Web2App: Entering an incorrect or non-existing subscription ID will prevent the purchase process from starting, and the Stripe product will not appear.

Text Fields:

Here you can fill the text that the user will see on buttons and use tags if needed (which are described below)

Left Column Top Field: Enter any text you want the user to see on the paywall.

Left Column Bottom Field: Enter additional text for the bottom of the left column.

Right Column Top Field (Only for Horizontal View): Enter text for the top of the right column.

Right Column Bottom Field (Only for Horizontal View): Enter text for the bottom of the right column.

Using tags for Text fields

Tags for iOS SDK

When a tag is used in a mobile application, it dynamically pulls relevant subscription data from App Store Connect and displays it in the specified location on the paywall.

Here are some tags that you can use (just copy needed and paste in the text field):

Suppose you have created a subscription with a 7-day free trial, after which the user is charged $9.99 every month. If you insert the product ID in the Subscription ID field and use the following tags:

Tag name	Tag definition	How it looks on the Edit screen	How does it look on a mobile APP with IOS SDK
@priceAndcurrency	displays the price and currency.
@duration	displays the period.
@price/duration	displays the price with currency slash(/) duration
@price/week	displays the price per week (the full price divided by IOS system and displays weekly price)
@price/month	displays the price per month (the full price divided by IOS system and displays monthly price)
@introPrice	displays the introductory offer price (pay as you go, pay up front)
@introDuration	displays the introductory offer or FREE trial duration.

Note that pricing, currency, and localization for tags will formatted automatically by IOS according to the user's regional settings.

Using Tags for STRIPE:

Important reminder:

To make the flow workable Integrate Stripe and Create the Stripe product in the Onboarding Online Product

Tag name	Tag definition	How it looks on the Edit screen	How does it look on Web2App
@price	Displays the price without a currency symbol.
@priceAndCurrency	Displays the price with a static currency symbol.
@duration	Displays the renewal period without units (e.g., "1" instead of "1 month").
@interval	Displays the renewal period with units (e.g., "1 month").
@trialDays	Displays the number of trial days without the word "days".
@fullTrialDays	Displays the number of trial days with the word "days".

Saving Your Changes

After finalizing the customization, click "Save and Close" to apply your changes. If you press the "Close" button without saving, all modifications will be lost.

If you work with Web2App don't forget to update your link to apply all changes!