in-app purchase untuk capacitor

Plugin ini sekarang dipindahkan ke repositori resmi RevenueCat. Silakan lihat dokumentasi resmi untuk informasi lebih lanjut.

Jika Anda lebih memilih API native yang lebih sederhana tanpa RevenueCat, @capgo/native-purchases mengimplementasikan in-app purchases dan langganan langsung dengan StoreKit dan Google Play Billing.

Capacitor Purchases adalah plugin untuk framework Capacitor yang memungkinkan in-app purchases di iOS dan Android. Plugin ini menyediakan API yang sederhana dan konsisten di berbagai platform, memudahkan developer untuk mengimplementasikan langganan dan pembelian in-app di aplikasi mobile mereka.

Salah satu fitur utama plugin Capacitor Purchases adalah integrasinya dengan RevenueCat, platform yang menyediakan alat untuk langganan dan in-app purchases. RevenueCat menyederhanakan proses implementasi langganan dan pembelian in-app dengan menyediakan API yang sederhana dan konsisten di berbagai platform, serta mengotomatiskan tugas seperti validasi receipt dan manajemen pengguna.

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

• Validasi receipt otomatis
• Manajemen pengguna
• Dukungan untuk model harga kustom
• Analitik terperinci - Skalabilitas

Dengan menggunakan plugin Capacitor Purchases bersama RevenueCat, pengembang dapat menghemat waktu dan usaha saat mengimplementasikan langganan dan pembelian in-app di aplikasi mobile mereka, serta menyediakan fitur tambahan yang dapat membantu meningkatkan pengalaman pengguna dan pendapatan.

Dengan plugin Capacitor Purchases dan RevenueCat, pengembang dapat dengan mudah mengelola dan melacak langganan serta pembelian in-app, memvalidasi resi, dan mengelola pengguna di berbagai platform. Plugin ini juga memungkinkan pembuatan model harga kustom dan mendapatkan analitik terperinci untuk meningkatkan kinerja dan pendapatan.

Instalasi

Pastikan untuk menggunakan versi terbaru Capacitor dan plugin Capacitor Purchases. Anda dapat memeriksa versi terbaru Capacitor dan plugin Capacitor Purchases di situs web Capacitor.

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

tambahkan kemampuan in-app purchases di Xcode:

kemudian

1. Buat Akun RevenueCat

Panduan ini akan menunjukkan cara memulai dengan langganan dan SDK RevenueCat hanya dengan beberapa baris code.

Daftar akun RevenueCat baru di sini.

📘

💡 Ini tipsnya!

RevenueCat menyarankan membuat akun RevenueCat terpisah untuk setiap aplikasi/proyek yang Anda miliki, terutama jika Anda berencana menjual aplikasi tersebut. Ini akan mempercepat proses transfer, karena Anda dapat mentransfer seluruh akun daripada menunggu RevenueCat Support mentransfer proyek satu per satu.

Organisasi / Enterprise

Kami menyarankan menggunakan akun perusahaan saat mendaftar RevenueCat dan mengatur aplikasi di dalam sebuah proyek. Anda dapat mengundang anggota tim lainnya sebagai kolaborator ke proyek Anda, tetapi hanya pemilik proyek yang bisa mengelola billing. Kolaborator proyek tidak dapat mengelola detail billing.

2. Konfigurasi Proyek dan Aplikasi

▶️ Buat Proyek

Buka dashboard RevenueCat dan Tambah proyek baru dari dropdown di menu navigasi atas yang bernama Proyek.

Modal popup untuk membuat proyek baru

▶️ Tambah Aplikasi / Platform

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

Dashboard proyek untuk memilih platform aplikasi

Kolom Nama aplikasi wajib diisi untuk menambahkan aplikasi Anda ke RevenueCat. Kolom konfigurasi lainnya bisa ditambahkan nanti. Untuk melakukan pembelian testing dan production, Bundle ID (iOS) / Package Name (Android) serta Shared Secret (iOS) / Service Credentials (Android) harus dikonfigurasi.

Halaman konfigurasi aplikasi untuk Apple App Store

📘

💡 Ini tipsnya!

Setelah mendaftarkan aplikasi, RevenueCat menyarankan untuk mengatur Platform Notifikasi Server. Notifikasi ini tidak wajib, tetapi akan mempercepat webhook dan waktu pengiriman integrasi serta mengurangi lag saat memperbarui subscriber Anda.

📘

Aplikasi dan user Staging vs. Production

RevenueCat sendiri tidak memiliki environment terpisah untuk staging dan production. Sebaliknya, transaksi yang mendasari untuk user dibedakan berdasarkan sandbox dan production.

Aplikasi RevenueCat mana pun dapat melakukan pembelian sandbox dan produksi dari store. Jika Anda memiliki aplikasi terpisah untuk staging dan produksi, Anda dapat membuat beberapa proyek di RevenueCat untuk mencerminkan setup Anda.

Selain itu, pengguna juga tidak dipisahkan berdasarkan environment. Pengguna yang sama dapat memiliki pembelian sandbox aktif dan pembelian produksi aktif secara bersamaan.

▶️ Kredensial Layanan

