Lompat ke konten utama
Tutorial

pengeluaran dalam aplikasi untuk capacitor

Bagaimana cara mengimplementasikan pengeluaran dalam aplikasi untuk capacitor menggunakan plugin Pembelian Capacitor dan RevenueCat

Martin Donadieu

Martin Donadieu

Marketer Konten

pengeluaran dalam aplikasi untuk capacitor

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

Pembelian Capacitor adalah plugin untuk framework Capacitor yang memungkinkan pengeluaran dalam aplikasi di iOS dan Android. Ini menyediakan API yang sederhana dan konsisten di berbagai platform, sehingga memudahkan pengembang untuk mengimplementasikan langganan dalam aplikasi dan pengeluaran dalam aplikasi di aplikasi mobile mereka.

Salah satu fitur utama plugin Pembelian Capacitor adalah bahwa itu terintegrasi dengan RevenueCat, sebuah platform yang menyediakan alat untuk langganan dalam aplikasi dan pengeluaran dalam aplikasi. RevenueCat memudahkan proses mengimplementasikan langganan dalam aplikasi dan pengeluaran dalam aplikasi dengan menyediakan API yang sederhana dan konsisten di berbagai platform, serta otomatisasi tugas seperti validasi bukti pembayaran dan pengelolaan pengguna.

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

  • Validasi otomatis tagihan
  • Pengelolaan pengguna
  • Support untuk model harga kustom
  • Analisis detail -Skala

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

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

Pemasangan

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

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

Tambahkan kemampuan pembelian dalam aplikasi di Xcode:

Langkah Xcode 1 maka xcode langkah 2

1. Buatlah Akun RevenueCat

Panduan ini akan memandu Anda melalui cara mendapatkan mulai dengan langganan dan RevenueCat’s SDK dengan hanya beberapa baris kode code.

Daftar untuk akun RevenueCat baru di sini.

📘

💡 Berikut adalah tips!

RevenueCat merekomendasikan membuat akun RevenueCat terpisah untuk setiap aplikasi / proyek yang Anda miliki, terutama jika Anda pernah berencana untuk menjual aplikasi. Ini akan mempercepat proses transfer, karena Anda dapat mentransfer akun seluruhnya 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.. Kolaborator proyek tidak dapat mengelola detail tagihan.

2. Konfigurasi Proyek dan Aplikasi

▶️ Buat Proyek

Pergi ke dashboard RevenueCat dan tambahkan proyek baru dari dropdown di menu navigasi atas yang disebut Proyek.

Langkah RevenueCat 1

Modal popup untuk membuat proyek baru

▶️ Tambahkan Aplikasi / Platform

Dari Pengaturan Proyek > Aplikasi di menu kiri dashboard proyek, pilih platform untuk aplikasi yang akan Anda tambahkan.

Langkah 2 RevenueCat

Dashboard proyek untuk memilih platform aplikasi

Bidang Nama Aplikasi diperlukan untuk menambahkan aplikasi ke RevenueCat. Bidang 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 Notifikasi Server Platform. Notifikasi ini tidak diperlukan, tetapi akan mempercepat waktu pengiriman webhooks dan integrasi serta mengurangi waktu pengupdatean untuk pengikut Anda. webhooks dan integrasi

📘

Staging vs. App Produksi dan Pengguna

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

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

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

▶️ Kredensial Layanan

Kredensial layanan harus diatur untuk memungkinkan RevenueCat berkomunikasi dengan toko aplikasi Anda. Kunci Rahasia App Store Connect, Kredensial Layanan Play, dan Rahasia Aplikasi Amazon Appstore untuk informasi lebih lanjut.

Perlu diingat bahwa kredential layanan main dapat memakan waktu hingga 36 jam untuk menyebarluaskan ke server-server Google.

3. Konfigurasi Produk

▶️ Pengaturan Toko

Sebelum Anda dapat menggunakan RevenueCat untuk mengambil produk, Anda harus mengkonfigurasi produk Anda di toko-toko yang relevan. Lihatlah panduan berikut untuk Pusat Manajemen App Store, Konsole Google Play, Amazon Appstore, dan Stripe untuk bantuan navigasi melalui proses ini.

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

