Cannot call SqPaymentForm#requestCardNonce before the paymentFormLoaded() callback about react-square-payment-form

[rozzamozza]

Multiple rendering Related to <React.StrictMode>
Which ends up rendering twice...
https://mariosfakiolas.com/blog/my-react-components-render-twice-and-drive-me-crazy/

But this is still happening

index.js:1 [Analytics] A token request is already in place
console. @ index.js:1
overrideMethod @ react_devtools_backend.js:2273
s.getToken @ data.js:10
(anonymous) @ paymentform:1
_processQueue @ paymentform:1
_handleLoad @ paymentform:1
i @ paymentform:1
load (async)
_injectScript @ paymentform:1
_install @ paymentform:1
calculate @ paymentform:1
e @ paymentform:1
mt._requestAnalyticsToken @ paymentform:1
mt @ paymentform:1
St._initialize @ paymentform:1
St @ paymentform:1
renderSqPaymentForm @ SquarePaymentForm.tsx:278
(anonymous) @ SquarePaymentForm.tsx:295
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164
SquareForm.js:58 paymentFormLoaded
paymentform:1

Uncaught FormNotReadyError: Cannot call SqPaymentForm#requestCardNonce before the paymentFormLoaded() callback. See Step 4: https://developer.squareup.com/docs/payment-form/how-it-works#the-sqpaymentform-process-flow

[stephtaylor]

Hi @rozzamozza, do you have an example of how you're rendering the SquarePaymentForm in your app? Are you doing any conditional rendering of the form?

[rozzamozza]

I’ll close this.fixed. My Problem was I had a second instance of the payment form displayed.

The dom replacement with an Iframe was only replacing the first form.

I still have an issue where the cvv On separate form is not auto populated Using autocomplete. (even on chrome when choosing a saved card ) but will raise as separate issue.