#pkdiscgolf - button disable
tardy moon
teal sandal
Hello
woeful musk
Hey @teal sandal! Unfortunately this is a pretty foundational Javascript question. It's not really Stripe-specific in any way. I'm worried you are mixing up a lot of concepts already based on our previous discussions
Have you considered hiring a freelancer to help you implement some of your modifications and explain how all of this fits together?
teal sandal
I have. But how would i learn if i paid someone else to do it?
woeful musk
well you learn by paying them to show you for example
teal sandal
Ok. How much would you like to help me?
woeful musk
Well I'm happy to help with Stripe-specific questions.
teal sandal
I need to disable my stripe button, because it is costing me alot of money when people double buy and i have to refund
woeful musk
we're on the same team, my answer works for both of us (and all Stripes in this server)
So now, if you have a specific question, with concrete code, we can try to have a look, but I want to set expectations early
teal sandal
I really despise the way that you speak down to me, and go out of your way to not help me
Why would you prevent roadrunner from helping me? What do you have to gain by not answering my questions?
woeful musk
I'm not trying to speak down to you. I'm trying to ensure that we focus on things we can help. There are many other people to help in this server in parallel so it's a balance to avoid spending tens of hours on non stripe-specific issues
teal sandal
This is a stripe specific issue. I move $100,000 of payments through this app. And I need to disable the button after submit in order to prevent users from errantly double submitting
woeful musk
Without splitting hairs, it's not Stripe-specific, since your own code controls the button. It's no different from if you had a separate UI asking for someone's name and clicking submit twice would log the name twice right?
teal sandal
I am using stripe components
woeful musk
But I already said we can try to help if you have specific code you can share
teal sandal
<form action="./charge.php" method="post" id="payment-form" name="payment-form" onsubmit="submitBtn.disabled = true; return true;">
<button class="submitBtn">Submit Payment</button>
I tried this, however it did not change anything. I
woeful musk
yeah I don't think that works
onsubmit= is extremely legacy unfortunately, that's how you wrote JS handlers 10+ years ago
(that's how I learnt at least)
that's not really how most people handle this anymore
where is your JS code that creates the card token?
that's usually where you would disable the button
teal sandal
Oh, i never thought of looking in there
its in a seperate file. A mix of javascript and jquery
woeful musk
yeah so usually you have a submit handler, either in vanilla JS or jQuery and there the first thing you do is disable the button
then you create a token
and once you get a response you re-enable the button if needed
teal sandal
What would be the reason for a "re-enable" afterwords?
woeful musk
the token creation could fail, for example if you have a bad card number or similar, in which case you'd want to retry
teal sandal
I assume, that the button disable would happen after "preventdefault"
woeful musk
The order doesn't matter I'd say
I was trying this on my end too ```$("#payment-form").on('submit', function() {
event.preventDefault();
console.log("Disableing submit button2...");
document.querySelector('#submit_button').disabled = true;
stripe.createToken(card).then(setOutcome);
return false;
});```
this is what my code roughly looks like (it's mixing jquery/vanilla JS just to have something working)
but you see the first thing I do on submit is
1/ preventDefault() to not submit the form
2/ disable the button, now you can't click on it anymore
3/ create my card token
This is not great code, but it shows the spirit of it
teal sandal
Here is what i have just typed out
form.addEventListener('submit', function(event) {
event.preventDefault();
//disable button NEW
$("#submitBtn").attr("disabled", true);
//create token
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
}
);
//re enable button NEW
$("#submitBtn").attr("disabled", false);
});
i see your solution uses document.query selector....while mine uses .attr
Probably both work???
Unfortanetely my code doesnt work. The Button is disabled before i can click on it
woeful musk
add logs to your code
like right before your .attr add a log and then look at your console to make sure the log isn't here
teal sandal
Looks like the disable on load was a different bug, which i believe is gone now
BUT
for some reason my console.log is not showing up
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log("here");
//disable button NEW
$("#submitBtn").attr("disabled", true);
//create token
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
}
);
//re enable button NEW
$("#submitBtn").attr("disabled", false);
});
Which is very strange....The payment is still processing, but the log statement doesnt seem to be executing
late quartz
Hello! Meaning console.log("here"); doesn't run?
teal sandal
Yea! that is confusing though because it seems to me that the token is created and sent
late quartz
Is this online somewhere where I can try it out myself?
Oh, wait, do you have the "preserve log" option enabled in your dev tools?
By default the dev tools will clear the console when page navigation happens, which might be clearing it out before you can see it.
teal sandal
Is this a Stripe or Google Chrome setting "preserve log"
nm. I found the presreve log setting. it was unlcicked, so i will update that
I still am not seeing my console.log when I am in my submit event lister though
late quartz
Do you have a link to this so I can test on my end?
teal sandal
I sent you in DM
late quartz
I do get the here logged to my console.
Do you have any console filters on? Are you looking at all levels?
The 402 error is because I used a test card, but your integration is running in live mode, so that part is expected.
late quartz
You can't use a test card in live mode, that's what cause the 402 error. 🙂
Huh. That's really strange...
What am I missing...
If you try the 4242424242424242 test card what happens?
These are the form inputs I'm using:
teal sandal
Yea same....using 424242 and still not seeing the log for some reason.
late quartz
If you go under Sources and then Overrides do you see anything there?
teal sandal
it is empty
super frustrating. Do you think it may be a cache issue preventing me from seeing the log
late quartz
Possibly, but having the dev tools open usually bypasses the cache unless you have it set not to.
If you shift + reload and try again does anything change?
teal sandal
lol, yep. now the log shows up
late quartz
Or if you look at the source in the browser do you see the log code as expected?
Ah, well, there we go!
So going back to your code, the reason it's failing is that $("#submitBtn") returns nothing. There's no matching element on the page.
teal sandal
<button class="submitBtn">Submit Payment</button><br>
Is the class supposed to be class='#submitBTN" ???
late quartz
It's not. View the source of the page.
<button class="btn btn-primary btn-block mt-4">Submit Payment</button>
So, a few things...
teal sandal
AH
late quartz
With CSS selectors the . character refers to classes and the # refers to IDs. So an element with a class of foo can be selected with .foo and an element with an ID of bar can be selected with #bar.
Beyond that, it looks like your class is being overridden by something else, probably some framework or something.
But your jQuery code is trying to select an element with an ID of submitBTN which does not exist.
teal sandal
I am not seeing this snippet of code you are referencing. It should be in the source???? I am seeing this:
<button class="submitBtn">Submit Payment</button>
teal sandal
yea. i looked in the console...didnt see it. So i right clicked view->source and i am not seeing the CSS classes you found
late quartz
In the web dev tools click on the Elements tab and then click on the little icon that looks like a mouse pointer in a box in the top left, then click on the button.
Something is overriding your classes after the page loads.
teal sandal
OK so i was looking at what you said about CSS selectors. So i switched my button from class="submitBtn" to id="submitBtn"
Now - when i run the test card - it disables after first click
teal sandal
Yep, for sure. I was getting multiple idempotency errors every day
Im doing some testing right now to see if it is working as expected
Koopa suggested that after the submission, i re-enable the button. So i have this snip below
document.querySelector('#submitBtn').disabled = false;
But.....When i add that code in, the button disable does not work correctly, and the idempotency error is triggered
late quartz
You should only enable the button again conditionally based on what happens after the button is pressed. For example, if an error is returned, enable the button again so they can try again.
teal sandal
That makes sense
You are a pro man. I have been struggling with this for 2 years now. Actually, its my users that have been struggling, lol. I am really happy to see this resolved
late quartz
Happy to help!
teal sandal
I am burnt out on this from working all day
I have one other issue to resolve. My error handling is pretty horrible. I failed earlier in fixing it.
I will be back on later this week though to ask some more questions about that. Hopefully you are around
late quartz
I might be, but if not someone else should be able to help. 🙂