Process Payments with Firebase

Using a few different Firebase features and Stripe, you can process payments in your web app without building your own server infrastructure. This guide walks you through customizing and deploying your own version of the open-source Firestripe example app.

Before you start, create a project in the Firebase console and set up a Stripe account.

Implementation overview

  1. Use Firebase Hosting to set up and deploy your app with the Firebase features you need to run the app. With Firebase CLI, you can deploy a shell app with Cloud Functions and Firebase Realtime Database enabled directly from the command line.
  2. Get the source code for the sample Firestripe app. Configure it with the right information for your project and customize the code to fit your app.
  3. Once you've deployed your app, look for a list of users and transactions in the Firebase console.

Set up and deploy your app

Start out with a shell app that includes all the Firebase features you need, associated with your Firebase project. Then, deploy your shell app and test that it's configured properly.

What to do from Firebase CLI

  1. To install the Firebase CLI, follow the steps in the Firebase CLI setup section.
  2. Once you've installed the Firebase CLI, create a shell app by running firebase init.
  3. Select Database, Functions, and Hosting. Then, select your Firebase project from the project list.

Test that it works

  1. To deploy your shell app, run firebase deploy.
  2. Check that your app is running.

Get and configure the sample app

What to do with the sample app

  1. Get the source code for Firestripe.
  2. Install the Node.js libraries locally by running npm install -g from the functions directory.

  3. Set the Firebase and Stripe keys in the public/index.html file:

      firebase.initializeApp({
    apiKey: "your-web-api-key",
    authDomain: "your-firebase-project-id.firebaseapp.com",
    databaseURL: "https://your-firebase-project-id.firebaseio.com",
    storageBucket: "your-firebase-project-id.appspot.com",
    messagingSenderId: "your-cloud-messaging-sender-id"
  });
  Stripe.setPublishableKey('your-stripe-publishable-key');

What do from Firebase CLI

  1. To configure the Stripe server key, run the following command from your project's directory: firebase functions:config:set stripe.token="your-test-secret-key".
  2. Push your new changes by running firebase deploy.

Test that it works

Visit your payments app's URL at your-firebase-project-id.firebaseapp.com and check that the following features work:

  • Your username is displayed on the page.
  • You can enter a credit card and Add it.
  • You can create a new Charge.
  • You can sign out.

For a comparison, try the Firestripe example.

To provide a streamlined experience for your users, you can further customize your payment page's appearance, or plug it into your existing app.

View processed payments

Once you've set up and deployed your payments page, you can check the Firebase console and see a list of users and transactions.

What to do in the Firebase console

  1. Go to Database.
  2. Check for a list of your users and, if they added any credit cards or made any transactions, a list of those under each user.