Square form gives warning, sometimes does not load

[jsuser]

Hey guys, I have an issues implementing Square form

- I have a stepper, and need to show the payment form as the last step for payment

- I have done all the logic, and it's working, but sometimes it does not initialize the form at all

from throw the following warnings, I can see that the form needs to be visible, but, in my case I can't show it until the last step is triggered, which is not visible by default

ElementNotVisibleError: SqPaymentForm element with id 'sq-card-number' is not visible. Does it or a parent element have 'display:none'?
at t.value (https://js.squareup.com/v2/paymentform:1:90340)
at t.value (https://js.squareup.com/v2/paymentform:1:89696)
at t.value (https://js.squareup.com/v2/paymentform:1:89581)
at t.value (https://js.squareup.com/v2/paymentform:1:87865)
at yt.initializePaymentMethod (https://js.squareup.com/v2/paymentform:1:146937)
at yt.mainIframeLoaded (https://js.squareup.com/v2/paymentform:1:147232)
at t._onload (https://js.squareup.com/v2/paymentform:1:145995)
at t.value (https://js.squareup.com/v2/paymentform:1:86726)
at d.onload (https://js.squareup.com/v2/paymentform:1:83841)
value @ paymentform:1
paymentform:1 ElementNotVisibleError: SqPaymentForm element with id 'sq-cvv' is not visible. Does it or a parent element have 'display:none'?
at t.value (https://js.squareup.com/v2/paymentform:1:90340)
at t.value (https://js.squareup.com/v2/paymentform:1:89696)
at t.value (https://js.squareup.com/v2/paymentform:1:89581)
at t.value (https://js.squareup.com/v2/paymentform:1:87865)
at yt.initializePaymentMethod (https://js.squareup.com/v2/paymentform:1:146937)
at yt.mainIframeLoaded (https://js.squareup.com/v2/paymentform:1:147232)
at t._onload (https://js.squareup.com/v2/paymentform:1:145995)
at t.value (https://js.squareup.com/v2/paymentform:1:86726)
at d.onload (https://js.squareup.com/v2/paymentform:1:83841)
value @ paymentform:1
paymentform:1 ElementNotVisibleError: SqPaymentForm element with id 'sq-expiration-date' is not visible. Does it or a parent element have 'display:none'?
at t.value (https://js.squareup.com/v2/paymentform:1:90340)
at t.value (https://js.squareup.com/v2/paymentform:1:89696)
at t.value (https://js.squareup.com/v2/paymentform:1:89581)
at t.value (https://js.squareup.com/v2/paymentform:1:87865)
at yt.initializePaymentMethod (https://js.squareup.com/v2/paymentform:1:146937)
at yt.mainIframeLoaded (https://js.squareup.com/v2/paymentform:1:147232)
at t._onload (https://js.squareup.com/v2/paymentform:1:145995)
at t.value (https://js.squareup.com/v2/paymentform:1:86726)
at d.onload (https://js.squareup.com/v2/paymentform:1:83841)
value @ paymentform:1
paymentform:1 ElementNotVisibleError: SqPaymentForm element with id 'sq-postal-code' is not visible. Does it or a parent element have 'display:none'?
at t.value (https://js.squareup.com/v2/paymentform:1:90340)
at t.value (https://js.squareup.com/v2/paymentform:1:89696)
at t.value (https://js.squareup.com/v2/paymentform:1:89581)
at t.value (https://js.squareup.com/v2/paymentform:1:87865)
at yt.initializePaymentMethod (https://js.squareup.com/v2/paymentform:1:146937)
at yt.mainIframeLoaded (https://js.squareup.com/v2/paymentform:1:147232)
at t._onload (https://js.squareup.com/v2/paymentform:1:145995)
at t.value (https://js.squareup.com/v2/paymentform:1:86726)
at d.onload (https://js.squareup.com/v2/paymentform:1:83841)
value @ paymentform:1

Please help is appreciated

[ashc]

Hi @jsuser! Sorry for the delayed response.

I reached out to someone on the API team and this was what they said: 

"It sounds like they’re trying to initialize the square payment form before actually showing it. They should either:
1) Initialize it only at the last step (rather than before they’re on that step)
or
2) Initialize it with autoBuild: false and then call build() when they need to show it (see more info about that here https://developer.squareup.com/docs/payment-form/how-it-works#single-page-web-applications-customizi...)"

Hope this helps!

[GroundedKids]

@jsuser I am having the same issue.  Did you ever get this resolved?  If so, please share your steps with me.  Thanks, in advance for your help.