Démonstration des achats intégrés

En quoi consiste cette démo ?

Cette démonstration est une application de jeu mobile inspirée du jeu classique de devinettes « Le Pendu », dans laquelle des voyelles peuvent être achetées via la boutique interne de la démo. Dans le jeu, une série de tirets s’affiche, représentant les lettres du mot à deviner. Lorsque vous devinez correctement une lettre présente dans le mot donné, celle-ci est placée sur le ou les tirets correspondants. Si vous devinez toutes les lettres du mot ou si vous devinez le mot entier à n’importe quel moment, la partie est terminée et vous avez gagné. Si votre réponse est incorrecte, un élément d’un bonhomme suspendu est dessiné. Une fois le personnage terminé, vous n’avez plus de tentatives et vous perdez.

La démo montre comment il est possible de proposer des produits intégrés à l’application au sein d’une application Qt, pour les plateformes Android et iOS. Afin de tester la fonctionnalité d’achat intégré à l’application dans la démo, vous devez d’abord enregistrer l’application et ses produits dans la boutique externe. Pour savoir comment procéder, consultez respectivement les guides de Google Play et de l’App Store.

Boutiques d’applications tierces

Les produits intégrés doivent être enregistrés dans les boutiques cibles avant de pouvoir être recherchés ou achetés dans une application. Nous vous recommandons d'utiliser les mêmes identifiants pour les produits dans chaque boutique, car cela simplifie le code permettant de rechercher et d'acheter les produits.

• Démonstration des achats intégrés - Google Play
• Démonstration des achats intégrés – App Store iOS

Comment fonctionne la démo

La démo est une application QML qui enregistre des types QML permettant d’accéder aux informations sur les produits intégrés à l’application, ainsi que de demander l’achat de ces produits. Ceux-ci sont enregistrés dans la boutique externe de la plateforme cible

Les achats intégrés sont ajoutés à l’application en commençant par ajouter un objet Store. Dans la démo, l’objet Store est créé par le composant MainView, qui est chargé au démarrage de l’application.

Store {
    id: iapStore
}

La démo définit un composant permettant d’afficher une boutique pour l’achat des produits intégrés mis à disposition. Ces produits doivent d’abord être enregistrés auprès de l’objet Store que nous avons créé ci-dessus dans MainView. Deux produits sont disponibles, le premier étant un produit consommable.

Product {
    id: product100Vowels
    store: iapStore
    type: Product.Consumable
    identifier: "qt.io.demo.hangman.100vowels"

    onPurchaseSucceeded: {
        console.log(identifier + " purchase successful");
        //Add 100 Vowels
        applicationData.vowelsAvailable += 100;
        transaction.finalize();
        pageStack.pop();
    }

    onPurchaseFailed: {
        console.log(identifier + " purchase failed");
        console.log("reason: "
                    + transaction.failureReason === Transaction.CanceledByUser ? "Canceled" : transaction.errorString);
        transaction.finalize();
    }
}

Ce produit consommable fournit 100 voyelles supplémentaires à utiliser pour deviner des mots dans le jeu. Une fois l’achat effectué, nous mettons à jour l’état de l’application pour inclure ces 100 voyelles supplémentaires. Nous appelons ensuite la méthode `finalize()` sur l’objet transaction afin de confirmer à la boutique de la plateforme que le produit consommable a bien été fourni.

Le deuxième produit est un produit non consommable qui débloquera définitivement des voyelles à l’avenir. Outre la mise à jour de l’état de l’application lors de l’achat, nous devons veiller à fournir un moyen de restaurer cet achat sur d’autres appareils utilisés par l’utilisateur final. Dans ce cas, nous créons un gestionnaire de signal pour onPurchaseRestored.

