Card payment panel sometime not displayed on fist page load

Questions
1

Our website checkout page uses Square Web Payment SDK to show the card payment input panel. The html and javascript is based on the examples at https://developer.squareup.com/docs/web-payments/take-card-payment.

It normally takes about a second or so for the payment panel to display. There have been a small number (< 2%) of users reported that they do not see the panel on their first page visit. In all of those cases, if the users refresh the page then the payment panel is shown. In order to better handle those particular cases, I would like to be able to accomplish the below:

  1. Check if payment panel has been successfully constructed and shown on page. If it has not then advise user to refresh the page.

  2. In the try catch block, parse the API errors and provide user with customized messages.

Thanks!

2

:wave: Do you know if there are any console errors when you’re customers experience this? Also you could add an event listener to listen for CardInputEventState. If it hasErrorClass true you’ll know it didn’t load correctly and if it isEmpty true it loaded correctly. :slightly_smiling_face:

3

We were able to get the console screenshots from a few users and none of them show any errors. I’m not sure if adding the listener for CardInputEventState will help in this case. Per SDK documentation, the CardInputEventState deals with “The state of an input field at the time a card input event is triggered”. In our case, the payment card fields are not shown on the page. If user does not have any fields to type in, I think this event will never get generated.

4

Yeah, you’re right. I’m checking with the team. :slightly_smiling_face: