Elaborazione dei pagamenti con Firebase

Utilizzando alcune diverse funzionalità di Firebase e Stripe, puoi elaborare i pagamenti in la tua app web senza creare la tua infrastruttura server. Questa guida illustra il percorso personalizzando e implementando la tua versione del modello App di esempio cloud-functions-stripe-sample.web.app.

Prima di iniziare, crea un progetto nella Console Firebase e configurare una Account Stripe.

Panoramica dell'implementazione

  1. Configura un account Stripe.
  2. Crea un progetto nella console Firebase.
  3. Abilita la fatturazione per il tuo progetto e configura l'interfaccia a riga di comando Firebase per utilizzare il tuo progetto con firebase use --add.
  4. Ottieni il codice sorgente per l'app Firestripe di esempio. Configurala con il giusto per il tuo progetto e personalizza il codice per adattarlo alla tua app.
  5. Dopo aver eseguito il deployment dell'app, cerca un elenco di utenti e transazioni in la console Firebase.

Configura ed esegui il deployment dell'app di esempio

  1. Ottieni il codice sorgente.
  2. Abilita Google & Accedi tramite email nelle impostazioni del provider di autenticazione.
  3. Attiva Cloud Firestore.
  4. Installa l'interfaccia a riga di comando di Firebase se non l'hai già fatto, accedi con firebase login.
  5. Configura questo esempio per utilizzare il tuo progetto con firebase use --add.
  6. Installa le dipendenze in locale eseguendo cd functions; npm install; cd -
  7. Aggiungi la chiave segreta dell'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 tra /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 sito web sia disponibile.
    2. Invia il codice nella directory functions a Cloud Functions for Firebase.
    3. Imposta le regole di sicurezza sul 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.

Testa l'app di esempio

Visita l'URL della tua app per i pagamenti all'indirizzo your-firebase-project-id.web.app e verifica che le seguenti funzionalità funzionino:

  • 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 addebitarla.
  • Puoi uscire dall'account.

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

Per offrire agli utenti un'esperienza semplificata, puoi personalizzare ulteriormente l'aspetto della tua pagina di pagamento o collegala alla tua app esistente.

Visualizzare i pagamenti elaborati

Dopo aver configurato e implementato la pagina Pagamenti, puoi controllare la dashboard di Firebase console e vedere un elenco di utenti con i relativi metodi di pagamento e pagamenti.

  1. Vai a Cloud Firestore.
  2. Controlla se è presente un elenco degli utenti e se hanno aggiunto carte di credito o fatto transazioni, un elenco delle operazioni associate a ciascun utente.

Accetta pagamenti in tempo reale

Quando è tutto pronto per la pubblicazione, devi sostituire le chiavi di test con il tuo chiavi dinamiche. Per ulteriori informazioni, consulta la documentazione di Stripe su queste chiavi.

  1. Aggiorna la configurazione del tuo secret Stripe:

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

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

  3. Per applicare le modifiche, esegui nuovamente il deployment di Cloud Functions e Hosting: firebase deploy.