thread Re: Square form gives warning, sometimes does not load in Archived Discussions (Read Only)

thread Re: Square form gives warning, sometimes does not load in Archived Discussions (Read Only) https://community.squareup.com/t5/Archived-Discussions-Read-Only/Square-form-gives-warning-sometimes-does-not-load/m-p/131990#M93982 <P>Hi <a href="https://community.squareup.com/t5/user/viewprofilepage/user-id/196514">@jsuser</a>! Sorry for the delayed response.</P> <P> </P> <P>I reached out to someone on the API team and this was what they said: </P> <P> </P> <P>"It sounds like they’re trying to initialize the square payment form before actually showing it. They should either:<BR /> 1) Initialize it only at the last step (rather than before they’re on that step)<BR /> or<BR /> 2) Initialize it with autoBuild: false and then call build() when they need to show it (see more info about that here <A href="https://slack-redir.net/link?url=https%3A%2F%2Fdeveloper.squareup.com%2Fdocs%2Fpayment-form%2Fhow-it-works%23single-page-web-applications-customizing-sqpaymentform-lifecycle" target="_blank">https://developer.squareup.com/docs/payment-form/how-it-works#single-page-web-applications-customizing-sqpaymentform-lifecycle</A>)"</P> <P> </P> <P>Hope this helps!</P> Wed, 04 Sep 2019 14:10:58 GMT ashc 2019-09-04T14:10:58Z Square form gives warning, sometimes does not load https://community.squareup.com/t5/Archived-Discussions-Read-Only/Square-form-gives-warning-sometimes-does-not-load/m-p/131371#M93981 <P>Hey guys, I have an issues implementing Square form</P> <P> </P> <P>- I have a stepper, and need to show the payment form as the last step for payment</P> <P>- I have done all the logic, and it's working, but sometimes it does not initialize the form at all</P> <P> </P> <P>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</P> <P> </P> <P>ElementNotVisibleError: SqPaymentForm element with id 'sq-card-number' is not visible. Does it or a parent element have 'display:none'?<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:90340" target="_blank">https://js.squareup.com/v2/paymentform:1:90340</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:89696" target="_blank">https://js.squareup.com/v2/paymentform:1:89696</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:89581" target="_blank">https://js.squareup.com/v2/paymentform:1:89581</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:87865" target="_blank">https://js.squareup.com/v2/paymentform:1:87865</A>)<BR />at yt.initializePaymentMethod (<A href="https://js.squareup.com/v2/paymentform:1:146937" target="_blank">https://js.squareup.com/v2/paymentform:1:146937</A>)<BR />at yt.mainIframeLoaded (<A href="https://js.squareup.com/v2/paymentform:1:147232" target="_blank">https://js.squareup.com/v2/paymentform:1:147232</A>)<BR />at t._onload (<A href="https://js.squareup.com/v2/paymentform:1:145995" target="_blank">https://js.squareup.com/v2/paymentform:1:145995</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:86726" target="_blank">https://js.squareup.com/v2/paymentform:1:86726</A>)<BR />at d.onload (<A href="https://js.squareup.com/v2/paymentform:1:83841" target="_blank">https://js.squareup.com/v2/paymentform:1:83841</A>)<BR />value @ paymentform:1<BR />paymentform:1 ElementNotVisibleError: SqPaymentForm element with id 'sq-cvv' is not visible. Does it or a parent element have 'display:none'?<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:90340" target="_blank">https://js.squareup.com/v2/paymentform:1:90340</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:89696" target="_blank">https://js.squareup.com/v2/paymentform:1:89696</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:89581" target="_blank">https://js.squareup.com/v2/paymentform:1:89581</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:87865" target="_blank">https://js.squareup.com/v2/paymentform:1:87865</A>)<BR />at yt.initializePaymentMethod (<A href="https://js.squareup.com/v2/paymentform:1:146937" target="_blank">https://js.squareup.com/v2/paymentform:1:146937</A>)<BR />at yt.mainIframeLoaded (<A href="https://js.squareup.com/v2/paymentform:1:147232" target="_blank">https://js.squareup.com/v2/paymentform:1:147232</A>)<BR />at t._onload (<A href="https://js.squareup.com/v2/paymentform:1:145995" target="_blank">https://js.squareup.com/v2/paymentform:1:145995</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:86726" target="_blank">https://js.squareup.com/v2/paymentform:1:86726</A>)<BR />at d.onload (<A href="https://js.squareup.com/v2/paymentform:1:83841" target="_blank">https://js.squareup.com/v2/paymentform:1:83841</A>)<BR />value @ paymentform:1<BR />paymentform:1 ElementNotVisibleError: SqPaymentForm element with id 'sq-expiration-date' is not visible. Does it or a parent element have 'display:none'?<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:90340" target="_blank">https://js.squareup.com/v2/paymentform:1:90340</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:89696" target="_blank">https://js.squareup.com/v2/paymentform:1:89696</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:89581" target="_blank">https://js.squareup.com/v2/paymentform:1:89581</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:87865" target="_blank">https://js.squareup.com/v2/paymentform:1:87865</A>)<BR />at yt.initializePaymentMethod (<A href="https://js.squareup.com/v2/paymentform:1:146937" target="_blank">https://js.squareup.com/v2/paymentform:1:146937</A>)<BR />at yt.mainIframeLoaded (<A href="https://js.squareup.com/v2/paymentform:1:147232" target="_blank">https://js.squareup.com/v2/paymentform:1:147232</A>)<BR />at t._onload (<A href="https://js.squareup.com/v2/paymentform:1:145995" target="_blank">https://js.squareup.com/v2/paymentform:1:145995</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:86726" target="_blank">https://js.squareup.com/v2/paymentform:1:86726</A>)<BR />at d.onload (<A href="https://js.squareup.com/v2/paymentform:1:83841" target="_blank">https://js.squareup.com/v2/paymentform:1:83841</A>)<BR />value @ paymentform:1<BR />paymentform:1 ElementNotVisibleError: SqPaymentForm element with id 'sq-postal-code' is not visible. Does it or a parent element have 'display:none'?<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:90340" target="_blank">https://js.squareup.com/v2/paymentform:1:90340</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:89696" target="_blank">https://js.squareup.com/v2/paymentform:1:89696</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:89581" target="_blank">https://js.squareup.com/v2/paymentform:1:89581</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:87865" target="_blank">https://js.squareup.com/v2/paymentform:1:87865</A>)<BR />at yt.initializePaymentMethod (<A href="https://js.squareup.com/v2/paymentform:1:146937" target="_blank">https://js.squareup.com/v2/paymentform:1:146937</A>)<BR />at yt.mainIframeLoaded (<A href="https://js.squareup.com/v2/paymentform:1:147232" target="_blank">https://js.squareup.com/v2/paymentform:1:147232</A>)<BR />at t._onload (<A href="https://js.squareup.com/v2/paymentform:1:145995" target="_blank">https://js.squareup.com/v2/paymentform:1:145995</A>)<BR />at t.value (<A href="https://js.squareup.com/v2/paymentform:1:86726" target="_blank">https://js.squareup.com/v2/paymentform:1:86726</A>)<BR />at d.onload (<A href="https://js.squareup.com/v2/paymentform:1:83841" target="_blank">https://js.squareup.com/v2/paymentform:1:83841</A>)<BR />value @ paymentform:1</P> <P> </P> <P> </P> <P>Please help is appreciated</P> Tue, 27 Aug 2019 17:06:05 GMT https://community.squareup.com/t5/Archived-Discussions-Read-Only/Square-form-gives-warning-sometimes-does-not-load/m-p/131371#M93981 jsuser 2019-08-27T17:06:05Z Re: Square form gives warning, sometimes does not load https://community.squareup.com/t5/Archived-Discussions-Read-Only/Square-form-gives-warning-sometimes-does-not-load/m-p/131990#M93982 <P>Hi <a href="https://community.squareup.com/t5/user/viewprofilepage/user-id/196514">@jsuser</a>! Sorry for the delayed response.</P> <P> </P> <P>I reached out to someone on the API team and this was what they said: </P> <P> </P> <P>"It sounds like they’re trying to initialize the square payment form before actually showing it. They should either:<BR /> 1) Initialize it only at the last step (rather than before they’re on that step)<BR /> or<BR /> 2) Initialize it with autoBuild: false and then call build() when they need to show it (see more info about that here <A href="https://slack-redir.net/link?url=https%3A%2F%2Fdeveloper.squareup.com%2Fdocs%2Fpayment-form%2Fhow-it-works%23single-page-web-applications-customizing-sqpaymentform-lifecycle" target="_blank">https://developer.squareup.com/docs/payment-form/how-it-works#single-page-web-applications-customizing-sqpaymentform-lifecycle</A>)"</P> <P> </P> <P>Hope this helps!</P> Wed, 04 Sep 2019 14:10:58 GMT https://community.squareup.com/t5/Archived-Discussions-Read-Only/Square-form-gives-warning-sometimes-does-not-load/m-p/131990#M93982 ashc 2019-09-04T14:10:58Z Re: Square form gives warning, sometimes does not load https://community.squareup.com/t5/Archived-Discussions-Read-Only/Square-form-gives-warning-sometimes-does-not-load/m-p/166699#M93983 <P><a href="https://community.squareup.com/t5/user/viewprofilepage/user-id/196514">@jsuser</a> 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.</P> Wed, 29 Apr 2020 18:22:41 GMT https://community.squareup.com/t5/Archived-Discussions-Read-Only/Square-form-gives-warning-sometimes-does-not-load/m-p/166699#M93983 GroundedKids 2020-04-29T18:22:41Z