Paywalls that feel personal convert better. With Custom Variables, you can now pass values from your app directly into your paywall, letting you customize the experience for each customer.
In this tutorial, I’ll walk you through setting up Custom Variables in a React Native app. We’ll take a simple tipping feature and personalize the paywall title with the customer’s name.
Prerequisites
Before getting started, make sure your app is running a compatible version of the RevenueCat SDK. Custom Variables require the following minimum package versions:
| SDK | Mimimum version |
| purchases-ios | 5.57.0 |
| purchases-android | 9.21.0 |
| react-native-purchases | 9.10.0 |
| purchases-flutter | 9.12.0 |
If you’re working with a platform other than React Native, check out the Custom Variables documentation for platform-specific instructions.
The example app
Here’s what we’re working with. I’ve built a simple app with a tipping feature that lets customers tip the developer if they enjoy the app. When the user taps the “Tip the developer” button, it presents a paywall configured in RevenueCat.
Right now, the paywall title is generic, showing only “Hey, You. You should buy me a pizza”. What I want to do is display the customer’s actual name in the paywall title to make it feel more personal.
Creating a Custom Variable in the Paywall Editor
To get started, open the Paywall Editor in your RevenueCat dashboard. In the left sidebar, select the Variables section. You’ll see a new “Create variable” button at the top.
Click it to define a new custom variable. I’ll name mine customerName, since that’s what we’ll be passing from the app.
You’re required to provide a default value. This is important because it ensures the paywall still looks good even if the variable isn’t set for some reason. In this case, I’ll use “You” as the fallback, so the title reads naturally either way.
Using the variable in your paywall
Now that the variable exists, we can reference it in the paywall content. Switch back to the Layers view, select the title text layer, and find the spot where you want to insert the variable. Replace the static word “You” with the new customerName variable using the “Add variable” button.