Problems with the example app in the GitHub repo

[tdkehoe]

I'm trying to run the example app. I forked and cloned the flutter-stripe Github repository to my laptop. Then I followed the instructions. The first steps went without a hitch.

Navigate to the example folder cd example
Install the dependencies
flutter pub get
Set up env vars for the flutter app and a local backend.
Get your test Stripe API keys
cp lib/.env.example.dart lib/.env.dart and set your Stripe publishable key.
cp server/.env.example server/.env and set the variable values in your newly created .env file.

Issue #1A: In the last step, setting up server/.env, my Stripe account has pk_test and a pk_live Publishable and Secret Keys. My guess is that I should use the pk_test keys in server/.env.example. Let’s make this clear in the comment at the top of server/.env.example.

Issue #1B: Am I required to put in keys for aubecs, grab, or fpx? My guess is that these aren’t required if I’m not accepting payment in Australia or China or wherever those payment service providers are.

Issue #1C: I don’t know webhooks are. If I don’t want to use webhooks, do I comment out STRIPE_WEBHOOK_SECRET=whsec_ or do I leave it uncommented?

Install the server dependencies: yarn --cwd "server"
Start the example
Terminal 1: yarn --cwd "server" start

Issue #2: Starting the yarn server results in 18 errors. All start with Object is of type 'unknown'. All are error or e or err, on lines 130, 301, 442, 450, 451, 455, 456, 464, 578, 586, 587, 591, 592, 595, 599, and 600. Then it says Command failed with exit code 2.

I don’t understand why it’s trying to run a local server. The instructions say This means the sensitive data is sent directly to Stripe instead of passing through your server. Nowhere in the flutter_stripe instructions does it say that a server is required. If code running on a server is required, where are the instructions and code for setting up a Google Cloud Function or a similar cloud server? Running a local server is a waste of time to fix bugs when in production a cloud server would be used.

Terminal 2: flutter run

This opens a Flutter web app in Chrome. I can see all the pages, click on stuff, although no payments are processed because the server isn’t running. I like seeing all the payment options in one app but I also want to see a simpler example with just one payment option, perhaps the Single Step Payment Sheet. Baby steps please!

Now I want to open the example directory in Android Studio and run it in the Android Emulator. The mobile app opens and looks good. I can’t try a payment because there’s no server running.

Issue #3: Let’s change that line from Terminal 2: flutter run to

To open a Flutter web app, open a second terminal tab and run `flutter run`.
To open a Flutter mobile app, open the `example` directory in Android Studio and run on an iOS or Android simulator.

I’d be happy to write a “baby steps” simplified tutorial if someone can help me get my first Flutter Stripe project up and running.

[remonh87]

Thank you for your elaborate feedback:

1a: We have an https://github.com/flutter-stripe/flutter_stripe/blob/main/example/server/.env.example specifically for this reason with a reference to the Stripe docs where they explain the different keys.

1b. So this is a bit annoying because the example server (that is build by stripe) supports multiple regions. This is specifically to make aubecs run on our example app. It should not be considered as a good example of building a server I would advice you to go to the Stripe docs for that.

1c. See also .env.example.

2. Integrating Stripe has big parts:

• server that communicates with the Stripe backend. The client should never communicate with Stripe.
• client that collects payment information (e.g. card details, bank account number) in order to confirm the payment.

We are a thin wrapper around the official Stripe client SDK ir So we only refer to the Stripe official docs. We acknowledge that more info is required so we are close to release an improved version of the docs. See: https://github.com/flutter-stripe/flutter_stripe/blob/docs/docs/sheet.mdx for a good example.

About the not working server can you try the npm instructions? https://github.com/flutter-stripe/flutter_stripe#run-the-example-app

3. That is good improvement 👍 will fix that.

Let me know if this helps

[tdkehoe]

Thank you, I am looking forward to the new documentation. No hurry, I can wait to implement monetization in my app. Will the new documentation include a Google Cloud Function (or Firebase Cloud Function) for the server code? I've written many Google Cloud Functions and find these to be difficult to get right.

[jamesblasco]

For the server side documentation I suggest you go directly to the official stripe docs, as they have more resources to build better documentation rather than us, an open-source implementation of the client SDK.

In case you need any support while building the functions feel free to ask any questions at https://stripe.com/go/developer-chat.