Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
Cette page a été traduite par l'API Cloud Translation.
Switch to English

Traiter les paiements avec Firebase

En utilisant quelques fonctionnalités Firebase et Stripe différentes, vous pouvez traiter les paiements dans votre application Web sans créer votre propre infrastructure de serveur. Ce guide vous guide tout au long de la personnalisation et du déploiement de votre propre version de l'exemple d'application cloud-functions-stripe-sample.web.app open-source.

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

Aperçu de la mise en œuvre

  1. Créez un compte Stripe .
  2. Créez un projet dans la console Firebase .
  3. Activez la facturation pour votre projet et configurez la CLI Firebase pour utiliser votre projet avec firebase use --add .
  4. Obtenez le code source de l'exemple d'application Firestripe. Configurez-le avec les bonnes informations pour votre projet et personnalisez le code en fonction de 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. Activez la connexion à Google et aux e- mails dans les paramètres de votre fournisseur d'authentification .
  3. Activez Cloud Firestore .
  4. Installez Firebase CLI si vous ne l'avez pas déjà fait et connectez-vous avec la firebase login .
  5. Configurez cet exemple pour utiliser votre projet avec firebase use --add .
  6. Installez les dépendances localement en exécutant les cd functions; npm install; cd -
  7. Ajoutez votre clé secrète d'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 afin que votre site Web soit disponible.
    2. Envoie le code du répertoire des 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 permettent uniquement à un utilisateur de lire et d'écrire ses propres paiements et méthodes de paiement.

Tester l'exemple d'application

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 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 facturer.
  • Vous pouvez vous déconnecter.

À titre de 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 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. Accédez à Cloud 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.

Acceptez les paiements en direct

Une fois que vous êtes prêt à être mis en ligne, vous devrez échanger vos clés de test contre vos clés actives. Consultez la documentation 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 clé publiable en /public/javascript/app.js dans /public/javascript/app.js .

  3. Redéployez à la fois les fonctions cloud et l'hébergement pour que les modifications prennent effet: firebase deploy .