Example not running on web

[varunbhalerao56]

When I try to run the example in the repo on the web it does not work and gives the following error

Syncing files to device Chrome... Debug service listening on ws://127.0.0.1:56847/86-ndmrkOw4= Debug service listening on ws://127.0.0.1:56847/86-ndmrkOw4= [log] NetworkService.call, getEphemeralKey, {stripeVersion: 2020-03-02} Error: Failed to retrive ephemeralKey from server at Object.throw [as throw] (http://localhost:56795/dart_sdk.js:4328:11) at ephemeral_key_manager.EphemeralKeyManager.new.retrieveEphemeralKey (http://localhost:56795/packages/stripe_sdk/src/ephemeral_key_manager.dart.lib.js:169:23) at retrieveEphemeralKey.throw () at http://localhost:56795/dart_sdk.js:37599:38 at _RootZone.runBinary (http://localhost:56795/dart_sdk.js:37452:58) at _FutureListener.thenAwait.handleError (http://localhost:56795/dart_sdk.js:32436:48) at handleError (http://localhost:56795/dart_sdk.js:32987:51) at Function._propagateToListeners (http://localhost:56795/dart_sdk.js:33013:17) at _Future.new.[_completeError] (http://localhost:56795/dart_sdk.js:32860:23) at async._AsyncCallbackEntry.new.callback (http://localhost:56795/dart_sdk.js:32898:31) at Object._microtaskLoop (http://localhost:56795/dart_sdk.js:37708:13) at _startMicrotaskLoop (http://localhost:56795/dart_sdk.js:37714:13) at http://localhost:56795/dart_sdk.js:33226:9 [log] NetworkService.call, getEphemeralKey, {stripeVersion: 2020-03-02} Error: Failed to retrive ephemeralKey from server at Object.throw [as throw] (http://localhost:56795/dart_sdk.js:4328:11) at ephemeral_key_manager.EphemeralKeyManager.new.retrieveEphemeralKey (http://localhost:56795/packages/stripe_sdk/src/ephemeral_key_manager.dart.lib.js:169:23) at retrieveEphemeralKey.throw () at http://localhost:56795/dart_sdk.js:37599:38 at _RootZone.runBinary (http://localhost:56795/dart_sdk.js:37452:58) at _FutureListener.thenAwait.handleError (http://localhost:56795/dart_sdk.js:32436:48) at handleError (http://localhost:56795/dart_sdk.js:32987:51) at Function._propagateToListeners (http://localhost:56795/dart_sdk.js:33013:17) at _Future.new.[_completeError] (http://localhost:56795/dart_sdk.js:32860:23) at async._AsyncCallbackEntry.new.callback (http://localhost:56795/dart_sdk.js:32898:31) at Object._microtaskLoop (http://localhost:56795/dart_sdk.js:37708:13) at _startMicrotaskLoop (http://localhost:56795/dart_sdk.js:37714:13) at http://localhost:56795/dart_sdk.js:33226:9

ERROR - 2020-10-24 02:09:14.151368 GET /dart_sdk.js:4328:11 Error thrown by handler. FormatException: Illegal scheme character (at character 5) dart_sdk.js:4328:11 ^

dart:core _Uri.resolve package:flutter_tools/src/build_runner/devfs_web.dart 555:75 WebAssetServer._resolveDartFile package:flutter_tools/src/build_runner/devfs_web.dart 374:17 WebAssetServer.handleRequest package:dwds/src/handlers/injector.dart 103:32 DwdsInjector.middleware..

[yaizudamashii]

Getting exactly the same thing. My flutter version

✗ flutter --version
Flutter 1.23.0-18.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 198df796aa (11 days ago) • 2020-10-15 12:04:33 -0700
Engine • revision 1d12d82d9c
Tools • Dart 2.11.0 (build 2.11.0-213.1.beta)

[varunbhalerao56]

Getting exactly the same thing. My flutter version

✗ flutter --version
Flutter 1.23.0-18.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 198df796aa (11 days ago) • 2020-10-15 12:04:33 -0700
Engine • revision 1d12d82d9c
Tools • Dart 2.11.0 (build 2.11.0-213.1.beta)

Did you find any solution to this problem? I have been trying to find a solution but no luck yet

@ezet i have been able to narrow down the problem to the response from the HTTP call

[ciriousjoker]

Same error, exact same firebase version.

Flutter 1.23.0-18.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 198df796aa (12 days ago) • 2020-10-15 12:04:33 -0700
Engine • revision 1d12d82d9c
Tools • Dart 2.11.0 (build 2.11.0-213.1.beta)

Trying to print out the error directly results in:

TypeError: Cannot read property 'app' of undefined

(like this)

