Cara Membeli dalam Aplikasi untuk capacitor

This plugin telah dipindahkan ke repository resmi RevenueCat. Silakan lihat dokumentasi resmi untuk informasi lebih lanjut. Dokumentasi resmi Jika Anda lebih suka menggunakan native __CAPGO_KEEP_0__ yang lebih sederhana tanpa RevenueCat,

@API/native-purchases @capgo/native-purchases __CAPGO_KEEP_0__ Purchases adalah plugin untuk framework __CAPGO_KEEP_1__ yang memungkinkan pembelian dalam aplikasi pada iOS dan Android. Ini menyediakan antarmuka yang sederhana dan konsisten di berbagai platform, sehingga memudahkan pengembang untuk mengimplementasikan langganan dan pembelian dalam aplikasi di aplikasi mobile mereka.

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.

Validasi bukti pembayaran otomatis

• Pengelolaan pengguna
• Bantuan untuk model harga kustom
• Support for custom pricing models
• Analisis detail -Skalaibilitas

Dengan menggunakan plugin Pembelian Capacitor bersama RevenueCat, pengembang dapat menghemat waktu dan upaya ketika menerapkan langganan aplikasi dan pembelian dalam aplikasi di aplikasi mobile mereka, serta 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 aplikasi dan pembelian dalam aplikasi, memvalidasi bukti pembayaran, serta 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 dalam aplikasi di Xcode:

Kemudian

1. Buatlah Akun RevenueCat

Panduan ini akan memandu Anda untuk memulai menggunakan 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 secara keseluruhan daripada menunggu dukungan RevenueCat untuk mentransfer proyek individu.

Organisasi / Bisnis

Kami merekomendasikan menggunakan akun perusahaan ketika mendaftar untuk RevenueCat dan mengatur aplikasi dalam proyek. Anda akan dapat mengundang tim Anda lainnya sebagai kolaborator dalam 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 dropdown di menu navigasi atas yang disebut Proyek.

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.

Dashboard proyek untuk memilih platform aplikasi

Bidang ini 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.

Halaman konfigurasi aplikasi untuk aplikasi App Store Apple

📘

💡 Tip ini!

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

📘

Staging vs. Aplikasi dan Pengguna Produksi

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-toko. Jika Anda memiliki aplikasi terpisah untuk staging dan produksi, Anda dapat membuat proyek multiple 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 perlu diatur untuk RevenueCat dapat berkomunikasi dengan toko-toko aplikasi Anda secara langsung. Lihat panduan RevenueCat Rahasia Aplikasi Store Connect, Kredensial Layanan Play, dan Rahasia Aplikasi Amazon Appstore untuk informasi lebih lanjut.

Penting untuk diingat bahwa kredensial layanan Play dapat memakan waktu hingga 36 jam untuk menyebarluaskan diri di 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, Amazon Appstore, dan Stripe untuk bantuan untuk menavigasi melalui proses ini.

Jika Anda menjual produk iOS, pastikan Anda menandatangani 'Persetujuan Aplikasi Berbayar' 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.

📘

Mau melompati 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 Tes 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 StripeUntuk menggunakan fitur premium, Anda harus 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 in-app yang ingin Anda tawarkan di paywall dan mengkonfigurasinya secara remote. RevenueCat merekomendasikan menggunakan fitur-fitur ini untuk memudahkan pengelolaan code dan memungkinkan Anda untuk mengubah produk tanpa harus merilis update aplikasi.

Lihat Konfigurasi Produk untuk mengatur produk Anda dan kemudian mengorganisir produk tersebut ke dalam Offerings atau Entitlements.

4. Menggunakan Purchases SDK dari 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 Pengaturan SDKs untuk panduan.

📘

Hanya gunakan kunci publik SDK Anda untuk mengonfigurasi Pembelian

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

Anda harus hanya mengonfigurasi instance yang dibagikan dari Pembelian satu kali, biasanya pada saat aplikasi diluncurkan. Setelah itu, instance yang sama dibagikan seluruh aplikasi dengan mengakses .shared instance di dalam SDK.

Lihat panduan RevenueCat pada Mengatur SDK untuk informasi lebih lanjut dan praktik terbaik.

