Lebih lanjut ke konten utama
Panduan

Belanja dalam Aplikasi untuk capacitor

Cara Menerapkan Belanja dalam Aplikasi untuk Aplikasi capacitor Menggunakan Plugin Pembelian Capacitor dan RevenueCat

Kredit Artikel

Martin Donadieu

Pengarang

Valeria

Pengulas

Jordan

Pengedit

Belanja dalam Aplikasi untuk capacitor

Plugin ini telah dipindahkan ke repository resmi RevenueCat. Silakan lihat dokumentasi resmi untuk informasi lebih lanjut.

Jika Anda lebih suka menggunakan native API yang lebih sederhana tanpa RevenueCat, @capgo/native-purchases mengimplementasikan pembelian dalam aplikasi dan langganan secara langsung dengan StoreKit dan Google Play Billing.

Capacitor Purchases is a plugin for the Capacitor framework that allows in-app purchases on iOS and Android. It provides a simple and consistent API across multiple platforms, making it easy for developers to implement in-app subscriptions and purchases in their mobile apps.

One of the key features of the Capacitor Purchases plugin is that it integrates with RevenueCat, a platform that provides tools for in-app subscriptions and in-app purchases. RevenueCat simplifies the process of implementing in-app subscriptions and purchases by providing a simple and consistent API across multiple platforms, and automating tasks such as receipt validation and user management.

Dengan RevenueCat, pengembang dapat dengan mudah mengelola langganan, melacak pendapatan, dan melakukan tugas terkait lainnya. Beberapa fitur yang ditawarkan oleh RevenueCat termasuk:

  • Pengaturan otomatis bukti pembayaran
  • Pengelolaan pengguna
  • Dukungan untuk model harga kustom
  • Analisis rinci -Skalaibilitas

Dengan menggunakan plugin Pembelian dalam Aplikasi Capacitor bersama dengan RevenueCat, pengembang dapat menghemat waktu dan upaya ketika menerapkan langganan dan pembelian dalam aplikasi mobile mereka, serta menyediakan fitur tambahan yang dapat membantu meningkatkan pengalaman pengguna dan meningkatkan pendapatan.

Menggunakan plugin Pembelian dalam Aplikasi Capacitor dan RevenueCat, pengembang dapat dengan mudah mengelola dan melacak langganan dan pembelian dalam aplikasi, memvalidasi bukti pembayaran, serta mengelola pengguna di berbagai platform. Ini juga memungkinkan membuat model harga kustom dan mendapatkan analisis rinci untuk meningkatkan kinerja dan pendapatan.

Pemasangan

Pastikan untuk menggunakan versi terbaru dari Capacitor dan plugin Pembelian dalam Aplikasi Capacitor. Anda dapat memeriksa versi terbaru dari Capacitor dan plugin Pembelian dalam Aplikasi Capacitor di situs web Capacitor.

Untuk menginstal plugin Pembelian dalam Aplikasi Capacitor, jalankan perintah berikut: npm i @capgo/capacitor-purchases Tambahkan plugin ke native code Anda npx cap sync

Tambahkan kemampuan pembelian dalam aplikasi di Xcode:

Langkah Xcode 1 Lalu Langkah Xcode 2

1. Buatlah Akun RevenueCat

Petunjuk ini akan membantu Anda untuk memulai dengan langganan dan SDK RevenueCat dengan hanya beberapa baris kode code.

Pendaftaran baru untuk RevenueCat di sini.

📘

💡 Tips ini!

Rekomendasi RevenueCat

Untuk meningkatkan proses transfer, kami sarankan Anda membuat akun RevenueCat terpisah untuk setiap aplikasi / proyek Anda, terutama jika Anda berencana untuk menjual aplikasi tersebut. Ini akan mempercepat proses transfer, karena Anda dapat mentransfer akun secara keseluruhan daripada menunggu dukungan RevenueCat untuk mentransfer proyek individu.

