I’m relatively new to working with webhooks and I’m currently integrating Square Terminal transactions into my web application. Specifically, I’m trying to implement a workflow where I can display a spinner while initiating the checkout using the Square Terminal API, and then hide the spinner upon receiving a webhook event indicating the completion of the payment.

Here’s the workflow I’m trying to achieve:

1. When a user clicks the “Pay Now” button on my web application, I
   want to display a spinner to indicate that the payment is being
   processed. Upon clicking the button, I make a call to the Square
   Terminal API to initiate the checkout. Once the checkout initiation
   is successful, I receive a checkout ID from the API response.
2. While waiting for the payment to be completed, I continue to display the
   spinner.
3. When the payment is completed and I receive a webhook event
   indicating the success of the transaction, I want to hide the
   spinner and display a confirmation message to the user.

I’m struggling to implement this workflow efficiently, especially regarding how to handle the spinner display during the checkout initiation and webhook event processing. Can someone provide guidance on how to structure this workflow effectively? Any code examples or suggestions would be greatly appreciated.

Thank you in advance!