Ontvang betalingen via Google Play Billing met de Digital Goods API en de Payment Request API

André Cipriani Bandarra

Als uw app via Google Play wordt gedistribueerd en u digitale producten wilt verkopen of abonnementen wilt aanbieden, moet u Google Play Billing gebruiken. Google Play Billing biedt tools voor het beheren van uw catalogus, prijzen en abonnementen, handige rapporten en een betaalproces dat wordt aangestuurd door de Play Store en dat uw gebruikers al kennen.

Voor apps die zijn gebouwd met Trusted Web Activities en worden geleverd via de Google Play Store, kunt u nu de Payment Request API en de Digital Goods API gebruiken om te integreren met Google Play Billing. Deze zijn beschikbaar in Chrome 101 en hoger voor Android en ChromeOS.

In deze handleiding leert u hoe u ondersteuning voor Google Play-facturering aan uw PWA toevoegt en deze verpakt voor distributie via de Google Play Store voor zowel ChromeOS als Play Store.

Je gebruikt twee webplatform-API's om Play Billing-ondersteuning aan je PWA toe te voegen. De Digital Goods API wordt gebruikt om SKU-informatie te verzamelen en aankopen en rechten in de Play Store te controleren. De Payment Request API wordt gebruikt om de Google Play Store als betaalmethode te configureren en het aankoopproces te voltooien.

Hoe u geld kunt verdienen met apps in de Play Store

Er zijn twee manieren waarop uw applicatie inkomsten kan genereren met Google Play Billing in de Play Store:

  • Met in-app aankopen kunt u zowel duurzame als verbruiksartikelen voor virtuele producten verkopen, bijvoorbeeld met extra functies, of advertenties verwijderen.
  • Met abonnementen biedt u uw gebruikers tegen een terugkerende vergoeding doorlopende toegang tot content of diensten, zoals nieuwsabonnementen of lidmaatschappen.

Vereisten

Om Google Play-facturering in te stellen, hebt u het volgende nodig:

Werk het Bubblewrap-project bij

Als je Bubblewrap nog niet hebt geïnstalleerd, moet je het installeren. Raadpleeg de snelstartgids voor meer informatie over hoe je aan de slag kunt. Als je Bubblewrap al hebt, zorg er dan voor dat je updatet naar versie 1.8.2 of hoger.

Bubblewrap heeft ook deze functie achter een vlag. Om deze te activeren, moet je de projectconfiguratie in twa-manifest.json (in de root van het project) aanpassen en zowel alphaDependencies als playBilling inschakelen:

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

Wanneer het configuratiebestand is bijgewerkt, voert u bubblewrap update uit om de configuratie op het project toe te passen, gevolgd door bubblewrap build om een ​​nieuw Android-pakket te genereren en dit pakket te uploaden naar de Play Store.

Functie voor het detecteren van de Digital Goods API en de beschikbaarheid van Google Play Billing

De Digital Goods API wordt momenteel alleen ondersteund door Chrome wanneer de PWA wordt uitgevoerd in een vertrouwde webactiviteit. U kunt controleren of de API beschikbaar is door te zoeken naar getDigitalGoodsService in het window :

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

De Digital Goods API is mogelijk beschikbaar in elke browser en ondersteunt verschillende winkels. Om te controleren of een specifieke winkelbackend wordt ondersteund, moet u getDigitalGoodsService() aanroepen en de winkel-ID als parameter doorgeven. De Google Play Store wordt geïdentificeerd door de tekenreeks 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;
  }
}

Details voor een SKU ophalen

De Digital Goods API biedt getDetails() waarmee informatie zoals de producttitel, beschrijving en, nog belangrijker, de prijs uit de betalingsbackend kan worden opgehaald.

U kunt deze informatie vervolgens in uw gebruikersinterface gebruiken en de gebruiker meer details verstrekken:

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);
}

Bouw de aankoopstroom

De constructor voor een PaymentRequest accepteert twee parameters: een lijst met betaalmethoden en een lijst met betalingsgegevens.

Wanneer u zich in de vertrouwde webactiviteit bevindt, moet u de betaalmethode voor facturering via Google Play gebruiken door https://play.google.com/billing in te stellen als identificatie en de product-SKU toe te voegen als een gegevenslid:

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

   ...
}

Ook al zijn de betalingsgegevens vereist, negeert Play Billing deze waarden en worden de waarden gebruikt die zijn ingesteld bij het aanmaken van de SKU in de Play Console. Hierdoor kunnen deze worden gevuld met valse waarden:

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

Roep show() aan op het betalingsverzoekobject om de betalingsstroom te starten. Als de Promise slaagt, is de betaling mogelijk geslaagd. Als de Promise mislukt, heeft de gebruiker de betaling waarschijnlijk afgebroken.

Als de belofte slaagt, moet u de aankoop verifiëren en bevestigen. Om fraude te voorkomen, moet deze stap via uw backend worden geïmplementeerd. Raadpleeg de Play Billing-documentatie voor meer informatie over het implementeren van de verificatie in uw backend . Als u de aankoop niet bevestigt, ontvangt de gebruiker na drie dagen een terugbetaling en wordt de aankoop door Google Play ingetrokken .

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

Optioneel kan consume() worden aangeroepen op een purchaseToken om de aankoop als gebruikt te markeren, zodat deze opnieuw kan worden gekocht.

Als we alles bij elkaar optellen, ziet een aankoopmethode er als volgt uit:

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

Controleer de status van bestaande aankopen

Met de Digital Goods API kunt u controleren of de gebruiker bestaande rechten heeft (in-app aankopen die nog niet zijn gebruikt of lopende abonnementen) van eerdere aankopen die ze al hebben gedaan, ongeacht of dit op een ander apparaat is gedaan, via een eerdere installatie, via een promotiecode of alleen de laatste keer dat ze de app hebben geopend.


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}`);
}

Dit is ook een goed moment om te controleren op aankopen die eerder zijn gedaan, maar niet zijn bevestigd. Het is raadzaam om aankopen zo snel mogelijk te bevestigen om ervoor te zorgen dat de rechten van uw gebruikers correct worden weergegeven in uw app. 

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}`);
}

Test uw integratie

Op een Android-ontwikkelingsapparaat

Het is mogelijk om de Digital Goods API op een Android-ontwikkelingsapparaat in te schakelen voor testen:

  • Zorg ervoor dat u Android 9 of hoger gebruikt en dat de ontwikkelaarsmodus is ingeschakeld .
  • Installeer Chrome 101 of nieuwer.
  • Schakel de volgende vlaggen in Chrome in door naar chrome://flags te gaan en op naam naar de vlag te zoeken:
    • #enable-debug-for-store-billing
  • Zorg ervoor dat de site wordt gehost met een https-protocol. Het gebruik van http zorgt ervoor dat de API undefined is.

Op een ChromeOS-apparaat

De Digital Goods API is beschikbaar op ChromeOS stable vanaf versie 89. In de tussentijd is het mogelijk om de Digital Goods API te testen:

  • Installeer uw app vanuit de Play Store op het apparaat.
  • Zorg ervoor dat de site wordt gehost met een https-protocol. Het gebruik van http zorgt ervoor dat de API undefined is.

Met testgebruikers en QA-teams

De Play Store biedt mogelijkheden voor testen, waaronder gebruikersaccounts en test-SKU's. Raadpleeg de testdocumentatie voor Google Play Billing voor meer informatie.

Waarheen nu?

Zoals in dit document wordt besproken, heeft de Play Billing API client-side componenten, die worden beheerd door de Digital Goods API, en server-side componenten.