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 Purchases e RevenueCat

Martin Donadieu

Martin Donadieu

Content Marketer

acquisti in-app per capacitor

Questo plugin è ora trasferito nel repository ufficiale di RevenueCat. Per ulteriori informazioni, consultare la documentazione ufficiale per ulteriori informazioni.

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

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.

Uno dei principali vantaggi del plugin Le acquisti Capacitor è che integra con RevenueCat, una piattaforma che fornisce strumenti per abbonamenti e acquisti in-app. RevenueCat semplifica il processo di implementazione degli abbonamenti e degli acquisti in-app fornendo una semplice e coerente API su più piattaforme, e automatizzando compiti come la validazione delle ricevute e la gestione degli utenti.

Con RevenueCat, gli sviluppatori possono gestire facilmente gli abbonamenti, tracciare i ricavi e eseguire altre attività correlate.

  • Automatizzazione della validazione delle ricevute
  • Gestione degli utenti
  • Supporto per modelli di prezzo personalizzati
  • Analisi dettagliate - Scalabilità

Utilizzando il plugin Le acquisti Capacitor con RevenueCat, gli sviluppatori possono risparmiare tempo e sforzo quando implementano gli abbonamenti 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 delle Acquisti e RevenueCat, gli sviluppatori possono gestire e tracciare facilmente le sottoscrizioni e gli acquisti in-app, verificare le ricevute e gestire gli utenti su più piattaforme. Ciò consente anche di creare modelli di prezzi personalizzati e di ottenere analisi dettagliate per migliorare le prestazioni e il reddito.

Installazione

Assicurati di utilizzare la versione più recente di Capacitor e del plugin delle Acquisti Capacitor. Puoi controllare la versione più recente di Capacitor e del plugin delle Acquisti Capacitor sul sito web di Capacitor.

Per installare il plugin delle Acquisti Capacitor, esegui il seguente comando: npm i @capgo/capacitor-purchases aggiungi il plugin alle tue app native code npx cap sync

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

Passo 1 di Xcode poi Passo 2 di Xcode

1. Crea un account RevenueCat

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

Iscriviti a un nuovo account RevenueCat Ecco.

📘

Ecco un consiglio!

RevenueCat raccomanda 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.

Aziende / 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 del tuo progetto, ma solamente il proprietario del progetto può gestire le fatture. I collaboratori del progetto non possono gestire i dettagli delle fatture.

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 passo 1

Il popup modale per la creazione di un nuovo Progetto

▶️ Aggiungi un'applicazione / piattaforma

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

RevenueCat passo 2

Dashboard del progetto per la selezione della piattaforma dell'applicazione

Il campo Nome dell'applicazione è richiesto per aggiungere il tuo app a RevenueCat. Il resto dei campi di configurazione possono essere aggiunti in seguito. Per effettuare acquisti di test e produzione, il Bundle ID (iOS) / Nome del pacchetto (Android) nonché la Chiave condivisa (iOS) / Credenziali del servizio (Android) devono essere configurati.

Passaggio 3 di RevenueCat

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

📘

💡 Ecco un consiglio!

Dopo aver registrato il tuo app, RevenueCat raccomanda di configurare Notifiche del server di piattaforma. Queste notifiche non sono richieste, ma accelereranno webhook e il tempo di integrazione e ridurranno il tempo di aggiornamento dei tuoi sottscriventi.

📘

Applicazioni e utenti di staging e produzione

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

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

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

▶️ Credenziali del servizio

Le credenziali del servizio devono essere configurate per RevenueCat per comunicare con i negozi per conto tuo. Vedi le guide di RevenueCat Segreto condiviso di App Store Connect, Credenziali del servizio di Playe Segreto condiviso di Amazon Appstore per ulteriori informazioni.

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

3. Configurazione del prodotto

▶️ Configurazione del negozio

Prima di poter iniziare ad utilizzare RevenueCat per recuperare i prodotti, è necessario configurare i prodotti nei rispettivi negozi. Consultate i seguenti guide per App Store Connect, Google Play Console, Amazon Appstore, e Stripe per aiuto a navigare attraverso questo processo.

