No Code iOS App Development with In-App Purchases Tutorial | OnSpace AI
No Code | Build iOS Apps with In-App Purchases
Transform your app idea into a monetized reality with OnSpace AI. Learn how to create a complete Dog Gallery App with RevenueCat integration using just 4-5 simple prompts!
No Coding Background Required
Build professional iOS apps with advanced features using simple text prompts. AI handles all the complex programming for you!
Zero coding experience required
Real RevenueCat integration with actual IAP functionality
Custom paywall with dynamic subscription plans
Complete TestFlight deployment guide
🚀 What We're Building
Who doesn't love dogs? 🐾 In this hands-on tutorial, we'll create a Dog Fan Gallery App where users can browse adorable dog photos, but here's the twist – they'll need to subscribe to unlock the full gallery!
The Magic: We'll accomplish this entire build using OnSpace AI with minimal coding effort, integrating real RevenueCat in-app purchases that actually work.
Feed Tab
- Scrollable dog photo gallery (2 free + 8 premium locked images)
Profile Tab
- User subscription management interface
Custom Paywall
- Dynamic RevenueCat integration with real pricing
Native Experience
- Fully functional IAP with that satisfying "ding" sound! 🔔
⚡ Prerequisites (Set These Up First!)
Before we dive into the fun part, make sure you have these essentials ready:
💡 Pro Tip: Complete ALL setup steps before starting the OnSpace build. Trust me on this one! 😉
🍎 Apple Developer Account
- Required for app publishing and TestFlight distribution
App Store Connect →
💰 RevenueCat Account
- Handles all in-app purchase complexity for you
RevenueCat Dashboard →
Integration Guide →
🔑 RevenueCat API Key
- Get your public API key from RevenueCat dashboard
appl_XXXXXXXXXXXXXXXXXXXXXXXXXXX
Complete Step-by-Step Tutorial
Follow our comprehensive guide to build a Dog Gallery App with real in-app purchases. No complex coding required!
🎯 Create Your Project on OnSpace
Head over to OnSpace and start your new project
🌟 Important Choice: Select "Spaces"
Using OnSpace's built-in backend means no more third-party account setup headaches! Currently in alpha but works like a charm. ✨
🤖 The Magic Prompt (Copy & Paste This!)
Here's where the magic happens. Use this exact prompt to build your entire app:
Copy
I'm building a mobile app for browsing DOG pictures. The app should have two tabs: Feed and Profile.
In the Feed tab:
- Display a vertical scrollable list of 10 DOG images.
- Only the first 2 images should be fully visible. The remaining 8 images must have a semi-transparent overlay with the text: "Subscribe to unlock" centered over the image.
- Tapping on a locked image should present a custom RevenueCat paywall screen with a fixed header section and dynamic subscription plans.
RevenueCat Integration Template
Installation Requirements
- Install
react-native-purchasesusing version 8.11.4 or higher - Install
react-native-purchases-uiusing version 8.11.4 or higher - Ensure libraries are compatible with Expo Go
Core Integration Components
1. SDK Configuration Hook
- Create and export a custom hook called
initializePurchases - Use the actual
Purchases.configure()method to configure the RevenueCat SDK - Guide users to manually store their RevenueCat public API key in a .env file using format:
EXPO_PUBLIC_REVENUECAT_PUBLIC_SDK_KEY=Revenuecat Public API Key - Initialize this hook in your app's main layout file (e.g.,
_layout.tsx)
2. Subscription Status Hook
- Create and export a hook called
useSubscriptionStatus - Use
Purchases.getCustomerInfo()to check user's subscription status - Implement entitlements logic to determine subscription state
- Return a boolean
isSubscribedvalue
3. Custom Paywall Implementation
- Create a custom paywall page with two distinct sections:
- Fixed header section: Display static content like app branding and benefit to subscribe.
- Dynamic subscription plans section: Fetch and display real-time RevenueCat offerings
- Dynamically fetch offerings and products from RevenueCat - do not use hardcoded SUBSCRIPTION_PLANS
- Use
Purchases.getOfferings()to retrieve current available products and offerings - Ensure the paywall displays actual products configured in your RevenueCat dashboard
- Create custom purchase buttons that integrate with RevenueCat purchase methods
- Design subscription plan cards that show dynamic pricing, duration, and features from RevenueCat
- Never use hardcoded product data - all subscription information must come from live RevenueCat offerings
4. Content Protection Logic
- Use the
useSubscriptionStatushook across your app to control content access - Show/hide locked content based on subscription status
- Display custom paywall when users attempt to access premium content
5. Dynamic Product Configuration
- Never use hardcoded product lists or SUBSCRIPTION_PLANS arrays
- Always fetch current offerings using
Purchases.getOfferings() - Parse offering data to extract product titles, prices, billing periods, and descriptions
- Let RevenueCat manage product availability and pricing dynamically
- Ensure the app adapts to changes in your RevenueCat dashboard configuration
- Handle offering retrieval errors gracefully with loading states and fallbacks
Implementation Guidelines
Technical Constraints
- Use real RevenueCat methods - do not mock purchase or subscription logic
- Ensure compatibility with Expo Go environment
- Keep code modular with well-named components
- No backend integration or persistent storage required - rely on RevenueCat SDK only
UI/UX Requirements
- Display locked content with semi-transparent overlay
- Center "Subscribe to unlock" text over locked content
- Present custom RevenueCat paywall when locked content is tapped
- Show subscription status in user interface
- Custom paywall must have fixed branding section + dynamic offerings section
This prompt has been tested and verified to work perfectly with OnSpace AI!
3. ### 🔧 Configure API Key & Enable Runtime Scanner
After your first build, follow these **CRITICAL steps**:
#### 🚨 IMPORTANT: Configure Your RevenueCat API Key
Before anything else, you MUST configure your API key:
1. Open **CodeEditor** in OnSpace (look for the < > icon)
2. Find the `.env` file in your project root
3. Add your RevenueCat Public API Key:
Copy
`EXPO_PUBLIC_REVENUECAT_PUBLIC_SDK_KEY=appl_XXXXXXXXXXXXXXXXXXXXXXXXXXX`
4. Save the file
⚠️ **Without this step, your RevenueCat integration will NOT work!** The app needs this key to communicate with RevenueCat's servers.
#### 🎯 Enable Runtime Scanner
Now turn on Runtime Scanner and keep it running!
Detects console errors in real-time
Automatically fixes issues with one click
Saves you hours of debugging time
Monitors your RevenueCat API connection
4. ### 🕵️ Quality Assurance Check
Use this prompt to ensure everything is properly configured:
Copy
Key Implementation Notes
- The custom paywall must call actual RevenueCat purchase methods (
Purchases.purchasePackage()) - All subscription logic should rely on RevenueCat's entitlements system
- Ensure proper error handling through RevenueCat's provided methods
- The paywall page must never use hardcoded SUBSCRIPTION_PLANS - always fetch live data from RevenueCat offerings and display it
Check all the items below: [ ] No hardcoded subscription plans anywhere in code [ ] All pricing comes from live RevenueCat offerings [ ] Custom paywall has both fixed and dynamic sections [ ] Purchase flow calls actual RevenueCat purchase methods [ ] Subscription status updates across app after purchase [ ] Error handling for failed offering fetches [ ] Platform-specific API key handling [ ] Loading states during RevenueCat operations
### Final Success Checklist
- App builds without errors
- Paywall displays real RevenueCat pricing
- Purchase flow works on device
- Subscription status updates correctly
- Content unlocks after purchase
- Revenue appears in RevenueCat dashboard
## 🤔 Frequently Asked Questions
### How long does it take to build a no-code iOS app with in-app purchases using OnSpace AI?
You can build a complete iOS app with RevenueCat in-app purchases in approximately **15 minutes** using OnSpace AI's no-code platform. The process involves 4-5 simple prompts and the AI handles all the complex RevenueCat integration automatically. No coding experience required!
### What prerequisites do I need before starting the no-code iOS app tutorial?
You need three things: an **Apple Developer Account** for App Store Connect, a **RevenueCat account** for handling in-app purchases, and your **RevenueCat public API key**. Complete setup of these accounts before starting the OnSpace build process for a smooth experience.
### Does the no-code tutorial work with real RevenueCat integration or just mock data?
The tutorial creates a **fully functional app with real RevenueCat integration**. The paywall displays actual pricing from your RevenueCat dashboard, processes real test transactions, and works with TestFlight deployment. No hardcoded subscription plans are used - everything is dynamic and connected to your live RevenueCat configuration.
### Why doesn't the in-app purchase functionality work in the web preview?
This is **expected behavior**. In-app purchase functionality requires a native iPhone environment and doesn't work in web browsers. Seeing "Web platform not supported" in the OnSpace web preview actually confirms your RevenueCat integration is properly configured. Test the full functionality using TestFlight on an actual iOS device.
### Can I really build iOS apps without coding knowledge?
**Absolutely!** OnSpace AI's no-code platform allows anyone to build professional iOS apps with advanced features like in-app purchases using simple text prompts. No programming experience required - just describe what you want and the AI builds it for you. The platform handles Swift, React Native, Xcode complexity, and RevenueCat SDK setup automatically.
## Ready to Build Your Monetized App?
Join thousands of developers who've transformed their ideas into revenue-generating iOS apps with OnSpace AI
15min
Build Time
4-5
Simple Prompts
100%
Functional IAP
Ready to turn your app ideas into revenue? Start building with OnSpace today!