Otrzymuj płatności za pomocą Płatności w Google Play oraz korzystaj z interfejsów Digital Goods API i Payment Request API

André Cipriani Bandarra

Jeśli Twoja aplikacja jest rozpowszechniana w Google Play i chcesz sprzedawać produkty cyfrowe lub oferować wymaga korzystania z Płatności w Google Play. Płatności w Google Play oferują narzędzia do zarządzania katalogu, cen i subskrypcji, przydatnych raportów oraz procesu płatności w Google Play Sklep, który jest już znany Twoim użytkownikom.

W przypadku aplikacji utworzonych w ramach zaufanej aktywności internetowej i dostarczanych ze Sklepu Google Play: może teraz korzystać z interfejsów Payment Request API oraz Digital Goods API do integracji z Płatności w Google Play. Jest dostępna w Chrome 101 i nowszych wersjach na Androida i ChromeOS.

Z tego przewodnika dowiesz się, jak dodać obsługę Płatności w Google Play do aplikacji PWA i dodać ją w pakiecie. dystrybucji w Sklepie Google Play zarówno w ChromeOS, jak i w Sklepie Play.

Aby dodać obsługę Płatności w Play do aplikacji PWA, użyj 2 interfejsów API platformy internetowej. Digital Goods API służy do zbierania informacji o kodach SKU oraz sprawdzania zakupów i uprawnień w Sklepie Play. Interfejs Payment Request API służy do konfigurowania Sklepu Google Play jako formę płatności i sfinalizowania zakupu.

Jak zarabiać na aplikacjach w Sklepie Play

Możesz zarabiać na swojej aplikacji za pomocą Płatności w Google Play w Sklepie Play na 2 sposoby:

  • Zakupy w aplikacji umożliwiają sprzedaż zarówno trwałych, jak i zużywanych towarów wirtualnych, takich jak dodatkowe funkcje aplikacji lub usunięcie reklam.
  • subskrypcje – oferowanie użytkownikom stałego dostępu do treści lub usług za cykliczną opłatę. takich jak subskrypcje wiadomości lub wspieranie kanału.
.

Wymagania

Aby skonfigurować Płatności w Google Play, potrzebujesz:

Aktualizowanie projektu Bubblewrap

Jeśli nie masz zainstalowanej aplikacji Bubblewrap, musisz ją zainstalować. Zobacz Krótki przewodnik, w którym znajdziesz szczegółowe informacje o tym, jak zacząć korzystać z tej usługi. Jeśli masz już folię bąbelkową, należy zaktualizować system do wersji 1.8.2 lub nowszej.

Folia bąbelkowa ma również funkcję flagi. W Aby go włączyć, musisz zmodyfikować konfigurację projektu w: twa-manifest.json, znajduje się w katalogu głównym projektu i włącza zarówno alphaDependencies, jak i playBilling cecha:

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

Po zaktualizowaniu pliku konfiguracji uruchom polecenie bubblewrap update, aby zastosować konfigurację do projektu, a po nim bubblewrap build, aby wygenerować nowy pakiet na Androida i przesłać ten do Sklepu Play.

Funkcja wykrywania dostępności interfejsu Digital Goods API i Płatności w Google Play

Interfejs Digital Goods API jest obecnie obsługiwany tylko przez Chrome tylko wtedy, gdy progresywna aplikacja internetowa jest wykonywana w aplikacji zaufaną aktywność w internecie i możesz określić, czy jest dostępna, getDigitalGoodsService w obiekcie window:

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

Interfejs Digital Goods API może być dostępny w dowolnej przeglądarce i obsługiwać różne sklepy. Aby sprawdź, czy dany backend jest obsługiwany, musisz wywołać getDigitalGoodsService() przekazuje identyfikator sklepu jako parametr. Zidentyfikowano Sklep Google Play ciągiem 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;
  }
}

Pobieranie szczegółów kodu SKU

Interfejs API towarów cyfrowych udostępnia funkcję getDetails(), która umożliwia pobieranie informacji takich jak nazwę i opis produktu oraz, co najważniejsze, cenę z systemu płatności.

