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, or directly from your own experience using the purchases-js SDK. RevenueCat's Paywalls allow you to remotely configure your entire paywall UI without any code changes.

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​

The purchases-js SDK can host and manage the complete paywall experience via the presentPaywall method. This call renders the paywall, handles the purchase flow, and resolves once control returns to your app.

Presenting a paywall
const targetElement = document.getElementById("show-paywall-here");

purchases
  .presentPaywall({
    htmlTarget: targetElement,
    // offering: optional offering to be used. If omitted, the current offering is used.
  })
  .then((purchaseResult: PurchaseResult) => {
    console.log("Purchase successful!", purchaseResult);
  })
  .catch((err: Error) => {
    console.error("Error presenting paywall", err);
  });

If you do not pass an offering, the paywall for the offering marked as current will be shown. Passing an offering allows you to present another paywall that is available to the customer.