Se si sta vendendo prodotti iOS, assicurarsi di firmare il 'Paid Applications Agreement' e di compilare le informazioni bancarie e fiscali in App Store Connect > Accordi, Tasse e Banche. Questa operazione deve essere completata prima di poter testare qualsiasi acquisto.

📘

Vuoi saltare la configurazione del negozio durante il testing?

Sul iOS, è possibile rimandare la configurazione dei prodotti in App Store Connect utilizzando i file di configurazione di StoreKit al posto loro. Questi file di configurazione richiedono una configurazione minima e sono configurabili tramite Xcode direttamente.

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

▶️ Configura i prodotti e le autorizzazioni in RevenueCat

Una volta che i tuoi prodotti in-app sono stati configurati in App Store Connect, Google Play Console, Amazon Appstoreo Stripe, dovrai copiare quella configurazione nel pannello di controllo di RevenueCat. RevenueCat utilizza un sistema di autorizzazioni per controllare l'accesso alle funzionalità premium e gli Offerti per gestire l'insieme dei prodotti che offri ai clienti.

Gli Autorizzazioni sono il livello di accesso che un cliente è “autorizzato” a dopo aver acquistato un prodotto specifico. Gli Offerti sono un modo semplice per organizzare i prodotti in-app che desideri “offrire” sul tuo paywall e configurarli a distanza. RevenueCat consiglia l'uso di queste funzionalità per semplificare il tuo __CAPGO_KEEP_0__ e consentirti di cambiare prodotti senza rilasciare un aggiornamento dell'applicazione. utilizing these features to simplify your code and enable you to change products without releasing an app update.

Configurazione dei prodotti per configurare i tuoi prodotti e poi organizzarli in Offerte o Entità. Passo 4 di RevenueCat

4. Utilizzo delle funzionalità di acquisto di Purchases __CAPGO_KEEP_0__

RevenueCat SDK implementa in modo trasparente le funzionalità di acquisto e abbonamento su più piattaforme, sincronizzando i token con il server di RevenueCat.

Se incontri problemi con lo SDK, consulta

If you run into issues with the SDK, see per ottenere indicazioni. Utilizza solo la tua chiave pubblica __CAPGO_KEEP_0__ per configurare le funzionalità di acquisto.

📘

Only use your public SDK key to configure Purchases

Puoi ottenere la tua chiave pubblica SDK dalla sezione API chiavi sotto Impostazioni del progetto in 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' istanza nel __CAPGO_KEEP_0__. .shared instance in the SDK.

Configurazione __CAPGO_KEEP_0__ Configuring SDK for more information and best practices.

Assicurati di configurare Acquisti con la tua chiave pubblica SDK solo. Puoi leggere di più sulle diverse API chiavi 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_******'})
}

Quando in fase di sviluppo, RevenueCat consiglia di abilitare log di debug più verbosi. Per ulteriori informazioni su questi log, vedi il loro Guida al debug Se hai in programma di utilizzare RevenueCat insieme ai tuoi acquisti esistenti __CAPGO_KEEP_0__, consulta la loro guida su

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on Configurazione degli 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

. Per ulteriori informazioni, consulta la guida di RevenueCat su .logIn()Acquisti Identificazione degli Utenti.

Il SDK recupererà 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 avvieranno la schermata di acquisto.

Ecco un esempio di come recuperare le Offerte. Puoi utilizzare le Offerte per organizzare la schermata del paywall. Consulta la guida di RevenueCat su Visualizzazione dei Prodotti per ulteriori informazioni e migliori pratiche.

▶️ Recupera e visualizza i prodotti disponibili

📘

Configurazione degli acquisti con ID degli utenti

Se hai un sistema di autenticazione degli utenti nell'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.

The SDK effettuerà automaticamente il recupero delle Offerte configurate e il recupero delle informazioni sui prodotti da Apple, Google o Amazon. Di conseguenza, i prodotti disponibili saranno già caricati quando i clienti avvieranno la schermata di acquisto del tuo prodotto. Offerte configurate Ecco un esempio di come recuperare le Offerte. Puoi utilizzare le Offerte per organizzare la schermata del tuo paywall. Consulta la guida di RevenueCat su

