Boost your web app using Firebase extensions

#F3Prague

Renuka Kelkar

Google Developer Expert

Laura Morinigo

Google Developer Expert

Firebase Extensions and Flutter Web

Flutter Expert

Firebase expert

DevRel Advocate @ Invertase.io

Organizer GDG London

Founder @ TechPowerGirls community

WTM Ambasador

Google Developer Expert Firebase

Founder Women In Firebase

Women Techmakers Ambassador

#F3Prague

A global network of women and non-binary people who are passionate about Firebase.

The web app juggling act

The 'Wow' Factor: Firebase Extensions Unveiled

Ease of Use: Firebase Extensions for Everyone

Time-Saving Marvel: Let Extensions Handle the Repetition

​

Save your most precious resource: time

Payment

3rd APIS

Optimization

Firestore integration

#F3Prague

E-commerce with payment subscription

Real world applications

Faster deployment and production ready apps

Saving money, time and effort

01

Combine with other frameworks to optimize developement

02

#F3Prague

The power of community

#F3Prague

How to

Install Firebase Cli

Initialize Firebase

Add Extension

Configure and Deploy

Extension in Action

Always check the latest version at Firebase documentation

#F3Prague

12.2k+ installs

Stripe

Controls access to paid content by syncing your one-time and recurring payments with Firebase Authentication.

#F3Prague

Install Firebase CLI

firebase init

​

Initialize Firebase

firebase ext:install stripe/stripe-checkout

​

​

​

Add Stripe Extension

​

Configure stripe

#F3Prague

#F3Prague

Set env variables

​

Deploy

Integrate with Flutter Web

#F3Prague

What you'll need

Enable email login

Enabled(Blaze Plan)

Setup Stripe Account

#F3Prague

Installing Extension

​

#F3Prague

Installing Extension

​

#F3Prague

Set security rules

#F3Prague

Configure Extension

​

#F3Prague

Stripe Integration

​

#F3Prague

Configure Stripe

​

#F3Prague

Configure Stripe

​

#F3Prague

Configure Stripe

​

#F3Prague

Configure Stripe

​

#F3Prague

Cloud Firestore Integration

​

#F3Prague

#F3Prague

Integration Flutter code

​

#F3Prague

#F3Prague

dashboard.dart

#F3Prague

#F3Prague

#F3Prague

#F3Prague

Other payment extensions

What if my country doesn’t use Stripe?

Let’s review this session

highlights

#F3Prague

How many cups of coffee did you have today already?

ⓘ

Click Present with Slido or install our Chrome extension to activate this poll while presenting.

How can you add a Firebase Extension to your project?

ⓘ

Click Present with Slido or install our Chrome extension to activate this poll while presenting.

Firebase Extensions are only available for web applications, not for mobile apps.

ⓘ

Click Present with Slido or install our Chrome extension to activate this poll while presenting.

How do Firebase Extensions benefit Flutter web developers?

ⓘ

Click Present with Slido or install our Chrome extension to activate this poll while presenting.

In a Flutter web project, which Firebase CLI command would you use to add a Firestore database extension to your Firebase project?

ⓘ

Click Present with Slido or install our Chrome extension to activate this poll while presenting.

Renuka Kelkar

DevRel Advocate @ invertase

Laura Morinigo

Google Developer Expert

@KelkarRenuka

@renuvkelkar

@thisislalaok

@lauramorinigo

Thank you

#F3Prague

Thanks!

Q&A are welcome.