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
- Configura un account Stripe .
- Crea un progetto nella console Firebase .
- Abilita la fatturazione per il tuo progetto e configura la CLI Firebase per utilizzare il tuo progetto con
firebase use --add
. - 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.
- Dopo aver distribuito la tua app, cerca un elenco di utenti e transazioni nella console Firebase.
Configura e distribuisci l'app di esempio
- Ottieni il codice sorgente .
- Abilita l'accesso a Google ed e-mail nelle impostazioni del tuo provider di autenticazione .
- Abilita Cloud Firestore .
- Installa la CLI di Firebase se non l'hai già fatto e accedi con
firebase login
. - Configura questo esempio per utilizzare il tuo progetto con
firebase use --add
. - Installa le dipendenze localmente eseguendo
cd functions; npm install; cd -
Aggiungi la tua chiave segreta API Stripe alla configurazione dell'ambiente Cloud Functions:
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>
Imposta la chiave pubblicabile Stripe in
/public/javascript/app.js
:const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;
Distribuisci il tuo progetto utilizzando
firebase deploy
. Questo comando:- Invia tutti i file nella directory
public
all'Hosting in modo che il tuo sito web sia disponibile. - Invia il codice nella directory
functions
a Cloud Functions for Firebase. - 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.
- Invia tutti i file nella directory
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.
- Vai a Cloud Firestore .
- 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.
Aggiorna la configurazione segreta di Stripe:
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>
Imposta la tua chiave pubblicabile live in
/public/javascript/app.js
.Ridistribuisci sia Cloud Functions che Hosting affinché le modifiche abbiano effetto:
firebase deploy
.