Visualizzazione dei prodotti per ulteriori informazioni e migliori pratiche. Se il recupero dei

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

prodotti delle Offerte , o dei pacchetti, disponibili sono vuoti, ciò è dovuto a un problema di configurazione nel rispettivo store.protectedTokens targetLanguage texts

I motivi più comuni per questo in App Store Connect sono un accordo di applicazioni a pagamento non aggiornato o prodotti non almeno in stato di 'Pronto per la pubblicazione'. In Google Play questo solitamente si verifica quando l'app non è pubblicata su un percorso chiuso e non è stato aggiunto un utente di test valido.

Puoi trovare ulteriori informazioni per risolvere questo problema in RevenueCat Centro Aiuto.

▶️ Effettua un acquisto

Il SDK include una semplice funzione per facilitare gli acquisti. Il purchase:package prende un pacchetto dallo Offering eletto e processa la transazione con il rispettivo negozio di app.

Il code di esempio sotto mostra il processo di acquisto di un pacchetto e la conferma che sblocca il contenuto 'your_entitlement_id'. Ulteriori dettagli sulla purchase:package funzione possono essere trovati 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
}

▶️ Verifica lo stato della sottoscrizione

Puoi utilizzare questa funzione ogni volta che hai bisogno di ottenere lo stato più aggiornato, e è sicuro chiamarla ripetutamente durante la vita ciclo del tuo app. Acquisti cache automaticamente l'ultima versione CustomerInfo quando si aggiorna — quindi in molti casi, questo metodo carica dalla cache e si esegue molto velocemente.

È tipico chiamare questo metodo 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!

Puoi accedere a molte informazioni più dettagliate su una sottoscrizione rispetto a semplicemente sapere se è attiva o meno. Vedi la guida di RevenueCat su Situazione della Sottoscrizione per imparare se la sottoscrizione è impostata per essere rinnovata, 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 dal stesso account del negozio (account Apple, Google o Amazon). Raccomandiamo a tutti gli sviluppatori di avere un modo per gli utenti di attivare il metodo di ripristino. Nota che Apple richiede un meccanismo di ripristino nel caso in cui un utente perda accesso ai suoi acquisti (ad esempio: disinstallando/rininstallando l'app, perdendo le informazioni 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 ID degli utenti dell'app sono diverse App User IDs ripristina le transazioni dalla stessa account di archiviazione sottostante (account Apple, Google o Amazon). RevenueCat può tentare di creare un alias tra gli ID degli utenti dell'applicazione e conteggiarli come lo stesso utente per le future operazioni. Vedi la guida di RevenueCat su Ripristino delle Acquisti per ulteriori informazioni sui diversi comportamenti di ripristino configurabili.

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 Capgo purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo conformandoti a un metodo di delega facoltativo, getCustomerInfo(), purchase(package:), purchase(product:)Questo metodo si attiverà ogni volta che il restorePurchases().

Capgo riceve un oggetto aggiornato da chiamate a

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

👍

L'hai fatta!

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

Esempi di App

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

Visualizza Esempi

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

If you need to move deep usage of the Capacitor SDK check the documentation qui.

Passaggi successivi

\

Se hai bisogno di aggiornamenti in tempo reale nell'app

Unisciti qui 👇

Registra qui per ottenere il tuo account

Capgo

Continua da qui per le transazioni in-app per capacitor

Se stai utilizzando acquisti in-app per capacitor per pianificare pagamenti e acquisti, connettilo con Capgo Pricing per il flusso di lavoro del prodotto in Capgo Pricing, Sistema di pagamento per i dettagli di implementazione in Sistema di pagamento, @capgo/native-purchases per i dettagli di implementazione in @capgo/native-purchases, Avvio rapido per i dettagli di implementazione in Avvio rapido, e Libro dei guadagni Dal dettaglio di implementazione nel Revenue Playbook.

Aggiornamenti in tempo reale per le app Capacitor

Quando un bug nel layer web è attivo, invia la correzione attraverso Capgo invece di aspettare 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.