Collecting payments with React Native & RevenueCat (Part 3): Configuring Entitlements & Oferings in RevenueCat

Collecting payments with React Native & RevenueCat (Part 3): Configuring Entitlements & Oferings in RevenueCat

💡
This is the third part of the "Collecting payments" series. Before proceeding, make sure to read Part 1 and Part 2

Before diving into this third part, I highly recommend watching this video to become familiar with some essential RevenueCat concepts like Entitlements, Products, Packages, and Offerings.

Following with the example we presented on the previous post, we now need to set up our subscriptions and one-time payment in RevenueCat.

Scenario

Our example scenario includes:

  • A monthly subscription with 7-day free trial

  • A annual subscription with 7-day free trial

  • A one-time purchase to remove ads from the app

The process

  1. Create 2 entitlements: “Pro access” (used by the subscriptions) and “Ad free” (used by those who paid to remove the ads)

  2. Create 6 products: “Pro monthly”, “Pro annual”, and “Ad free” (both for Android and iOS).

  3. Associate products with entitlements

    1. The “Pro access” entitlement will include the “Pro monthly” and “Pro annual” products for both platforms.

    2. The “Ad free” entitlement will include the “Add free” product for both platforms.

  4. Create 3 “packages”

    1. The “Pro monthly” package will include the “Pro monthly” products for both platforms

    2. The “Pro annual” package will include the “Pro annual” products for both platforms

    3. The “Ad free” package will include the “Ad free” products for both platforms.

  5. Create 1 “offering” that will display the 3 packages mentioned before.

I know… take a 5 minute break to digest all these new concepts 😄

I’ll guide you through the entire process below 💪


SpiroKit for SaaS

In case you want to save weeks of painful hours of work & research on your next React Native app, checkout SpiroKit for SaaS. It's a starter template that comes with Purchases, Push Notifications, Authentication, Analytics, Error Reporting and more. It also includes a Notion template to guide you through the entire process


Creating the Entitlements

The first step is to create 2 entitlements: “Pro access” and “Ad free” (feel free to adapt this to your needs)

  1. Visit https://app.revenuecat.com/ and navigate to your project dashboard.

  2. In the sidebar, under the “Product catalog” section, click on “Entitlements”

  3. On the top right corner, click on “New”

  4. Choose an identifier and a description for your new entitlement

  5. Repeat step 3 and 4 for the “Ad free” entitlement (feel free to adapt this to your needs)


Creating the Products

We’ll need to create 6 products: “Pro monthly”, “Pro annual”, and “Ad free” (both for Android and iOS).

Automatically importing Android products

  1. In the sidebar, under the “Product catalog” section, click on “Products”

  2. On the top right corner, click on “New”

  3. Choose your Android App

  4. Click on “Import products”

  5. If everything went as expected, you should see something like this

  6. Select all the products you want to import and click “Import” to confirm.

  7. Repeat steps 2 to 4 for the iOS app. But there’s a small difference with Android. You’ll need to setup your App Store Connect API key

Automatically importing iOS products

Before you can automatically import the iOS products, you’ll need to setup your App Store Connect API key. In order to do that, follow these steps:

  1. Visit the App Store Connect

  2. Click on “Users and access”

  3. Click on the “Keys” tab, and then click “+”

  4. Assign a descriptive name, and assign the “App Manager” role that will be required by RevenueCat to import the products. Then, click on “Generate” to confirm

  5. In the right corner, click on “Download”. Make sure to store this file in a safe place, as you won’t be able to download it again.

  6. Once you downloaded the file, go back to your RevenueCat dashboard

  7. In the sidebar, click on your iOS app

  8. Scroll to the “App Store Connect API” section, and drop the file you just downloaded.

  9. After that, you’ll be requested to complete two additional fields

  10. You can get the Issuer ID in the App Store Connect, in the same page you just downloaded your API key

  11. For the Vendor number, visit the “Payments and Financial Reports” section in the App Store Connect. You should see your vendor id in the top left corner

  12. Click on “Save changes” to confirm

  13. Now you can import your iOS products by following the same steps required for Android.

  14. Make sure to select all the products and click “Import”

If everything went as expected, your “Products” section should look like this:


Attaching Products to Entitlements

  1. Go back to “Entitlements” in the sidebar

  2. Click on the “Pro access” entitlement

  3. In the “Associated Products” section, click on “Attach

  4. You’ll need to add the 4 products related to “Pro access” which are:

    1. Monthly subscription (iOS / Android)

    2. Annual subscription (iOS / Android)

  5. After adding all the products, it should look like this

  6. Repeat steps 2 and 3 for the “Add free” entitlement. This time, make sure to only add the “Ad free” products (iOS / Android). It should look like this


Creating Offerings

  1. In the sidebar, click on “Offerings

  2. In the top right corner, click on “New

  3. You’ll need to provide an “Identifier” and a “Description” for the offering.

  4. In the “Metadata” section, add the following json structure. Make sure to provide your product identifiers, and set the discount based on your pricing. This information will be used later in the starter template, to show a “50% OFF” label in the annual subscription

     {
       "subscriptions": {
         "android": [
           {
             "cycles": 12,
             "discount": "50%",
             "identifier": "[YOUR_ANDROID_ANNUAL_PRODUCT_ID]"
           },
           {
             "cycles": 1,
             "identifier": "[YOUR_ANDROID_MONTHLY_PRODUCT_ID]"
           }
         ],
         "ios": [
           {
             "cycles": 12,
             "discount": "50%",
             "identifier": "[YOUR_IOS_ANNUAL_PRODUCT_ID]"
           },
           {
             "cycles": 1,
             "identifier": "[YOUR_IOS_MONTHLY_PRODUCT_ID]"
           }
         ]
       }
     }
    
  5. Click “Save” to finish

In order to start using this Offering, you’ll need to add at least one package to it in the next section.


Adding Packages to Offerings

We’ll need to create 3 packages:

  • The “Pro monthly” package will include the “Pro monthly” products for both platforms

  • The “Pro annual” package will include the “Pro annual” products for both platforms

  • The “Ad free” package will include the “Ad free” products for both platforms.

  1. In the sidebar, go to “Offerings

  2. Click on the offering you just created in the previous section

  3. In the “Packages” section, click on “New

  4. For the identifier, you can choose between a list of “standard identifiers” or choose “Custom” to create your own identifier. I decided to use the standards for monthly and annual subscriptions, but a custom identifier for the “Ad free” package.

  5. Click on “Add” to confirm.

  6. Now, click on the new package, and then click on “Attach” in the “Products” section.

  7. Select the relevant product for each platform. In this case, I’m adding the monthly products like this:

  8. Click “Attach” to confirm

  9. The first package is complete with the products associated. Now, go back to the offering and repeat steps 3 to 8 for the “Annual” package and for the “Ad free” package.

  10. If everything went as expected, your offering should look like this:

Congrats! You are done with all the boring part! Now, it's time to code 🥳

What's next?

In the next and final article of these series, I'll focus on creating a new React Native project and wiring everything together to create a Paywall screen where users can purchase your products.

You can read the next part of the series here: