Menerima Pembayaran melalui Layanan Penagihan Google Play dengan Digital Goods API dan Payment Request API

André Cipriani Bandarra

Jika aplikasi Anda didistribusikan melalui Google Play, dan Anda ingin menjual produk digital atau menawarkan langganan, Anda harus menggunakan Layanan Penagihan Google Play. Layanan Penagihan Google Play menawarkan alat untuk mengelola katalog, harga dan langganan, laporan berguna, serta alur checkout yang didukung oleh Toko yang sudah tidak asing bagi pengguna Anda.

Untuk aplikasi yang dibuat menggunakan Aktivitas Web Tepercaya, dan dikirimkan melalui Google Play Store, Anda kini dapat menggunakan Payment Request API dan Digital Barang API untuk diintegrasikan dengan Layanan Penagihan Google Play. Alat ini tersedia di Chrome 101 dan yang lebih baru untuk Android dan ChromeOS.

Dalam panduan ini, Anda akan mempelajari cara menambahkan dukungan Layanan Penagihan Google Play ke PWA dan mengemasnya untuk distribusi di Google Play Store untuk ChromeOS dan Play Store.

Anda akan menggunakan dua API platform web untuk menambahkan dukungan Layanan Penagihan Play ke PWA Anda. Tujuan Digital Products API digunakan untuk mengumpulkan informasi SKU serta memeriksa pembelian dan hak dari Play Store. Payment Request API digunakan untuk mengonfigurasi Google Play Store sebagai metode pembayaran Anda dan untuk menyelesaikan alur pembelian.

Cara memonetisasi aplikasi di Play Store

Ada dua cara permohonan monetisasi dengan Layanan Penagihan Google Play di Play Store:

  • Pembelian dalam aplikasi memungkinkan penjualan item virtual yang tahan lama dan habis pakai, seperti fitur, atau menghapus iklan.
  • Langganan, tawarkan kepada pengguna akses berkelanjutan ke konten atau layanan dengan biaya berulang, seperti langganan atau keanggotaan berita.

Persyaratan

Untuk menyiapkan Layanan Penagihan Google Play, Anda memerlukan:

Memperbarui project Bubblewrap

Jika Anda belum menginstal Bubblewrap, Anda harus menginstalnya. Lihat Panduan Memulai Cepat untuk mengetahui detail tentang cara memulai. Jika Anda sudah memiliki Bubblewrap, buat pastikan untuk memperbarui ke versi 1.8.2 atau yang lebih baru.

Bubblewrap juga memiliki fitur di balik bendera. Di beberapa untuk mengaktifkannya, Anda harus mengubah konfigurasi project di twa-manifest.json, yang terletak di root project dan mengaktifkan alphaDependencies serta playBilling fitur:

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

Setelah file konfigurasi diperbarui, jalankan bubblewrap update untuk menerapkan konfigurasi ke project, diikuti oleh bubblewrap build, untuk membuat paket Android baru dan mengupload paket aplikasi ke Play Store.

Fitur yang mendeteksi ketersediaan Digital Products API dan Layanan Penagihan Google Play

Digital Products API saat ini hanya didukung oleh Chrome ketika PWA dijalankan di dalam Aktivitas Web Tepercaya, dan dapat dideteksi apakah aktivitas tersebut tersedia dengan memeriksa getDigitalGoodsService pada objek window:

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

Digital Products API mungkin tersedia di browser apa pun dan mendukung toko yang berbeda. Untuk memeriksa apakah backend toko tertentu didukung, Anda harus memanggil getDigitalGoodsService() meneruskan ID toko sebagai parameter. Google Play Store diidentifikasi dengan 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;
  }
}

Mengambil detail untuk SKU

Digital Products API menyediakan getDetails(), yang memungkinkan pengambilan informasi seperti judul produk, deskripsi, dan yang paling penting, harga, dari backend pembayaran.

