Hi - I using payments in-app on a Laravel project utilizing Livewire 3. The square form sits within a tabbed page (image attached)
. When I first open the ePayments tab, the
#card-container displays as expected. If I click on a different tab and then return, the
#card-container doesn’t display.
I did some troubleshooting and can see that the document.addEventListener() doesn’t fire again when I return to the ePayments tab, so the initializeCard() isn’t called, and the form isn’t re-displayed.
How can I force the document.addEventListener() to re-fire, or is there a better solution?
Thanks.
I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:
Additional Documentation
In-App Payments SDK Quickstart
In-App Payments SDK: How It Works
Troubleshoot In-App Payments SDK Problems
If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.
The issue you’re experiencing is likely due to the fact that the document.addEventListener() function is not being called again when you switch back to the ePayments tab. This is because the event listener is typically set up to fire once when the document is initially loaded, and it won’t automatically re-trigger when you switch tabs.
One possible solution is to manually call the initializeCard() function when the ePayments tab is clicked or becomes active. You can do this by adding an event listener to the ePayments tab element itself. When the tab is clicked, the event listener can call the initializeCard() function to re-initialize the Square payment form.
Here’s a basic example of how you might set this up:
// Get the ePayments tab element
var ePaymentsTab = document.getElementById('your-epayments-tab-id');
// Add a click event listener to the ePayments tab
ePaymentsTab.addEventListener('click', function() {
// Call the initializeCard function when the tab is clicked
initializeCard();
});
Please replace 'your-epayments-tab-id' with the actual id of your ePayments tab. This code should be added after your existing code for setting up the Square payment form and the initializeCard() function.
Remember to ensure that any previous instances of the card form are properly cleaned up before re-initializing to avoid any potential issues. You can do this by calling the destroy() method on the card object before calling initializeCard().
This answer was reviewed by @josh-square.
