Traiter les paiements avec Firebase

À l'aide de différentes fonctionnalités de Firebase et de Stripe, vous pouvez traiter les paiements dans votre application Web sans créer votre propre infrastructure de serveur. Ce guide vous guide à travers la personnalisation et le déploiement de votre propre version de l'open-source cloud-functions-stripe-sample.web.app exemple d' application.

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

Présentation de la mise en œuvre

  1. Mettre en place un Stripe compte.
  2. Créez un projet dans la console Firebase .
  3. Activer la facturation pour votre projet et configurer la CLI Firebase d'utiliser votre projet avec l' firebase use --add .
  4. Obtenez le code source pour l'application de l' échantillon Firestripe. Configurez-le avec les bonnes informations pour votre projet et personnalisez le code pour l'adapter à votre application.
  5. Une fois que vous avez déployé votre application, recherchez une liste d'utilisateurs et de transactions dans la console Firebase.

Configurer et déployer l'exemple d'application

  1. Obtenez le code source .
  2. Activer Google et par email de connexion dans vos paramètres du fournisseur d'authentification .
  3. Activer Nuage Firestore .
  4. Installer la CLI Firebase si vous avez pas déjà, et connectez - vous avec firebase login .
  5. Configurez cet exemple pour utiliser votre projet avec l' firebase use --add .
  6. Installez les dépendances localement en exécutant des cd functions; npm install; cd -
  7. Ajouter votre API Stripe clé secrète à la configuration de votre environnement Fonctions Cloud:

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

  8. Réglez votre Stripe clé publiable dans /public/javascript/app.js :

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

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

    1. Envoie tous les fichiers dans le public répertoire à l' accueil afin que votre site web est disponible.
    2. Envoie le code dans le functions répertoire aux fonctions Cloud pour Firebase.
    3. Définit les règles de sécurité sur la base de données cloud Firestore tel que configuré dans firestore.rules . Les règles fournies permettent uniquement à un utilisateur de lire et d'écrire ses propres paiements et méthodes de paiement.

Tester l'exemple d'application

Visitez l' URL de votre application de paiement à your-firebase-project-id.web.app et vérifiez que les éléments suivants présente le travail:

  • Vous pouvez vous connecter via Google ou par e-mail.
  • Vous pouvez ajouter une nouvelle carte de test de bande et l' afficher dans la carte élément select.
  • Vous pouvez sélectionner une de vos cartes et la recharger.
  • Vous pouvez vous déconnecter.

A titre de comparaison, voir 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 la connecter à 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 voir une liste d'utilisateurs ainsi que leurs modes de paiement et leurs paiements.

  1. Aller au nuage Firestore .
  2. Recherchez une liste de vos utilisateurs et, s'ils ont ajouté des cartes de crédit ou effectué des transactions, une liste de ceux sous chaque utilisateur.

Accepter les paiements en direct

Une fois que vous êtes prêt à démarrer, vous devez échanger vos clés de test contre vos clés actives. Voir les docs Stripe pour en savoir plus sur ces clés.

  1. Mettez à jour votre configuration secrète Stripe :

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

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

  3. Redéployer les deux fonctions Cloud et d' hébergement pour que les modifications prennent effet: firebase deploy .