Salta al contenuto principale
Tutorial

Acquisti in-app per capacitor

Come implementare gli acquisti in-app per app capacitor con il plugin Capacitor Purchases e RevenueCat

in-app purchase per il blog di capacitor Capgo

Questo plugin è stato trasferito nel repository ufficiale di RevenueCat. Consulta documentazione ufficiale per maggiori informazioni.

Se preferisci un API nativo più semplice senza RevenueCat, @capgo/native-purchases implementa gli acquisti in-app e gli abbonamenti direttamente con StoreKit e Google Play Billing.

Il plugin Capacitor Purchases è un plugin per il framework Capacitor che permette di gestire gli acquisti in-app su iOS e Android. Offre un'API semplice e coerente su più piattaforme, facilitando l'implementazione di abbonamenti e acquisti nelle app mobile.

Una delle caratteristiche principali del plugin Capacitor Purchases è l'integrazione con RevenueCat, una piattaforma che fornisce strumenti per gli abbonamenti e gli acquisti in-app. RevenueCat semplifica il processo di implementazione offrendo una API semplice e coerente su più piattaforme, automatizzando task come la validazione degli scontrini e la gestione degli utenti.

Con RevenueCat, gli sviluppatori possono gestire facilmente gli abbonamenti, monitorare i ricavi e svolgere altre attività correlate. Alcune funzionalità offerte da RevenueCat includono:

  • Validazione automatizzata degli scontrini
  • Gestione utenti
  • Supporto per modelli di pricing personalizzati
  • Analytics dettagliate - Scalabilità

Utilizzando il plugin Capacitor Purchases con RevenueCat, gli sviluppatori possono risparmiare tempo e fatica nell'implementare abbonamenti e acquisti in-app, offrendo funzionalità extra che migliorano l'esperienza utente e aumentano i ricavi.

Utilizzando il plugin Capacitor Purchases e RevenueCat, gli sviluppatori possono gestire e monitorare facilmente abbonamenti e acquisti in-app, convalidare le ricevute e gestire gli utenti su più piattaforme. Permette inoltre di creare modelli di prezzo personalizzati e ottenere analisi dettagliate per migliorare performance e ricavi.

Installazione

Assicurati di usare l'ultima versione di Capacitor e del plugin Capacitor Purchases. Puoi verificare l'ultima versione di Capacitor e del plugin Capacitor Purchases sul sito di Capacitor.

Per installare il plugin Capacitor Purchases, esegui il seguente comando: npm i @capgo/capacitor-purchases aggiungi il plugin al code nativo della tua app npx cap sync

aggiungi la funzionalità degli acquisti in-app in Xcode:

Xcode passaggio 1 poi xcode passaggio 2

1. Crea un account RevenueCat

Questa guida ti spiegherà come configurare abbonamenti e SDK di RevenueCat con poche righe di code.

Registrati per un nuovo account RevenueCat qui.

📘

💡 Un consiglio!

RevenueCat consiglia di creare un account separato per ogni app o progetto, specialmente se prevedi di venderla. Questo velocizzerà il processo di trasferimento, poiché potrai trasferire l'intero account invece di aspettare che il supporto RevenueCat trasferisca i singoli progetti.

Organizzazioni / Enterprise

Consigliamo di usare un account aziendale per registrarsi su RevenueCat e configurare l'app all'interno di un progetto. Potrai invitare il resto del team come collaboratori al tuo progetto, ma solo il proprietario del progetto può gestire la fatturazione. I collaboratori non possono gestire i dettagli di fatturazione.

2. Configurazione di Progetto e App

▶️ Crea un Progetto

Vai alla dashboard di RevenueCat e Aggiungi un nuovo progetto dal menu a discesa nella barra di navigazione superiore chiamato Progetti.

RevenueCat passaggio 1

Il popup per creare un nuovo progetto

▶️ Aggiungi un'app / piattaforma

