Hoe werkt het: configureren van je website om in-app-aankopen te gebruiken

Bijgewerkt op 18. februari 2024 door Jan Bunk


Creëer in-app-aankoopproducten

Je kunt deze gidsen volgen om in-app-aankoopproducten en abonnementen te maken:

Het kan zijn dat je gevraagd wordt wat extra informatie in te voeren om betalingen in je ontwikkelaarsaccount mogelijk te maken.

Omdat je op elk platform een in-app-aankoop product moet aanmaken, moet je ervoor zorgen dat je op beide platforms hetzelfde product ID gebruikt, zodat het triggeren van de in-app-aankoop via Javascript eenvoudiger wordt (zie hieronder).

Activeer een aankoop in de app

Eerst zul je waarschijnlijk willen nagaan of de huidige gebruiker je app gebruikt, want een gewone browsergebruiker zal geen in-app-aankopen kunnen doen.

Je kunt gebruiken getAppPlatform() != nullmet het app-helperscript.

Dan, als de gebruiker je app gebruikt, kun je het onderstaande Javascript gebruiken om een in-app-aankoop te activeren.

Je zou eens kunnen kijken naar de executeWhenAppReady() functie van ons app-helper script. Het zorgt ervoor dat je website niet probeert te communiceren met de app voordat deze klaar is of wanneer je website wordt geladen met een gewone browser (ReferenceError, functie is niet gedefinieerd).

<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>
    

Terwijl je op de functie wacht, zal de gebruiker op een scherm van de app zijn. De JavaScript-functie zal terugkeren zodra de aankoop is voltooid, zodat je de pagina kunt herladen of de UI kunt bijwerken zoals je nodig acht. Zodra de gebruiker het native app-scherm sluit, keert hij terug naar je website.

Een screenshot van de app die wacht tot de in-app aankoop is voltooid.

In-app-aankopen herstellen

Je zou eens kunnen kijken naar de executeWhenAppReady() functie van ons app-helper script. Het zorgt ervoor dat je website niet probeert te communiceren met de app voordat deze klaar is of wanneer je website wordt geladen met een gewone browser (ReferenceError, functie is niet gedefinieerd).

Je kunt ook een ‘Herstel Aankopen’ optie aan je gebruikers aanbieden.


<script>
    restorePurchases()
</script>
    

Meestal is het herstellen van aankopen nodig als gebruikers de app verwijderen en opnieuw installeren op een nieuw toestel. Ze kunnen dan hun eerdere aankopen terugzetten. Je slaat de informatie en aankopen van de gebruiker al op je server op, die onafhankelijk is van het apparaat van de gebruiker.

We bieden je nog steeds de mogelijkheid om een herstel-aankoop functie te integreren in de hoop dat die ook in andere omstandigheden nuttig kan zijn, bv. het kan mogelijk helpen als er iets mis ging bij het verifiëren en ontgrendelen van de aankoop van een gebruiker.

Volgende stappen

Nadat een gebruiker een aankoop in de app voltooid heeft, moet de aankoop op een server geverifieerd worden en, als de verificatie geslaagd is, moet de gekochte inhoud op je server ontgrendeld worden.

Bekijk je instellingen voor in-app-aankopen voor meer informatie en gidsen.

In-App-aankopen overzicht