Enable purchases by using paywalls in React Native SDK
To enable in-app purchases, you need to understand three key concepts:
- Products – anything users can buy (subscriptions, consumables, lifetime access)
- Paywalls are configurations that define which products to offer. In Adapty, paywalls are the only way to retrieve products, but this design lets you modify offerings, pricing, and product combinations without touching your app code.
- Placements – where and when you show paywalls in your app (like
main
,onboarding
,settings
). You set up paywalls for placements in the dashboard, then request them by placement ID in your code. This makes it easy to run A/B tests and show different paywalls to different users.
Adapty offers you three ways to enable purchases in your app. Select one of them depending on your app requirements:
Implementation | Complexity | When to use |
---|---|---|
Adapty Paywall Builder | ✅ Easy | You create a complete, purchase-ready paywall in the no-code builder. Adapty automatically renders it and handles all the complex purchase flow, receipt validation, and subscription management behind the scenes. |
Manually created paywalls | 🟡 Medium | You implement your paywall UI in your app code, but still get the paywall object from Adapty to maintain flexibility in product offerings. See the guide. |
Observer mode | 🔴 Hard | You already have your own purchase handling infrastructure and want to keep using it. Note that the observer mode has its limitations in Adapty. See the article. |
The steps below show how to implement a paywall created in the Adapty paywall builder.
If you don't want to use the paywall builder, see the guide for handling purchases in manually created paywalls.
To display a paywall created in the Adapty paywall builder, in your app code, you only need to:
- Get the paywall: Get the paywall from Adapty.
- Display the paywall and Adapty will handle purchases for you: Show the paywall container you've got in your app.
- Handle button actions: Associate user interactions with the paywall with your app's response to them. For example, open links or close the paywall when users click buttons.
1. Get the paywall
Your paywalls are associated with placements configured in the dashboard. Placements allow you to run different paywalls for different audiences or to run A/B tests.
To get a paywall created in the Adapty paywall builder, you need to:
-
Get the
paywall
object by the placement ID using thegetPaywall
method and check whether it is a paywall created in the builder using thehasViewConfiguration
property. -
Create the paywall view using the
createPaywallView
method. The view contains the UI elements and styling needed to display the paywall.
To get the view configuration, you must switch on the Show on device toggle in the Paywall Builder. Otherwise, you will get an empty view configuration, and the paywall won't be displayed.
import {createPaywallView} from '@adapty/react-native-ui';
try {
const placementId = 'YOUR_PLACEMENT_ID';
const paywall = await adapty.getPaywall(placementId);
// the requested paywall
} catch (error) {
// handle the error
}
if (paywall.hasViewConfiguration) {
try {
const view = await createPaywallView(paywall);
} catch (error) {
// handle the error
}
} else {
//use your custom logic
}
2. Display the paywall
Now, when you have the paywall configuration, it's enough to add a few lines to display your paywall.
To display the paywall, use the view.present()
method on the view
created by the createPaywallView
method. Each view
can only be used once. If you need to display the paywall again, call createPaywallView
one more to create a new view
instance.
try {
await view.present();
} catch (error) {
// handle the error
}
For more details on how to display a paywall, see our guide.
3. Handle button actions
When users click buttons in the paywall, the React Native SDK automatically handles purchases, restoration, and closing the paywall.
However, other buttons have custom or pre-defined IDs and require handling actions in your code. Or, you may want to override their default behavior.
For example, you will definitely need to support opening links when users tap them.
const unsubscribe = view.registerEventHandlers({
onUrlPress(url) {
Linking.openURL(url);
return false;
},
});
Next steps
Your paywall is ready to be displayed in the app.
Now, you need to check the users' access level to ensure you display a paywall or give access to paid features to right users.
Full example
Here is how all those steps can be integrated in your app together.
import React, { useEffect } from 'react';
import { Button, View } from 'react-native';
import { adapty, createPaywallView } from '@adapty/react-native-ui';
export default function PaywallScreen() {
const showPaywall = async () => {
try {
const paywall = await adapty.getPaywall('YOUR_PLACEMENT_ID');
if (!paywall.hasViewConfiguration) {
// use your custom logic
return;
}
const view = await createPaywallView(paywall);
view.registerEventHandlers({
onUrlPress(url) {
Linking.openURL(url);
return false;
},
});
await view.present();
} catch (error) {
// handle any error that may occur during the process
console.warn('Error showing paywall:', error);
}
};
// you can add a button to manually trigger the paywall for testing purposes
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button title="Show Paywall" onPress={showPaywall} />
</View>
);
}