Product {
    id: productUnlockVowels
    type: Product.Unlockable
    store: iapStore
    identifier: "qt.io.demo.hangman.unlockvowels"

    onPurchaseSucceeded: {
        console.log(identifier + " purchase successful");
        applicationData.vowelsUnlocked = true;
        transaction.finalize();
        pageStack.pop();
    }

    onPurchaseFailed: {
        console.log(identifier + " purchase failed");
        console.log("reason: "
                    + transaction.failureReason === Transaction.CanceledByUser ? "Canceled" : transaction.errorString);
        transaction.finalize();
    }

    onPurchaseRestored: {
        console.log(identifier + " purchase restored");
        applicationData.vowelsUnlocked = true;
        console.log("timestamp: " + transaction.timestamp);
        transaction.finalize();
        pageStack.pop();
    }
}

Outre l’enregistrement des produits, la démo fournit également une interface permettant d’acheter concrètement le produit enregistré. La démo définit un composant personnalisé appelé « StoreItem » pour afficher et gérer l’interaction d’achat.

Product {
    id: productUnlockVowels
    type: Product.Unlockable
    store: iapStore
    identifier: "qt.io.demo.hangman.unlockvowels"

    onPurchaseSucceeded: {
        console.log(identifier + " purchase successful");
        applicationData.vowelsUnlocked = true;
        transaction.finalize();
        pageStack.pop();
    }

    onPurchaseFailed: {
        console.log(identifier + " purchase failed");
        console.log("reason: "
                    + transaction.failureReason === Transaction.CanceledByUser ? "Canceled" : transaction.errorString);
        transaction.finalize();
    }

    onPurchaseRestored: {
        console.log(identifier + " purchase restored");
        applicationData.vowelsUnlocked = true;
        console.log("timestamp: " + transaction.timestamp);
        transaction.finalize();
        pageStack.pop();
    }
}

Le composant StoreItem affichera les données du produit récupérées depuis la boutique de la plateforme et appellera la méthode purchase() du produit lorsque l’utilisateur cliquera dessus.

Text {
    id: titleText
    text: product.title
    font.bold: true
    anchors.right: priceText.left
    anchors.rightMargin: topLevel.globalMargin
    anchors.top: parent.top
    anchors.topMargin: topLevel.globalMargin
    anchors.left: parent.left
    anchors.leftMargin: topLevel.globalMargin
}

Text {
    id: descriptionText
    text: product.description
    anchors.right: priceText.left
    anchors.rightMargin: topLevel.globalMargin
    anchors.left: parent.left
    anchors.leftMargin: topLevel.globalMargin
    anchors.top: titleText.bottom
    anchors.topMargin: topLevel.globalMargin / 2
    wrapMode: Text.WordWrap
}

Text {
    id: priceText
    text: product.price
    anchors.right: parent.right
    anchors.rightMargin: topLevel.globalMargin
    anchors.verticalCenter: parent.verticalCenter
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        pendingRect.visible = true;
        spinBox.visible = true;
        statusText.text = "Purchasing...";
        storeItem.state = "PURCHASING";
        product.purchase();
    }
    onPressed: {
        storeItem.state = "PRESSED";
    }
    onReleased: {
        storeItem.state = "NORMAL";
    }
}

Android et iOS utilisent les classes de base. À partir de ces classes de base, il existe des classes dérivées pour Android et iOS :

• Démonstration des achats intégrés – classes de base
• Démonstration d’achat intégré à l’application – classes Android
• Démonstration des achats intégrés – classes iOS

Achats intégrés

Les achats intégrés constituent un moyen de monétiser une application. Ces achats s’effectuent depuis l’application elle-même et peuvent aller du déblocage de contenu à l’acquisition d’objets virtuels. La démo utilise les API système dédiées aux achats intégrés, ce qui rend le processus d'achat plus familier pour l'utilisateur et permet d'utiliser les informations déjà enregistrées par la plateforme (telles que les informations de carte bancaire) pour simplifier la procédure d'achat.

Licences et mentions légales

En ce qui concerne le déploiement de la démo sur Android, consultez la page « Licences du runtime GNU C++ pour Android » pour plus d’informations.

Exemple de projet sur code.qt.io