Elabora i pagamenti con Firebase

Utilizzando alcune diverse funzionalità Firebase e Stripe, puoi elaborare i pagamenti nella tua app Web senza creare la tua infrastruttura server. Questa guida ti guida attraverso la personalizzazione e la distribuzione della tua versione dell'app di esempio open source cloud-functions-stripe-sample.web.app .

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. Abilita la fatturazione per il tuo progetto e configura la CLI Firebase per utilizzare il tuo progetto con firebase use --add .
  4. Ottieni il codice sorgente per l'app Firestripe di esempio. Configuralo con le informazioni giuste per il tuo progetto e personalizza il codice per adattarlo alla tua app.
  5. Dopo aver distribuito la tua app, cerca un elenco di utenti e transazioni nella console Firebase.

Configura e distribuisci l'app di esempio

  1. Ottieni il codice sorgente .
  2. Abilita l'accesso a Google ed e-mail nelle impostazioni del tuo provider di autenticazione .
  3. Abilita Cloud Firestore .
  4. Installa la CLI di Firebase se non l'hai già fatto e accedi con firebase login .
  5. Configura questo esempio per utilizzare 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 Stripe in /public/javascript/app.js :

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Distribuisci il tuo progetto utilizzando firebase deploy . Questo comando:

    1. Invia tutti i file nella directory public all'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 sul database Cloud Firestore come configurato in firestore.rules . Le regole fornite consentono solo a un utente di leggere e scrivere i propri pagamenti e metodi di pagamento.

Testare l'app di esempio

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

  • Puoi accedere tramite Google o e-mail.
  • Puoi aggiungere una nuova scheda di prova Stripe e visualizzarla nell'elemento di selezione della scheda.
  • Puoi selezionare una delle tue carte e addebitarla.
  • Puoi uscire.

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

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

Visualizza i pagamenti elaborati

Dopo aver configurato e distribuito la pagina dei pagamenti, puoi controllare la console Firebase e visualizzare un elenco di utenti insieme ai 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 quelli sotto ciascun utente.

Accetta pagamenti in tempo reale

Una volta pronto per la pubblicazione, dovrai scambiare le chiavi di prova con le chiavi live. Consulta la documentazione di Stripe per saperne di più su queste chiavi.

  1. Aggiorna la configurazione segreta di Stripe:

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

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

  3. Ridistribuisci sia Cloud Functions che Hosting affinché le modifiche abbiano effetto: firebase deploy .