I'm attempting to use the hosted iframe in an SPA that generates forms dynamically with javascript (using the Dojo framework). The SPA will create the form, create the Clover object, mount the elements, and then after the form is submitted, the form is removed from the DOM. This can happen multiple times without reloading the page.
This is working great. However, I've noticed that after subsequent forms are created, and the new Clover elements are created/mounted and clover.createToken() is called, the token endpoint gets hit multiple times. If I've generated 5 forms, then the 5th time calling createToken() will send 5 requests to the token API all at the same time, even though the previous forms don't even exist in the DOM anymore.
I've tried creating a new Clover() object for each form, as well as re-using the existing Clover object. But I can't seem to figure out how to avoid this from happening, and after inspecting the Clover and Element objects, it doesn't seem like there are any methods to reset or unmount them. I also tried only creating one set of elements and re-mounting them to the different forms, but it seems they can only be mounted once.
Is there a way to reset the iframes for a new form, without reloading the page? Or any insight into why calling createToken() on a new form ends up sending multiple duplicate requests?
I will try to create a piece of sample code to demo this problem, but if anyone has any tips for me in the meantime it would be much appreciated!