Saltare al contenuto principale
Tutorial

acquisti in-app per capacitor

Come implementare gli acquisti in-app per le app capacitor utilizzando il plugin di acquisti Capacitor e RevenueCat

Martin Donadieu

Martin Donadieu

Responsabile del contenuto

acquisti in-app per capacitor

Questo plugin è ora trasferito nel repository ufficiale di RevenueCat. Per ulteriori informazioni, consultare la documentazione ufficiale per gli acquisti in-app __CAPGO_KEEP_0__ è un plugin per il framework __CAPGO_KEEP_1__ che consente gli acquisti in-app su iOS e Android. Fornisce una semplice e coerente __CAPGO_KEEP_2__ su più piattaforme, rendendo facile per gli sviluppatori implementare le sottoscrizioni e gli acquisti in-app nelle loro app mobili.

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.

Una delle caratteristiche chiave del plugin Capacitor Acquisti è che si integra con RevenueCat, una piattaforma che fornisce strumenti per le sottoscrizioni in-app e gli acquisti in-app. RevenueCat semplifica il processo di implementazione delle sottoscrizioni in-app e degli acquisti fornendo un API semplice e coerente across multiple piattaforme, e automatizzando compiti come la validazione delle ricevute e la gestione degli utenti.

Con RevenueCat, gli sviluppatori possono gestire facilmente le sottoscrizioni, tracciare i ricavi e eseguire altre attività correlate. Alcune funzionalità offerte da RevenueCat includono:

  • Validazione automatica delle ricevute
  • Gestione degli utenti
  • Supporto per modelli di prezzo personalizzati
  • Analisi dettagliate - Scalabilità

Utilizzando il plugin Capacitor Acquisti con RevenueCat, gli sviluppatori possono risparmiare tempo e sforzo quando implementano le sottoscrizioni in-app e gli acquisti in-app nei loro app mobili, e fornire funzionalità aggiuntive che possono aiutare a migliorare l'esperienza utente e aumentare i ricavi.

Utilizzando il plugin Capacitor Acquisti e RevenueCat, gli sviluppatori possono gestire e tracciare facilmente le sottoscrizioni in-app e gli acquisti, validare le ricevute e gestire gli utenti across multiple piattaforme. Ciò consente anche di creare modelli di prezzo personalizzati e di ottenere analisi dettagliate per migliorare le prestazioni e i ricavi.

Installazione

Assicurarsi di utilizzare la versione più recente di Capacitor e del plugin Capacitor Acquisti. Si può controllare la versione più recente di Capacitor e del plugin Capacitor Acquisti sul sito web di Capacitor.

Per installare il plugin Capacitor Acquisti, eseguire il seguente comando: npm i @capgo/capacitor-purchases aggiungi il plugin al tuo app nativo code npx cap sync

aggiungi la capacità di acquisti in-app in Xcode:

Xcode passo 1 poi Xcode passo 2

1. Crea un account RevenueCat

Questa guida ti guiderà attraverso i passaggi per avviare le sottoscrizioni e RevenueCat’s SDK con solo poche righe di code.

iscrivi un nuovo account RevenueCat qui.

📘

💡 Ecco un consiglio!

RevenueCat consiglia di creare un account RevenueCat separato per ogni app / progetto che hai, soprattutto se hai l'intenzione di vendere l'app. Ciò accelererà il processo di trasferimento, poiché potrai trasferire l'intero account al posto di attendere che il supporto di RevenueCat trasferisca i progetti individuali.

Organizzazioni / Enterprise

Consigliamo di utilizzare un account aziendale quando si registra per RevenueCat e si configura l'app all'interno di un progetto. Potrai invitare il resto del tuo team come collaboratori all'interno del tuo progetto, ma solo il proprietario del progetto può gestire la fatturazione. I collaboratori del progetto non possono gestire i dettagli della fatturazione.

2. Configurazione del Progetto e dell'App

▶️ Crea un Progetto

Accedi al pannello di controllo di RevenueCat e aggiungi un nuovo progetto dal menu a discesa nella parte superiore del menu di navigazione chiamato Progetti.

RevenueCat step 1

La finestra di dialogo per la creazione di un nuovo Progetto

▶️ Aggiungi un'applicazione / piattaforma

Da Impostazioni Progetto > Applicazioni nella barra laterale del pannello di controllo del progetto, seleziona la piattaforma per l'applicazione che stai per aggiungere.

