hval-React | Stripe Developers | Page 1

silver flame Apr 11, 2022, 6:39 PM

#

@placid crescent let's use this thread! Reading!

placid crescent Apr 11, 2022, 6:40 PM

#

thanks!

#

📎 example.jsx

nova sierra Apr 11, 2022, 6:49 PM

#

Hello. Looking

#

Let me ask a colleague about this as I'm not super familiar with Redux

placid crescent Apr 11, 2022, 7:01 PM

#

🙂 thanks

abstract fractal Apr 11, 2022, 7:01 PM

#

Hello @placid crescent
Taking over for @nova sierra here
Can you share more context on what you have tried already? I don't think we have any specific guidelines around dispatching an action as it differs from integration to integration

placid crescent Apr 11, 2022, 7:06 PM

#

I tried the code ahead.

I am block because of
https://reactjs.org/docs/hooks-overview.html#rules-of-hooks

Rules of Hooks
Hooks are JavaScript functions, but they impose two additional rules:

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. We’ll learn about them in a moment.)

Hooks at a Glance – React

A JavaScript library for building user interfaces

#

If you dont have specific guidelines I will find a way and I will share it with you

abstract fractal Apr 11, 2022, 7:09 PM

#

Gotcha.

Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. We’ll learn about them in a moment.)
Technically, anything and everything that you write under PaymentElementForm function is considered part of a React Component right?

#

So I'm not clear on whats unclear here OR what the limitation is.
Can you give me an example?

placid crescent Apr 11, 2022, 7:11 PM

#

Not the part from the onSubmit or the onReady (not the same context)

#

So I cannot call React Hooks from onSubmit

abstract fractal Apr 11, 2022, 7:16 PM

#

I don't think that's true.
onSubmit is still considered part of the Component itself.
As far as my understanding goes, the doc is talking about calling the hook from a function that is not part of your component hierarchy (a function that isn't a React compoenent).

placid crescent Apr 11, 2022, 7:18 PM

#

In my code I have the hook error in my browser console. But maybe I am missing something

abstract fractal Apr 11, 2022, 7:18 PM

#

What error is that? Happy to look into it 🙂

placid crescent Apr 11, 2022, 7:18 PM

#

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.

nested function is pass to the onSubmit (it s a closure)

#

give me one second I will go copy this

#

thanks for the help btw very appreciated

abstract fractal Apr 11, 2022, 7:19 PM

#

NP! 🙂 Good luck

placid crescent Apr 11, 2022, 7:20 PM

#

So the error is :

react-dom.development.js:14906 Uncaught 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:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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.

Invalid Hook Call Warning – React

A JavaScript library for building user interfaces

abstract fractal Apr 11, 2022, 7:22 PM

#

Can you attach the code here so I can take a look?

#

the one that triggers the above error

placid crescent Apr 11, 2022, 7:24 PM

#

the code is already above in the tread

frail sleet Apr 11, 2022, 7:25 PM

#

(NOT with Stripe) FYI, if you need a 2nd set of eyes, I am faniliar with React/Reduc (I use it currently, with Stripe)

placid crescent Apr 11, 2022, 7:25 PM

#

🙂

#

📎 example.jsx

#

here my draft again

#

thanks for the help

frail sleet Apr 11, 2022, 7:27 PM

#

(NOT with Stripe) One thing that jumps out at me - Redux is for GLOABL state, not for local components. "isReady" should be entirely local:

const [isREady, setIsReady] = useState(false);

within the component

placid crescent Apr 11, 2022, 7:28 PM

#

I could use a useState yes

frail sleet Apr 11, 2022, 7:28 PM

#

(NOT with Stripe) those dispatches within useEffects are a pretty strong anti-pattern

placid crescent Apr 11, 2022, 7:29 PM

#

But the onReady is comming from paymentElement. And I need it to disable button in another component (stripe live in a drawer with a step-wizard here, so button pay is in another component)

frail sleet Apr 11, 2022, 7:30 PM

#

(NOT with Stripe) You can use the local setIsReady() inside the handler just fine

placid crescent Apr 11, 2022, 7:31 PM

#

the useEffect/useRef is another topic. You can ignore this. It s a draft I try to find a way to get the ref to avoid to have to cheat with const submit = document.getElementById("payment-element").dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }))

frail sleet Apr 11, 2022, 7:31 PM

#

(NOT with Stripe) the idea with Redux is for state-ful information BETWEEN unrelated or connected components, not within components- like UserID, etc

