How to personalize your paywalls with Custom Variables in React Native

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.

PrerequisitesCopy link to this section

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 appCopy link to this section

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 EditorCopy link to this section

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 paywallCopy link to this section

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.

Once you’re happy with how it looks, publish the changes.

Passing the variable from your appCopy link to this section

With the paywall side ready, let’s update the app code. The presentPaywall function now accepts a customVariables key, which takes an array of objects. Each object needs a key that matches the variable name you defined in the Paywall Editor, and a value wrapped in CustomVariableValue.string.

Here’s what the code looks like:

1import { CustomVariableValue } from "react-native-purchases-ui";
2
3// When presenting the paywall:
4await presentPaywall({
5  customVariables: {
6      customerName: CustomVariableValue.string("Perttu"),
7    },
8});

The key here is "customerName", which matches exactly what we defined in the editor. The value can be anything you pull from your app’s user data, authentication state, or wherever you store customer information.

The resultCopy link to this section

Save the changes and force a refresh so the app fetches the latest version of the paywall. Now when the customer taps “Tip the developer” and the paywall appears, you’ll see their name displayed right in the title.

That’s all it takes. A few lines of code in your app, a quick setup in the Paywall Editor, and your paywalls feel like they were built for each individual customer.

What’s nextCopy link to this section

Custom Variables open up a lot of possibilities beyond just names. Think about passing subscription status, usage stats, or any other value that might make your paywall more relevant and compelling.

For more details on Custom Variables and other RevenueCat features, check out the full documentation.