Recevez des paiements via Google Play Billing avec l'API Digital Goods et l'API Payment Request

André Cipriani Bandarra
André Cipriani Bandarra

Si votre application est distribuée via Google Play et que vous souhaitez vendre des produits numériques ou des offres vous devez utiliser Google Play Billing. Google Play Billing offre des outils pour gérer votre catalogue, vos tarifs et abonnements, des rapports utiles et un processus de paiement optimisé par Google Play Un magasin déjà connu de vos utilisateurs.

Pour les applications créées à l'aide d'activités Web fiables et proposées via le Google Play Store, vous devez : peuvent désormais utiliser l'API Payment Request et l'API Digital Goods pour intégrer Google Play Billing. Il est disponible dans Chrome 101 ou version ultérieure pour Android et ChromeOS.

Dans ce guide, vous découvrirez comment ajouter la prise en charge de Google Play Billing à votre PWA et comment la préparer pour sur le Google Play Store pour ChromeOS et le Play Store.

Vous allez utiliser deux API de plate-forme Web pour ajouter la prise en charge de Play Billing à votre PWA. La L'API Digital Goods permet de collecter des informations sur les SKU, et de vérifier les achats et les droits d'accès. sur le Play Store. L'API Payment Request permet de configurer le Google Play Store en tant que mode de paiement et finaliser le parcours d'achat.

Comment monétiser des applications sur le Play Store

Vous pouvez monétiser votre application de deux manières avec Google Play Billing sur le Play Store:

  • Les achats via une application permettent de vendre des biens virtuels durables et consommables, tels que des les fonctionnalités ou la suppression d'annonces.
  • Abonnements : offrez à vos utilisateurs un accès continu à votre contenu ou service moyennant le paiement régulier de frais d'abonnement. comme les abonnements aux actualités ou les adhésions.

Conditions requises

Pour configurer Google Play Billing, vous avez besoin des éléments suivants:

Mettre à jour le projet Bubblewrap

Si Bubblewrap n'est pas installé, vous devez l'installer. Consultez le Consultez le guide de démarrage rapide pour savoir comment vous lancer. Si vous disposez déjà du papier bulle, veillez à passer à la version 1.8.2 ou ultérieure.

Cette fonctionnalité est également accompagnée d'un drapeau. Dans Pour l'activer, vous devez modifier la configuration du projet dans twa-manifest.json. situé à la racine du projet, et activez à la fois alphaDependencies et playBilling fonctionnalité:

  ...,
  "enableNotifications": true,
  "features": {
    "playBilling": {
      "enabled": true
    }
  },
  "alphaDependencies": {
    "enabled": true
  },
  ...

Une fois le fichier de configuration mis à jour, exécutez bubblewrap update pour appliquer la configuration au project, suivi de bubblewrap build, pour générer un nouveau package Android et importer ce sur le Play Store.

Fonctionnalité détectant la disponibilité de l'API Digital Goods et de Google Play Billing

L'API Digital Goods n'est actuellement compatible avec Chrome que lorsque la PWA est exécutée dans un l'activité Web fiable, et il est possible de le détecter en recherchant getDigitalGoodsService sur l'objet window:

if ('getDigitalGoodsService' in window) {
 // Digital Goods API is supported!
}

L'API Digital Goods peut être disponible dans tous les navigateurs et être compatible avec différents magasins. Afin de pour vérifier si un backend de magasin spécifique est pris en charge, vous devez appeler getDigitalGoodsService() transmettant l'ID du magasin en tant que paramètre. Le Google Play Store est identifié par la chaîne https://play.google.com/billing:

if ('getDigitalGoodsService' in window) {
  // Digital Goods API is supported!
  try {
    const service =
        await window.getDigitalGoodsService('https://play.google.com/billing');
    // Google Play Billing is supported!

  } catch (error) {
    // Google Play Billing is not available. Use another payment flow.
    return;
  }
}

Récupérer les détails d'un SKU

L'API Digital Goods fournit getDetails(), qui permet de récupérer des informations telles que le le titre, la description et surtout le prix du produit depuis le backend de paiement.

Vous pouvez ensuite utiliser ces informations dans votre interface pour fournir d'autres détails à l'utilisateur:

const skuDetails = await service.getDetails(['shiny_sword', 'gem']);
for (item of skuDetails) {
  // Format the price according to the user locale.
  const localizedPrice = new Intl.NumberFormat(
      navigator.language,
      {style: 'currency', currency: item.price.currency}
    ).format(item.price.value);

  // Render the price to the UI.
  renderProductDetails(
        item.itemId, item.title, localizedPrice, item.description);
}

Créer le parcours d'achat

Le constructeur d'une PaymentRequest utilise deux paramètres: une liste de modes de paiement et une liste de détails du mode de paiement.

Lorsque vous êtes dans l'activité Web fiable, vous devez utiliser le mode de paiement Google Play Billing en en définissant https://play.google.com/billing comme identifiant et en ajoutant le SKU du produit en tant que Data membre:

async function makePurchase(service, sku) {
   // Define the preferred payment method and item ID
   const paymentMethods = [{
       supportedMethods: "https://play.google.com/billing",
       data: {
           sku: sku,
       }
   }];

   ...
}

Même si les détails du paiement sont obligatoires, Play Billing les ignore et utilise les définies lors de la création du SKU dans la Play Console, afin qu'elles puissent être remplies par des valeurs erronées:

const paymentDetails = {
    total: {
        label: `Total`,
        amount: {currency: `USD`, value: `0`}
    }
};

const request = new PaymentRequest(paymentMethods, paymentDetails);

