@kmoreira Thanks for the prompt response. Really appreciated.
Please update here as soon as you get some solution or there is any work around to fix this issue.
Hi @sud
It was brought to my attention that some people have implemented a spinner while the dwolla request is in progress. This is something that would have to be built out on your end.
@kmoreira We have already tried that and we haven’t find any way to add spinner. can you please help us on that?
We have also referred this Adding Loading Spinner on Dwolla-card.js Submit Click and there is no solution provided.
Sorry, @sud
Did you attempt this on the form itself or displaying it while the dwolla request is in progress (after the first click)? If the latter, can you share this piece of the code so we can help debug?
@kmoreira
We are not able to add spinner there.
FYI: We are following this link to implement it on our code. https://www.dwolla.com/updates/dwolla-cards-js-styling-debit-card-form/
On the above link, you will find a demo https://codepen.io/dwolla/pen/OJRbqvb on this link. We are following the same code.
dwolla.cards.start(
"cardsContainer",
token,
options
)((err, res) => {
console.log(err);
console.log(res);
document.getElementById("cardsContainer").style.display = "none";
document.getElementById("result").style.display = "block";
});
If you see that console log on code. those are called after server response. But we need to add a spinner before that. so, we want to handle that after submitting button clicks and before that response.
Let me know if still, anything is not clear.
Hi @sud!
Ah, the spinner in the codepen is actually for when the form itself is loading.
In order to add a spinner when the Submit button is clicked, you could add an event listener to the button and hide the button while the loading spinner is displaying. The id of the button is "submit-form-button".
One thing to keep in mind would be that the form may display some field validation errors if they exist. You want to make sure to un-hide the button should there be any errors that the user needs to fix. The validation errors are displayed in a <span> with the id "cards-error-message".
Hope that helps!
We have successfully added a spinner on the click of submit button. But now we are facing one more issue. As you know, when someone press enter when they are on the card form, the form is automatically submitted. We are not able to get that event and not able to add a spinner when the form is submitted on the hit of Enter button. Can you please help us if we can add an event listener on that or disable form submit on the hit of Enter button?
Hi @sud – that’s great news! Would you not be able to use the same event listener as you’re using to display the spinner, to disable the Submit button? That’s the only way that I am aware of to accomplish this.
@shreya
No, on submit button click, we are adding event listener on the button click. but here, the form is submitted on the press of the “Enter” key. We are not able to add an event listener on the form submit.
Is there any alternative for this?
Ah, I see. Perhaps you could add an event listener for “keypress” on the "submit-form-button". I found this suggestion on stackoverflow that might apply here!
@shreya We have tried that and it’s not working. Can you please try that from your end check if it’s working or not? Also, please let us know if there is any other solution.
Hi @sud
Shreya is OOO this week.
If you’re trying to cover both when someone clicks the submit button or when they hit Enter both to submit the form, you should be able to use an event handler for the submit event to try to catch either rather than a click handler + keypress handler:
The event handler would have to be on the form element which unfortunately we don’t give an id to at this time (currently asking if this could be implemented). You would have to find the form that’s a child to the container that holds cards.js
@kmoreira
Thanks for the update. I have checked this as well and there are multiple form elements on that div container. Seems there is a separate form element on each text input field on that form.
Can you please check and let us know if it’s still possible to add on submit listener? If possible, Can you please provide Codepen link with working example same as demo link https://codepen.io/dwolla/pen/OJRbqvb?
Hi @sud
Would you be able to share with us what you have so far?
@kmoreira For now, we have added the below code to show/hide spinner on form submit and added listener on button click.
const submitButton = document.getElementById('submit-form-button');
const spinner = document.getElementById('cover-spin');
const cardErrorMessage = document.getElementById('cards-error-message');
if (submitButton && spinner) {
submitButton.addEventListener('click', function () {
submitButton.style.display = 'none';
spinner.style.display = 'block';
setInterval(setIntervalHandler, 250);
});
}
const setIntervalHandler = () => {
if (cardErrorMessage) {
if (cardErrorMessage.innerHTML !== '' && cardErrorMessage.style.display !== 'none') {
// clear the interval
clearInterval(setIntervalHandler);
if (submitButton && spinner) {
submitButton.style.display = 'block';
spinner.style.display = 'none';
}
}
}
};
This is working fine for form submit with a button click and we are able to show a spinner. But when the form is submitted with Enter key press, we need to show a spinner.
Hi @sud
We just had an internal meeting about this issue, and the engineering team that owns this product will be implements ids to the necessary elements in order for this to be built out successfully.
Thank you for your prompt response and for taking that on priority.
Would you be able to give any timeline on approx. when will that be fixed and deployed?
Hi @sud, this update was rolled out yesterday!
You should now be able to locate the main form element using the ID "form-wrapper" and add an event handler for the submit event to try to catch either rather than a click handler + keypress handler:
@shreya
Thank you so much for the quick fix and deployment.
Really appreciated!
@shreya
Sorry to say, but that solution will not work. You have added "form-wrapper" Id on the main form, but if you see each text box input (except card nickname), all those textboxes have separate iframe elements and each iframe has the form underneath. So, for example, if you hit Enter Key, It will not trigger submit event listener added on form with Id “form-wrapper”.
Let me know if this is still not clear or in case you need more information on the same.