Lompat ke konten utama
Tutorial

pengeluaran dalam aplikasi untuk capacitor

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

Martin Donadieu

Martin Donadieu

Spesialis Konten

pengeluaran dalam aplikasi untuk capacitor

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

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

Capacitor Beli adalah plugin untuk kerangka kerja Capacitor yang memungkinkan pembelian dalam aplikasi pada iOS dan Android. Ini menyediakan antarmuka yang sederhana dan konsisten API di berbagai platform, sehingga memudahkan pengembang untuk mengimplementasikan langganan dan pembelian dalam aplikasi di aplikasi mobile mereka.

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

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

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

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

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

Pemasangan

Pastikan untuk 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 aplikasi di Xcode:

Langkah Xcode 1 Kemudian Langkah Xcode 2

1. Buatlah Akun RevenueCat

Panduan ini akan membantu Anda untuk memulai menggunakan langganan dan RevenueCat’s SDK dengan hanya beberapa baris kode code.

Pendaftaran untuk akun baru RevenueCat sini.

📘

💡 Tipsnya!

RevenueCat merekomendasikan membuat akun RevenueCat terpisah untuk setiap aplikasi / proyek yang Anda miliki, terutama jika Anda pernah berencana untuk menjual aplikasi tersebut. 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 yang lain 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

Navigasikan ke dashboard RevenueCat dan Tambahkan proyek baru dari menu dropdown di bagian navigasi atas yang disebut Proyek.

Langkah 1 RevenueCat

Modal popup untuk membuat proyek baru

▶️ Tambahkan Aplikasi / Platform

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

Langkah 2 RevenueCat

Dashboard proyek untuk memilih platform aplikasi

Bidang Nama aplikasi diperlukan untuk menambahkan aplikasi Anda 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

📘

💡 Tip ini!

Setelah mendaftar aplikasi, RevenueCat merekomendasikan mengatur Pemberitahuan Server Platform. Pemberitahuan ini tidak diperlukan, tetapi akan mempercepat webhooks dan pengiriman integrasi waktu dan mengurangi waktu pengupdatean pengikut.

📘

Aplikasi Staging vs. Pengguna Produksi

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

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

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

▶️ Kredensial Layanan

Kredensial layanan harus disetel untuk RevenueCat dapat berkomunikasi dengan toko aplikasi Anda. Lihat panduan RevenueCat, Kunci Rahasia App Store ConnectKredensial Layanan Play dan Kunci Rahasia Amazon Appstore

untuk informasi lebih lanjut.

Perlu diingat bahwa kredensial layanan Play dapat membutuhkan waktu hingga 36 jam untuk menyebarluaskan ke server Google.

3. Konfigurasi Produk","▶️ Pengaturan Toko

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

Jika Anda menjual produk iOS, pastikan Anda menandatangani 'Paid Applications Agreement' dan isi informasi bank dan pajak Anda di App Store Connect > Perjanjian, Pajak, dan Perbankan. Hal ini harus diselesaikan sebelum Anda dapat menguji pembelian apa pun.

📘

Ingin melompati pengaturan toko saat tes?

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

Selengkapnya tentang mengatur Konfigurasi StoreKit di RevenueCat Pengujian Sandbox guide.

▶️ Konfigurasi Produk dan Hak Akses di RevenueCat

Setelah 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 Hak Akses untuk mengontrol akses ke fitur premium, dan Penawaran untuk mengelola set produk yang ditawarkan kepada pelanggan.

Hak Akses adalah tingkat akses yang dimiliki oleh pelanggan setelah membeli produk tertentu. Penawaran adalah cara sederhana untuk mengorganisir produk dalam aplikasi yang ingin Anda Mengusulkan menggunakan fitur-fitur ini untuk memudahkan __CAPGO_KEEP_0__ Anda dan memungkinkan Anda untuk mengubah produk tanpa mengeluarkan pembaruan aplikasi. utilizing these features to simplify your code and enable you to change products without releasing an app update.

Mengatur Produk untuk mengatur produk Anda dan kemudian mengorganisir mereka menjadi Penawaran atau Hak Akses. Langkah 4 RevenueCat

4. Menggunakan Purchases __CAPGO_KEEP_0__ RevenueCat

Purchases SDK RevenueCat secara lancar menerapkan pembelian dan langganan di berbagai platform sambil sinkronisasi token dengan server RevenueCat.

Jika Anda mengalami masalah dengan SDK, lihat

If you run into issues with the SDK, see untuk petunjuk. Hanya gunakan kunci publik __CAPGO_KEEP_0__ Anda untuk mengonfigurasi Purchases

📘

rekomendasikan menggunakan fitur-fitur ini untuk memudahkan SDK dan memungkinkan Anda untuk mengubah produk tanpa mengeluarkan pembaruan aplikasi.

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

Anda hanya perlu mengonfigurasi instance __CAPGO_KEEP_0__ yang dibagikan sekali, biasanya pada saat aplikasi diluncurkan. Setelah itu, instance yang sama dapat diakses melalui instance di __CAPGO_KEEP_0__. Lihat panduan RevenueCat tentang .shared Mengonfigurasi SDK

untuk informasi lebih lanjut dan praktik terbaik. Kunci SDK Kunci __CAPGO_KEEP_0__

Pastikan Anda mengonfigurasi Pembelian hanya dengan kunci publik SDK. Anda dapat membaca lebih lanjut tentang berbagai 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 rinci. Untuk informasi lebih lanjut tentang log-log ini, lihat Petunjuk Debugging . 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 Mengonfigurasi Pembelian dengan ID Pengguna.

📘