📘

Inginkan menghindari pengaturan toko saat menguji?

Pada iOS, Anda dapat menunda mengkonfigurasi produk di App Store Connect dengan menguji menggunakan file konfigurasi StoreKit alih-alih. File konfigurasi ini memerlukan pengaturan minimal dan dapat dikonfigurasi melalui Xcode secara langsung.

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

▶️ Konfigurasi Produk dan Hak Akses di RevenueCat

Saat produk dalam aplikasi Anda telah dikonfigurasi di App Store Connect, Google Play Console, Amazon Appstore, atau Stripe, Anda perlu menyalin konfigurasi tersebut ke dashboard RevenueCat. RevenueCat menggunakan sistem Entitlements untuk mengontrol akses ke fitur premium, dan Penawaran untuk mengelola set produk yang Anda tawarkan kepada pelanggan.

Entitlements adalah tingkat akses yang dimiliki oleh pelanggan setelah membeli produk tertentu. Penawaran adalah cara sederhana untuk mengorganisir produk dalam-aplikasi yang Anda inginkan untuk RevenueCat merekomendasikan menggunakan fitur-fitur ini untuk memudahkan proses code Anda dan memungkinkan Anda untuk mengubah produk tanpa harus mengupdate aplikasi.

Lihat Konfigurasi Produk untuk mengatur produk Anda dan kemudian mengorganisir mereka menjadi Penawaran atau Entitlements.

RevenueCat langkah 4

4. Menggunakan Purchases SDK RevenueCat

RevenueCat SDK secara otomatis mengimplementasikan pembelian dan langganan di berbagai platform sambil sinkronisasi token dengan server RevenueCat.

Jika Anda mengalami masalah dengan SDK, lihat Panduan Perbaikan SDK untuk petunjuk.

📘

Hanya gunakan kunci publik SDK Anda untuk mengonfigurasi Pembelian

Anda dapat mendapatkan kunci publik SDK Anda dari tab API keys di bawah Pengaturan Proyek di dashboard.

Anda hanya boleh mengonfigurasi instance bersama dari Pembelian biasanya pada saat aplikasi diluncurkan. Selanjutnya, instance yang sama digunakan sepanjang aplikasi dengan mengakses .shared instance di SDK.

Lihat panduan RevenueCat tentang Mengonfigurasi SDK untuk informasi lebih lanjut dan praktik terbaik.

Pastikan Anda mengonfigurasi Purchases dengan kunci publik SDK Anda saja. Anda dapat membaca lebih lanjut tentang berbagai jenis kunci API yang tersedia di panduan Autentikasi RevenueCat Ketika dalam pengembangan, RevenueCat merekomendasikan mengaktifkan log debug yang lebih rinci. Untuk informasi lebih lanjut tentang log-log ini, lihat panduan.

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_******'})
}

Pengembangan mereka. __CAPGO_KEEP_0__

If Anda merencanakan untuk menggunakan RevenueCat bersama dengan code yang sudah ada, silakan lihat panduan mereka di Mode Pengamat.

📘

Mengatur Pembelian dengan ID Pengguna

Jika Anda memiliki sistem autentikasi pengguna di aplikasi, Anda dapat menyediakan identifier pengguna pada saat pengaturan atau pada tanggal yang lebih lanjut dengan panggilan ke .logIn(). Untuk mengetahui lebih lanjut, silakan lihat panduan RevenueCat di Mengidentifikasi Pengguna.

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

Contoh berikut adalah cara mengambil Penawaran. Anda dapat menggunakan Penawaran untuk mengatur layar pembayaran Anda. Lihat panduan RevenueCat di Mengampilkan Produk untuk informasi lebih lanjut dan praktik terbaik.

▶️ Mengambil dan Menampilkan Produk yang Tersedia

📘

Mengatur Pembelian dengan ID Pengguna

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

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

