Loading sqpaymentform via ajax

Questions
1

Hello, my website is designed to work as a web-app, loading all data via ajax for a dynamic experience without reloading the page.

I managed to get the square payment API to be called on using AJAX, but I cant seem to get the form itself to initialize when I load it via ajax.

https://pdglobal.app/?pid=verse-buy-credits#verse-buy-credits (direct load)

I would very much like to be able to initialize the form when a document is loaded via ajax. I’ve tried to creating a new sqpaymentform in my loadDoc() function which is the main ajax function for loading pages and content. But nothing seems to happen. The page loads, but the controls don’t initialize.

Any suggestions/help/advice here on as how to get the payment form to initialize when loaded by clicking on an ajax link?

Thanks
-Zach

2

Hi @zachary.litzinger.93 welcome to the forums!

I see in the console logs: paymentform:1 Uncaught ElementNotFoundError: SqPaymentForm element with id 'sq-card-number' not found. Has the DOM finished loading?. It sounds like you’re not waiting until the page has finished loading before attempting to initialize the form. I would suggest using autoBuild=false and then when the page is done loading, calling SqPaymentForm.build() to build the form, and see if that works.

3

Thanks so much. paymentForm.destroy() and paymentForm.build() were exactly what I was looking for!

1 Like