Organisasi / Bisnis Kami merekomendasikan menggunakan akun perusahaan ketika mendaftar untuk RevenueCat dan mengatur aplikasi Anda dalam proyek. Anda akan dapat mengundang tim Anda lainnya sebagai kolaborator ke proyek Anda, tetapi hanya pemilik proyek yang dapat mengelola tagihan.

Proyek dan Pengaturan Aplikasi

Membuat Proyek

Navigasikan ke dashboard RevenueCat dan Tambahkan proyek baru melalui menu navigasi atas yang disebut Proyek.

context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman contributing.astro. Kunci pesan `projects` (Proyek).

Langkah RevenueCat 1

Modal popup untuk membuat proyek baru

Membuat Aplikasi / Platform Dari Pengaturan Proyek > Aplikasi

dalam menu kiri dashboard proyek, pilih platform untuk aplikasi yang akan ditambahkan.

DASHBOARD PROYEK UNTUK MEMILIH PLATFORM APLIKASI

KOLOM Nama Aplikasi harus diisi untuk menambahkan aplikasi ke RevenueCat. Bagian konfigurasi lainnya dapat ditambahkan kemudian. Untuk membuat pembelian uji coba dan produksi, ID Paket (iOS) / Nama Paket (Android) serta Rahasia Bersama (iOS) / Kredensial Layanan (Android) harus dikonfigurasi.

Langkah 3 RevenueCat

HALAMAN KONFIGURASI APLIKASI UNTUK APLIKASI APP STORE APPLE

📘

💡 TIPS!

Setelah mendaftar aplikasi, RevenueCat merekomendasikan mengatur Pemberitahuan Server Platform. Pemberitahuan ini tidak wajib, tetapi akan mempercepat webhooks dan pengiriman integrasi serta mengurangi waktu tunggu untuk memperbarui pelanggan.

📘

Staging vs. Aplikasi Produksi dan Pengguna

RevenueCat sendiri tidak memiliki lingkungan terpisah untuk staging dan produksi. Sebaliknya, transaksi dasar untuk pengguna dipisahkan oleh sandbox dan produksi.

Aplikasi RevenueCat apa pun dapat membuat pembelian sandbox dan produksi dari toko. Jika Anda memiliki aplikasi terpisah untuk staging dan produksi, Anda dapat membuat proyek yang berbeda di RevenueCat untuk menggambarkan konfigurasi Anda.

Selain itu, pengguna tidak dipisahkan oleh lingkungan, baik. Pengguna yang sama dapat memiliki pembelian aktif sandbox dan pembelian aktif produksi pada saat yang sama.

▶️ Kredensial Layanan

Kredensial layanan harus disetel untuk memungkinkan RevenueCat berkomunikasi dengan toko aplikasi atas nama Anda. Lihat panduan RevenueCat Kunci Rahasia App Store Connect, Kredensial Layanan Play, dan Kunci Rahasia Amazon Appstore untuk informasi lebih lanjut.

Penting untuk diingat bahwa kredensial layanan play dapat memakan waktu hingga 36 jam untuk menyebarluaskan ke server Google.

1. Konfigurasi Produk

2. Pengaturan Toko

Sebelum Anda dapat menggunakan RevenueCat untuk mengambil produk, Anda harus mengonfigurasi produk Anda di toko masing-masing. Lihatlah panduan berikut untuk App Store Connect, Google Play Console, Amazon Appstore, dan Stripe untuk bantuan untuk menavigasi melalui proses ini.

Jika Anda menjual produk iOS, pastikan Anda menandatangani 'Perjanjian Aplikasi Berbayar' dan isi informasi bank dan pajak Anda di App Store Connect > Perjanjian, Pajak, dan Perbankan. Ini harus diselesaikan sebelum Anda dapat menguji pembelian apa pun.

📘

Mau melewati pengaturan toko saat tes?

Pada iOS, Anda dapat menunda pengaturan produk di App Store Connect dengan melakukan tes menggunakan file konfigurasi StoreKit. File konfigurasi ini memerlukan pengaturan minimal dan dapat diatur melalui Xcode secara langsung.

Baca lebih lanjut tentang pengaturan file konfigurasi StoreKit di RevenueCat Pengujian Sandbox Petunjuk.