Contoh di bawah ini adalah mengambil Produk. Anda dapat menggunakan Produk untuk mengatur layar paywall 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 Paketan, produk, atau tersedia paket kosong, itu karena masalah konfigurasi tertentu di toko yang bersangkutan.

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

Anda dapat menemukan informasi lebih lanjut tentang troubleshooting masalah ini di RevenueCat Pusat Bantuan.

▶️ Lakukan Pembelian

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

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

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
}

▶️ Periksa Status Langganan

Anda dapat menggunakan metode ini kapan saja Anda membutuhkan status terbaru, dan aman untuk memanggil metode ini secara berulang-ulang selama siklus hidup aplikasi Anda. Pembelian otomatis menyimpan status terbaru CustomerInfo ketika itu diperbarui — jadi dalam kebanyakan kasus, metode ini mengambil dari cache dan menjalankan sangat cepat.

Biasanya, Anda memanggil metode ini ketika memutuskan tampilan UI mana yang harus ditampilkan kepada pengguna, dan ketika pengguna melakukan aksi yang memerlukan tingkat hak akses tertentu.

📘

💡 Tips!

Anda dapat mengakses informasi lebih lanjut tentang langganan selain hanya apakah aktif atau tidak. Lihat panduan RevenueCat tentang Status Langganan untuk mengetahui apakah langganan akan diperbarui, apakah ada masalah dengan kartu kredit pengguna, dan lain-lain.

RevenueCat memungkinkan pengguna Anda untuk mengembalikan pembelian dalam aplikasi, mengaktifkan kembali konten apa pun yang telah dibeli sebelumnya dari akun toko yang sama (akun Apple, Google, atau Amazon). Kami merekomendasikan bahwa semua aplikasi memiliki cara untuk memicu metode restorasi. Perlu diingat bahwa Apple memerlukan mekanisme restorasi dalam kasus pengguna kehilangan akses ke pembelian mereka (misalnya: menghapus/reinstal 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 restorasi transaksi dari akun toko yang sama (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 untuk informasi lebih lanjut tentang perilaku restorasi yang dapat disesuaikan.

Karena SDK berjalan 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 mengikuti metode delegasi yang optional, CustomerInfo Metode ini akan memicu setiap kali __CAPGO_KEEP_0__ menerima objek yang diperbarui purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo __CAPGO_KEEP_0__ getCustomerInfo(), purchase(package:), purchase(product:)atau restorePurchases().

Pengaturan Pelanggan diperbarui tidak dipush ke aplikasi Anda dari backend RevenueCat, pembaruan hanya dapat terjadi dari permintaan jaringan keluar ke RevenueCat, seperti yang disebutkan di atas.

Tergantung pada aplikasi Anda, mungkin cukup untuk mengabaikan delegasi dan hanya menangani 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 menyelesaikan implementasi sistem pembelian langganan yang lengkap tanpa menghabiskan sebulan menulis server code. Selamat!

Contoh Aplikasi

Untuk mengunduh contoh aplikasi yang lebih lengkap mengenai integrasi SDK, silakan kunjungi sumber daya contoh aplikasi RevenueCat.

Lihat Contoh

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

If you need to move deep usage of the Capacitor SDK check the documentation Indonesia.

Langkah-Langkah Selanjutnya

\

Jika Anda memerlukan pembaruan langsung di aplikasi Anda

Gabunglah di sini 👇

Daftar di sini untuk mendapatkan akun Anda

Capgo

Teruskan dari pembelian dalam aplikasi untuk capacitor

Jika Anda menggunakan pembelian dalam aplikasi untuk capacitor untuk merencanakan pembayaran dan pembelian, hubungkannya dengan Capgo Pricing untuk alur kerja produk di Capgo Pricing, Sistem Pembayaran untuk detail implementasi di Sistem Pembayaran, @capgo/pembelian-asli untuk detail implementasi di @capgo/pembelian-asli, Mula Menggunakan untuk detail implementasi di Mula Menggunakan, dan Pedoman Pendapatan untuk detail implementasi di Pedoman Pendapatan.

Update Langsung untuk aplikasi Capacitor

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

Mulai Sekarang

Terbaru dari Blog Kami

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