Skip to main content

Web Paywalls

How to use RevenueCat Paywalls on the web

AIAsk AIChatGPTClaude

You can use RevenueCat Paywalls as part of a web purchase flow, in a hosted Web Purchase Link. RevenueCat's Paywalls allow you to remotely configure your entire paywall UI without any code changes.

📘Web SDK support coming soon

We're currently working on adding support for web paywalls in the purchases-js SDK. Stay tuned!

The paywall experience on web​

Paywalls on web mostly behave as they do on mobile platforms, with some exceptions or additional considerations:

Screen sizes​

When presenting a paywall on web, you should expect it to be displayed in a greater variety of screen widths. You can use the tablet layout views in the editor to ensure users have a better experience on larger screens.

Mobile platform functionality is hidden​

Elements like the restore purchases link don't have a web equivalent, and are therefore not shown on web.

Creating a paywall​

Follow the instructions in Creating Paywalls to build your paywall using the available components, either from an existing template or from scratch.

Paywalls editor

Web Purchase Links are a hosted purchase flow that allow you to sell products on the web without code. They include three steps:

  1. Package selection
  2. Checkout
  3. Post-purchase (either the built-in success page or a custom redirect)

They offer two alternatives for the package selection step:

  • Default package selection: Offers a simple design, with minimal configuration. Lightweight brand customization can be configured (see Customization)
  • Custom paywall: Allows full customization, branding and layout. Can be used consistently between iOS, Android and Web.

How to configure a custom paywall:

  1. Create and configure a web purchase link if you haven't already (see Creating a Web Purchase Link)
  2. Create a paywall (see Creating a paywall), and add it to the same offering used in your web purchase link
  3. Edit the web purchase link, and change the Paywall option to use your custom paywall:

Paywall selection

If you already have a paywall published on the offering, when you create a web purchase link for that offering, it will use the paywall by default.

  1. Test the web purchase link in your sandbox environment (see Testing Web Purchase Links)

The paywall should be presented as the package selection step, allowing you to select any of the available web products and proceed through the web checkout and success pages.

Presenting a paywall from the Web SDK​

Web SDK support for Paywalls is coming soon. Stay tuned!