volko_code

[lyric kindle]

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1254949403630895176

📝 Have more to share? Add details, code, screenshots, videos, etc. below.

[clever wraith]

//paymentStripe.ts
"use client";
import { FirebaseApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import {
  addDoc,
  collection,
  getFirestore,
  onSnapshot,
} from "firebase/firestore";
import { getFunctions, httpsCallable } from "firebase/functions";

export const getCheckoutUrl = async (
  app: FirebaseApp,
  priceId: string
): Promise<string> => {
  const auth = getAuth(app);
  const userId = auth.currentUser?.uid;
  if (!userId) throw new Error("User is not authenticated");

  const db = getFirestore(app);
  const checkoutSessionRef = collection(
    db,
    "customers",
    userId,
    "checkout_sessions"
  );

  const docRef = await addDoc(checkoutSessionRef, {
    price: priceId,
    success_url: window.location.origin,
    cancel_url: window.location.origin,
  });

  return new Promise<string>((resolve, reject) => {
    const unsubscribe = onSnapshot(docRef, (snap) => {
      const { error, url } = snap.data() as {
        error?: { message: string };
        url?: string;
      };
      if (error) {
        unsubscribe();
        reject(new Error(`An error occurred: ${error.message}`));
      }
      if (url) {
        console.log("Stripe Checkout URL:", url);
        unsubscribe();
        resolve(url);
      }
    });
  });
};

export const getPortalUrl = async (app: FirebaseApp): Promise<string> => {
  const auth = getAuth(app);
  const user = auth.currentUser;

  let dataWithUrl: any;
  try {
    const functions = getFunctions(app, "europe-west3");
    const functionRef = httpsCallable(
      functions,
      "ext-firestore-stripe-payments-createPortalLink"
    );
    const { data } = await functionRef({
      customerId: user?.uid,
      returnUrl: window.location.origin,
    });

    // Add a type to the data
    dataWithUrl = data as { url: string };
    console.log("Reroute to Stripe portal: ", dataWithUrl.url);
  } catch (error) {
    console.error(error);
  }

[tropic solar]

Hi, can you share the request id where you see this error? Here's how you can find a request ID: https://support.stripe.com/questions/finding-the-id-for-an-api-request

[clever wraith]

Thanks for your anwser, I will try

[clever wraith]

Here is what I get

[tropic solar]

Can you share the id that starts with req_

[clever wraith]

Here is the id of the request : req_cln1GzSfuruZeY

Thanks a lot for helping me, I was struggling a lot 😅

[tropic solar]

Taking a look

[clever wraith]

Thanks

[tropic solar]

You would want to pass the ID that starts with price_

instead of passing the prod_ ID

It looks like price_1PVMYd2L3CUWCWJs2gG3De8Z

Can you try changing your code and pass the price id?

[clever wraith]

Mhh I think I found it

It is strange to use the price id instead of a product id but okay I will try

[clever wraith]

I got Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   at Object.throwInvalidHookError (chunk-M7F2YF5A.js?v=c0761391:11501:17)
   at Object.useContext (chunk-CANBAPAS.js?v=c0761391:1062:29)
   at useNavigate (react-router-dom.js?v=c0761391:3403:13)
   at upgradeToPremium (PaymentModal.tsx:20:26)

Mhh I think it is because of my useNavigate.
In his video he was using router.push but I don't have it in react

I was doing like this :

const upgradeToPremium = async () => {
        const priceId = 'price_1PVMYd2L3CUWCWJs2gG3De8Z';
        const checkoutUrl = await getCheckoutUrl(app, priceId);
        const navigate = useNavigate();
        navigate(checkoutUrl);
        console.log("Upgraded to premium");
    }

[tropic solar]

Why is that odd?

The API expects either the price id or a plan id: https://docs.stripe.com/api/checkout/sessions/create#create_checkout_session-line_items-price

[clever wraith]

Will try replacing it with : window.location.href = "http://stackoverflow.com";

[clever wraith]

Because I want to sell a product, not a price.

I think there is something I'm missing

Nice, now it is working

[tropic solar]

I recommend that you look at https://docs.stripe.com/products-prices/how-products-and-prices-work. The Product is the main product, and withing one product you can have multiple prices. Like a T-shirt... then by design you can have different prices. Then, you use the price

Yeay! Glad to hear

[clever wraith]

Thank you very much, I will read this article