Grâce à différentes fonctionnalités Firebase et à Stripe, vous pouvez traiter des paiements dans votre application web sans construire votre propre infrastructure de serveurs. Ce guide parcourt en vous aidant à personnaliser et à déployer votre propre version Exemple d'application cloud-functions-stripe-sample.web.app.
Avant de commencer, créez un projet dans le console Firebase et configurer Compte Stripe.
Présentation de l'implémentation
- Configurez un compte Stripe.
- Créez un projet dans la console Firebase.
- Activer la facturation pour votre projet et configurer la CLI Firebase
pour utiliser votre projet avec
firebase use --add
. - Obtenez le code source de l'application Firestripe exemple. Configurez-le avec les informations appropriées pour votre projet et personnalisez le code en fonction de votre application.
- Une fois votre application déployée, recherchez une liste d'utilisateurs et de transactions dans la console Firebase.
Configurer et déployer l'exemple d'application
- Téléchargez le code source.
- Activer Google & Connectez-vous par e-mail dans les paramètres du fournisseur d'authentification.
- Activez Cloud Firestore.
- Installer la CLI Firebase
si vous ne l'avez pas déjà fait, et connectez-vous avec
firebase login
. - Configurez cet exemple pour utiliser votre projet avec
firebase use --add
. - Installer les dépendances en local en exécutant
cd functions; npm install; cd -
Ajoutez votre clé secrète de l'API Stripe à la configuration de votre environnement Cloud Functions :
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>
Définissez votre clé de publication Stripe dans
/public/javascript/app.js
:const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;
Déployez votre projet à l'aide de
firebase deploy
. Cette commande :- Envoie tous les fichiers du répertoire
public
vers Hosting pour que votre site Web soit disponible. - Envoie le code du répertoire
functions
à Cloud Functions for Firebase. - Définit les règles de sécurité de votre base de données Cloud Firestore, telles qu'elles sont configurées dans
firestore.rules
Les règles fournies permettent uniquement à un utilisateur de lire et écrire leurs propres paiements et modes de paiement.
- Envoie tous les fichiers du répertoire
Tester l'application exemple
Accédez à l'URL de votre application de paiement sur your-firebase-project-id.web.app
et vérifiez que les fonctionnalités suivantes fonctionnent :
- Vous pouvez vous connecter via Google ou par e-mail.
- Vous pouvez ajouter une nouvelle fiche test Stripe et l'afficher dans l'élément de sélection de fiche.
- Vous pouvez sélectionner l'une de vos cartes et la recharger.
- Vous pouvez vous déconnecter.
Pour comparaison, consultez cloud-functions-stripe-sample.web.app.
Pour simplifier l'expérience de vos utilisateurs, vous pouvez personnaliser davantage l'apparence de votre page de paiement ou connectez-la à votre application existante.
Afficher les paiements traités
Une fois que vous avez configuré et déployé votre page "Paiements", vous pouvez consulter les console et consulter la liste des utilisateurs, ainsi que leurs modes de paiement et leurs paiements.
- Accédez à Cloud Firestore.
- Consultez la liste de vos utilisateurs et, s'ils ont ajouté des cartes de crédit ou effectué toutes les transactions, une liste de celles-ci sous chaque utilisateur.
Accepter les paiements en direct
Une fois que vous êtes prêt, vous devez échanger vos clés de test clés actives. Pour en savoir plus, consultez la documentation Stripe. sur ces clés.
Mettez à jour la configuration de votre secret Stripe :
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>
Définissez votre clé pouvant être publiée dans
/public/javascript/app.js
Redéployez Cloud Functions et Hosting pour que les modifications soient prises en compte:
firebase deploy