Pembelian dalam aplikasi untuk capacitor

Sekarang plugin ini telah dipindahkan ke repositori resmi RevenueCat. Silakan lihat di dokumentasi resmi dokumentasi resmi

Jika Anda lebih suka native API yang lebih sederhana tanpa RevenueCat, Jika Anda lebih suka menggunakan pembelian native capgo yang lebih sederhana tanpa RevenueCat, Penggunaan dalam aplikasi dan langganan langsung dengan StoreKit dan Billing Google Play.

Pengguna Capacitor Pembelian adalah plugin untuk kerangka kerja Capacitor yang memungkinkan pembelian dalam aplikasi di iOS dan Android. Ini menyediakan antarmuka yang sederhana dan konsisten API di beberapa platform, sehingga memudahkan pengembang untuk menerapkan langganan dan pembelian dalam aplikasi mobile mereka.

Salah satu fitur utama plugin Pembelian Capacitor adalah integrasi dengan RevenueCat, sebuah platform yang menyediakan alat untuk langganan dan pembelian dalam aplikasi. RevenueCat memudahkan proses menerapkan langganan dan pembelian dengan menyediakan antarmuka yang sederhana dan konsisten API di beberapa platform, serta mengotomatisasi 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 bukti pembayaran otomatis
• 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, serta menyediakan fitur tambahan yang dapat membantu meningkatkan pengalaman pengguna dan meningkatkan pendapatan.

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

Instalasi

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

Untuk menginstal plugin Pembelian 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:

Kemudian

1. Buatlah Akun RevenueCat

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

Pendaftaran Baru di RevenueCat di sini.

📘

💡 Tips ini!

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

Modal popup untuk membuat Proyek baru

Modal popup untuk membuat proyek baru

From Pengaturan Proyek > Aplikasi Pilih platform untuk aplikasi yang akan Anda tambahkan di menu kiri dashboard proyek.

Dashboard Proyek untuk Memilih Platform Aplikasi

Bidang Nama Aplikasi Nama aplikasi diperlukan untuk menambahkan aplikasi Anda ke RevenueCat. Sisa konfigurasi bidang 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.

Halaman Konfigurasi Aplikasi untuk Aplikasi App Store Apple

📘

💡 Tips ini!

Setelah mendaftar aplikasi, RevenueCat merekomendasikan mengatur Pemberitahuan Server Platform. Pemberitahuan ini tidak diperlukan, tetapi akan mempercepat Webhook dan pengiriman waktu integrasi dan mengurangi waktu pengiriman pembaruan untuk pelanggan Anda.

📘

Aplikasi dan Pengguna Staging vs. Produksi

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

Apapun aplikasi RevenueCat dapat membuat pembelian sandbox dan produksi dari toko-toko. Jika Anda memiliki aplikasi terpisah untuk tahap pengembangan dan produksi, Anda dapat membuat beberapa proyek 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 diatur untuk memungkinkan RevenueCat berkomunikasi dengan toko aplikasi di atas nama Anda. Lihat panduan RevenueCat Kunci Aplikasi Store Connect, Kredensial Layanan Play, dan Kunci Aplikasi Amazon Appstore untuk informasi lebih lanjut.

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

3. Konfigurasi Produk

▶️ Pengaturan Toko

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

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

📘

Apakah Anda ingin melompati pengaturan toko saat menguji?

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 dikonfigurasi melalui Xcode secara langsung.

Simak lebih lanjut tentang pengaturan file Konfigurasi StoreKit di RevenueCat Tes Sandbox petunjuk.

▶️ Konfigurasi Produk dan Hak Akses di RevenueCat

Setelah produk dalam aplikasi Anda telah dikonfigurasi di App Store Connect, Google Play Console, Toko Aplikasi Amazon, 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 diberikan kepada pelanggan setelah membeli produk tertentu. Penawaran adalah cara sederhana untuk mengorganisir produk dalam aplikasi yang ingin Anda tawarkan di paywall dan mengkonfigurasi mereka secara remote. RevenueCat Merekomendasikan Menggunakan fitur-fitur ini untuk memudahkan code Anda dan memungkinkan Anda untuk mengubah produk tanpa mengeluarkan pembaruan aplikasi.

Lihat Mengatur Produk untuk mengatur produk Anda dan kemudian mengorganisir mereka menjadi Penawaran atau Hak.

4. Menggunakan Purchases SDK RevenueCat

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

Jika Anda mengalami masalah dengan SDK, lihat Mengatasi Masalah SDK untuk petunjuk.

📘

Hanya gunakan kunci publik SDK Anda untuk mengonfigurasi Pembelian

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

Kamu hanya perlu mengonfigurasi instance yang dibagikan dari Purchases sekali, biasanya pada saat aplikasi diluncurkan. Setelah itu, instance yang sama dapat diakses di seluruh aplikasi melalui .shared instance di SDK.

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

Pastikan Anda mengonfigurasi Pembelian dengan kunci publik SDK Anda saja. Anda dapat membaca lebih lanjut tentang kunci-kunci 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_******'})
}

Ketika dalam pengembangan, RevenueCat merekomendasikan mengaktifkan log debug yang lebih rinci. Untuk informasi lebih lanjut tentang log-log ini, lihat di sini. Pengembangan .

Jika Anda merencanakan untuk menggunakan RevenueCat bersama dengan pembelian code yang sudah ada, lihat panduan mereka pada Modus Pengamat.