▶️ Konfigurasi Produk dan Hak Akses di RevenueCat

Setelah produk in-app Anda telah dikonfigurasi di Toko App Store, Google Play Console, Amazon Appstore, atau StripeUntuk menggunakan fitur ini, Anda perlu menyalin konfigurasi tersebut ke dashboard RevenueCat. RevenueCat menggunakan sistem Entitlements untuk mengontrol akses ke fitur premium dan Offerings untuk mengelola produk yang ditawarkan kepada pelanggan.

Entitlements adalah tingkat akses yang dimiliki oleh pelanggan setelah membeli produk tertentu. Offerings adalah cara sederhana untuk mengorganisir produk dalam-app yang ingin Anda tawarkan di paywall dan mengkonfigurasinya secara remote. RevenueCat utilizing these features to simplify your code and enable you to change products without releasing an app update.

menggunakan fitur ini untuk memudahkan proses Anda dan memungkinkan Anda untuk mengubah produk tanpa harus mengeluarkan update aplikasi. Lihat Mengatur Produk

untuk mengatur produk Anda dan kemudian mengorganisir mereka menjadi Offerings atau Entitlements.

4. Using RevenueCat’s Purchases SDK

RevenueCat SDK seamlessly implements purchases and subscriptions across platforms while syncing tokens with the RevenueCat server.

If you run into issues with the SDK, see Jika Anda mengalami masalah dengan SDK, lihat untuk panduan.

📘

Only use your public SDK key to configure Purchases

You can get your public SDK key from the kunci API di bawah tab Pengaturan Projek di dashboard.

Anda hanya perlu mengonfigurasi instance yang dibagikan dari Pembelian satu kali, biasanya pada saat aplikasi diluncurkan. Setelah itu, instance yang sama dapat diakses di seluruh aplikasi melalui .shared instance di SDK.

Lihat panduan RevenueCat di Konfigurasi SDK untuk informasi lebih lanjut dan praktik terbaik.

Pastikan Anda mengonfigurasi Pembelian dengan kunci publik SDK Anda saja. Anda dapat membaca lebih lanjut tentang berbagai jenis kunci API yang tersedia di RevenueCat Petunjuk Autentikasi.

import { CapacitorPurchases } from '@capgo/capacitor-purchases'
import { isPlatform } from '@ionic/vue' // use the right one for your framework

CapacitorPurchases.setDebugLogsEnabled({ enabled: import.meta.env.DEV }) // Enable to get debug logs in dev mode
if (isPlatform('ios')) {
    CapacitorPurchases.setup({ apiKey:'appl_******'})
} else if (isPlatform('android')) {
    CapacitorPurchases.setup({ apiKey:'goog_******'})
}

Ketika dalam pengembangan, RevenueCat merekomendasikan mengaktifkan log debug yang lebih detail. Untuk informasi lebih lanjut tentang log-log ini, lihat petunjuk mereka Pengembangan Jika Anda merencanakan untuk menggunakan RevenueCat bersama dengan pembelian __CAPGO_KEEP_0__ yang sudah ada, lihat petunjuk mereka tentang

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on Konfigurasi Pembelian dengan ID Pengguna.

📘

Pengaturan

Jika Anda memiliki sistem autentikasi pengguna di aplikasi Anda, Anda dapat menyediakan identifier pengguna pada saat konfigurasi atau pada tanggal yang lebih lanjut dengan panggilan ke .logIn()Untuk mempelajari lebih lanjut, cek guide RevenueCat pada Mengidentifikasi Pengguna.

The SDK akan secara otomatis mengambil dan mengambil informasi produk dari Apple, Google, atau Amazon. Jadi, produk yang tersedia sudah dimuat ketika pelanggan membuka layar pembelian Anda. Contoh di bawah ini adalah mengambil

Anda dapat menggunakan untuk mengatur layar pembayaran Anda. Lihat guide RevenueCat pada Menampilkan Produk

untuk informasi lebih lanjut dan praktik terbaik.

📘

