stripe-firebase-extensions: FirebaseError on createCheckoutSession

Bug report

  • firestore-stripe-web-sdk

Describe the bug

FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
    at ba (index.esm2017.js?4515:14943)
    at FirestoreSessionDAO.eval (session.js?995f:116)
    at Generator.next (<anonymous>)
    at eval (session.js?995f:22)
    at new Promise (<anonymous>)
    at __awaiter (session.js?995f:18)
    at FirestoreSessionDAO.addSessionDoc (session.js?995f:115)
    at FirestoreSessionDAO.eval (session.js?995f:110)
    at Generator.next (<anonymous>)
    at eval (session.js?995f:22)

It seems that the firestore instance created in the FirestoreSessionDAO isn’t correct or the collection() call is wrong.

To Reproduce

Init firebase and stripe

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp()

const payments = getStripePayments(app, {
  productsCollection: 'products',
  customersCollection: 'customers'
})

export { app, payments }

import payments and use checkout function

import { payments } from '../services/firebase.service'
import { createCheckoutSession,  } from '@stripe/firestore-stripe-payments'

...

  methods: {
    checkout () {
      createCheckoutSession(payments, {
        price: 'price_1Jtax3GhjnzZribLiyQznali'
      }).then(session => {
        window.location.assign(session.url)
      }).catch(err => {
        console.log(err)
      })
    }
  }

...

When the method gets called there’s the error in the console.

Expected behavior

Normal stripe checkout session.

System information

Windows, Chrome, firebase@9.0.2, @stripe/firestore-stripe-payments@0.0.3

Additional context

Add any other context about the problem here.

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 5
  • Comments: 41 (1 by maintainers)

Most upvoted comments

@surafelbm’s solution worked for me with slightly different version on npm:

  "dependencies": {
    "@invertase/firestore-stripe-payments": "^0.0.7",
    "firebase": "10.1.0",
  },
  "overrides": {
    "@firebase/app": "0.9.15",
    "@firebase/auth": "1.1.0",
    "@firebase/firestore": "4.1.0"
  }

Note: If you use npm, use override instead of yarn’s resolutions

Was able to find a fix for ^10.0.0 Basically, the resolutions need to match whatever the current version you are using so for this version this worked:

"resolutions": {
    "@firebase/firestore": "4.1.3",
    "@firebase/auth": "1.3.0",
    "@firebase/app": "0.9.18"
  },

I just went to node_modules/firebase/package.json and copied the versions from there, I am sure there is a yarn command you can use to find that

Same problem still isn’t fixed till this day. This temporary fix works as everyone above already said:

"overrides": { "@firebase/app": "0.9.25", "@firebase/auth": "1.5.1", "@firebase/firestore": "4.4.0" }

What made it work for me was ensuring that Firebase-related dependencies are the same for both my app and @stripe/firestore-stripe-payments via package.json overrides.

This is how the overrides in my package.json look like for 0.0.6 of the @stripe/firestore-stripe-payments and Firebase JS SDK 9.6.6:

"overrides": { "@firebase/app": "0.7.16", "@firebase/firestore": "3.4.4" }

It’s not pretty but it works for now.

Is there a solution to this that doesn’t involve downgrading packages? Sorry but it’s a little disheartening to find out a package is broken at step 2 of the documentation and find the issue has been there for more than 2 years.

Nope no luck, everything works as soon as I uncomment the stripe extension function calls. I tried refactoring my code to remove complexity (as my dynamic firestore initialization) and use getFirestore() in the firebase.ts file without getApp() anywhere, but the problem still persists…

I understand your frustration. It took me two days to figure out what was the problem. I had to check how the stripe-payments module is constructed, but it wasn’t from there. What I’ve sent you earlier (my code) actually works, as I’m working on the app right now. Keep trying until you figure it out

Just wanted to say I solved this, it was the Firebase Rules that was the issue. Noticed this in Edge browser that gave extra information “firebase rules permission denied”

If you look closely you can see I’ve renamed CheckoutSessions, Subscriptions, Payments, Prices and TaxRates for some reason… (looks better to me) but the extension wants them snake-cased.

I’m glad you did it. So it was what I first told you to check 😄

Nope no luck, everything works as soon as I uncomment the stripe extension function calls. I tried refactoring my code to remove complexity (as my dynamic firestore initialization) and use getFirestore() in the firebase.ts file without getApp() anywhere, but the problem still persists…

I understand your frustration. It took me two days to figure out what was the problem. I had to check how the stripe-payments module is constructed, but it wasn’t from there. What I’ve sent you earlier (my code) actually works, as I’m working on the app right now. Keep trying until you figure it out

I personally gave up on waiting and simply queried the tavbles myself, that works quite nicely but is a little extra work that we frankly expected Stripe to do…

Experiencing this to. Very frustrating. Update: so the fix is to force your package.json to use whatever version of these packages is listed in your firebase dependency (eg. by using resolutions if using yarn):

    "@firebase/app" "@firebase/auth" "@firebase/firestore"

Thank you for your solution Same issue here… I hope this problem will be solved

For those who don’t know how to make a “resolution”, here’s what I did in package.json:

{
   "resolutions": {
        "@firebase/app": "0.8.2",
        "@firebase/auth": "0.20.10",
        "@firebase/firestore": "3.7.1"
    },   
}

Don’t forget to run yarn install

Thanks bro!

after so much time looking for a solution!

Experiencing this to. Very frustrating.

Update: so the fix is to force your package.json to use whatever version of these packages is listed in your firebase dependency (eg. by using resolutions if using yarn):

    "@firebase/app" "@firebase/auth" "@firebase/firestore"

Thank you for your solution Same issue here… I hope this problem will be solved

For those who don’t know how to make a “resolution”, here’s what I did in package.json:

{
   "resolutions": {
        "@firebase/app": "0.8.2",
        "@firebase/auth": "0.20.10",
        "@firebase/firestore": "3.7.1"
    },   
}

Don’t forget to run yarn install