Overview

Paywall Screens allow you to design fully customizable paywalls in Figma and display them in your app using our SDK — all without writing a single line of HTML or native UI code. Once published as HTML, your paywall is seamlessly loaded and rendered by the SDK, with smooth transitions and gesture handling that feel just like a native app screen.

This approach gives you the flexibility of design tools like Figma, combined with the performance and user experience of native paywalls.

🚧

Temporarily available on iOS only

Paywall Screens are currently available in the iOS Swift SDK (Beta). Android support is coming soon.

Setup guide

1. Install SDK

Install Apphud iOS SDK v4.0.0-beta or higher.
Use the GitHub repository: https://github.com/apphud/ApphudSDK See the master branch or the releases folder.

2. Select a Template from Screens page

You need to create your paywall layout in Figma using an official template and following the macro naming convention.

For that, in Apphud navigate to Screen menu and click on Build new screen button.

You'll see the templates library on Paywall screen tab that opens by default:

When browsing the library, hover over any template option and click the Preview button to open an interactive pop-up. This preview simulates dynamic elements, allowing you to click on products and explore how the paywall will respond to user interactions. To exit the preview, click outside the paywall pop-up area.

Once you’ve picked a template you like, click Get Template button on it. Then, in the opened pop-up window, hit Duplicate Figma Sites project button to navigate to Figma.

❗️

Important Note

Figma Sites requires a paid Figma plan (e.g., Professional or higher). Free-tier accounts cannot duplicate or edit the project.
You can view available plans on Figma’s Pricing page.

Duplicate the opened Figma Sites project to your drafts and follow the built-in guide to modify the template to your needs and preferences.

📘

Note

Currently Figma Sites project contains all the available screen templates. In your copy, you can delete those not needed keeping only the chosen screen.

Please note that you need to create a screen for each of localizations defined in your Apphud project.

Save your Figma project.

3. Configure Paywall in Apphud

Configure the Screen

Once your Figma paywall screen is ready, get back to Apphud. In the "Get paywall" pop-up of the chosen template, click Next.

Enter paywall Screen name and specify Page URLs for the defined project localizations:

Click the Create screen button once ready to save the screen.

Now, your screen will be available for review and modification under the Screens menu.

Connect Paywall with the Screen

Navigate to Product Hub → Paywalls.

Find the paywall you want to link to your screen and click the ✏️ edit icon.

In the Paywall settings window, locate the Paywall screen field in the Configuration tab.

Use the field dropdown to select the screen you’ve created.

Setup product macros

For each product assigned to the paywall, click the ⋯ menu and choose Set macros values.

A configuration popup will appear with

• Default localization parameter - populated with the default localization as defined by the Apphud project; this can be changed if the paywall is targeted at a specific geographic audience.
• fields for common macros such as full-price, old-price, new-price, discount, duration, and five customizable slots (custom-1 to custom-5).

To define a macro, click the button next to the field. You'll be able to choose from available variables (e.g. product.price, product.title, today, etc.) and apply optional modifiers using Liquid syntax (e.g. today add_days: 5)

Not all fields need to be filled — the popup displays all possible macros, but you only need to define those actually used in your Figma screen design. Unused macros can be left empty.

These macros will be replaced with real product data when the paywall is rendered.

Once all the necessary macros for your Screen are specified, click Save.

Preview Paywall

To verify that all required settings for the screen are correctly defined, click the Preview button next to the Paywall screen field in the Configuration section.
This will open a live preview with real product data and localization applied, allowing you to ensure that all macros are working as expected.

4. Preload Paywall Screen

Call the following code during app launch and pass the appropriate placement identifiers:

Apphud.preloadPaywallScreens(placementIdentifiers: ["my_placement_identifier"])

This step is recommended before displaying a paywall. If you only have one paywall in the app, you can preload it once at startup. If you have multiple placements, you may preload all paywalls at once. Be aware that the SDK will retain a UIViewController instance in memory for each paywall.

5. Display Paywall Screen

To present the paywall screen, use the following code:

Apphud.fetchPaywallScreen(paywall) { result in
	switch result {
	case .error(let error):
    	// Might be a timeout issue, invalid or missing paywall URL, or another error
      // Show your default paywall
	    print("error during paywall fetch: \(error)")
	case .success(let controller):
	    print("Paywall controller is ready, displaying")
	    yourParentVC.present(controller, animated: true)
	    controller.onFinished = { result in
	        switch result {
	        case .success(let purchase):
	            // User made a purchase or restored, allow to dismiss
	            return .allow
	        case .failure(let error):
	            // User canceled a payment or an error occurred. do not dismiss
	            return .cancel
	        case .userClosed:
	            // User closed a paywall, allow to dismiss
	            return .allow
	        }
	    }
	}
}

6. Callback Methods

Refer to ApphudPaywallScreenController for useful callback methods and variables.