RevenueCat passo 2

Pannello di controllo del progetto per la selezione della piattaforma dell'applicazione

Il campo Nome dell'applicazione è richiesto per aggiungere l'applicazione a RevenueCat. Il resto dei campi di configurazione possono essere aggiunti in seguito. Per effettuare acquisti di test e produzione, è necessario configurare l'ID Bundle (iOS) / Nome del Pacchetto (Android) nonché il Segreto Condiviso (iOS) / Credenziali del Servizio (Android).

RevenueCat passo 3

Pagina di configurazione dell'applicazione per un'applicazione dell'App Store di Apple

📘

💡 Ecco un consiglio!

Dopo aver registrato il tuo app, RevenueCat consiglia di configurare Server di piattaforma Notifiche. Queste notifiche non sono richieste, ma accelereranno webhooks e i tempi di integrazione e ridurranno il tempo di aggiornamento dei tuoi abbonati.

📘

Applicazioni di staging e produzione e utenti

RevenueCat non ha ambienti separati per staging e produzione. Al contrario, le transazioni sottostanti per gli utenti sono differenziate da sandbox e produzione.

Qualsiasi app RevenueCat può effettuare entrambe le acquisti di sandbox e produzione dai negozi. Se hai applicazioni separate per staging e produzione, puoi creare più progetti in RevenueCat per riflettere la tua configurazione.

Inoltre, gli utenti non sono separati per ambiente, neanche. Lo stesso utente può avere acquisti attivi di sandbox e acquisti attivi di produzione nello stesso momento.

▶️ Credenziali di Servizio

Le credenziali di servizio devono essere configurate per consentire a RevenueCat di comunicare con i negozi dell'applicazione al tuo posto. Vedi le guide di RevenueCat Segreto condiviso di App Store Connect, Credenziali di servizio Play, e Segreto condiviso di Amazon Appstore per ulteriori informazioni.

Nota che le credenziali di servizio Play possono richiedere fino a 36 ore per propagarsi attraverso i server di Google.

3. Configurazione del prodotto

▶️ Configurazione dello store

Prima di poter iniziare ad utilizzare RevenueCat per recuperare i prodotti, è necessario configurare i prodotti nei rispettivi store. Consultate le seguenti guide per App Store Connect, Google Play Console, Amazon Appstoree Stripe per ricevere aiuto per navigare in questo processo.

Se stai vendendo prodotti iOS, assicurati di firmare il tuo 'Accordo per applicazioni a pagamento' e di compilare le informazioni bancarie e fiscali in App Store Connect > Accordi, Tasse e Banche. Questo deve essere completato prima di poter testare qualsiasi acquisto.

📘

Vuoi saltare la configurazione dello store durante il testing?

Sul iOS, puoi rimandare la configurazione dei prodotti in App Store Connect testando con file di configurazione StoreKit al posto suo. Questi file di configurazione richiedono una configurazione minima e sono configurabili tramite Xcode direttamente.

Leggi di più sulla configurazione dei file di configurazione StoreKit in RevenueCat Test di Sandbox guida.

▶️ Configura prodotti e entità in RevenueCat

Una volta che i prodotti per l'app hanno configurato in App Store Connect, Google Play Console, Amazon Appstore, o Stripe, dovrai copiare quella configurazione nel dashboard di RevenueCat. RevenueCat utilizza un sistema di Entitlements per controllare l'accesso alle funzionalità premium e le Offerte per gestire l'insieme dei prodotti che offri ai clienti.

Gli Entitlements sono il livello di accesso che un cliente è “autorizzato” a dopo aver acquistato un prodotto specifico. Le Offerte sono un modo semplice per organizzare i prodotti per l'app che desideri “offrire” sul tuo paywall e configurarli a distanza. RevenueCat consiglia di utilizzare queste funzionalità per semplificare il tuo code e consentirti di modificare i prodotti senza rilasciare un aggiornamento dell'app.

Vedi Configurazione dei prodotti per configurare i tuoi prodotti e poi organizzarli in Offerte o Entità.

RevenueCat passo 4

4. Utilizzando le funzionalità di acquisto di RevenueCat SDK

RevenueCat SDK implementa in modo trasparente gli acquisti e le sottoscrizioni su più piattaforme, sincronizzando i token con il server di RevenueCat.

Se incontri problemi con il SDK, consulta Guida alla risoluzione dei problemi dei SDK per ulteriori informazioni.

📘

