How to: Configure Your Website to Use In App Purchases

Create In App Purchase Products

You can follow these guides to create in app purchase products and subscriptions:

• Create an in app purchase in App Store Connect
  Make sure to also accept the agreements for paid apps, fill the tax information and add a bank account in App Store Connect's agreement dashboard.
• Create an in app product in the Google Play Console
• Create a subscription in the Google Developer Console

You might be asked to enter some additional information to enable payments in your developer account.

As you will need to create an in app purchase product in each platform, make sure you use the same product ID on both platforms, so triggering the in app purchase via Javascript will be easier (see below).

Trigger an In App Purchase

First, you'll most likely want to check whether the current user is using your app, because a regular browser user won't be able to make in app purchases.

You can use getAppPlatform() != nullwith the app helper script.

Then, if the user is using your app, you can use the below Javascript to trigger an in app purchase.

<script>
    try {
        // productId is the ID you specified for the in app purchase product in App Store Connect and the Google Play Console
        // consumable is a boolean value that indicates whether the product can be purchased multiple times (consumable==true) or just once (consumable==false)
        // subscriptions should use consumable==false
        // userIdentifier can be any string that identifies the current user.
        // The userIdentifier will be sent to your server's unlocking endpoint if the purchase is successful (so you can then unlock the product that was bought on your server)
        resultingStatus = await makeInAppPurchase(productId, consumable, userIdentifier)["status"];
        
        switch (resultingStatus) {
            case "failed":
                // The purchase failed, for example due to an error while verifying the purchase
                break;
            case "canceled":
                // The user canceled the purchase, for example by pressing the back button
                break;
            case "completed":
                // The purchase was successful
                break;
        }
    } catch (e) {
        // Some kind of error occurred, e.g. the given productId is invalid
    }
</script>
    

While you are awaiting the function, the user will be on a screen provided by the app. The JavaScript function will return once the purchase is completed so you can then reload the page or update the UI as you deem necessary. Once the user closes the native app screen, they will return to your website.

Restoring In App Purchases

You can also provide a "Restore Purchases" option to your users.

<script>
    restorePurchases()
</script>
    

Usually restoring purchases is necessary when users uninstall the app and install it again on a new device. They can then restore their previous purchases. You store the user's information and purchases on your server already, which is independent of the user's device.

We are still providing you the opportunity to integrate a restore purchase functionality in the hopes that it may be useful under other circumstances, e.g. it could potentially help if something went wrong while verifying and unlocking a user's purchase.

Next Steps

After a user completes a purchase in the app, the purchase needs to be verified on a server and, if successfully verified, the purchased contents need to be unlocked on your server.

Please see your in app purchase settings for more information and guides.