placid crescent Apr 11, 2022, 7:31 PM

#

Exacly what I try to do

#

The button is in unrealted component

frail sleet Apr 11, 2022, 7:32 PM

#

(NOT with Stripe) is the button rendered on the same screen, if not in the same component?

abstract fractal Apr 11, 2022, 7:33 PM

#

Apologies, got pulled away for a bit here.
Thanks @frail sleet

If you take out postPaymentConfirm(data.paymentIntent) , does it resolve the error or do you see the same error here?

placid crescent Apr 11, 2022, 7:33 PM

#

postPaymentConfirm is working well

#

The button is on the same screen, but not the same component (both live happy together in dom)

frail sleet Apr 11, 2022, 7:34 PM

#

(NOT with Stripe) perhaps work with @abstract fractal for a bit, to avoid the confusion of parallel streams

abstract fractal Apr 11, 2022, 7:35 PM

#

Yup, seems like there's some confusion here
Thank you @frail sleet 🙂 Appreciate it

#

Let me summarize what I understand so far and then we can take it from there

#

You're using React + Stripe + Redux with PaymentElement
Your code is giving you the error related to react hooks as you've shared above.
Your handleSubmit isn't causing the error (?) or is it?
Trying to narrow down on the code that's causing this behavior

placid crescent Apr 11, 2022, 7:38 PM

#

yes
yes

#

For 3 I think it's

a) submit form => onSubmit
return (
<form id="payment-element" className="payment-element" onSubmit={handleSubmit} ref={stripeFormRef}>
<PaymentElement onReady={handleOnReady} />
</form>
)

b) onSubmit call handleSubmit(event) (so a closure)

c) cannot call dispatch in handleSubmit

abstract fractal Apr 11, 2022, 7:42 PM

#

Okay so let's try this
if you take out await dispatch(setIsReady(false)), does that fix the error?

placid crescent Apr 11, 2022, 7:43 PM

#

no. Let me simplfy the code and post it again give me 2 min

frail sleet Apr 11, 2022, 7:44 PM

#

(NOT) point of Redux: useDispatch is NOT async

abstract fractal Apr 11, 2022, 7:45 PM

#

yup

placid crescent Apr 11, 2022, 7:49 PM

#

yes your right Dispatch is always syncrounous

#

This is working. Will try with the onReady now

📎 test.jsx

#

well it working also. Sorry for this I think the problem was me trying to useRef on the form

frail sleet Apr 11, 2022, 7:54 PM

#

(NOT with Stripe) React/Redux: if the state you are conveying (isReady) is only used between two components that only exist under a single parent, probably better to use local state in the parent.

placid crescent Apr 11, 2022, 7:55 PM

#

@frail sleet @lime tangle thanks!!!!

frail sleet Apr 11, 2022, 7:55 PM

#

(NOT) Yeah, that "form" isn't really what you think it is - it's a place to render an iFrame for Stripe's secure collection of info.

placid crescent Apr 11, 2022, 7:55 PM

#

The button is not near of the Stripe form

#

I would have to make a big chain of props / event to go there unfornutally

#

But I agree normaly I prefrt tu use props for that kind of things

abstract fractal Apr 11, 2022, 7:56 PM

#

No worries! Glad that you're unblocked 🙂 Good luck

placid crescent Apr 11, 2022, 7:57 PM

#

Yes I know it s an iframe in dom

#

const handlePayButton = () => {
// @todo: find a better way, maybe with a ref, or a action
const submit = document.getElementById("payment-element").dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }))
}

@frail sleet do you have a better idea then this to trigger the form (not using the dom) ? If yes i am curious. The button is not in the parent

frail sleet Apr 11, 2022, 8:04 PM

#

(NOT with Stripe) That's a pretty rough structure, that - and not a way I'd try to use useRef. If they're both visible on the same render, then they must have SOME parent in common? What are you trying to handle - only allow a payment if they have a paymentMethod?

#

in my not-dissimilar case, I replace the "pay now" button with a pop-up for the paymentElement if the user doesn't have a paymentMethod - when they do, I "just" render the Pay Now button

#

(NOT with Stripe) note my event loop in that case is pretty broad - the submit event calls the Stripe confirm, which triggers a webhook, which modifies the user object in Firebase Firestore, which has a listener attached to it in the client, which updates the user Redux object... which is what decides the Pay Now vs Collect Payment Method "switch"

abstract fractal Apr 11, 2022, 8:09 PM

#

#hval-React