Traiter les paiements avec Firebase

En utilisant différentes 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'exemple d'application 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. Mettre à jour votre projet pour utiliser le 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 pour l'adapter à 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 avec Google et par e-mail dans les paramètres de votre 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. Installez les dépendances en local 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. Envoie 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 les règles de sécurité sur votre base de données Cloud Firestore, comme configuré dans firestore.rules. Les règles fournies n'autorisent un utilisateur qu'à lire et à é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 l'utiliser pour effectuer un paiement.
  • Vous pouvez vous déconnecter.

Pour comparer, 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 votre page de paiement configurée et déployée, vous pouvez consulter la console Firebase pour voir la liste des utilisateurs, ainsi que leurs modes de paiement et leurs paiements.

  1. Accédez à Cloud Firestore.
  2. Consultez la liste de vos utilisateurs et, si des cartes de paiement ont été ajoutées ou des transactions effectuées, la liste de ces éléments sous chaque utilisateur.

Accepter les paiements en direct

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

  1. Mettez à jour la configuration secrète de Stripe :

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

  2. Définissez votre clé publique de production dans /public/javascript/app.js.

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