đĄ
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
Create 2 entitlements: âPro accessâ (used by the subscriptions) and âAd freeâ (used by those who paid to remove the ads)
Create 6 products: âPro monthlyâ, âPro annualâ, and âAd freeâ (both for Android and iOS).
Associate products with entitlements
The âPro accessâ entitlement will include the âPro monthlyâ and âPro annualâ products for both platforms.
The âAd freeâ entitlement will include the âAdd freeâ product for both platforms.
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.
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)
Visit https://app.revenuecat.com/ and navigate to your project dashboard.
In the sidebar, under the âProduct catalogâ section, click on âEntitlementsâ
On the top right corner, click on âNewâ
Choose an identifier and a description for your new entitlement
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
In the sidebar, under the âProduct catalogâ section, click on âProductsâ
On the top right corner, click on âNewâ
Choose your Android App
Click on âImport productsâ
If everything went as expected, you should see something like this
Select all the products you want to import and click âImportâ to confirm.
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:
Visit the App Store Connect
Click on âUsers and accessâ
Click on the âKeysâ tab, and then click â+â
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
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.
Once you downloaded the file, go back to your RevenueCat dashboard
In the sidebar, click on your iOS app
Scroll to the âApp Store Connect APIâ section, and drop the file you just downloaded.
After that, youâll be requested to complete two additional fields
You can get the Issuer ID in the App Store Connect, in the same page you just downloaded your API key
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
Click on âSave changesâ to confirm
Now you can import your iOS products by following the same steps required for Android.
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
Go back to âEntitlementsâ in the sidebar
Click on the âPro accessâ entitlement
In the âAssociated Productsâ section, click on âAttachâ
Youâll need to add the 4 products related to âPro accessâ which are:
Monthly subscription (iOS / Android)
Annual subscription (iOS / Android)
After adding all the products, it should look like this
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
In the sidebar, click on âOfferingsâ
In the top right corner, click on âNewâ
Youâll need to provide an âIdentifierâ and a âDescriptionâ for the offering.
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]"
}
]
}
}
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.
In the sidebar, go to âOfferingsâ
Click on the offering you just created in the previous section
In the âPackagesâ section, click on âNewâ
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.
Click on âAddâ to confirm.
Now, click on the new package, and then click on âAttachâ in the âProductsâ section.
Select the relevant product for each platform. In this case, Iâm adding the monthly products like this:
Click âAttachâ to confirm
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.
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:
