Retrieve Active In-App Purchases with a React Component: A Step-by-Step Guide
One of the goals of my blog is to share all my learnings as an app maker. I want to share with you all the steps I take to grow my apps and the strategies I use to increase my revenue. But before I can do that, I need to display the current InApp purchases that are active in my apps.
So, I wanted to display my current InApp Purchases on the homepage of my blog, and to do that, I need to use the App Store Connect API. To call the Apple APIs, we need to generate an API key and use it to authenticate the requests.
Generate the App Store API Token
First, we will need to access our App Store Connect account and get the issuer ID and the key ID. Then we will need to generate a private key and save it in a file. You can download the private key from the App Store Connect website and add it into your project.
Here’s a brief summary of what we need:
- keyId
- issuerId
- privateKey (.p8 file)
After we have all the information we need, we can create a function to generate the token
(take into account that you will need to install the jsonwebtoken
package).
Once we have created the token, we can start making requests to the App Store Connect API. Which endpoint do we need to call?
Step-by-Step to Obtain InApp Purchases from App Store Connect
We will use the GET /v1/salesReports
endpoint to retrieve the active InApp Purchases.
We will need to pass some parameters to extract this information.
As we did before, we will need another value to send in our request that it’s in the App Store Connect, this values is our vendorNumber
(take into account that you will need to install the zlib
package).
In this case, we will create an API endpoint that will return the total number of active InApp Purchases. This endpoint will be called from one of our components (Spoiler: we will create this component in a minute).
Now, we have the function that will retrieve the total number of active InApp Purchases. So, we need to create a React Component that will display this information on our homepage.
Create the React Component
We will connect all the dots and create a React component that will display the total number of active InApp Purchases.
So, we will use the useEffect
hook to fetch the data from our API endpoint. After receiving the number of InApp Purchases we will display it in a simple div.
That’s it! Now we have a component that will display the total number of active InApp Purchases. If you have an alternative method, please share it with me on X (formerly called Twitter).