Service credentials perlu diatur agar RevenueCat dapat berkomunikasi dengan app store atas nama Anda. Lihat panduan RevenueCat App Store Connect Shared Secret, Kredensial Play Service, dan Amazon Appstore Shared Secret untuk informasi lebih lanjut.

Perhatikan bahwa kredensial play service dapat memakan waktu hingga 36 jam untuk tersinkronisasi di seluruh server Google.

3. Konfigurasi Produk

▶️ Setup Store

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

Jika Anda menjual produk iOS, pastikan menandatangani ‘Paid Applications Agreement’ dan mengisi informasi bank serta pajak di App Store Connect > Perjanjian, Pajak, dan Perbankan. Ini harus diselesaikan sebelum Anda bisa menguji pembelian apa pun.

📘

Ingin melewati setup store saat testing?

Di iOS, Anda bisa menunda konfigurasi produk di App Store Connect dengan menguji memakai file StoreKit Configuration sebagai gantinya. File config ini butuh setup minimal dan bisa dikonfigurasi langsung lewat Xcode.

Baca selengkapnya tentang cara mengatur file konfigurasi StoreKit di RevenueCat Pengujian Sandbox panduan.

▶️ Konfigurasi Produk dan Hak Akses di RevenueCat

Setelah produk in-app Anda 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 Offerings untuk mengelola kumpulan produk yang Anda tawarkan kepada pelanggan.

Entitlements adalah tingkat akses yang "diperoleh" pelanggan setelah membeli produk tertentu. Offerings adalah cara sederhana untuk mengorganisasi produk in-app yang ingin Anda "tawarkan" di paywall Anda dan dikonfigurasi secara remote. RevenueCat merekomendasikan memanfaatkan fitur-fitur ini untuk menyederhanakan code Anda dan memungkinkan Anda mengubah produk tanpa perlu merilis update aplikasi.

Lihat Konfigurasi Produk untuk mengatur produk Anda lalu mengelompokkannya ke dalam Offerings atau Entitlements.

4. Menggunakan SDK Purchases dari RevenueCat

SDK RevenueCat mengimplementasikan pembelian dan langganan di berbagai platform dengan mulus sambil menyinkronkan token dengan server RevenueCat.

Jika Anda mengalami masalah dengan SDK, lihat Troubleshooting SDK untuk panduan.

📘

Hanya gunakan public SDK key Anda untuk mengonfigurasi Purchases

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

Anda hanya perlu mengonfigurasi instance bersama dari Pembelian sekali, biasanya saat aplikasi diluncurkan. Selanjutnya, instance yang sama dibagikan di seluruh aplikasi Anda dengan mengakses .shared instance di SDK.

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

Pastikan Anda mengonfigurasi Pembelian hanya dengan SDK publik Anda. Anda dapat membaca lebih lanjut tentang berbagai API yang tersedia di RevenueCat panduan 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_******'})
}

Saat dalam pengembangan, RevenueCat merekomendasikan untuk mengaktifkan log debug yang lebih detail. Untuk informasi lebih lanjut tentang log ini, lihat panduan Debugging mereka.

Jika Anda berencana menggunakan RevenueCat bersama code pembelian yang sudah ada, lihat panduan mereka tentang Mode Observer.

📘

Mengonfigurasi Pembelian dengan User ID

Jika aplikasi Anda memiliki sistem autentikasi pengguna, Anda dapat menyediakan pengidentifikasi pengguna saat konfigurasi atau kemudian dengan memanggil .logIn(). Untuk mempelajari lebih lanjut, lihat panduan RevenueCat tentang Mengidentifikasi Pengguna.

SDK akan secara otomatis mengambil Offerings yang dikonfigurasi dan mengambil informasi produk dari Apple, Google, atau Amazon. Dengan demikian, produk yang tersedia sudah dimuat saat pelanggan membuka layar pembelian Anda.

Berikut adalah contoh pengambilan Offerings. Anda dapat memanfaatkan Offerings untuk mengatur layar paywall Anda. Lihat panduan RevenueCat tentang Menampilkan Produk untuk informasi lebih lanjut dan praktik terbaik.

▶️ Ambil dan Tampilkan Produk yang Tersedia

📘

Mengonfigurasi Pembelian dengan User ID

Jika aplikasi Anda memiliki sistem autentikasi pengguna, Anda dapat menyediakan identifier pengguna saat konfigurasi atau kemudian dengan memanggil .logIn(). Untuk mempelajari lebih lanjut, lihat panduan RevenueCat tentang Mengidentifikasi Pengguna.

SDK akan secara otomatis mengambil Offerings yang dikonfigurasi dan mengambil informasi produk dari Apple, Google, atau Amazon. Dengan demikian, produk yang tersedia sudah dimuat saat pelanggan membuka layar pembelian Anda.

Berikut adalah contoh pengambilan Offerings. Anda dapat menggunakan Offerings untuk mengatur layar paywall Anda. Lihat panduan RevenueCat tentang Menampilkan Produk untuk informasi dan praktik terbaik lainnya.

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

Jika pengambilan Offerings, produk, atau tersedia package kosong, ini disebabkan oleh masalah konfigurasi di store terkait.

