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

Als uw app wordt gedistribueerd via Google Play en u digitale goederen 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, nuttige rapporten en een betaalstroom mogelijk gemaakt door de Play Store die al bekend is bij uw gebruikers.

Voor apps die zijn gebouwd met Trusted Web Activity en 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. Het is beschikbaar in Chrome 101 en hoger voor Android en ChromeOS.

In deze handleiding leert u hoe u Google Play Billing-ondersteuning aan uw PWA kunt toevoegen en deze kunt verpakken voor distributie in de Google Play Store voor zowel ChromeOS als Play Store.

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

Hoe u inkomsten kunt genereren met applicaties 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 kunnen zowel duurzame als verbruikbare virtuele goederen worden verkocht, zoals extra functies, of kunnen advertenties worden verwijderd.
  • Abonnementen bieden uw gebruikers doorlopende toegang tot inhoud of services tegen een terugkerend bedrag, zoals nieuwsabonnementen of lidmaatschappen.

Vereisten

Om Google Play Billing in te stellen, heeft u het volgende nodig:

Update het Bubblewrap-project

Als Bubblewrap niet is geïnstalleerd, moet u dit installeren. Zie de Snelstartgids voor meer informatie over hoe u aan de slag kunt gaan. Als je Bubblewrap al hebt, zorg dan dat je updatet naar versie 1.8.2 of hoger.

Bubblewrap heeft ook de functie achter een vlag. Om dit in te schakelen, moet u de projectconfiguratie in de twa-manifest.json wijzigen, die zich in de hoofdmap van het project bevindt, en zowel alphaDependencies als de playBilling functie inschakelen:

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

Terwijl 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 naar de Play Store te uploaden.

Functie die de Digital Goods API en de beschikbaarheid van Google Play Billing detecteert

De Digital Goods API wordt momenteel alleen ondersteund door Chrome wanneer de PWA wordt uitgevoerd binnen een vertrouwde webactiviteit, en het is mogelijk om te detecteren of deze beschikbaar is door te controleren op getDigitalGoodsService in het window :

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

De Digital Goods API is mogelijk in elke browser beschikbaar en ondersteunt verschillende winkels. Om te controleren of een bepaalde winkel-backend wordt ondersteund, moet u getDigitalGoodsService() aanroepen en de winkel-ID als parameter doorgeven. De Google Play Store wordt geïdentificeerd door de string 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 u informatie zoals de producttitel, beschrijving en vooral de prijs kunt ophalen uit de betalingsbackend.

U kunt deze informatie vervolgens in uw gebruiksinterface gebruiken en meer details aan de gebruiker 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 op

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

Wanneer u zich binnen de vertrouwde webactiviteit bevindt, moet u de betaalmethode Google Play voor facturering gebruiken, door https://play.google.com/billing in te stellen als identificatie en de product-SKU toe te voegen als 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,
       }
   }];

   ...
}

Hoewel de betalingsgegevens vereist zijn, negeert Play Billing deze waarden en gebruikt het de waarden die zijn ingesteld bij het maken van de SKU in de Play Console, zodat deze kunnen worden gevuld met valse waarden:

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

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

Als de belofte slaagt, moet u de aankoop verifiëren en bevestigen. Om u tegen fraude te beschermen, moet deze stap via uw backend worden geïmplementeerd. Bekijk de Play Billing-documentatie om te leren hoe u de verificatie in uw backend implementeert . Als u de aankoop niet bevestigt, ontvangt de gebruiker na drie dagen een terugbetaling en zal Google Play de aankoop intrekken .

...
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 opgebruikt te markeren en toe te staan ​​dat deze opnieuw wordt gekocht.

Alles bij elkaar opgeteld 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 hij al heeft gedaan, op een ander apparaat, van een eerder installeren, ingewisseld via een promotiecode, of gewoon 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 wordt aanbevolen om aankopen zo snel mogelijk te bevestigen om ervoor te zorgen dat de rechten van uw gebruikers correct worden weerspiegeld 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 om te 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 navigeren en op naam naar de vlag te zoeken:
    • #enable-debug-for-store-billing
  • Zorg ervoor dat de site wordt gehost met behulp van een https-protocol. Als u http gebruikt, is de API undefined

Op een ChromeOS-apparaat

De Digital Goods API zal beschikbaar zijn 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 behulp van een https-protocol. Als u http gebruikt, is de API undefined

Met testgebruikers en QA-teams

De Play Store biedt mogelijkheden voor testen, inclusief gebruikerstestaccounts en test-SKU's. Bekijk de Google Play Billing-testdocumentatie voor meer informatie.

Waar moet je heen?

Zoals besproken in dit document heeft de Play Billing API componenten aan de clientzijde, die worden beheerd door de Digital Goods API, en componenten aan de serverzijde.