Zahlungen über Google Play Billing mit der Digital Goods API und der Payment Request API erhalten

André Cipriani Bandarra

Wenn Ihre App über Google Play vertrieben wird und Sie digitale Waren verkaufen oder digitale Angebote müssen Sie Google Play Billing verwenden. Google Play Billing bietet Tools zum Verwalten Katalog, Preise und Abos, nützliche Berichte und einen Bezahlvorgang mit Google Play Speicher, der den Nutzern bereits vertraut ist.

Bei Apps, die mithilfe von vertrauenswürdigen Web-Aktivitäten erstellt und über den Google Play Store bereitgestellt wurden, gilt Folgendes: können jetzt die Payment Request API und die Digital Goods API für die Integration in Google Play Billing Sie ist ab Chrome 101 für Android und ChromeOS verfügbar.

In diesem Leitfaden erfahren Sie, wie Sie Ihrer PWA Google Play Billing-Support hinzufügen und für das Paket packen. im Google Play Store für ChromeOS und den Play Store bereitgestellt.

Du verwendest zwei Webplattform-APIs, um deiner PWA die Play Billing-Unterstützung hinzuzufügen. Die Mit der Digital Goods API werden Artikelnummerninformationen erfasst und auf Käufe und Berechtigungen geprüft. aus dem Play Store. Mit der Payment Request API wird der Google Play Store als Zahlungsmethode und um den Kaufvorgang abzuschließen.

Apps im Play Store monetarisieren

Es gibt zwei Möglichkeiten, mit Ihrer App über Google Play Billing im Play Store Einnahmen zu erzielen:

  • In-App-Käufe ermöglichen den Verkauf von langlebigen und kurzfristig nutzbaren virtuellen Waren wie zusätzliche oder das Entfernen von Anzeigen.
  • Abos bieten Ihren Nutzern gegen eine wiederkehrende Gebühr dauerhaften Zugriff auf Inhalte oder Dienste, wie Nachrichtenabos oder Mitgliedschaften.

Voraussetzungen

Für die Einrichtung von Google Play Billing benötigen Sie Folgendes:

Bubblewrap-Projekt aktualisieren

Wenn Sie Bubblewrap noch nicht installiert haben, müssen Sie es installieren. Weitere Informationen finden Sie in der Kurzanleitung für weitere Informationen Wenn Sie Bubblewrap bereits haben, auf Version 1.8.2 oder höher aktualisieren.

Bei Bubblewrap befindet sich auch die Funktion hinter einer Flagge. In Um sie zu aktivieren, müssen Sie die Projektkonfiguration in twa-manifest.json ändern, im Stammverzeichnis des Projekts und aktivieren sowohl alphaDependencies als auch playBilling Funktion:

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

Nachdem die Konfigurationsdatei aktualisiert wurde, führen Sie bubblewrap update aus, um die Konfiguration auf die Projekt, gefolgt von bubblewrap build, um ein neues Android-Paket zu generieren und hochzuladen. an den Play Store zu senden.

Funktion zur Erkennung der Digital Goods API und der Verfügbarkeit von Google Play Billing

Die Digital Goods API wird derzeit nur von Chrome unterstützt, wenn die PWA in einem eine vertrauenswürdige Webaktivität. Sie können feststellen, ob sie verfügbar ist, indem Sie getDigitalGoodsService für das window-Objekt:

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

Die Digital Goods API ist möglicherweise in jedem Browser verfügbar und unterstützt unterschiedliche Stores. Um um zu prüfen, ob ein bestimmtes Store-Backend unterstützt wird, müssen Sie getDigitalGoodsService() übergibt die Händler-ID als Parameter. Der Google Play Store ist durch den 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 zu einer Artikelnummer abrufen

Die Digital Goods API stellt getDetails() bereit, mit dem Informationen wie das den Produkttitel, die Beschreibung und, vor allem der Preis, aus dem Zahlungs-Backend.

Sie können diese Informationen dann in Ihrer Benutzeroberfläche verwenden und dem Nutzer weitere Details zur Verfügung stellen:

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

Kaufprozess gestalten

