I am dynamically loading the sqPaymentForm into an existing page using JQuery's .ajax() method but I can't get the form to "initiate" (I'm not sure if that is the correct term for it).
I know that the form is not initiating because the form fields are not filled with the placeholder values AND the paymentFormLoaded callback is not fired.
I've tried delaying the definition of sqPaymentForm of to make sure the DOM is loaded using
$(function(){
var sqPaymentForm = new SqPaymentForm({...});
});
to no avail. I can however, confirm that the sqPaymentForm var is defined because I can send it to the console with
console.log(sqPaymentForm);
where I can then inspect it but it is still not "initializing."
I suspect that I will need to call a specific sub method of the SqPaymentForm class but I have no idea if I'm even on the right track.
Any help would be greatly appreciated.
The SqPaymentForm listens for a page loaded event, so when you are loading it dynamically, chances are that event has already emitted. You need to manually trigger the sqPaymentForm.build() method to trigger SqPaymentForm to build your payment form.
You can see examples here in the troubleshooting section of the setup guide.
Additionally, if you have the SqPaymentForm JavaScript already on a page but don't want it to build automatically when the page is loaded, you can set the config option for autoBuild: false.