VibeFast
Payments & Subscriptions

Payments & Subscriptions

Learn how to set up in-app subscriptions using RevenueCat in VibeFast.

Payments & Subscriptions

VibeFast uses RevenueCat to handle in-app subscriptions on both iOS and Android. RevenueCat simplifies payment processing by wrapping StoreKit (iOS) and Google Play Billing (Android) and providing a unified backend and dashboard.

Quick Start

Add the payments feature to your VibeFast project:

vf add payments

Subscription Model

We support auto‑renewable subscriptions as the main monetization type. Users maintain access to premium features until they cancel their plan.

  • ✅ Cross‑platform (iOS + Android) subscription handling
  • ✅ Trials & introductory pricing support
  • ✅ Real‑time revenue analytics
  • ✅ Easily test and update subscriptions via the RevenueCat dashboard

Why RevenueCat?

  • Handles iOS and Android in‑app purchases with a unified API
  • Provides built‑in receipt validation and subscription tracking
  • Gives you access to real‑time analytics and customer dashboards
  • Removes the need to maintain your own purchase backend

Architecture

Backend

  • packages/backend/convex/payments.ts exposes mutations to verify receipts, grant access, and sync RevenueCat transactions
  • packages/backend/convex/grants.ts tracks entitlement grants and unlocks features
  • Use packages/backend/convex/actions from frontend routes to claim coins or respond to purchases
  • packages/backend/src/services/payments.ts handles purchase syncing and credit management
  • packages/backend/src/services/device-grants.ts tracks device-based entitlements
  • Database tables: purchases, device_grants with RLS policies

Frontend

  • apps/native/src/features/payments/components renders paywalls and pricing tables
  • apps/native/src/features/payments/hooks/use-entitlement.ts tracks which tiers the user owns
  • apps/native/src/core/payments/payment-service.ts abstracts RevenueCat + backend interactions

Built‑in Paywall

The template includes a ready‑to‑use paywall component that dynamically loads your products from RevenueCat. It displays subscription prices, trial periods, and terms, handles loading states and errors, and can be customized via your theme.

Setup Steps

1. Create a RevenueCat account

Sign up at RevenueCat and create an app for your project.

2. Define your products

Create your subscription products in App Store Connect and Google Play Console (e.g., a "pro" subscription).

3. Add products to RevenueCat

Add the products to RevenueCat under your app's offerings.

4. Set environment variables

Configure your RevenueCat API keys in your .env file:

REVENUECAT_API_KEY_APPLE=...
REVENUECAT_API_KEY_GOOGLE=...

Also set CONVEX_URL, CONVEX_DEPLOYMENT, and any AI keys. Run pnpm native:setup:convex after editing.

Also set SUPABASE_URL and SUPABASE_PUBLISHABLE_KEY. Run pnpm secrets:push after editing.

5. Test purchases

Test on sandbox/TestFlight and Google Play internal testing using the built‑in paywall.

Customization

  • Adjust the paywall UI by editing apps/native/src/features/payments/components/payment-initializer.tsx
  • Extend the use-entitlement hook to gate specific routes or features
  • RevenueCat products are managed on RevenueCat's dashboard; your backend stores identifiers and grant history

Notes

  • RevenueCat handles subscriptions; your backend manages the database and business logic
  • To accept one‑time purchases or consumables, additional configuration may be required; consult RevenueCat's docs

Found an issue or bug in the docs?

Help me improve! If you spot any errors, typos, or have suggestions, please let me know.

Reach out on X/Twitter @zafarbuildzz

On this page

Payments & SubscriptionsQuick StartSubscription ModelWhy RevenueCat?ArchitectureBackendFrontendBuilt‑in PaywallSetup Steps1. Create a RevenueCat account2. Define your products3. Add products to RevenueCat4. Set environment variables5. Test purchasesCustomizationNotes