There is an easy way to install Stripe into Firebase using the extension available from the extensions hub.

So why going into much trouble and do it manually? Here's the reasons why I thought I'd make a tutorial for it:

• Consolidating Firebase functions knowledge in general.
• Having a better understanding of how Stripe and Firebase interact with each other.
• Proving that it's in fact possible to do it manually and everything is clear and transparent to us.
• Being able to customize the "build" and having more control if we want to implement more logic in functions.
• Being able to use Stripe locally and use it with the Emulator suite.

Let's get straight to the point.

Preparation

Before trying to install anything, make sure you have already done the following.

• Creating a Firebase account, creating a project inside and upgrading the project to a Blaze plan of course¹
• Activating both Firestore and Authentication in the Firebase console of that project.
• Installing NodeJs (+npm)
• Installing git
• Installing firebase command line tool (npm i -g firebase-tools)

Ok let's jump right in

0. Requirements

Important

This tutorial assumes you already have an existing local development directory of the project where you want to install Stripe functionalities on your machine.

If that's not the case, please create a directory and initialize a Firebase project. For instance

mkdir myProject
cd myProject
firebase init

During the init process make sure to install Firestore and Functions (and Emulators if you need them). The values you enter there are up to you and will not conflict with any of the steps further in this tutorial. It's important that a functions directory exists at the root of your project before continuing.

1. Cloning base files

Clone the following repository inside you project directory.

git clone https://github.com/vdegenne/install-firebase-stripe-manually.git stripe-functions

2. Inform the CLI of the new functions source (codebase)

firebase init

Make sure to follow these values:

• select "Functions" feature using spacebar then Enter
• select "Initialize"
• choose a name for the codebase (e.g. "stripe-functions")
• choose "stripe-functions" for the sub-directory name.
• select "TypeScript"
• use ESLint if you want
• Press Enter to choose the default "No" to every "Overwrite?" notices.
• Finally choose "Yes" to install the dependencies.

At this point in time you should have two codebases installed:

• functions: the main functions of your app
• stripe-functions: the functions relative to Stripe.

(You can see details in firebase.json)

3. Build the sources

cd stripe-functions
npm run build

Builds are in the lib directory in CommonJS format, those are the files Firebase will use during the deployment phase.

At this moment of the tutorial, if you try to deploy the functions then the CLI

// ------------- START DEPRECATED -----------------

3. Build sources

From here we should take few minutes to think how to integrate the functions, there are few possible solutions:

a. I don't need to emulate Stripe during development

If the end goal is to just install stripe functions in GC and we don't need to use it with the emulator, then it's pretty straightforward, just run npm run build and jump right to the next chapter.

b. I need to emulate and I don't have existing functions

This case is also easy to cover, just create a directory called functions at the root of your project and copy all the content of the cloned repository inside this freshly created directory. Then

cd functions
npm run build

And jump to the next chapter.

c. I need to emulate and I have existing functions

To avoid conflicts with your existing files rename src/index.ts to a name of your choice (e.g. stripe.ts) and any other filenames that may conflict with yours.

If you don't use TS then build the sources (npm run build) and copy all content from /lib to your existing functions directory (the files are in CommonJS format, if you are using ESM then you'll have to find a way to compile them).

If you are already using TS then copy all the files from src to your existing functions directory. Make sure to install the dependencies needed by these files (take package.json as a reference, the files need specific versions) and then build and jump to the next chapter.

(In both cases above don't forget to import/export all the components coming from the stripe index file into your main index file)
// ------------- END DEPRECATED -----------------

- Initializing the project in a directory (firebase init) + installing the functions emulator during that same process.

¹ The Blaze Plan is what will unlock the "functions" feature in Firabase.

(here's the link to github repository)