I’m using the single-element SqPaymentForm on mobile web and am just now noticing there are some rendering issues in the initial state.
When I click on the element though, everything recalculates properly and looks good.
Attached are two screenshots taken before and after clicking on the single element.
I’ve stripped away all the styling code that I can – and it seems that the default style ends up this way.
Is this expected?
Do you have the payment form inside of a div (or just some other element) that is hidden and then unhiding that div/element?
If so, you probably need to call .recalculateSize() after unhiding the div to get the form to format correctly.
https://developer.squareup.com/docs/api/paymentform#recalculateSize
The recalculateSize() response is correct, however there is one case where it does not work. If you set the surrounding div’s style to display: none and then changes it to display: block after paymentForm.begin() , you will continue having this issue. You will need to be setting the visibility, not the display in these cases as the latter creates this console error:
ElementNotVisibleError: SqPaymentForm element with id 'sq-card' is not visible. Does it or a parent element have 'display:none'?
I’m using React. The DOM is being painted once and it is never in a display: none state. I’m not seeing any console errors related to the form.
Perhaps related, I’m using autoBuild: false and calling paymentForm.build() right after initializing the SqPaymentForm.
In any event, I tried to use the recalculateSize() method during the paymentFormLoaded callback – but it doesn’t seem to do anything there.
I even set the paymentForm instance on window and called the method in the javascript console, but no desirable result was achieved.
Happy to paste my code here if that will help!