Appelez show() sur l'objet de requête de paiement pour démarrer le flux de paiement. Si la promesse aboutit indiquant que le paiement a bien été effectué. En cas d'échec, l'utilisateur a probablement annulé le paiement.

Si la promesse aboutit, vous devrez vérifier et confirmer l'achat. Pour vous protéger contre la fraude, vous devez mettre en œuvre cette étape à l'aide de votre backend. Consultez le Documentation Play Billing pour découvrir comment implémenter la validation dans votre backend Si vous ne confirmez pas l'achat, au bout de trois jours, l'utilisateur reçoit un remboursement, et Google Play révoque l'achat.

...
const request = new PaymentRequest(paymentMethods, paymentDetails);
try {
    const paymentResponse = await request.show();
    const {purchaseToken} = paymentResponse.details;

    // Call backend to validate and acknowledge the purchase.
    if (await acknowledgePurchaseOnBackend(purchaseToken, sku)) {
        // Optional: tell the PaymentRequest API the validation was
        // successful. The user-agent may show a "payment successful"
        // message to the user.
        const paymentComplete = await paymentResponse.complete('success');
    } else {
        // Optional: tell the PaymentRequest API the validation failed. The
        // user agent may show a message to the user.
        const paymentComplete = await paymentResponse.complete('fail');
    }
} catch(e) {
    // The purchase failed, and we can handle the failure here. AbortError
    // usually means a user cancellation
}
...

Vous pouvez éventuellement appeler consume() sur un purchaseToken pour marquer l'achat comme utilisé et permettre de l'acheter à nouveau.

En combinant tous ces éléments, la méthode d'achat se présente comme suit:

async function makePurchase(service, sku) {
    // Define the preferred payment method and item ID
    const paymentMethods = [{
        supportedMethods: "https://play.google.com/billing",
        data: {
            sku: sku,
        }
    }];

    // The "total" member of the paymentDetails is required by the Payment
    // Request API, but is not used when using Google Play Billing. We can
    // set it up with bogus details.
    const paymentDetails = {
        total: {
            label: `Total`,
            amount: {currency: `USD`, value: `0`}
        }
    };

    const request = new PaymentRequest(paymentMethods, paymentDetails);
    try {
        const paymentResponse = await request.show();
        const {purchaseToken} = paymentResponse.details;

        // Call backend to validate and acknowledge the purchase.
        if (await acknowledgePurchaseOnBackend(purchaseToken, sku)) {
            // Optional: consume the purchase, allowing the user to purchase
            // the same item again.
            service.consume(purchaseToken);

            // Optional: tell the PaymentRequest API the validation was
            // successful. The user-agent may show a "payment successful"
            // message to the user.
            const paymentComplete =
                    await paymentResponse.complete('success');
        } else {
            // Optional: tell the PaymentRequest API the validation failed.
            // The user agent may show a message to the user.
            const paymentComplete = await paymentResponse.complete('fail');
        }
    } catch(e) {
        // The purchase failed, and we can handle the failure here.
        // AbortError usually means a user cancellation
    }
}

Vérifier l'état des achats existants

L'API Digital Goods vous permet de vérifier si l'utilisateur dispose de droits d'accès (achats qui n'ont pas encore été consommés ou abonnements en cours) à partir d'achats antérieurs que vous avez déjà réalisés, que ce soit sur un autre appareil, lors d'une installation précédente, via un code promotionnel, ou uniquement la dernière fois qu'il a ouvert l'application.


const service =
     await window.getDigitalGoodsService('https://play.google.com/billing');
...
const existingPurchases = await service.listPurchases();
for (const p of existingPurchases) {
    // Update the UI with items the user is already entitled to.
    console.log(`Users has entitlement for ${p.itemId}`);
}

C'est également l'occasion de vérifier les achats qui ont déjà été effectués, mais qui n'ont pas été confirmés. Nous vous recommandons de confirmer les achats dès que possible pour vous assurer droits d'accès sont correctement reflétées dans votre application.

const service =
     await window.getDigitalGoodsService("https://play.google.com/billing");
...
const existingPurchases = await service.listPurchases();
for (const p of existingPurchases) {
    await verifyOrAcknowledgePurchaseOnBackend(p.purchaseToken, p.itemId);

    // Update the UI with items the user is already entitled to.
    console.log(`Users has entitlement for ${p.itemId}`);
}

Tester votre intégration

Sur un appareil Android de développement

Il est possible d'activer l'API Digital Goods sur un appareil Android de développement à des fins de test:

  • Vérifiez que vous utilisez Android 9 ou une version ultérieure et que le mode développeur est activé.
  • Installez Chrome 101 ou une version ultérieure.
  • Activez les indicateurs suivants dans Chrome en accédant à chrome://flags et en recherchant signalez par son nom:
    • #enable-debug-for-store-billing
  • Assurez-vous que le site est hébergé à l'aide d'un protocole HTTPS. Si vous utilisez HTTP, l'API sera undefined.

Sur un appareil ChromeOS

L'API Digital Goods sera disponible sur la version stable de ChromeOS à partir de la version 89. Dans En attendant, vous pouvez tester l'API Digital Goods:

  • Installez votre application sur l'appareil depuis le Play Store.
  • Assurez-vous que le site est hébergé à l'aide d'un protocole HTTPS. Si vous utilisez HTTP, l'API sera undefined.

Avec les utilisateurs tests et les équipes de contrôle qualité

Le Play Store fournit des affordances pour les tests, y compris des comptes de test utilisateur et des SKU de test. Pour en savoir plus, consultez la documentation test Google Play Billing.

Quelle est la prochaine étape ?

Comme indiqué dans ce document, l'API Play Billing comporte des composants côté client, qui sont gérés par l'API Digital Goods et les composants côté serveur.