Notes

In this section, we’ll learn how to integrate Stripe into our eCommerce app.

To build a seamless checkout experience on mobile and web, there are many moving parts that need to come together both on the frontend and on the backend.

And the video above shows a complete demo of what we will build.

Here’s a brief overview of what we will cover in this section:

• Stripe Introduction: how Stripe works from a conceptual point of view, and when you should use Stripe vs. other payment methods such as IAPs and subscriptions on mobile
• Flutter Stripe SDK: how to use it to show the payment sheet and other payment options on mobile and web
• Firebase Stripe Extension: how to install it and configure it for our project
• Webhooks: what they are, how they work, and how to configure them in the Stripe extension
• Data sync between Firestore and Stripe: how to write some Cloud Function triggers that we can use to synchronize data between Firestore and Stripe
• Client payment flows on mobile and web: we’ll use native payment sheets on mobile and a separate checkout page with redirects on web
• Order Fulfilment: after a payment has been made, we need to fulfil orders and show a confirmation to the user
• Server-side API Keys: how to handle API keys on the backend and make calls to the Stripe APIs from our Cloud Functions

This is a lot of content, and it would take too long to code everything from scratch.

Instead, I’ll give you an in-depth explanation of all the important concepts so you can understand how everything fits together.

I’ll also share some updated code snapshots and give you a walkthrough of all the new code so we can tackle all these different topics incrementally.

Resources

• Stripe.com
• flutter_stripe package on pub.dev
• Stripe payments extension for Firebase