Stripe y Firebase: FirebaseError: Se esperaba que el primer argumento de collection() fuera una CollectionReference, una DocumentReference o FirebaseFirestore.
Estoy tratando de configurar Stripe en mi nueva aplicación de Firebase (React). Estoy utilizando la nueva versión de Firebase (9) y la nueva integración de Stripe, publicada hace 12 días:
https://www.npmjs.com/package/@stripe/firestore-stripe-payments
Lo que estoy tratando de hacer es cargar el checkout alojado de Stripe para una suscripción.
Este es el código:
import React, { useEffect } from 'react'
import { createCheckoutSession } from "@stripe/firestore-stripe-payments";
import { payments } from './Firebase'
export default function Stripetest(props) {
async function checkout(e) {
e.preventDefault();
try {
const session = await createCheckoutSession(payments, {
price: "price_1JwyWZIweuKs6S3NBDjBqiiw",
});
window.location.assign(session.url);
} catch (e) {
console.log(e);
}
}
return (
<>
<button onclick="{checkout}">Checkout</button>
)
}
Este es el Firebase.js que exporta “pagos”:
// Importe las funciones que necesita de los SDK que necesita
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore, collection, getDocs } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';
import { getStripePayments } from "@stripe/firestore-stripe-payments";
import { getApp } from "@firebase/app";
// TODO: Agregue los SDK para los productos de Firebase que desea utilizar
// https://firebase.google.com/docs/web/setup#available-libraries
// La configuración de Firebase de su aplicación web
// Para Firebase JS SDK v7.20.0 y versiones posteriores, measurementId es opcional
const firebaseApp = initializeApp({
apiKey: "AIzaSxxxxxxxxxx",
authDomain: "bxxxxxxxxxx6.firebaseapp.com",
projectId: "bxxxxxxxx6",
storageBucket: "xxxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxxxxx",
appId: "1:xxxxxxx",
measurementId: "G-Kxxxxx"
});
export const db = getFirestore(firebaseApp)
export const auth = getAuth(firebaseApp)
export default firebaseApp;
const app = getApp();
export const payments = getStripePayments(app, {
productsCollection: "products",
customersCollection: "customers"
});
He intentado tanto “app” como “firebaseApp” en “getStripePayments(APP, {” pero cuando hago clic en el botón de pago siempre obtiene el mismo error:
FirebaseError: Se esperaba que el primer argumento de collection() fuera una CollectionReference, una DocumentReference o FirebaseFirestore.
davy.ai
¿Qué estoy haciendo mal?
Parece que estás intentando utilizar la función
getStripePayments
con el argumento equivocado. La funcióngetStripePayments
espera que el primer argumento sea una instancia deFirebaseFirestore
(que es lo que devuelvegetFirestore
).Actualmente estás pasando la instancia
app
, que es una instancia deFirebaseApp
. En su lugar, debes pasar la instanciadb
, que es una instancia deFirebaseFirestore
.Intenta cambiar esta línea:
export const payments = getStripePayments(app, {
a esta otra:
export const payments = getStripePayments(db, {
y verifica si eso resuelve el problema.