Solved
How to make hard paywall in react native?
Best answer by alejandra-wetsch
Hi there,
Thank you for reaching out!
For React Native, we have different ways to display paywalls using the SDK:
- Using
RevenueCatUI.presentPaywall: This method will present a paywall immediately when called. - Using
RevenueCatUI.presentPaywallIfNeeded: This will present a paywall only if the customer does not have an unlocked entitlement. - Manual presentation of the paywall using
RevenueCatUI.Paywall: This approach gives you more flexibility when displaying the paywall.
In your case, given that you want to create a hard paywall, using RevenueCatUI.Paywall is the best approach. Depending on which Paywall Template version you're using, you should implement different configurations to ensure that dismissing the paywall is not an option for the user.
If you're using Legacy Paywall templates, you can use the configuration below:
<View style={{ flex: 1 }}>
<RevenueCatUI.Paywall
options={{ displayCloseButton: false }} // setting this property to `false` will remove the close button from the paywall if any
onPurchaseCompleted={handlePurchaseCompleted}
/>
</View>However, if you're using New Paywall templates, you should remove the Close Button from the paywall while editing it. In that way, no Close Button will appear, and the user won't be able to dismiss it. Please refer to the code below on how to configure the paywall in this case:
<View style={{ flex: 1 }}>
<RevenueCatUI.Paywall
onPurchaseCompleted={handlePurchaseCompleted}
/>
</View>Thank you also for your documentation feedback. We will make sure to take it into consideration and will make changes so that this information is accessible and easy to find.
I hope this helps you. Please let us know if you have any other questions!
Best,
This post has been closed for comments
+1Hi there,
Thank you for reaching out!
For React Native, we have different ways to display paywalls using the SDK:
- Using
RevenueCatUI.presentPaywall: This method will present a paywall immediately when called. - Using
RevenueCatUI.presentPaywallIfNeeded: This will present a paywall only if the customer does not have an unlocked entitlement. - Manual presentation of the paywall using
RevenueCatUI.Paywall: This approach gives you more flexibility when displaying the paywall.
In your case, given that you want to create a hard paywall, using RevenueCatUI.Paywall is the best approach. Depending on which Paywall Template version you're using, you should implement different configurations to ensure that dismissing the paywall is not an option for the user.
If you're using Legacy Paywall templates, you can use the configuration below:
<View style={{ flex: 1 }}>
<RevenueCatUI.Paywall
options={{ displayCloseButton: false }} // setting this property to `false` will remove the close button from the paywall if any
onPurchaseCompleted={handlePurchaseCompleted}
/>
</View>However, if you're using New Paywall templates, you should remove the Close Button from the paywall while editing it. In that way, no Close Button will appear, and the user won't be able to dismiss it. Please refer to the code below on how to configure the paywall in this case:
<View style={{ flex: 1 }}>
<RevenueCatUI.Paywall
onPurchaseCompleted={handlePurchaseCompleted}
/>
</View>Thank you also for your documentation feedback. We will make sure to take it into consideration and will make changes so that this information is accessible and easy to find.
I hope this helps you. Please let us know if you have any other questions!
Best,
const handleRestoreSuccess = async () => {
console.log("flag");
try {
const restore = await Purchases.restorePurchases();
if (restore?.entitlements?.active?.pro) {
router.push("/A");
} else {
Alert.alert(
"No Purchase Found",
"We couldn't find any previous purchases to restore.",
[{ text: "OK", style: "default" }],
);
}
} catch (error) {
console.error("Error restoring purchases:", error);
Alert.alert(
"Restore Failed",
"We couldn't restore your previous purchases. ",
[{ text: "OK", style: "default" }],
);
}
};
const handleRestoreError = (error: any) => {
console.error("Restore failed:", error);
Alert.alert(
"Restore Failed",
"We couldn't restore your previous purchases. ",
[
{
text: "OK",
style: "default",
},
],
);
};
<RevenueCatUI.Paywall
onPurchaseCompleted={handlePurchaseSuccess}
onRestoreCompleted={handleRestoreSuccess}
onRestoreError={handleRestoreError}
/>
+1Hey
I’m happy to hear that worked!
You don't need to handle the restorePurchase functionality manually; as you mentioned, the SDK manages it internally. The SDK will call onRestoreCompleted once the restore purchase operation is complete without unexpected errors.
To determine if the user was granted the entitlement, please check if the entitlement in the CustomerInfo object is active. This object is returned as a listener parameter, as shown in the RevenueCatUI.Paywall tab of this section of our documentation.
I would recommend checking the code below:
const handleRestoreSuccess = async ({customerInfo}) => {
console.log("flag");
if (typeof customerInfo.entitlements.active["pro"] !== "undefined") {
// Unlock that great "pro" content
console.log("Entitlement granted");
} else {
Alert.alert(
"No Purchase Found",
"We couldn't find any previous purchases to restore.",
[{ text: "OK", style: "default" }],
);
}
};
const handleRestoreError = (error) => {
console.error("Restore failed:", error);
Alert.alert(
"Restore Failed",
"We couldn't restore your previous purchases. ",
[
{
text: "OK",
style: "default",
},
],
);
};
<RevenueCatUI.Paywall
onPurchaseCompleted={handlePurchaseSuccess}
onRestoreCompleted={handleRestoreSuccess}
onRestoreError={handleRestoreError}
/>
I hope this helps you. Please let me know if there's anything else I can help you with!
Best,
Most helpful members this week
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.