```dart try { key = await ephemeralKeyProvider(DEFAULT_API_VERSION); } catch (error) { final e = StripeApiError(null, { StripeApiError.FIELD_MESSAGE: "Failed to retrive ephemeralKey from server", }); print(error); throw StripeApiException(e); } ```

Not sure if that's an error because I shouldn't do that in Dart in general.

[ciriousjoker]

@ezet I found the solution (want me to make a PR?):

The issue is just that the cloud function doesn't find the backend because the app isn't initialized in the index.html.

To solve it, paste this at the start of the body tag:

<body>
  <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-functions.js"></script>
  <script type="application/javascript">
    /* 
      These values are from the google-services.json,
      so technically they're for the mobile sdk, but it seems to work great.
    */
    const firebaseConfig = {
      apiKey: "AIzaSyCPnGRTRxrUO_vgyBW8cfTEDywTrwzJg4M",
      databaseURL: "https://stripe-sdk-demo.firebaseio.com",
      projectId: "stripe-sdk-demo",
      storageBucket: "stripe-sdk-demo.appspot.com",
      appId: "1:345345135463:android:bd3d9b5f5796cffb8315c2",
    };

    // Initialize Firebase
    let firebaseApp = firebase.initializeApp(firebaseConfig);
  </script>
  ...

[varunbhalerao56]

@ezet I found the solution (want me to make a PR?):

The issue is just that the cloud function doesn't find the backend because the app isn't initialized in the index.html.

To solve it, paste this at the start of the body tag:

<body>
  <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-functions.js"></script>
  <script type="application/javascript">
    /* 
      These values are from the google-services.json,
      so technically they're for the mobile sdk, but it seems to work great.
    */
    const firebaseConfig = {
      apiKey: "AIzaSyCPnGRTRxrUO_vgyBW8cfTEDywTrwzJg4M",
      databaseURL: "https://stripe-sdk-demo.firebaseio.com",
      projectId: "stripe-sdk-demo",
      storageBucket: "stripe-sdk-demo.appspot.com",
      appId: "1:345345135463:android:bd3d9b5f5796cffb8315c2",
    };

    // Initialize Firebase
    let firebaseApp = firebase.initializeApp(firebaseConfig);
  </script>
  ...

I tried it and it works great work figuring this out, i think a PR would be a great idea

[ciriousjoker]

I might not get around to doing that for a few days and it's literally just a copypaste that @ezet can add via the web interface

[yaizudamashii]

With the copied firebase config in the index.html file the error of ephemeralKey goes away. But when I try to use my own firebase backend with code uploaded from stripe-sdk-demo-api I again get the ephemeralKey error when I modify the firebaseConfig variable. Has anyone gotten it to work?

[varunbhalerao56]

With the copied firebase config in the index.html file the error of ephemeralKey goes away. But when I try to use my own firebase backend with code uploaded from stripe-sdk-demo-api I again get the ephemeralKey error when I modify the firebaseConfig variable. Has anyone gotten it to work?

I was able to get it working, did you change the default user which is hardcoded into the functions and connect your own database

[yaizudamashii]

@varunbhalerao56 Thank you I got it to work. There are quite a few things to check to make sure that the example works. The steps needed are:

1. create a Stripe app if not exists, you will need to use the API secret key as a config variable in stripe-sdk-demo-api as described in the README
2. Create an user in Stripe, put that user ID (should start with cus_) in stripe-sdk-demo-api repo's utils.ts:getStripeCustomerId
3. create a Firebase app if not exists, you will need to enable billing as you need a blaze plan to enable functions that can talk to Stripe
4. create an user in the Firebase app from 3, and put that user's user id in stripe-sdk-demo-api repo's utils.ts:getRequestingUserId
5. make sure all the functions regions match, otherwise you'd get CORS error. The places to possibly modify are this repo's example/lib/locator.dart's _cloudFunctionsRegion and stripe-sdk-demo-api repo's utils.ts's region and index.ts's region variables
6. I don't know if it is necessary, but you may need to make all the cloud functions to allow unauthorized invocation from https://console.cloud.google.com/functions. More details are in this github issue
7. And as previously stated, copy the code from @CiriousJoker's reply and make sure to use your own Firebase project's variables.

After doing all those, I was able to view customer from Stripe and add payment method. Sadly the checkout functionality is still WIP so I will await more development.

[ciriousjoker]

@varunbhalerao56 Please don't close this until https://github.com/ezet/stripe-sdk/issues/87#issuecomment-717577505 is added to this repo.

[ciriousjoker]

Also, I just realized that I can't create a useful PR since @ezet has to create new keys in the backend anyway.

[ezet]

I will be looking into this the coming week, sorry for the slow response

[ezet]

The firebase backend was never meant to be used or distributed, it was just meant as a minimal implementation to be able to demo the SDK. I strongly recommend writing your own backends :D But I'll fix this so the example project will work on web