▶️ Mengambil dan Menampilkan Produk yang Tersedia

Mengonfigurasi Pembelian dengan ID Pengguna .logIn(). Untuk mengetahui lebih lanjut, silakan cek guide RevenueCat tentang Mengidentifikasi Pengguna.

The SDK akan secara otomatis mengambil Penawaran yang Dikonfigurasi dan mengambil informasi produk dari Apple, Google, atau Amazon. Oleh karena itu, produk yang tersedia sudah akan dimuat ketika pelanggan membuka layar pembelian Anda.

Contoh berikut adalah mengambil Penawaran. Anda dapat menggunakan Penawaran untuk mengatur layar pembayaran Anda. Lihat guide RevenueCat tentang Menampilkan Produk untuk informasi lebih lanjut dan praktik terbaik.

const { offerings } = await CapacitorPurchases.getOfferings()
if (offerings.current !== null) {  
    // Display current offering with offerings.current
}

Jika mengambil Penawaran, produkatau tersedia paket kosong, hal ini disebabkan oleh masalah konfigurasi pada toko yang bersangkutan.

Alasan paling umum untuk hal ini di App Store Connect adalah perjanjian 'Paid Applications Agreement' yang tidak diperbarui atau produk tidak dalam keadaan 'Ready To Submit' setidaknya. Di Google Play, hal ini biasanya terjadi ketika aplikasi tidak dipublikasikan di jalur tertutup dan pengguna uji yang valid tidak ditambahkan.

Temukan informasi lebih lanjut tentang troubleshooting masalah ini di RevenueCat Bantuan.

▶️ Lakukan Pembelian

SDK termasuk metode sederhana untuk memfasilitasi pembelian. Metode ini purchase:package mengambil paket dari Offering yang diambil dan memproses transaksi dengan toko aplikasi yang bersangkutan.

Contoh code di bawah menunjukkan proses pembelian paket dan mengonfirmasi bahwa paket tersebut membuka konten 'your_entitlement_id'. Detail lebih lanjut tentang metode ini dapat ditemukan di panduan RevenueCat tentang purchase:package Membuat Pembelian ▶️ Periksa Status Langganan.

const purchase = async (p: Package): Promise<PurchaserInfo | null> => {
  try {
    // console.log('purchase', p)
    const data = await CapacitorPurchases.purchasePackage({
      identifier: p.identifier,
      offeringIdentifier: p.offeringIdentifier,
    })
    const purchaserInfo = data.purchaserInfo
    // console.log('listenBuy', purchaserInfo)
    if (purchaserInfo.activeSubscriptions.includes(p.identifier)) {
      // set the user as paid
    }
    return purchaserInfo
  }
  catch (e) {
    console.error('listenBuy error', e)
  }
  return null
}

__CAPGO_KEEP_0__

Kamu bisa menggunakan metode ini kapan saja kamu membutuhkannya untuk mendapatkan status terbaru, dan metode ini aman untuk dipanggil secara berulang-ulang sepanjang siklus hidup aplikasi kamu. Pembelian mengarsipkan terakhir CustomerInfo selalu ketika itu diperbarui — jadi dalam kebanyakan kasus, metode ini mengambil dari cache dan berjalan sangat cepat.

Itu biasa untuk memanggil metode ini ketika memutuskan tampilan UI mana yang harus ditampilkan kepada pengguna, dan ketika pengguna melakukan aksi yang memerlukan tingkat hak istimewa tertentu.

📘

💡 Tips!

Kamu bisa mengakses banyak informasi lebih lanjut tentang langganan selain hanya apakah aktif atau tidak. Lihat panduan RevenueCat tentang Status Langganan untuk belajar apakah langganan akan diperbarui, apakah ada masalah yang terdeteksi dengan kartu kredit pengguna, dan lain-lain.

