Components

Components are the individual building blocks of your paywall that can be arranged and configured to create your own custom layout.

Component	Description
Text	Used to add customizable text strings
Image	Used to add an uploaded image
Icon	Used to add a customizable icon from our provided list
Stack	Used as a parent component to jointly configure its child components
Package	Used to add a selectable package with custom styling, text, etc.
Purchase button	The call to action that invokes a purchase attempt of the selected package.
Button	Used to add other interactions; such as a link to your Privacy Policy, a back button, etc.
Footer	A configurable portion of your paywall whose position can be fixed and uniquely styled.

📘Parent components

Stacks, packages, buttons, and the footer are all complex components which can contain other components within them.

Common component properties

Most components have common properties such as padding, margin, border, and more that can be used to control their look and layout. To learn more about these common component properties, click here.

Text component

The text component allows you to enter custom strings to display on your paywall. These strings can be sized, formatted, aligned, and colored however you'd like using the available properties.

Text components can additionally be embedded in other parent components like stacks or buttons to position them relative to other components within the parent.

All text components support variables, which are dynamic values that will be set based on the package being referenced. When a text component is within a package, its variable values will always refer to that package; and text components outside of a package will always refer to the currently selected package.

Learn more about variables.

In addition, all text components support having a unique value for customers that are eligible for intro offers, so that you can reference those offers anywhere on your paywall. You can set this value using the Text field for an introductory offer property on any text component.

Learn more about setting unique values for customers eligible for intro offers.

Font size

Each text component's font size can be set to one of the available options, or any other value you manually type in.

Though these values represent pixels when rendering the paywall in the dashboard preview, they will be rendered using density-independent values on each platform where the paywall is loaded (e.g. points on iOS, density-independent pixels [dp] on Android).

Image component

The image component allows you to upload an image to display anywhere on your paywall.

Whenever you upload an image, we'll save it in a Media Gallery for your Project, allowing you to reuse it in any paywall.

📘

Uploaded images must be smaller than 2MB, and we recommend keeping them under 1MB, especially if your paywall is initialized very early in your onboarding flow, to ensure all images have been loaded by the time a customer visits the paywall.

In addition to the standard properties that are common to other components, images have a few unique ones that can be used to more granularly control how your image is displayed.

Fit mode

An image's fit mode can be set to Fit so it is resized to fit the available space without cropping, or Fill, where it will fill the available space and crop where necessary.

Mask

An image's mask shape can be set to:

• Rectangle, with an optional corner radius setting
• Circle
• Concave
• Convex

Overlay

An image can have a overlay applied of a solid color or a gradient, along with a transparency property, to allow you to do things like:

1. Add a background image with a semi-transparent overlay color that matches your app's branding
2. Apply a gradient overlay to smoothly transition from the image to your paywall's background color

Alt text

Alt text can be configured for each image to make them more accessible.

To configure alt text, first open that image in the media gallery, which you can access by clicking on Replace image within an image component's properties. Then, hover of the image you want to edit and click the eye icon that appears to view its details.

Then, click Edit under Alt text to add descriptive text to the image, or to set it as a decorative image that does not require a description.

Icon component

The icon component allows you to add an icon to your paywall from our predefined list. Each icon has a filled and outlined version, and can have its color, size, border, etc. custom configured just like other components.

Unlike other components, icons must always have a fixed width and height. Each icon has a 1:1 aspect ratio, so we recommend keeping these values identical if you want to maintain the icon's inherent aspect ratio.

📘Icons from Tabler

Paywalls uses an icon library from Tabler, which means you can also search for icons to use from their site. Some permutations are not available in RevenueCat, but if you see one you'd like to use let us know!

Stack

The stack component allows you to create a container of underlying components that can be jointly configured.

Stacks, and all other parent components, have position properties that determine how the child components are arranged within the parent. This allows you to control the axis on which those components are aligned, how they're aligned, how they're distributed, and the spacing between each child component.

To add a component to a stack, click the + button in that stack's row in the Components Panel. You can also drag any existing component into a stack, or click the ... button on existing component to Embed in stack, placing it within a new stack.

Package

The package component allows you to add a package to your paywall which your customer may select to purchase. Since a package is a parent component, you can add any other components within it to style your package however you'd like.

At the top of the properties list, you'll need to select the package from your Offering that this package component should reference, and then decide whether this package should be selected by default when a customer loads your paywall.

In addition, package's are unique in that they can have both a Default and a Selected state configured for them, so that you can add unique styling to differentiate the two; such as a unique icon, border color, or background.

Learn more about selected state styling.

📘

The package component defines the selectable area that a customer may tap on to select the package, so be sure to create suitable margin between it and other elements to make it easy for customers to tap on the correct package.

Purchase button

The purchase button is tied to your packages, and is how a customer begins the purchase process with the store.

It's shape can be configured as a pill, or a rectangle with a configurable border radius; and as a parent component it can also contain other components within it, which you might use to show multiple lines of text, an icon, etc.

Button

For all other buttons you may wish to add on your paywall, you can use the button component. The key difference between a button and other stacks is that it has configurable Actions.

You can choose from the following actions:

1. Restore Purchases
2. Navigate back
3. Navigate to

Navigate to additionally supports navigating to your Privacy Policy, Terms of Service, or any other custom URL of your choosing. URLs can be opened via In-App Browser, External Browser, or Deep Link.

Footer

If you'd like to have a fixed footer at the bottom of your paywall, you can add one using the footer component. This is especially important if you want to add optional content to your paywall that a customer may want to explore if they're interested, but don't necessarily want things like the purchase button buried beneath that content.

Once added, the footer component will always be fixed to the bottom of your paywall, and its size will be relative to its properties and the size of the components within it.

To differentiate between your fixed footer and your other paywall content, we'll add a drop shadow to your footer by default, though this can be customized or removed if you'd prefer.

Coming soon

We're already working on additional components that will be supported in the near future, such as:

• Carousel
• Timeline
• Tabs
• Video

Have a component in mind you want to see added? (Let us know about it!)[https://form.typeform.com/to/Fuamg1Er]