Da Impostazioni progetto > App nel menu a sinistra della dashboard del progetto, seleziona la piattaforma per l'app che aggiungerai.

RevenueCat passaggio 2

Dashboard del progetto per selezionare la piattaforma dell'app

Il campo Nome dell'app è necessario per aggiungere la tua app a RevenueCat. Gli altri campi di configurazione possono essere aggiunti in seguito. Per effettuare acquisti di test e di produzione, è necessario configurare il Bundle ID (iOS) / Package Name (Android) e lo Shared Secret (iOS) / le Service Credentials (Android).

Passaggio 3 di RevenueCat

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

📘

💡 Un consiglio!

Dopo aver registrato la tua app, RevenueCat consiglia di configurare Notifiche server della piattaforma. Queste notifiche non sono obbligatorie, ma velocizzeranno webhook e i tempi di integrazione, riducendo i tempi di attesa per l'aggiornamento dei tuoi abbonati.

📘

App e utenti: staging vs. produzione

RevenueCat non ha ambienti separati per staging e produzione. Le transazioni sottostanti degli utenti sono invece differenziate tra sandbox e produzione.

Qualsiasi app RevenueCat può effettuare acquisti sia sandbox sia di produzione dagli store. Se hai app separate per staging e produzione, puoi creare più progetti in RevenueCat per rispecchiare la tua configurazione.

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

▶️ Credenziali di servizio

È necessario configurare le credenziali di servizio affinché RevenueCat possa comunicare con gli store per tuo conto. Consulta le guide di RevenueCat Shared Secret di App Store Connect, Credenziali di servizio Play, e Segreto condiviso di Amazon Appstore per maggiori informazioni.

Nota che le credenziali di servizio Play possono impiegare fino a 36 ore per propagarsi sui server di Google.

3. Configurazione prodotti

▶️ Configurazione store

Prima di poter iniziare a usare RevenueCat per recuperare i prodotti, devi configurare i prodotti nei rispettivi store. Consulta le seguenti guide per App Store Connect, Google Play Console, Amazon Appstore, e Stripe per ricevere aiuto in questo processo.

Se vendi prodotti iOS, assicurati di firmare il tuo ‘Paid Applications Agreement’ e di compilare i dati bancari e fiscali in App Store Connect > Accordi, tasse e banca. Questa operazione va completata prima di poter testare qualsiasi acquisto.

📘

Vuoi saltare la configurazione dello store durante i test?

Su iOS puoi rimandare la configurazione dei prodotti in App Store Connect testando invece con i file StoreKit Configuration. Questi file richiedono una configurazione minima e sono configurabili direttamente da Xcode.

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

▶️ Configura prodotti ed Entitlements in RevenueCat

Una volta configurati i tuoi prodotti in-app su App Store Connect, Google Play Console, Amazon Appstore, o Stripe, dovrai copiare la configurazione nel dashboard di RevenueCat. RevenueCat utilizza un sistema di Entitlements per controllare l'accesso alle funzioni premium e gli Offerings per gestire il set di prodotti offerti ai clienti.

Gli Entitlements rappresentano il livello di accesso che un cliente riceve dopo l'acquisto di un prodotto specifico. Gli Offerings sono un modo semplice per organizzare i prodotti in-app che vuoi offrire sulla tua paywall e configurarli da remoto con RevenueCat consiglia utilizzare queste funzionalità per semplificare il tuo code e permetterti di cambiare prodotti senza rilasciare un nuovo aggiornamento dell'app.

Vedi Configurazione dei prodotti per configurare i prodotti e organizzarli in Offerings o Entitlements.

RevenueCat passaggio 4

4. Utilizzo di Purchases SDK di RevenueCat

RevenueCat SDK implementa in modo fluido acquisti e abbonamenti su tutte le piattaforme, sincronizzando i token con il server RevenueCat.

Se riscontri problemi con il SDK, consulta Troubleshooting degli SDK per assistenza.