Jika Anda memiliki sistem autentikasi pengguna di aplikasi Anda, Anda dapat menyediakan identifier pengguna pada saat pengonfigurasi atau pada tanggal yang lebih lanjut dengan panggilan ke

. Untuk mempelajari lebih lanjut, cek petunjuk RevenueCat tentang .logIn()Konfigurasi Pembelian dengan ID Pengguna adalah cara untuk mengidentifikasi pembelian yang dilakukan oleh pengguna. Dengan cara ini, Anda dapat memantau pembelian yang dilakukan oleh pengguna dan mengambil tindakan yang tepat jika diperlukan. Untuk mempelajari lebih lanjut tentang cara mengonfigurasi pembelian dengan ID pengguna, lihat petunjuk RevenueCat tentang Mengidentifikasi Pengguna.

SDK akan secara otomatis mengambil tawaran yang telah dikonfigurasi dan mengambil informasi produk dari Apple, Google, atau Amazon. Dengan demikian, produk yang tersedia sudah akan dimuat ketika pelanggan membuka layar pembelian Anda. Tawaran yang Dikonfigurasi Contoh di bawah ini menunjukkan cara mengambil Tawaran. Anda dapat menggunakan Tawaran untuk mengatur layar pembayaran Anda. Lihat panduan RevenueCat tentang

Menampilkan Produk untuk informasi lebih lanjut dan praktik terbaik. ▶️ Ambil dan Tampilkan Produk yang Tersedia

Mengonfigurasi 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

. Untuk mengetahui lebih lanjut, cek panduan RevenueCat tentang .logIn()Mengidentifikasi Pengguna Identifying Users.

Aplikasi SDK akan secara otomatis mengambil Offerings yang telah 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. Offerings yang telah dikonfigurasi Produk yang tersedia akan sudah dimuat ketika pelanggan membuka layar pembelian Anda.

Contoh berikut menunjukkan cara mengambil Offerings. Anda dapat menggunakan Offerings untuk mengatur layar pembayaran Anda. Lihat panduan 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 produk Offerings atau paket yang tersedia, kosong, maka itu karena ada masalah konfigurasi pada toko yang bersangkutan.masalah konfigurasi pada toko yang bersangkutan. masalah konfigurasi pada toko yang bersangkutan. masalah konfigurasi pada toko yang bersangkutan.

Alasan paling umum untuk hal ini di App Store Connect adalah perjanjian 'Pengembang Aplikasi Berbayar' yang tidak diperbarui atau produk tidak dalam keadaan 'Siap Untuk Diterbitkan' setidaknya. 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

The SDK termasuk metode sederhana untuk memfasilitasi pembelian. The purchase:package mengambil paket dari Offering yang diperoleh dan memproses transaksi dengan toko aplikasi yang relevan.

Contoh sampel code di bawah menunjukkan proses pembelian paket dan memastikan bahwa konten "your_entitlement_id" terbuka. Detail lebih lanjut tentang purchase:package metode 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 membutuhkannya untuk mendapatkan status terbaru, dan aman untuk memanggil metode ini secara berulang-ulang sepanjang siklus hidup aplikasi Anda. Pembelian mengarsipkan versi terbaru secara otomatis CustomerInfo ketika itu diperbarui — jadi dalam kebanyakan kasus, metode ini mengambil dari cache dan berjalan sangat cepat.

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

📘

💡 Tips ini!

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 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 (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 ada dua ID Pengguna Aplikasi yang berbeda __CAPGO_KEEP_0__ restore 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 Kembali untuk informasi lebih lanjut tentang perilaku pembelian kembali yang dapat disesuaikan.

Karena SDK berjalan lancar di mana saja, perubahan informasi pembelian pengguna mungkin berasal dari berbagai sumber. Anda dapat menanggapi perubahan apa pun pada CustomerInfo dengan mengikuti metode delegasi opsional, purchases:receivedUpdated:.

Metode ini akan memicu setiap kali SDK menerima objek yang diperbarui CustomerInfo dari panggilan ke getCustomerInfo(), purchase(package:), purchase(product:), atau restorePurchases().

Informasi CustomerInfo tidak dipush ke aplikasi Anda dari backend RevenueCat, perubahan 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 pengguna pada saat aplikasi Anda diluncurkan kembali atau di blok penyelesaian metode __CAPGO_KEEP_0__.

Depending on your app, it may be sufficient to ignore the delegate and simply handle changes to customer information the next time your app is launched or in the completion blocks of the SDK methods.

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

👍

Kamu telah berhasil!

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

Aplikasi Sampel

Untuk mendownload contoh-contoh lengkap integrasi dengan SDK, silakan kunjungi sumber daya aplikasi sampel RevenueCat.

Lihat Sampel

Aku akan segera mempublikasikan aplikasi sampel menggunakan Capacitor dan Vue.js.

Jika kamu memerlukan penggunaan yang lebih dalam dari Capacitor SDK, silakan cek dokumentasi di sini.

Langkah Selanjutnya

\

Jika Anda membutuhkan Live update di aplikasi Anda

Join kami di sini 👇

Pendaftaran di sini untuk mendapatkan akun Anda

Capgo

Teruskan dari pembelian dalam aplikasi untuk capacitor

Jika Anda menggunakan untuk pembelian dalam aplikasi 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/native-purchases untuk detail implementasi di @capgo/native-purchases, Getting Started untuk detail implementasi di Getting Started, dan Revenue Playbook untuk detail implementasi di Revenue Playbook.

Live updates untuk Capacitor aplikasi

Ketika bug layer web masih aktif, kirimkan perbaikan melalui Capgo daripada 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 yang sebenarnya.