Traiter les paiements avec Firebase

Grâce à quelques fonctionnalités Firebase et Stripe, vous pouvez traiter les paiements dans votre application Web sans avoir à créer votre propre infrastructure de serveur. Ce guide vous explique comment personnaliser et déployer votre propre version de l'application exemple Open Source cloud-functions-stripe-sample.web.app.

Avant de commencer, créez un projet dans la console Firebase et configurez un compte Stripe.

Présentation de l'implémentation

  1. Configurez un compte Stripe.
  2. Créez un projet dans la console Firebase.
  3. Passez votre projet au forfait Blaze avec paiement à l'usage.
  4. Configurez la CLI Firebase pour utiliser votre projet avec firebase use --add.
  5. 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.
  6. Une fois votre application déployée, recherchez une liste d'utilisateurs et de transactions dans la console Firebase.

Configurer et déployer l'application exemple

  1. Obtenez le code source.
  2. Activez la connexion Google et par e-mail dans les paramètres du fournisseur d'authentification.
  3. Activez Cloud Firestore.
  4. Installez la CLI Firebase si ce n'est pas déjà fait, puis connectez-vous avec firebase login.
  5. Configurez cet exemple pour utiliser votre projet avec firebase use --add.
  6. Installer des dépendances localement en exécutant cd functions; npm install; cd -

  7. 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>

  8. Définissez votre clé publiable Stripe dans /public/javascript/app.js:

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Déployez votre projet à l'aide de firebase deploy. Cette commande :

    1. Transmet tous les fichiers du répertoire public à Hosting pour que votre site Web soit disponible.
    2. Envoie le code du répertoire functions à Cloud Functions for Firebase.
    3. Définit des règles de sécurité sur votre base de données Cloud Firestore, comme configuré dans firestore.rules. Les règles fournies ne permettent à un utilisateur que de lire et d'écrire ses propres paiements et modes de paiement.

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 carte de test Stripe et l'afficher dans l'élément de sélection de carte.
  • Vous pouvez sélectionner l'une de vos cartes et la débiter.
  • Vous pouvez vous déconnecter.

Pour comparaison, consultez cloud-functions-stripe-sample.web.app.

Pour offrir une expérience simplifiée à vos utilisateurs, vous pouvez personnaliser davantage l'apparence de votre page de paiement ou l'intégrer à votre application existante.

Afficher les paiements traités

Une fois que vous avez configuré et déployé votre page de paiement, vous pouvez consulter la console Firebase et afficher une liste d'utilisateurs, ainsi que leurs modes de paiement et leurs paiements.

  1. Accédez à Cloud Firestore.
  2. Recherchez la liste de vos utilisateurs et, s'ils ont ajouté des cartes de crédit ou effectué des transactions, une liste de ces éléments sous chaque utilisateur.

Accepter les paiements en temps réel

Lorsque vous êtes prêt à passer en production, vous devez échanger vos clés de test contre vos clés de production. Pour en savoir plus sur ces clés, consultez la documentation Stripe.

  1. Mettez à jour la configuration de votre secret Stripe:

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

  2. Définissez votre clé publiable en direct dans /public/javascript/app.js.

  3. Redéployez Cloud Functions et Hosting pour que les modifications prennent effet : firebase deploy.