Configuration

Mobile billing configuration consists of a few key components that must be set up correctly to work across platforms.

If you're new to in-app purchases, the most important thing to understand is that native stores are the source of truth for your products (what can be purchased, how much it costs, and where it's available). Your billing provider (and your app) can only show and sell what you've configured correctly in App Store Connect (iOS) or the Google Play Console (Android).

As a rule of thumb, set things up in this order:

• Store: complete agreements, create products in the native stores, and make sure they're available for testing
• Offerings: organize products into purchasable choices for your users (monthly/yearly, tiers, etc.) and specify which entitlements each option grants
• Paywall: present offerings in-app and trigger purchases/restores

All of these components are tightly connected, and each must be configured correctly for the billing flow to work smoothly. The sections below guide you through configuring each one.

Store

Store configuration is the foundation: every in-app purchase ultimately goes through the native store (App Store on iOS, Google Play on Android). Complete this first—otherwise your paywall won't be able to display the correct products and prices.

Follow the official guides to make sure you've created and configured your products in the native stores correctly.

Although these links come from RevenueCat's documentation, the steps apply to any provider - the key part is knowing what's relevant for correct store setup.

Offerings

Offerings are what your app presents to the user. They typically map store products into a set of purchasable options (for example: monthly vs. yearly), plus the “what do I unlock?” logic.

They're primarily configured remotely in your provider's dashboard. See the dedicated setup guides below to learn how to configure offerings for each provider.

The source of truth for the offerings is the native store products data, so make sure to first complete the store configuration above.

Cross-platform support

To show purchased plan details in your app (such as on a subscription overview screen) and make them accessible on both mobile and web apps, you'll need to include that plan in your shared billing configuration. Follow the web configuration schema for consistency across platforms.

export const config = billingConfigSchema.parse({
  ...
  plans: [
    {
      id: BillingPlan.PREMIUM,
      name: "Premium",
      description: "Become a power user and gain benefits",
      badge: "Bestseller",
      variants: [
        {
          /* WEB */
          ...

          /* MOBILE */
          /* 👇 This is the product identifier from the store (e.g. App Store Connect, Google Play) */
          id: "core_premium_recurring_month_flat",
          cost: 1900,
          currency: "usd",
          model: BillingModel.RECURRING,
          interval: RecurringInterval.MONTH,
          trialDays: 7,
          hidden: true, 
        },
      ],
    },
  ],
  ...
}) satisfies BillingConfig;

Make sure to set the hidden flag to true to prevent the variant from being displayed in the pricing table on the web app. This is because the web app will display variants from the shared billing configuration, while the mobile app displays variants from offerings configured for the specific paywall in the provider's dashboard.

This way, you stay compliant with in-app purchase requirements, keep a native mobile experience, and can still show plan details in both the web app and the mobile app.

Paywall

The paywall is the UI users interact with to purchase an offering. It's configured remotely in the provider's dashboard, letting you change the paywall UI, behavior, and displayed offerings without needing to release a new version of your app.

To make paywall setup easier, we have a dedicated guide for each provider:

Test your paywall in a sandbox environment first to confirm everything works as expected and that products from the native stores display correctly.