📘

Pengonfigurian 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 .logIn(). Untuk mengetahui lebih lanjut, lihat panduan RevenueCat pada Menentukan Pengguna.

The SDK will automatically fetch the Paket yang Dikonfigurasi dan mengambil informasi produk dari Apple, Google, atau Amazon. Jadi, produk yang tersedia sudah akan dimuat ketika pelanggan membuka layar pembelian Anda.

Contoh di bawah ini adalah cara mengambil Tawaran. Anda dapat menggunakan Tawaran untuk mengatur layar pembayaran Anda. Lihat panduan RevenueCat tentang Penggunaan Produk untuk informasi lebih lanjut dan praktik terbaik.

▶️ Mengambil dan Menampilkan 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 .logIn(). Untuk mengetahui lebih lanjut, lihat panduan RevenueCat tentang Menentukan Pengguna.

The SDK will automatically fetch the Penawaran yang telah dikonfigurasi dan mengambil informasi produk dari Apple, Google, atau Amazon. Oleh karena itu, produk yang tersedia akan sudah dimuat ketika pelanggan membuka layar pembelian Anda.

Contoh di bawah ini adalah cara mengambil Penawaran. Anda dapat menggunakan Penawaran 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 Penawaran, produkatau tersedia paket tersedia Anda kosong, hal ini disebabkan oleh masalah konfigurasi pada toko yang bersangkutan.

Alasan paling umum untuk masalah ini di App Store Connect adalah perjanjian 'Pembayaran Aplikasi Berbayar' yang tidak diperbarui atau produk tidak dalam keadaan 'Siap Untuk Dikirim' setidaknya. Di Google Play, biasanya terjadi ketika aplikasi tidak dipublikasikan di jalur tertutup dan pengguna uji yang valid ditambahkan.

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

▶️ Lakukan Pembelian

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

Contoh code di bawah menunjukkan proses pembelian paket dan memastikan bahwa konten 'your_entitlement_id' terbuka. Detail lebih lanjut tentang metode ini dapat ditemukan di panduan RevenueCat tentang purchase:package Dapat ditemukan di panduan RevenueCat ▶️ 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
}

Periksa Status Langganan

You can use this method whenever you need to get the latest status, and it’s safe to call this repeatedly throughout the lifecycle of your app. Belanja meng-cache otomatis versi terbaru CustomerInfo ketika itu memperbarui — jadi dalam kebanyakan kasus, metode ini mengambil dari cache dan berjalan sangat cepat.

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

📘

💡 Tips ini!

Pengguna dapat mengakses informasi lebih banyak tentang langganan daripada hanya apakah aktif atau tidak. Lihat panduan RevenueCat tentang Status Langganan Untuk mengetahui apakah langganan akan diperbarui, jika 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 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 metode pembayaran berbeda __CAPGO_KEEP_0__ mengembalikan transaksi dari akun penyimpanan yang sama (akun Apple, Google, atau Amazon). RevenueCat mungkin mencoba membuat alias antara dua ID Pengguna Aplikasi dan menghitungnya sebagai pengguna yang sama ke depannya. Lihat panduan RevenueCat pada Memulihkan Pembelian untuk informasi lebih lanjut tentang perilaku pemulihan yang dapat disesuaikan.

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

Metode ini akan dipicu setiap kali SDK menerima update CustomerInfo object dari panggilan ke getCustomerInfo(), purchase(package:), purchase(product:), or restorePurchases().

Pengupdatean Informasi Pelanggan not Ditambahkan ke aplikasi Anda dari backend RevenueCat, pembaruan hanya dapat terjadi dari permintaan jaringan keluar ke RevenueCat, seperti yang disebutkan di atas.

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

👍

Selamat!

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

Contoh Aplikasi

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

Tampilkan Contoh

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

Jika kamu membutuhkan untuk menggunakan Capacitor secara mendalam, silakan cek dokumentasi SDK di sini.

Next Steps

\

• Jika kamu belum melakukannya, pastikan produkmu telah dikonfigurasi dengan benar dengan mengunjungi guide RevenueCat mengenai hak akses. Petunjuk untuk Hak Akses dalam Aplikasi.
• Jika Anda ingin menggunakan identifikasi pengguna sendiri, baca tentang Pengaturan ID Pengguna Aplikasi .
• Jika Anda beralih dari RevenueCat ke sistem lain, lihat panduan RevenueCat tentang Migrasi Langganan Anda yang Ada.
• Setelah Anda siap untuk menguji integrasi Anda, Anda dapat mengikuti panduan RevenueCat tentang Pengujian dan Debugging.
• Jika Anda memenuhi syarat untuk Program Bisnis Kecil App Store, lihat panduan RevenueCat tentang Cara Mendaftar dan Informasikan RevenueCat

Jika Anda membutuhkan Live update di aplikasi Anda

Daftar di sini 👇

Pendaftaran di sini untuk mendapatkan akun Anda

Capgo

Pergi terus dari pembelian dalam aplikasi untuk capacitor

Jika Anda menggunakan pembelian dalam aplikasi untuk capacitor untuk merencanakan pembayaran dan pembelian, hubungkannya dengan Harga Capgo 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, Panduan Pemula untuk detail implementasi di Panduan Pemula, dan Strategi Pendapatan Untuk detail implementasi di Buku Panduan Pendapatan.