Pastikan Anda mengatur 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 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

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

📘

Mengatur __CAPGO_KEEP_0__ untuk informasi lebih lanjut dan praktik terbaik.

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

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

Contoh berikut adalah mengambil Konfigurasi Penawaran. Anda dapat menggunakan Konfigurasi Penawaran untuk mengatur layar paywall 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

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

The SDK akan secara otomatis mengambil data penawaran 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.

Contoh berikut adalah cara mengambil penawaran. Anda dapat menggunakan penawaran untuk mengatur layar pembayaran Anda. Lihat guide RevenueCat pada 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 produk, penawarantersedia packages terdapat kosong, hal ini disebabkan oleh masalah konfigurasi pada toko yang bersangkutan.

Pembelian yang 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'. Di Google Play ini biasanya terjadi ketika aplikasi tidak dipublikasikan di jalur tertutup dan pengguna uji yang valid tidak 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 mengkonfirmasi bahwa paket tersebut mengunci konten 'your_entitlement_id'. Informasi 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
}

Metode __CAPGO_KEEP_0__ termasuk metode sederhana untuk memfasilitasi pembelian. Metode ini mengambil sebuah paket dari Offering yang diambil dan memproses transaksi dengan toko aplikasi yang bersangkutan.

Anda dapat menggunakan metode ini kapan saja Anda membutuhkan status terbaru, dan aman untuk memanggil metode ini secara berulang-ulang sepanjang siklus aplikasi Anda. Pembelian mengarsipkan terakhir CustomerInfo saat 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 kapan pengguna melakukan aksi yang memerlukan tingkat hak akses tertentu.

📘

💡 Tips!

Anda dapat mengakses informasi lebih banyak tentang langganan daripada hanya apakah aktif atau tidak. Lihat panduan RevenueCat tentang Status Langganan untuk belajar apakah langganan diatur untuk diperbarui, apakah ada masalah yang terdeteksi dengan kartu kredit pengguna, dan lebih banyak lagi.

RevenueCat memungkinkan pengguna Anda 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 restorasi. Perlu diingat bahwa Apple memerlukan mekanisme restorasi dalam event 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)
  })

If 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 menghitungnya sebagai pengguna yang sama ke depannya. Lihat panduan RevenueCat tentang Pengembalian Pembelian untuk informasi lebih lanjut tentang perilaku pengembalian yang dapat disesuaikan.

Karena SDK berfungsi dengan lancar di mana pun platformnya, 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 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 , atau getCustomerInfo(), purchase(package:), purchase(product:)Informasi pengguna yang diperbarui tidak restorePurchases().

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 menghitungnya sebagai pengguna yang sama ke depannya. Lihat panduan RevenueCat tentang pengembalian pembelian untuk informasi lebih lanjut tentang perilaku pengembalian yang dapat disesuaikan. pushed 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)
})

👍

Selamat! 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 kunjungi sumber daya contoh aplikasi RevenueCat.

Lihat Contoh

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

Jika Anda memerlukan untuk menggerakkan penggunaan mendalam dari Capacitor SDK silakan cek dokumentasi di sini.

Langkah Selanjutnya

\

• Jika Anda belum melakukannya, pastikan produk Anda telah dikonfigurasi dengan benar dengan mengecek RevenueCat Petunjuk Pemilikan.
• Jika Anda ingin menggunakan identifikasi pengguna sendiri, baca tentang Mengatur ID Pengguna Aplikasi .
• Jika Anda sedang beralih ke RevenueCat dari sistem lain, lihat panduan RevenueCat tentang Migrasi Subskripsi Anda yang Ada.
• Setelah Anda siap untuk menguji integrasi Anda, Anda dapat mengikuti panduan RevenueCat tentang Menguji dan Mengatasi Masalah.
• Jika Anda memenuhi syarat untuk Program Bisnis Kecil Toko Aplikasi, lihat panduan RevenueCat tentang Cara Mengajukan dan Menginformasikan RevenueCat

Jika Anda membutuhkan Update Langsung di Aplikasi Anda

Gabung dengan kami di sini 👇

Daftar di sini untuk mendapatkan akun Anda

Capgo

Lanjutkan 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/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.