Selanjutnya, Anda dapat menggunakan informasi ini dalam antarmuka penggunaan dan memberikan detail selengkapnya kepada pengguna:

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

Membuat alur pembelian

Konstruktor untuk PaymentRequest memerlukan dua parameter: daftar metode pembayaran dan daftar detail pembayaran.

Saat berada di Aktivitas Web Tepercaya, Anda harus menggunakan metode pembayaran penagihan Google Play, dengan menetapkan https://play.google.com/billing sebagai ID, dan menambahkan SKU produk sebagai anggota data:

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

   ...
}

Meskipun detail pembayaran diperlukan, Layanan Penagihan Play akan mengabaikan nilai tersebut dan menggunakan yang disetel saat membuat SKU di Konsol Play, sehingga dapat diisi dengan nilai palsu:

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

Panggil show() pada objek permintaan pembayaran untuk memulai alur pembayaran. Jika Promise berhasil itu mungkin artinya pembayaran berhasil. Jika gagal, pengguna kemungkinan membatalkan pembayaran.

Jika promise berhasil, Anda harus memverifikasi dan mengonfirmasi pembelian. Untuk melindungi dari penipuan, langkah ini harus diterapkan menggunakan backend Anda. Lihat Dokumentasi Layanan Penagihan Play untuk mempelajari cara menerapkan verifikasi di backend Anda. Jika Anda tidak mengonfirmasi pembelian, setelah tiga hari, pengguna akan menerima pengembalian dana dan Google Play akan mencabut pembelian.

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

Atau, consume() mungkin dipanggil pada purchaseToken untuk menandai pembelian sebagai telah habis dan dapat dibeli lagi.

Jika digabungkan, metode pembeliannya akan terlihat seperti berikut:

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

Memeriksa status pembelian yang ada

Digital Products API memungkinkan Anda memeriksa apakah pengguna memiliki hak yang sudah ada (dalam aplikasi pembelian yang belum dipakai atau langganan berkelanjutan) dari pembelian sebelumnya yang telah dilakukan yang sudah dilakukan, baik di perangkat lain, dari penginstalan sebelumnya, ditukarkan dari kode promo, atau saat terakhir kali mereka membuka aplikasi.


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

Ini juga merupakan waktu yang tepat untuk memeriksa pembelian yang sebelumnya dilakukan tetapi tidak dikonfirmasi. Sebaiknya konfirmasi pembelian sesegera mungkin untuk memastikan hak ditampilkan dengan benar dalam aplikasi Anda.

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

Menguji integrasi Anda

Di perangkat Android Pengembangan

Anda dapat mengaktifkan Digital Barang API di perangkat Android pengembangan untuk pengujian:

  • Pastikan Anda menggunakan Android 9 atau yang lebih baru dan mengaktifkan mode developer.
  • Instal Chrome 101 atau yang lebih baru.
  • Aktifkan tanda berikut di Chrome dengan membuka chrome://flags dan menelusuri tandai berdasarkan nama:
    • #enable-debug-for-store-billing
  • Pastikan situs dihosting menggunakan protokol https. Menggunakan http akan menyebabkan API menjadi undefined

Di perangkat ChromeOS

Digital Products API akan tersedia di ChromeOS versi stabil mulai versi 89. Di kolom Sementara itu, Anda dapat menguji Digital Products API:

  • Instal aplikasi dari Play Store di perangkat.
  • Pastikan situs dihosting menggunakan protokol https. Menggunakan http akan menyebabkan API menjadi undefined

Dengan pengguna uji coba dan tim QA

Play Store menyediakan affordance untuk pengujian, termasuk akun pengujian pengguna dan SKU pengujian. Baca dokumentasi pengujian Layanan Penagihan Google Play untuk informasi selengkapnya.

Apa langkah selanjutnya?

Seperti yang dibahas dalam dokumen ini, Play Billing API memiliki komponen sisi klien, yang dikelola oleh Digital Products API, dan komponen sisi server.