Alasan paling umum di App Store Connect adalah 'Paid Applications Agreement' yang kedaluwarsa atau produk yang belum berstatus 'Ready To Submit'. Di Google Play, ini biasanya terjadi jika aplikasi tidak dipublikasikan di track tertutup dan tidak ada test user valid yang ditambahkan.

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

▶️ Lakukan Pembelian

SDK menyertakan metode sederhana untuk memfasilitasi pembelian. purchase:package Metode ini mengambil package dari Offering yang diambil dan memproses transaksi dengan app store terkait.

Contoh code di bawah ini menunjukkan proses pembelian package dan mengonfirmasi bahwa konten “your_entitlement_id” terbuka. Detail lebih lanjut tentang purchase:package metode dapat ditemukan di panduan RevenueCat tentang Melakukan 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
}

▶️ Cek Status Langganan

Anda bisa menggunakan metode ini kapan pun perlu mendapatkan status terbaru, dan aman untuk dipanggil berulang kali selama siklus hidup aplikasi Anda. Pembelian secara otomatis meng-cache yang terbaru CustomerInfo setiap kali diperbarui — jadi dalam kebanyakan kasus, metode ini mengambil dari cache dan berjalan sangat cepat.

Umumnya, metode ini dipanggil saat menentukan UI mana yang akan ditampilkan ke pengguna, dan setiap kali pengguna melakukan aksi yang memerlukan level entitlement tertentu.

📘

💡 Ini tipsnya!

Anda bisa mengakses banyak informasi lain tentang langganan selain sekadar apakah aktif atau tidak. Lihat panduan RevenueCat tentang Status Langganan untuk mengetahui apakah langganan diatur untuk diperbarui, apakah ada masalah yang terdeteksi pada kartu kredit pengguna, dan lainnya.

RevenueCat memungkinkan pengguna Anda untuk memulihkan pembelian in-app mereka, mengaktifkan kembali konten yang sebelumnya mereka beli dari akun store yang sama (akun Apple, Google, atau Amazon). Kami merekomendasikan agar semua aplikasi memiliki cara bagi pengguna untuk memicu metode restore. Perhatikan bahwa Apple mewajibkan mekanisme restore jika pengguna kehilangan akses ke pembelian mereka (misalnya: menguninstal/menginstal ulang 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 yang berbeda App User ID memulihkan transaksi dari akun toko yang sama (akun Apple, Google, atau Amazon). RevenueCat mungkin akan mencoba membuat alias antara dua App User ID tersebut dan menghitungnya sebagai pengguna yang sama ke depannya. Lihat panduan RevenueCat tentang Memulihkan Pembelian untuk informasi lebih lanjut tentang perilaku restore yang dapat dikonfigurasi.

Karena SDK bekerja mulus di semua platform, perubahan info pembelian pengguna dapat berasal dari berbagai sumber. Anda dapat merespons perubahan apa pun pada CustomerInfo dengan mematuhi metode delegate opsional, purchases:receivedUpdated:.

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

Pembaruan CustomerInfo adalah tidak dikirim ke aplikasi Anda dari backend RevenueCat, pembaruan hanya dapat terjadi melalui permintaan jaringan keluaran ke RevenueCat, seperti yang disebutkan di atas.

Tergantung pada aplikasi Anda, mungkin cukup untuk mengabaikan delegate dan menangani perubahan informasi pelanggan pada peluncuran berikutnya atau di dalam blok penyelesaian metode SDK.

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

👍

Berhasil!

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

Aplikasi Contoh

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

Lihat Contoh

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

Jika Anda perlu menggunakan Capacitor SDK secara mendalam, silakan cek dokumentasinya di sini.

Langkah Berikutnya

\

• Jika belum, pastikan produk Anda sudah dikonfigurasi dengan benar dengan melihat panduan RevenueCat tentang entitlements.
• Jika Anda ingin menggunakan user identifier sendiri, baca tentang pengaturan ID pengguna aplikasi .
• Jika Anda bermigrasi dari sistem lain ke RevenueCat, lihat panduan RevenueCat tentang migrasi langganan yang sudah ada.
• Setelah Anda siap menguji integrasi, Anda dapat mengikuti panduan RevenueCat tentang testing dan debugging.
• Jika Anda memenuhi syarat untuk Program Bisnis Kecil App Store, lihat panduan RevenueCat tentang cara mendaftar dan menginformasikan ke RevenueCat

Jika Anda membutuhkan Live update di aplikasi Anda

Gabung di sini 👇

Daftar di sini untuk mendapatkan akun Anda

Capgo

Lanjutkan dari in-app purchases untuk capacitor

Jika Anda menggunakan in-app purchase untuk capacitor untuk merencanakan pembayaran dan pembelian, hubungkan dengan Harga Capgo untuk alur kerja produk di halaman Harga Capgo, Sistem pembayaran untuk detail implementasi di sistem pembayaran, @capgo/native-purchases untuk detail implementasi di @capgo/native-purchases Panduan Memulai untuk detail implementasi di Getting Started, dan Strategi Pendapatan untuk detail implementasi di Revenue Playbook.