Unclear how/when to call my own API after user purchases non-renewing subscription

[YoshiMannaert]

Hi, this might be a dumb question and apologies if this is mentioned in the docs somewhere, but I can't seem to find clear documentation how to do this.

Our app is only accessible when a user has an active non-renewing subscription. The flow we have atm is: user registers > user signs in > API check if user has active subscription > If not: go to product/subscription overview > user selects a subscription duration > user pays > send data to our API > go to app

Atm I'm doing an API call in

shop.when().approved((p) => {
 // API call
}

as well as in

shop.when().receiptUpdated((receipt) => {
        
        receipt.transactions.forEach(transaction => {
            if(transaction.transactionId != 'appstore.application' && transaction.state == 'finished') {
                transaction.products.forEach(product => {
                    // API call
                });
            }
        });
        refreshUI()
})

There are a few problems I'm having:

1. When a user purchases a subscription the API gets called a dozen or more times in just a few seconds (I can prevent this from creating multiple subscriptions in our API but would like to prevent the API being called that often for a single purchase)
2. In production, on iOS, when the user sees the subscription page, it automatically sends an API call for a purchase even when the user hasn't clicked anything yet, allowing them to access the app for free. Even when they've never used/paid for the app ever before

So my question is, when or in which state should I do the actual API call? And what could cause the issue of the API being called when the user hasn't even clicked on a product/subscription yet?

You can view the whole (VueJS) component here: https://codeshare.io/3y1nl6 (might take a minute to show the actual code)