Flutter + Stripe + Firebase

Flutter + Stripe + Firebase

All in one Flutter Resource: https://flatteredwithflutter.com/flutter-stripefirebase/

Christmas celebrations all over the world. Merry Christmas!!!!

In this festive season, people often spend (be online / shopping etc). This gave me an idea, why not to try payments using Flutter.

Begin…

This article uses the Stripe SDK and Cloud Firestore for storing the necessary payment information….

For basic information related to Cloud Firestore, please refer my previous article.

Things needed…

1. Stripe account (obviously free)
2. Once created go to Developer -> Api keys -> Reveal test key

You need to set this key using the Firebase command…

firebase functions:config:set stripe.token=”Your token here"

This token, you’ll get from Step 2…

3. Add Stripe to the node modules, using

npm install stripe

If necessary, add stripe in package.json

4. For the list of apis provided by Stripe, refer the link.

5. From flutter side, you need the package stripe_payment

import 'package:stripe_payment/stripe_payment.dart';
StripeSource.setPublishableKey("pk_test");

The publishable key is the Publishable key from the API keys (Stripe)….

In the cloud function side, you need only this :

const stripe = require(‘stripe’)(functions.config().stripe.token);

Next…

For starting communication with Stripe, you need to have a token…(which Stripe recommends to generate from the Client side using its libraries)…

In our case, flutter package handles it internally (when we add card)…

StripeSource.addSource().then((String token) {
    print(token); //your stripe card source token
});

Here, you receive the token, which you need to pass / store for successive transactions with Stripe…

Stripe Call 1 :

stripe.customers.createSource(customer, { source: token });

When you create a new card, you must specify a customer or recipient on which to create it.

where token : from above image , customer : your authenticated customer (we are using Firebase Auth by Google)

Stripe Call 2 :

stripe.charges.create(charge, { idempotency_key: idempotentKey });

To charge a credit card or other payment source, you create a Charge object.

charge = { amount, currency, customer, description };

If your API key is in test mode, the supplied payment source (e.g., card) won’t actually be charged

The API supports idempotency for safely retrying requests without accidentally performing the same operation twice. For example, if a request to create a charge fails due to a network connection error, you can retry the request with the same idempotency key to guarantee that only a single charge is created.

For more info on idempotency refer link.

Stripe Call 3 :

stripe.charges.list({// limit: 3,customer: cust_id});

Returns a list of charges you’ve previously created. The charges are returned in sorted order, with the most recent charges appearing first.

where cust_id is the same as the one in Stripe call 1…..

Stripe Call 4 :

stripe.refunds.create({ charge: chargeId });

When you create a new refund, you must specify a charge on which to create it. The charge ID is the id which we received for transactions..

Finally…

We did adding card, buying from the card, listing all our payments and refunded some transactions….Phew…

Articles related to Flutter:

Source code :

https://github.com/AseemWangoo/flutter_programs/blob/master/Stripe_and_Flutter.zip

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.