Elabora i pagamenti con Firebase

Utilizzando alcune diverse funzionalità di 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. Crea 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 l'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 e alla posta elettronica nelle impostazioni del provider di autenticazione .
3. Abilita Cloud Firestore .
4. Installa Firebase CLI 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 le cd functions; npm install; cd -

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

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

8. Imposta la tua 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 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 sul database di 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 all'indirizzo your-firebase-project-id.web.app e verifica che le seguenti funzioni funzionino:

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

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

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

Visualizza i pagamenti elaborati

Dopo aver impostato e distribuito la pagina dei pagamenti, puoi controllare la console Firebase e visualizzare un elenco di utenti insieme ai loro metodi di pagamento e pagamenti.

1. Vai su Cloud Firestore .
2. Cerca 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 che sei pronto per andare online, dovrai scambiare le tue chiavi di prova con le tue chiavi live. Consulta i documenti di Stripe per saperne di più su queste chiavi.

1. Aggiorna la tua configurazione segreta 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. Ridistribuire sia le funzioni cloud che l'hosting per rendere effettive le modifiche: firebase deploy .