#Ann N - invalid hook

1 messages · Page 1 of 1 (latest)

agile swan
#

Happy to help though I need a bit of clarity as I'm not that familiar with react. Where are you getting the "Invalid hook call" error?

tawny pier
#

I'm adding stripe elements to my payment form page, where I hope to put in a checkout component. I get the error in the console, but also as an alert when I try to redirect to the page from the login.

agile swan
#

What call does that error come from?

#

Can you send the the piece of your code where you try to set up Stripe + Elements?

tawny pier
#

Will do, just a sec.

#

The error comes from either a call to signInAnonymously, which worked fine before trying to add Elements, but even without that, to be technical about it, the Payment page just goes blank and the error appears in the console when I try to navigate to it.

agile swan
#

Good to know. Can you send me your client side code so I can take a closer look?

tawny pier
#

Sorry, it just took me a sec to extract everything I thought might be relevent and nothing more:

#

`import React from 'react'
import { getApp } from 'firebase/app'
import { Link, useNavigate } from "react-router-dom";

import { getFirestore, doc, setDoc } from 'firebase/firestore'
import { getAuth, EmailAuthProvider, linkWithCredential} from 'firebase/auth'
import {loadStripe} from '@ocean falcon/stripe-js';
import { Elements } from '@ocean falcon/react-stripe-js';

import CardPaymentForm from "../CardPaymentForm"
const stripePromise = loadStripe(my public key here);

export const PaymentFormPage = () => {
return (
<div className="paymentFormPage flex-col">
<Elements stripe={stripePromise}>
{/* CardPaymentForm would go here */}
</Elements>
</div>
)

}`

#

Thanks for the link to support, also.

agile swan
#

Thank you for your code. Looking in to it

tawny pier
#

By the way, it doesn't matter what page I try to add Elements to, I get the same error -I've tried adding in app.js, in index.js, and on the CardPaymentForm element and I get the invalid hook error on whatever page it is.

mortal valve
#

@tawny pier have you tried a basic example first?

#

Like instead of putting it in your own app, have you tried just building the most basic example and having that work first and then porting it to your own app?

#

Since you're new to Stripe and to React that's really the best first step. Get an end to end simple example to work, and after that, port that to your existing React app

tawny pier
#

I've built your subscription-use-cases app, but my problem with porting to them is that I'm using react-router-dom v6 and the latest modular firebase as well, so it's snarly trying to do that - as well as the user/auth flow my boss wants is er, unusual. It's a good idea, and if this doesn't seem to have an easy solution, I will start over clean doing that.

mortal valve
#

I've never heard of react-router-dom and never used firebase. Unfortunately, the only way to debug this is to slowly make progress and not try to do everything at once

#

Ignore firebase entirely, PaymentElement is purely client-side at first and you can hardcode a client_secret to render it

#

once that works you can plug Firebase in and the callback to create the PaymentIntent

tawny pier
#

Thanks sigh I will do that. I was hoping it was something obvious that I had overlooked. It will be a great learning experience.

mortal valve
#

yeah sorry, it might be obvious to a React dev but I also am not really experimented with React though I can make basic apps work 😦