Rork → Superwall Paywall

After building your app in Rork, use this documentation to setup a paywall with Superwall.

This tutorial was created alongside this video which has all the instructions the documentation has. Authored by @RasBuilds. [Link to video]

Summary

This tutorial will guide you through taking your Rork project and adding a Superwall paywall to it, deploying it to the app store, and verifying it works Requirements

Apple AppStore Developer Account
Superwall Account
AI-Powered IDE (Windsurf/Cursor/Copilot/etc)
Physical iPhone to Test

Table of Contents

1. Sync your project to Git

Press the Integrations button at the top right inside of your Rork project. Press Create Repository and setup a new repo connected to your Github account.

Screenshot 2025-09-19 at 11.32.58 AM.png

The project will automatically sync your most up to date changes to that Github repository making it the source of truth.

2. Open the Git repo locally in your IDE

Use the instructions inside of your Github repository or your IDE to locally connect your repo.

Screenshot 2025-09-19 at 11.34.57 AM.png

Install project packages

bun install

3. Setup local development builds

In order for us to test using a local device, we need to initialize the Expo project and setup development build. Lets first initialize Expo. If this is your first time using Expo, you will be asked to create an account and setup the project. The default yes to the questions are fine.

npm install -g eas-cli && eas login

Initialize Expo

eas init

Now we need to setup Expo Development Builds because Superwall will not work inside of the ExpoGo/Rork app. It changes binary code for your app, so we are going to need to create development builds to run the app. https://docs.expo.dev/develop/development-builds/create-a-build/

Install expo-dev-client

npx expo install expo-dev-client

We are now ready to test a local development build through Expo. This will setup our provisional certificates needed as well from Appstore connect. This will allow your iPhone to download and test local builds. We can also make sure the app is functionally working as we expect it too before we setup paywall.

Deploy a Development Build

eas build --platform ios --profile development

You will be given a link so you can check the build process on the Expo website. This process should take 5-10 minutes depending on how big your app is. After it finishes building, you will be given a QR code inside of the terminal. If you do not see the QR code, you can press Download button on that the build page on Expo website to show the QR code. Open the QR on your phone that is provisioned to download apps.

Test your Development Build

Development builds are considered development because they rely on you to run a local Expo server. It lets you update code in real time with the build that is in your phone. The only reason to deploy the build again is not for basic code changes, but if you change the binary (package installs that change native code).

Run Expo locally

bun start

A QR code should show up and you should see it say “Development build”

Screenshot 2025-09-19 at 11.55.08 AM.png

Scan the QR code with your phone and it will open your app. Test and make sure everything is working as expected. If not, use the AI chat to fix your issues.

4. Initial Superwall Project Setup

Superwall helps you build & deploy paywalls without coding. You can even A/B test different paywalls here. Superwall makes it really convenient to gate features in your app and manage user payments. https://superwall.com/ Create a Superwall account and create a project and choose React Native platform

Screenshot 2025-09-19 at 12.03.19 PM.png

For iOS Bundle ID and Android Bundle ID, it is important that the same bundle ID that is set in your [app.json] file is also set here. You can find the IDs in the sections as highlighted in the image below: (ios.bundleIdentifier) and (android.package)

Screenshot 2025-09-19 at 12.03.03 PM.png

5. Create Your Superwall Products

Now we need to establish the different in-app purchases the user will be able to do. Each one of these is considered a product. We need to setup the products name, id, price, duration, and trial period. It is important that we have some naming convention for this. We will need to use these exact same names when we create our products in the AppStore Connect later in the tutorial. For this tutorial, we will create 3 products. Our app is a single “pro” subscription, but we will have 3 ways one can buy it. One is a

5/week plan. Another is a

10/month plan. And finally a $100/year plan. The naming convention for the IDs will be like so: ios_appname_1m ← month plan ios_appname_7d ← week plan ios_appname_1y ← year plan Click on the Products page inside of your Superwall project.

Create 3 products and label them correctly

You should see all three listed

6. Creating the Paywall

Superwall has a ton of templates for paywalls. You can use those and edit them to your liking in the paywall editor. Superwalls editor allows you to remotely update paywalls so you can optimize your paywalls for higher conversion rates. Go to the Paywall page and create a new one. Choose a paywall template that fits your aesthetic. Preferably one that also had 2-3 buttons already. This will open the paywall editor.

Choose your Paywall Template

Connect your Products to your New Paywall

Once the editor opens, you’ll notice that the prices are empty. We need to connect the real products you setup earlier to it. Press the Products tab on the left side of your paywall editor.

Link your products to these unlinked ones. You should see your prices show up properly on the right side.