Utilizza solo la tua chiave pubblica SDK per configurare gli acquisti

Puoi ottenere la tua chiave pubblica SDK dalla API chiavi scheda sotto Impostazioni del progetto nella dashboard.

Devi configurare l'istanza condivisa di Purchases solo una volta, di solito all'avvio dell'app. Successivamente, la stessa istanza viene condivisa in tutta l'app accedendo all' .shared istanza nel SDK.

Vedi la guida di RevenueCat su Configurazione SDK per ulteriori informazioni e migliori pratiche.

Assicurati di configurare Purchases con la tua chiave pubblica SDK solo. Puoi leggere di più sulle diverse chiavi API disponibili nella guida di autenticazione di RevenueCat guide.

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

Quando in fase di sviluppo, RevenueCat raccomanda di abilitare log di debug più verbosi. Per ulteriori informazioni su questi log, vedi il loro Debugging guida.

Se stai pianificando di utilizzare RevenueCat insieme al tuo acquisto code, consulta la loro guida su Observer Mode.

📘

Configurazione degli acquisti con ID utente

Se hai un sistema di autenticazione degli utenti nella tua app, puoi fornire un identificatore dell'utente al momento della configurazione o in un momento successivo con una chiamata a .logIn(). Per ulteriori informazioni, consulta la guida di RevenueCat su Identificazione degli utenti.

Il SDK caricherà automaticamente le offerte configurate e recupererà le informazioni sui prodotti da Apple, Google o Amazon. Pertanto, i prodotti disponibili saranno già caricati quando i clienti avviano la schermata di acquisto della tua app.

Ecco un esempio di fetch delle Offerte. Puoi utilizzare le Offerte per organizzare lo schermo del paywall. Vedi la guida di RevenueCat su Mostrare Prodotti per maggiori informazioni e migliori pratiche.

▶️ Esegui e Mostra Prodotti Disponibili

📘

Configurare Acquisti con ID Utente

Se hai un sistema di autenticazione degli utenti nella tua app, puoi fornire un identificatore utente al momento della configurazione o in un momento successivo con una chiamata a .logIn(). Per imparare di più, consulta la guida di RevenueCat su Identificare gli Utenti.

Il SDK eseguirà automaticamente il fetch delle Offerte configurate e recupererà le informazioni sui prodotti da Apple, Google o Amazon. Quindi, i prodotti disponibili saranno già caricati quando i clienti avviano lo schermo di acquisto della tua app.

Ecco un esempio di fetch delle Offerte. Puoi utilizzare le Offerte per organizzare lo schermo del paywall. Vedi la guida di RevenueCat su Mostrando Prodotti per ulteriori informazioni e migliori pratiche.

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

Se il recupero dei tuoi Offerte, prodotti, o disponibili pacchetti sono vuoti, ciò è dovuto a un problema di configurazione nel rispettivo store.

Le ragioni più comuni per questo in App Store Connect sono un accordo 'Pagamenti' non aggiornato o prodotti non almeno in stato 'Pronto per la pubblicazione'. In Google Play ciò si verifica generalmente quando l'app non è pubblicata su un percorso chiuso e un utente di test valido aggiunto.

Puoi trovare ulteriori informazioni sul troubleshooting di questo problema nel Centro Aiuto di RevenueCat ▶️ Effettua un acquisto.

▶️

The SDK include una semplice funzione per facilitare le transazioni. Il purchase:package prende un pacchetto dall'offerta e processa la transazione con la rispettiva piattaforma di app.

The code di esempio sotto mostra il processo di acquisto di un pacchetto e la conferma che sblocca il contenuto “your_entitlement_id”. Ulteriori informazioni sulla purchase:package metodo possono essere trovate nella guida di RevenueCat su Acquisire pagamenti.

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
}

▶️ Verifica lo stato della sottoscrizione

È possibile utilizzare questa funzione ogni volta che si necessita di ottenere lo stato più aggiornato, e si tratta di una chiamata sicura da effettuare ripetutamente durante l'intero ciclo di vita dell'app. Le transazioni CustomerInfo si cache automaticamente lo stato più aggiornato — quindi in molti casi, questa funzione carica dalla cache e si esegue molto velocemente.

È tipico chiamare questa funzione quando si decide quale interfaccia da mostrare all'utente, e ogni volta che l'utente esegue un'azione che richiede un certo livello di accesso.

📘

💡 Ecco un consiglio!

