iOS Subscription

Apple Developer Account

• Log in to your Apple Developer account
• Make sure you have created your App for App Store Connect (if not already done)

Creation Products and Subscription

In App Store Connect, enter in your new app created. You are going to configure the products that will be purchased from your app.

In the left menu:

• Go to In-App Subscriptions.
• First create a Subscription group.
• Then create a Subscription.
• Fill the fields. In the ExpoStarter example we use the identifier pro_monthly. If you set another different one, remember to change it in RevenueCat later.

Creating a Shared Secret

We need to create a token called Shared Secret to set it later in the RevenueCat Dashboard. To do so, in App Store Connect:

• In the left menu, click in App Information
• Scroll down and spot App-Specific Shared Secret
• Click Manage and Generate
• Copy the token to a safe place.

Generating In-App Purchase Key

In order to allow RevenueCat communicate with StoreKit API, we need to generate a key. Todo so, in the App Store Connect do this:

• Click in Users and Access in the very top menu
• Click in Integrations
• Click in In-App Purchase
• Generate a Key

If you already have an Issuer Id, copy it as well. You will need it later. It appears above the generated keys:

Adding an App Store app in RevenueCat

1. Create a new project
2. Click on Apps in the left menu and create an App Store app
3. Fill the fields with the proper information:
   • App name
   • The bundle id. It must be the same as your app.
   • The Shared Secret previously created.
   • The Key previously generated.
   • The issuer id previously copied.

Generating an API Key

Go to the Api Keys menu on the left and next to your App Name click Show Api Key. Copy it in a safe place, you will need it later to paste in the project config.

revenueCat: {
  webPublicAPIKey: "rcb_xxxxx",
  applePublicAPIKey: "appl_xxxxx",
  googlePublicAPIKey: "goog_xxxx",
}    

Creating Products

We need to add here the same products that we created in the App Store Connect.

• Click in Products on the left menu.
• Click + New
• Click Import Products and select the App Store app you created before.

Create an Entitlement

An Entitlement contains associated products. It is an easy way to identify if our users are ‘pro’ or ‘plus’ users, and implement logic according to it within your app. To create an Entitlement:

• Click in Entitlements on the left menu
• Create a pro entitlement. If you set another id for the Entitlement, remember to replace it in the Xcode project.

Click in the created Entitlement and add the three previously created products.

Create an Offering and packages

Offerings are the selection of products that are "offered" to a customer on your paywall. Creating several offerings allow us to do experiments easily with different products.

In the WrapFast example we use an Offering with a default identifier.

Save the Offering and create a package for every product. The Offering should look like this:

Create a Paywall

In the ExpoStarter project there is configured a RevenueCat Paywall. They are remotely configurable templates that makes easy displaying Paywall designs.

To create a Paywall:

• Click on Paywalls in the left menu
• Click on Add Paywall next to default Offering. Every Paywall is associated with one Offering.
• Select the template that most fit to your case. In this example we are going to use this one:

Of course you can manually build one on your own fetching the products with the useOfferings hools.

export function Paywall() {
  const session = useSession();
  const offerings = useOfferings();
  const subscribe = useSubscribeMutation();
  async function handlePurchase(offer:PurchasesPackage) {
    try {
      await subscribe.mutateAsync({
        offer: plan,
        userId: session.id,
      });
      if (router.canDismiss()) {
        return router.dismiss();
      }
      router.replace("/");
    } catch (err) {
      Sentry.captureException(err, { extra: { plan } });
    }
  }

  return (
    <View className="flex-1 mt-2">
      <View className="mx-8  flex-1 flex-col gap-6 justify-center">
        {offerings.data?.map((offer) => (
          <Plan
            key={offer.identifier}
            offer={offer}
            onPress={() => handlePurchase(offer)}
          />
        ))}
      </View>
    </View>
  );
}