Der Konstruktor für eine PaymentRequest verwendet zwei Parameter: eine Liste mit Zahlungsmethoden und eine Liste mit Zahlungsdetails.

In der Trusted Web-Aktivität müssen Sie die Google Play Billing-Zahlungsmethode verwenden. Dazu müssen Sie Sie legen https://play.google.com/billing als Kennung fest und fügen die Artikelnummer Datenmitglied:

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

   ...
}

Obwohl die Zahlungsdetails erforderlich sind, ignoriert Play Billing diese Werte und verwendet die werden beim Erstellen der Artikelnummer in der Play Console festgelegt, damit sie mit falschen Werten gefüllt werden können:

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

Rufe show() im Zahlungsanforderungsobjekt auf, um den Zahlungsablauf zu starten. Wenn das Promise erfolgreich ist die möglicherweise erfolgreich war. Wenn die Zahlung fehlschlägt, hat der Nutzer die Zahlung wahrscheinlich abgebrochen.

Wenn das Promise erfolgreich ist, musst du den Kauf bestätigen und bestätigen. Zum Schutz vor Betrug muss dieser Schritt über Ihr Backend implementiert werden. In der In der Play Billing-Dokumentation erfährst du, wie du die Bestätigung in deinem Backend implementierst. Wenn Sie den Kauf nicht bestätigen, nach drei Tagen erhält der Nutzer eine Erstattung und Google Play widerruft den Kauf.

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

Optional kann consume() für ein purchaseToken aufgerufen werden, um den Kauf als aufgebraucht zu kennzeichnen und kann es erneut gekauft werden.

Zusammengenommen sieht eine Kaufmethode so aus:

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

Status bestehender Käufe prüfen

Mit der Digital Goods API kannst du prüfen, ob der Nutzer bereits Berechtigungen hat (In-App- noch nicht verbrauchte Käufe oder laufende Abos) aus früheren Käufen, die der Nutzer bereits getätigt hat bereits erfolgte, sei es auf einem anderen Gerät, durch eine vorherige Installation, mit einem Gutscheincode eingelöst oder als sie die App das letzte Mal geöffnet haben.


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

Dies ist auch ein guter Zeitpunkt, um Käufe zu überprüfen, die bereits getätigt, aber nicht bestätigt wurden. Es wird empfohlen, Käufe so schnell wie möglich zu bestätigen, damit die Berechtigungen in Ihrer App korrekt wiedergegeben werden.

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

Integration testen

Auf einem Entwicklungs-Android-Gerät

Es ist möglich, die Digital Goods API auf einem Android-Entwicklergerät zum Testen zu aktivieren:

  • Achten Sie darauf, dass Sie Android 9 oder höher mit aktiviertem Entwicklermodus verwenden.
  • Installieren Sie Chrome 101 oder höher.
  • Aktiviere die folgenden Flags in Chrome, indem du chrome://flags aufrufst und nach dem nach Name melden: <ph type="x-smartling-placeholder">
      </ph>
    • #enable-debug-for-store-billing
  • Stellen Sie sicher, dass die Website mit einem HTTPS-Protokoll gehostet wird. Wenn Sie HTTP verwenden, ist die API undefined

Auf einem ChromeOS-Gerät

Die Digital Goods API ist ab Version 89 unter ChromeOS (stabile Version) verfügbar. Im In der Zwischenzeit können Sie die Digital Goods API testen:

  • Installiere deine App aus dem Play Store auf dem Gerät.
  • Stellen Sie sicher, dass die Website mit einem HTTPS-Protokoll gehostet wird. Wenn Sie HTTP verwenden, ist die API undefined

Mit Testnutzern und QA-Teams

Der Play Store bietet Angebote für Tests, einschließlich Nutzertestkonten und Test-Artikelnummern. Weitere Informationen finden Sie in der Dokumentation zum Google Play Billing-Test.

Wie geht es weiter?

Wie in diesem Dokument erläutert, verfügt die Play Billing API über clientseitige Komponenten, die vom Nutzer selbst verwaltet werden. durch die Digital Goods API und serverseitige Komponenten.