Następnie możesz użyć tych informacji w interfejsie, aby podać użytkownikowi więcej szczegółów:

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

Tworzenie procesu zakupu

Konstruktor dla PaymentRequest ma dwa parametry: listę form płatności i listę dane do płatności.

W ramach Zaufanej aktywności w internecie musisz używać formy płatności w Google Play. ustawiając https://play.google.com/billing jako identyfikator i dodając kod SKU produktu jako użytkownik danych:

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

   ...
}

Mimo że dane do płatności są wymagane, Płatności w Play je zignorują i będą używać metody ustawiane podczas tworzenia kodu SKU w Konsoli Play tak, aby można było je wypełnić błędnymi wartościami:

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

Aby rozpocząć przepływ płatności, wywołaj show() w obiekcie żądania płatności. Jeśli obietnica się powiedzie być może uda się zrealizować płatność. Jeśli płatność się nie uda, użytkownik prawdopodobnie przerwał płatność.

Jeśli obietnica zostanie zrealizowana, musisz potwierdzić i potwierdzić zakup. Aby chronić się przed oszustwami, musisz wykonać ten krok z wykorzystaniem Twojego backendu. Zobacz Dokumentacja Płatności w Play wyjaśniająca, jak wdrożyć weryfikację w backendzie. Jeśli nie potwierdzisz zakupu, Po 3 dniach użytkownik otrzyma zwrot środków, a Google Play anuluje zakup.

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

Opcjonalnie obiekt consume() może być wywoływany dla purchaseToken, aby oznaczyć zakup jako wykorzystany. że będzie można go kupić.

Po zastosowaniu wszystkich elementów metoda zakupu wygląda tak:

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

Sprawdzanie stanu dotychczasowych zakupów

Interfejs Digital Goods API pozwala sprawdzić, czy użytkownik ma jakiekolwiek uprawnienia (w aplikacji niewykorzystane jeszcze zakupy lub trwające subskrypcje) z wcześniejszych zakupów. zrobionych na innym urządzeniu, w ramach wcześniejszej instalacji, wykorzystanej przy użyciu kodu promocyjnego lub podczas ostatniego uruchomienia aplikacji.


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

To także dobry moment na sprawdzenie, czy nie ma informacji o dotychczasowych zakupach, które nie zostały potwierdzone. Zalecamy jak najszybsze potwierdzenie zakupów, aby użytkownicy mogli uprawnienia są prawidłowo odzwierciedlone w aplikacji.

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

Testowanie integracji

Na deweloperskim urządzeniu z Androidem

Interfejs Digital Goods API można włączyć na urządzeniu z Androidem, na którym tworzysz:

  • Upewnij się, że używasz Androida w wersji 9 lub nowszej z włączonym trybem programisty.
  • Zainstaluj Chrome 101 lub nowszą wersję.
  • Włącz te flagi w Chrome, otwierając chrome://flags i wyszukując flaga po nazwie:
    • #enable-debug-for-store-billing
  • Upewnij się, że witryna jest hostowana przy użyciu protokołu https. Użycie protokołu http spowoduje, że interfejs API zmieni się na undefined
.

Na urządzeniu z ChromeOS

Interfejs Digital Goods API będzie dostępny w stabilnej wersji ChromeOS od wersji 89. W w międzyczasie możesz przetestować interfejs Digital Goods API:

  • Zainstaluj aplikację ze Sklepu Play na urządzeniu.
  • Upewnij się, że witryna jest hostowana przy użyciu protokołu https. Użycie protokołu http spowoduje, że interfejs API zmieni się na undefined

Użytkownikom testowym i zespołom kontroli jakości

W Sklepie Play dostępne są opcje testowania, w tym konta testowe użytkowników i testowe kody SKU. Więcej informacji znajdziesz w dokumentacji dotyczącej testów płatności w Google Play.

Co dalej?

Jak wspomnieliśmy w tym dokumencie, interfejs Play Billing API zawiera komponenty po stronie klienta, które są zarządzane przy użyciu interfejsu Digital Goods API i komponentów po stronie serwera.