Using RevenueCat Paywall and Provider in Your Boilerplate

In this guide, we will show you how to integrate and utilize the Paywall component and RevenueCatProvider for managing in-app purchases with RevenueCat in your application. These components are designed to streamline the process, enabling easy configuration of subscriptions, purchases, and restoring transactions.

Displaying a Paywall for Subscription or Purchase

The Paywall component is built to simplify displaying available offerings to users. It provides an intuitive UI for handling purchases, restoring subscriptions, and managing transaction errors.

Example Usage:

import { useContext, useState } from "react";
import { RevenueCatContext } from "@/provider/RevenueCatProvider";
import Paywall from "@/components/payment/paywall";
 
const SubscriptionPage = () => {
  const [showPaywall, setShowPaywall] = useState(false);
  const { customerInfo, packages } = useContext(RevenueCatContext);
 
  return (
    <div>
      <h1>Subscription Plans</h1>
      {!customerInfo?.activeSubscriptions && (
        <>
          <button onClick={() => setShowPaywall(true)}>
            Upgrade Now
          </button>
          {showPaywall && (
            <Paywall
              onClose={() => setShowPaywall(false)}
              onPurchaseCompleted={() => alert("Purchase successful!")}
              onPurchaseError={() => alert("Purchase failed.")}
              onRestoreCompleted={() => alert("Restored successfully!")}
            />
          )}
        </>
      )}
    </div>
  );
};
 
export default SubscriptionPage;

In this example:

The Paywall component is conditionally shown when the user clicks the "Upgrade Now" button. Once the user completes a purchase or cancels, the paywall is closed. 2. Handling Purchases and Restoring Subscriptions With the RevenueCatContext, you can access the purchase functions and manage user subscriptions or purchases. This is useful if you need to trigger a purchase programmatically or restore a user's previous subscriptions.

Triggering a Purchase:

const { purchasePackage, packages } = useContext(RevenueCatContext);
 
const handlePurchase = async () => {
  if (packages?.length) {
    await purchasePackage(packages[0]); // Purchases the first package available
  }
};

Restoring Purchases:

You can allow users to restore their purchases and subscriptions with the restorePermission function provided by RevenueCatContext.

const { restorePermission } = useContext(RevenueCatContext);
 
const handleRestore = async () => {
  try {
    const restoredCustomerInfo = await restorePermission();
    console.log("Restored subscriptions: ", restoredCustomerInfo);
  } catch (error) {
    console.error("Failed to restore purchases", error);
  }
};

Displaying Available Packages

To display the subscription packages or purchase options to users, you can access the packages array from RevenueCatContext.

const { packages } = useContext(RevenueCatContext);
 
return (
  <div>
    {packages?.map((pkg) => (
      <div key={pkg.identifier}>
        <h3>{pkg.product.title}</h3>
        <p>{pkg.product.priceString}</p>
        <button onClick={() => purchasePackage(pkg)}>Buy</button>
      </div>
    ))}
  </div>
);

Adding Product to RevenueCat Overview