Elaborazione dei pagamenti con Firebase

Utilizzando alcune funzionalità di Firebase e Stripe, puoi elaborare i pagamenti nella tua app web senza creare la tua infrastruttura server. Questa guida ti illustra la procedura per personalizzare ed eseguire il deployment della tua versione dell'app di esempio cloud-functions-stripe-sample.web.app open source.

Prima di iniziare, crea un progetto nella console Firebase e configura un account Stripe.

Panoramica dell'implementazione

  1. Configura un account Stripe.
  2. Crea un progetto nella console Firebase.
  3. Esegui l'upgrade del tuo progetto al piano tariffario Blaze con pagamento a consumo.
  4. Configura l'interfaccia a riga di comando Firebase in modo da utilizzare il tuo progetto con firebase use --add.
  5. Scarica il codice sorgente dell'app di esempio Firestripe. Configuralo con le informazioni corrette per il tuo progetto e personalizza il codice in base alla tua app.
  6. Una volta eseguito il deployment dell'app, cerca un elenco di utenti e transazioni nella console Firebase.

Configura ed esegui il deployment dell'app di esempio

  1. Ottieni il codice sorgente.
  2. Attiva l'accesso con Google ed email nelle impostazioni del provider di autenticazione.
  3. Attiva Cloud Firestore.
  4. Installa la CLI Firebase se non l'hai ancora fatto e accedi con firebase login.
  5. Configura questo esempio in modo che utilizzi il tuo progetto con firebase use --add.
  6. Installa le dipendenze localmente eseguendo cd functions; npm install; cd -

  7. Aggiungi la tua chiave segreta API Stripe alla configurazione dell'ambiente Cloud Functions:

    firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>

  8. Imposta la chiave pubblicabile di Stripe in /public/javascript/app.js:

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Esegui il deployment del progetto utilizzando firebase deploy. Questo comando:

    1. Invia tutti i file nella directory public a Hosting in modo che il tuo sito web sia disponibile.
    2. Invia il codice nella directory functions a Cloud Functions for Firebase.
    3. Imposta le regole di sicurezza nel database Cloud Firestore come configurato in firestore.rules. Le regole fornite consentono a un utente solo di leggere e scrivere i propri pagamenti e metodi di pagamento.

Testare l'app di esempio

Visita l'URL dell'app di pagamento all'indirizzo your-firebase-project-id.web.app e verifica che funzionino le seguenti funzionalità:

  • Puoi accedere tramite Google o email.
  • Puoi aggiungere una nuova carta di test Stripe e visualizzarla nell'elemento di selezione della carta.
  • Puoi selezionare una delle tue carte e addebitare l'importo.
  • Puoi uscire.

Per un confronto, vedi cloud-functions-stripe-sample.web.app.

Per offrire un'esperienza semplificata ai tuoi utenti, puoi personalizzare ulteriormente l'aspetto della pagina di pagamento o integrarla nella tua app esistente.

Visualizzare i pagamenti elaborati

Una volta configurata e implementata la pagina dei pagamenti, puoi controllare la console Firebase e visualizzare un elenco di utenti con i relativi metodi di pagamento e pagamenti.

  1. Vai a Cloud Firestore.
  2. Controlla un elenco dei tuoi utenti e, se hanno aggiunto carte di credito o effettuato transazioni, un elenco di queste ultime per ogni utente.

Accettare pagamenti live

Quando è tutto pronto per la pubblicazione, devi scambiare le chiavi di test con le chiavi live. Per saperne di più su queste chiavi, consulta la documentazione di Stripe.

  1. Aggiorna la configurazione del secret Stripe:

    firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>

  2. Imposta la chiave pubblicabile live in /public/javascript/app.js.

  3. Esegui nuovamente il deployment di Cloud Functions e Hosting per applicare le modifiche: firebase deploy.