📘

Usa solo la tua chiave pubblica SDK per configurare Purchases

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

Dovresti configurare l'istanza condivisa di Acquisti una sola volta, solitamente all'avvio dell'app. Successivamente, la stessa istanza verrà condivisa in tutta l'app tramite l'accesso alla .shared istanza in SDK.

Guarda la guida di RevenueCat su Configurare SDK per maggiori informazioni e best practice.

Assicurati di configurare Acquisti solo con la tua chiave pubblica SDK. Puoi leggere di più sulle diverse chiavi API disponibili in RevenueCat Guida all'autenticazione.

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

In fase di sviluppo, RevenueCat consiglia di abilitare log di debug più dettagliati. Per maggiori informazioni su questi log, consulta la loro Debug guida.

Se hai intenzione di usare RevenueCat insieme al tuo code di acquisti esistente, consulta la loro guida su Modalità Observer.

📘

Configurare gli acquisti con gli User ID

Se la tua app ha un sistema di autenticazione, puoi fornire un identificativo utente al momento della configurazione o in un secondo momento tramite una chiamata a .logIn(). Per saperne di più, consulta la guida di RevenueCat su Identificazione degli utenti.

Il SDK recupererà automaticamente gli Offerings configurati e otterrà le informazioni sui prodotti da Apple, Google o Amazon. In questo modo, i prodotti disponibili saranno già caricati quando gli utenti apriranno la schermata di acquisto.

Di seguito un esempio di recupero degli Offerings. Puoi usare gli Offerings per organizzare la schermata paywall. Consulta la guida di RevenueCat su Visualizzare i prodotti per maggiori informazioni e best practice.

▶️ Recupero e visualizzazione dei prodotti disponibili

📘

Configurare gli acquisti con gli User ID

Se la tua app ha un sistema di autenticazione, puoi fornire un identificativo utente al momento della configurazione o in un secondo momento tramite una chiamata a .logIn(). Per saperne di più, consulta la guida di RevenueCat su Identificazione degli utenti.

Il SDK recupererà automaticamente gli Offerings configurati e otterrà le informazioni sui prodotti da Apple, Google o Amazon. In questo modo, i prodotti disponibili saranno già caricati quando gli utenti apriranno la schermata di acquisto.

Di seguito un esempio di recupero degli Offerings. Puoi usare gli Offerings per organizzare la schermata paywall. Consulta la guida di RevenueCat su Visualizzare i prodotti per maggiori informazioni e best practice.

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

Se il recupero delle tue Offerte, e i prodotti, o disponibile packages disponibili sono vuoti, dipende da un problema di configurazione nello store di riferimento.

Le cause più comuni in App Store Connect sono un ‘Paid Applications Agreement’ scaduto o prodotti che non sono almeno nello stato ‘Ready To Submit’. In Google Play, accade solitamente quando l'app non è pubblicata su un canale chiuso con un utente di test valido aggiunto.

Puoi trovare maggiori informazioni sulla risoluzione del problema nel Centro assistenza di RevenueCat Centro assistenza.

▶️ Effettua un acquisto

Il SDK include un metodo semplice per facilitare gli acquisti. Il purchase:package prende un pacchetto dall'Offering recuperata e gestisce la transazione con il rispettivo app store.

L'esempio code qui sotto mostra il processo di acquisto di un pacchetto e conferma che sblocca il contenuto “your_entitlement_id”. Maggiori dettagli sul purchase:package metodo sono disponibili nella guida di RevenueCat su Effettuare acquisti.

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
}

▶️ Controlla lo stato dell'abbonamento

Puoi usare questo metodo ogni volta che ti serve lo stato aggiornato; è sicuro chiamarlo ripetutamente durante il ciclo di vita della tua app. Acquisti mette in cache automaticamente l'ultimo CustomerInfo ogni volta che si aggiorna — quindi, nella maggior parte dei casi, questo metodo attinge dalla cache ed è velocissimo.