Update the text on the Paywall so it fits your App and finally press Publish

7. Linking your Paywall to a Campaign

Superwall is systematically setup to best support testing and different experiments for paywalls. Campaigns are experiments that can A/B test paywalls and track different trigger placements.

What is a trigger placement?

A trigger placement is the keyword + placement of a paywall inside of the app. If you are building an AI image generation app, you may place the trigger on the Home page Submit button.

Go to Campaigns and update the first campaign trigger

Update the campaign_trigger placement to something that would make sense with your app. Ex: homepage_submit_button

Go to the paywall tab inside of the Campaign and add your newly made paywall and set it to 100% use

There is one final config setup we have for Superwall, but we are done with most of the work on the Superwall website!

8. Install Superwall into the App

https://superwall.com/docs/expo/quickstart/install We need to install the Superwall package into our Expo app. Go back to your IDE and run these commands to install Superwall.

Install `expo-superwall`

npx expo install expo-superwall

Install the `expo-build-properties` config plugin:

npx expo install expo-build-properties

Then, add the following to your app.json or app.config.js file inside of the expo, plugins array:

			[
        "expo-build-properties",
        {
          "android": {
            "minSdkVersion": 26
          },
          "ios": {
              "deploymentTarget": "15.1"
          }
        }
      ]

Heres what it looks like in the actual app.json:

Grab Keys

In your Superwall project, click Settings from the panel on the left, click Keys and copy your Public API Key:

Initialize Superwall in your app

To use the Superwall SDK, you need to wrap your application (or the relevant part of it) with the <SuperwallProvider />. This provider initializes the SDK with your API key.

Edit the file `app/layout.tsx`

If you don’t want to mess up your code, you can ask the AI chat to do this step. Please wrap the main part of your app in Layout file with the SuperwallProvider and API key.

import { SuperwallProvider } from "expo-superwall";
// Replace with your actual Superwall API key
export default function Layout() {
  return (
    <SuperwallProvider apiKeys={{ ios: "YOUR_SUPERWALL_API_KEY" /* android: API_KEY */ }}>
      {/* Your app content goes here */}
    </SuperwallProvider>
  );
}

You’ve now configured Superwall in app! It’s time to setup the trigger placement and gating!

9. New Deployment for Superwall Package

Before we move onto the next part, we should run a new development build and get it on our phone.

In your `app.json` file, please bump your Version number up to `1.0.1`

Then run the development build deployment command

eas build --platform ios --profile development

After it finishes building, install the new version onto your phone using the QR code provided.

Run your development server

bun start

Scan the QR code and get into the app again. Nothing should have changed and everything should work fine.

10. Add Trigger Placement & Feature Gating in App

To make it easy for us, we will be using the AI chat inside of the IDE to set this up. To make sure the AI does not mess up, we will connect the MCP server. Every IDE has different instructions but please add the MCP server based on these docs: https://superwall.com/docs/ios/guides/vibe-coding#superwall-docs-mcp For Windsurf, the Cursor code snippet is the exact same. You just have to go to Windsurf Settings → MCP → Configure JSON and add the snippet. Once you’ve done so, you can say the following prompt to add the paywall + feature gating. Please update the text in quotes to your actual trigger placement and feature gate.

Use the MCP superwall docs tool to find out exactly how to setup the paywall trigger and feature gating. The trigger name is “home_submit” and it is placed on the submit button on the home page when the user generates an image Please make sure the feature is gated otherwise.

The AI should update your project and after restarting the app on your phone, you should be able to test it. Try to do the feature that is now gated and your paywall should pop up. Your paywall make look something like this:

This is normal. The products are not yet connected to the AppStore Connect. Which is what we are gonna do next!

11. Deploy to Production + Setup Products in AppStore Connect

Now that we are feature gated and paywall bounded, we can version bump our app.json again to 1.1.0

Run the following command for a production deployment

eas build --platform ios --profile production

You will go through a few extra steps that will configure the eas build more and create the appstoreconnect app. Once the build is finished, we need to submit it to Apples servers.

Submit to AppStoreConnect

eas submit --platform ios

Select recent builds from EAS and choose the most recent one You should now see your App inside of AppStore Connect under your Apps. Once that gets going, log into your appstore connect account. You should see your newly deployed app in your apps dashboard. Click into it.

Inside of the App dashboard, go to Monetization → Subscriptions on the left panel.

Create a new Subscription Group

We only need one since there is only one type of subscription (Membership vs No Membership). Name it Premium or Pro.

Now we need to create 3 Subscriptions inside of that group that match the 3 products we made inside of our Superwall config. Please make sure the Reference name is something people can understand and then match the Product ID to the Superwall id Superwall products we made earlier:

After pressing Create, set the Subscription Duration, the Availability, the Pricing, and the Localization (which is just another way to label the Plan). I would also upload a screenshot of your apps functionality from the development testing to the screenshot section and write a comment about what the plan does for the app.

Setup Localization for the Subscription Group itself

and you should be ready to go

We are almost done! We just have to connect a few more configs between AppStore Connect and Superwall Dashboard. Woohoo!

12. Connect Final Configs between Superwall and App Store

We have a few more connections we need to make between Superwall and the Appstore so we can finally see our products show up on the paywall inside the app.

Add team id and app id to Superwall settings. Your team id can be found in the app store connect profile settings. Your app id is the numbers found inside under General → App Information inside of the App Store Connect Dashboard.

Click on Revenue Tracking tab inside of Superwall Settings

You will see an App Store Connect button, press that and it will reveal a URL to copy inside of Option1.

Copy that URL and place it inside of your `App Store Server Notifications Production and Sandbox URLS which can be found in App Store Dashboard for your App under General → App Information`

Use the same link for both production and sandbox url.

Scroll below that on the Settings page in Superwall to reveal the next part.

Create an In-App Purchase Key inside of App Store Connect → Users & Access → Integrations → In-App Purchase (CLICK HERE FOR IT)

It will also download a .p8 file after you create the key. Do not lose that file and secure it. Enter your bundle id, key id, and issuer id into this. Upload the p8 file you just downloaded into it as well.

Create an App Store Connect API key inside of App Store Connect → Integrations → In-App Purchase (CLICK HERE FOR IT)

Same situation. Allow for App Manager/Admin permissions and save. It will download another p8 file. Secure that and upload that one in this section too.

Screenshot 2025-09-19 at 2.42.37 PM (1).png

Finally, verify that its all connected by going back to your Products page in Superwall and checking for the active status on all of your products

Conclusion: A Working Paywall + Testflight Production App

At this point, we are officially done setting up the paywall! Check your email because you were invited by Testflight to download your apps production build inside of the Testflight app. Do so and then try out the paywall. It should show the real prices and in testflight, it will mock the purchase so you can test the gating and see it work properly! A long process but you finally did it! Congrats! If you have any questions or need any clarification, please contact Ras at x.com/viralmanager

Getting started

Quickstart Examples

Advanced Tutorials

​Rork → Superwall Paywall

​After building your app in Rork, use this documentation to setup a paywall with Superwall.

​Summary

​1. Sync your project to Git

​2. Open the Git repo locally in your IDE

​Install project packages

​3. Setup local development builds

​Install EAS + Login

​Initialize Expo

​Install expo-dev-client

​Deploy a Development Build

​Test your Development Build

​Run Expo locally

​4. Initial Superwall Project Setup

​5. Create Your Superwall Products

​Create 3 products and label them correctly

​6. Creating the Paywall

​Choose your Paywall Template

​Connect your Products to your New Paywall

​Update the text on the Paywall so it fits your App and finally press Publish

​7. Linking your Paywall to a Campaign

​What is a trigger placement?

​Go to Campaigns and update the first campaign trigger

​Go to the paywall tab inside of the Campaign and add your newly made paywall and set it to 100% use

​8. Install Superwall into the App

​Install expo-superwall

​Install the expo-build-properties config plugin:

​Grab Keys

​Initialize Superwall in your app

​Edit the file app/layout.tsx

​9. New Deployment for Superwall Package

​In your app.json file, please bump your Version number up to 1.0.1

​Then run the development build deployment command

​Run your development server

​10. Add Trigger Placement & Feature Gating in App

​11. Deploy to Production + Setup Products in AppStore Connect

​Run the following command for a production deployment

​Submit to AppStoreConnect

​Create a new Subscription Group

​Setup Localization for the Subscription Group itself

​12. Connect Final Configs between Superwall and App Store

​Add team id and app id to Superwall settings. Your team id can be found in the app store connect profile settings. Your app id is the numbers found inside under General → App Information inside of the App Store Connect Dashboard.

​Click on Revenue Tracking tab inside of Superwall Settings

​Copy that URL and place it inside of your App Store Server Notifications Production and Sandbox URLS which can be found in App Store Dashboard for your App under General → App Information

​Create an In-App Purchase Key inside of App Store Connect → Users & Access → Integrations → In-App Purchase (CLICK HERE FOR IT)

​Create an App Store Connect API key inside of App Store Connect → Integrations → In-App Purchase (CLICK HERE FOR IT)

​Conclusion: A Working Paywall + Testflight Production App