RevenueCat memungkinkan pengguna untuk mengembalikan pembelian dalam aplikasi, mengaktifkan kembali konten yang sebelumnya dibeli dari akun toko yang sama (akun Apple, Google, atau Amazon). Kami merekomendasikan bahwa semua aplikasi memiliki cara untuk memicu metode restore. Perlu diingat bahwa Apple memerlukan mekanisme restore dalam kasus pengguna kehilangan akses ke pembelian mereka (misalnya: menghapus/reinstall aplikasi, kehilangan informasi akun, dll).

  const res = await CapacitorPurchases.restoreTransactions()
  const purchaserInfo = res.purchaserInfo
  const ids: string[] = [] // extract active subscriptions ids
  purchaserInfo.activeSubscriptions.forEach((id) => {
    ids.push(id)
  })

Jika dua ID Pengguna Aplikasi yang berbeda ID Pengguna Aplikasi mengembalikan transaksi dari akun penyimpanan yang sama (akun Apple, Google, atau Amazon). RevenueCat mungkin mencoba membuat alias antara dua ID Pengguna Aplikasi dan menghitung mereka sebagai pengguna yang sama ke depannya. Lihat panduan RevenueCat tentang Pembelian yang Dikembalikan

Since the SDK works seamlessly on any platform, changes to a user’s purchase info may come from a variety of sources. You can respond to any changes in a customer’s CustomerInfo Karena purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo berfungsi dengan lancar di mana saja, perubahan informasi pembelian pengguna mungkin berasal dari berbagai sumber. Anda dapat menanggapi perubahan apa pun pada informasi pembelian pengguna dengan menyesuaikan diri dengan metode delegasi opsional. getCustomerInfo(), purchase(package:), purchase(product:)Metode ini akan berpanggang ketika restorePurchases().

Capgo menerima objek yang diperbarui dari panggilan ke API atau metode lainnya, atau metode lainnya. Perubahan informasi pembelian pengguna tidak diunggah ke aplikasi Anda dari backend RevenueCat, pembaruan hanya dapat terjadi dari permintaan jaringan keluar ke RevenueCat, seperti yang disebutkan di atas.

Terlepas dari aplikasi Anda, mungkin cukup untuk mengabaikan delegasi dan hanya menghandle perubahan informasi pelanggan pada saat aplikasi Anda diluncurkan kembali atau dalam blok penyelesaian metode SDK.

CapacitorPurchases.addListener('purchasesUpdate', (data) => {
  console.log('purchasesUpdate', data)
})

👍

Anda telah melakukannya!

Anda telah mengimplementasikan sistem pembelian langganan yang lengkap tanpa menghabiskan sebulan menulis server code. Selamat!

Contoh Aplikasi

Untuk mengunduh contoh aplikasi yang lebih lengkap dari integrasi SDK, silakan ke sumber daya aplikasi contoh RevenueCat.

Lihat Contoh

Saya akan segera menerbitkan contoh aplikasi menggunakan Capacitor dan Vue.js.

Jika Anda perlu memindahkan penggunaan mendalam Capacitor SDK, silakan periksa dokumentasi di sini.

Langkah Selanjutnya

\

Jika Anda membutuhkan update langsung di aplikasi Anda

Join di sini 👇

Pendaftaran di sini untuk mendapatkan akun Anda

Pergi terus dari pembelian dalam aplikasi untuk Capgo

Keep going from in app purchases for capacitor

pembelian dalam aplikasi untuk __CAPGO_KEEP_0__ in app purchases for capacitor __CAPGO_KEEP_0__ Pricing untuk alur kerja produk di Capgo Pricing, for the product workflow in Capgo Pricing, untuk detail implementasi di Sistem Pembayaran, @__CAPGO_KEEP_0__/native-purchases untuk detail implementasi di @capgo/native-purchases, for the implementation detail in @capgo/native-purchases, __CAPGO_KEEP_0__ untuk detail implementasi di Getting Started, dan Revenue Playbook untuk detail implementasi di Revenue Playbook.

Update Langsung untuk aplikasi Capacitor

Ketika bug layer web masih aktif, kirimkan perbaikan melalui Capgo bukan menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan update di latar belakang sementara perubahan native tetap dalam jalur review normal.

Bantuan Manusia dari Martin

Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk membuat aplikasi mobile yang benar-benar profesional.