È tipico chiamare questo metodo quando si decide quale UI mostrare all'utente e ogni volta che l'utente compie un'azione che richiede un certo livello di entitlement.

📘

💡 Un consiglio!

Puoi accedere a molte più informazioni su un abbonamento rispetto al solo stato attivo o meno. Consulta la guida di RevenueCat su Stato dell'abbonamento per sapere se l'abbonamento è impostato per il rinnovo, se sono stati rilevati problemi con la carta di credito dell'utente e altro ancora.

RevenueCat permette agli utenti di ripristinare gli acquisti in-app, riattivando qualsiasi contenuto acquistato in precedenza dallo stesso account dello store (account Apple, Google o Amazon). Consigliamo che tutte le app offrano un modo per richiamare il metodo di restore. Tieni presente che Apple richiede un meccanismo di restore nel caso in cui l'utente perda l'accesso ai propri acquisti (es: disinstallazione/reinstallazione dell'app, perdita dei dati dell'account, ecc).

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

Se due diversi App User ID ripristinare le transazioni dallo stesso account dello store sottostante (account Apple, Google o Amazon). RevenueCat potrebbe tentare di creare un alias tra i due App User ID e considerarli come lo stesso utente in futuro. Consulta la guida RevenueCat su Ripristino degli acquisti per maggiori informazioni sui diversi comportamenti di ripristino configurabili.

Poiché SDK funziona senza problemi su qualsiasi piattaforma, le modifiche alle info di acquisto di un utente possono provenire da varie fonti. Puoi rispondere a ogni modifica nei dati del cliente CustomerInfo implementando un metodo delegate opzionale, purchases:receivedUpdated:.

Questo metodo verrà eseguito ogni volta che SDK riceve un oggetto CustomerInfo aggiornato tramite le chiamate a getCustomerInfo(), purchase(package:), purchase(product:), o restorePurchases().

Gli aggiornamenti di CustomerInfo vengono hai inviati alla tua app dal backend di RevenueCat; gli aggiornamenti possono avvenire solo tramite una richiesta di rete in uscita verso RevenueCat, come menzionato sopra.

A seconda della tua app, potrebbe bastare ignorare il delegate e gestire semplicemente le modifiche alle informazioni del cliente al prossimo avvio dell'app o nei completion block dei metodi SDK.

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

👍

Ce l'hai fatta!

Hai implementato un sistema completo per l'acquisto di abbonamenti senza passare un mese a scrivere code lato server. Complimenti!

App di esempio

Per scaricare esempi più completi sull'integrazione di SDK, vai alle risorse delle app di esempio di RevenueCat.

Guarda gli esempi

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

Se hai bisogno di approfondire l'uso di Capacitor SDK, consulta la documentazione qui.

Prossimi passi

\

Se hai bisogno di Live update nella tua app

Unisciti a noi qui 👇

Registrati qui per ottenere il tuo account

Capgo

Continua dagli acquisti in-app per capacitor

Se stai usando Acquisti in-app per capacitor per pianificare pagamenti e acquisti, collegalo a Prezzi Capgo per il workflow del prodotto nella pagina Prezzi di Capgo, Sistema di pagamento per i dettagli di implementazione nel sistema di pagamento, @capgo/native-purchases per i dettagli di implementazione in @capgo/native-purchases, Per iniziare per i dettagli di implementazione nella guida introduttiva, e Playbook dei ricavi per i dettagli sull'implementazione nel Revenue Playbook.

Live updates per le app Capacitor

Quando un bug nel web-layer è live, rilascia la fix tramite Capgo invece di aspettare giorni l'approvazione degli store. Gli utenti ricevono l'update in background, mentre le modifiche native restano nel normale processo di review.

Ultimi articoli dal blog

Capgo ti offre gli insight migliori che ti servono per creare un'app mobile davvero professionale.