Potete accedere a molte informazioni più dettagliate su una sottoscrizione rispetto a semplicemente sapere se è attiva o meno. Consultate la guida di RevenueCat su Situazione della Sottoscrizione per imparare se la sottoscrizione è impostata per rinnovarsi, se ci sono problemi rilevati con la carta di credito dell'utente e altro.

RevenueCat consente agli utenti di ripristinare le loro acquisti in-app, riattivando qualsiasi contenuto che hanno acquistato precedentemente dallo stesso account del negozio (Apple, Google o Amazon). Raccomandiamo a tutti gli sviluppatori di avere un modo per far ripristinare il metodo agli utenti. Nota che Apple richiede un meccanismo di ripristino nel caso in cui un utente perda l'accesso ai suoi acquisti (ad esempio: disinstallando/rininstallando l'app, perdendo le informazioni dell'account, ecc.). Se due ID degli utenti dell'app ID degli Utenti dell'App

  const res = await CapacitorPurchases.restoreTransactions()
  const purchaserInfo = res.purchaserInfo
  const ids: string[] = [] // extract active subscriptions ids
  purchaserInfo.activeSubscriptions.forEach((id) => {
    ids.push(id)
  })

ripristinano le transazioni dallo stesso account del negozio sottostante (Apple, Google o Amazon). RevenueCat potrebbe tentare di creare un alias tra gli ID degli utenti dell'app e conteggiarli come lo stesso utente in avanti. Consultate la guida di RevenueCat su Ripristino degli Acquisti per ulteriori informazioni sui diversi comportamenti di ripristino configurabili. Poiché il __CAPGO_KEEP_0__ funziona senza problemi su qualsiasi piattaforma, le modifiche alle informazioni di acquisto di un utente possono provenire da una varietà di fonti. Potete rispondere a qualsiasi modifica nei dati di un cliente

Since the SDK works seamlessly on any platform, changes to a user’s purchase info may come from a variety of sources. You can respond to any changes in a customer’s CustomerInfo conformando a un metodo delegato facoltativo purchases:receivedUpdated:.

Questo metodo si attiverà ogni volta che il SDK riceve un aggiornamento CustomerInfo oggetto da chiamate a getCustomerInfo(), purchase(package:), purchase(product:), o restorePurchases().

Le informazioni sul cliente non vengono non vengono pushate al tuo app dal backend di RevenueCat, gli aggiornamenti possono avvenire solo da una richiesta di rete in uscita verso RevenueCat, come menzionato sopra.

A seconda del tuo app, potrebbe essere sufficiente ignorare il delegato e gestire semplicemente le modifiche alle informazioni sul cliente la prossima volta che il tuo app viene avviato o nei blocchi di completamento dei metodi del SDK.

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

👍

Hai fatto!

Hai ora implementato un sistema di acquisto di abbonamenti completo senza spendere un mese a scrivere server code. Congratulazioni!

Esempi di App

Per scaricare esempi più completi di integrazione del SDK, visita le risorse di esempio di app di RevenueCat.

Visualizza Esempi

Pubblicherò presto un'app di esempio utilizzando Capacitor e Vue.js.

Se hai bisogno di spostare l'utilizzo approfondito del Capacitor SDK, consulta la documentazione qui.

Passaggi Successivi

\

Se hai bisogno di aggiornamenti in tempo reale nella tua app

Unisciti qui 👇

Registra qui per ottenere il tuo account

Capgo

Continua con le vendite in-app per capacitor

Se stai utilizzando vendite in-app per capacitor per pianificare pagamenti e acquisti, connettilo con Capgo Pricing per il workflow del prodotto in Capgo Pricing, Sistema di pagamento per la dettagliata implementazione in Sistema di pagamento, @capgo/native-purchases per la dettagliata implementazione in @capgo/native-purchases, Guida per l'avvio per la dettagliata implementazione in Guida per l'avvio, e Libro delle strategie di ricavo per la dettagliata implementazione in Libro delle strategie di ricavo.

Aggiornamenti in tempo reale per le app Capacitor

Quando un bug nel layer web è attivo, invia la correzione attraverso Capgo invece di attendere giorni per l'approvazione della store. Gli utenti ricevono l'aggiornamento in background mentre le modifiche native rimangono nel normale percorso di revisione.

Inizia subito

Ultimi articoli dal nostro Blog

Capgo ti offre le migliori informazioni che ti servono per creare un'app mobile davvero professionale.