#Matty-onChange
drowsy saffron
heya @proud grail, would you happen to have a small sample that replicates this for me to take a look at?
proud grail
Sure. Here are some screenshots to help explain.
This first one is when multiple options are available for payment.
The second one here is when only one option is available.
For simplicity, here is the event should fire on change. For the second example, the change is not fired after the element loads.
Let me know if I can provide anything else.
Updated screenshot.
I'm trying to figure out when the user enters anything into the credit card fields for the second example. When the card options aren't there, I have no event to listen to when the card values are entered / changed.
drowsy saffron
hmmmm, i just tested it and it's working fine for me
proud grail
When does the change event fire for the second example? Does it fire on each entry for the card number?
drowsy saffron
you mentioned that the change is not fired after the event loads -> I don't expect it to fire then. I'd expect it to fire based on the changes to the fields listed in the documentation
https://stripe.com/docs/js/element/events/on_change?type=paymentElement#element_on_change-handler
proud grail
With the card element, the change event fires on every keypress inside of the element.
drowsy saffron
onesec, let me spin up a sample for pure HTML/JS. I'm running on a React sample right now
proud grail
I can use 'focus' and 'blur', but there is no way to check the element to know if any data has been entered. I obviously don't need to know the data, just whether or not a person started entering data.
... OK. I have to step away for a bit. I will check back later. Thank you so much for your help!
drowsy saffron
Modifying the code from https://stripe.com/docs/checkout/quickstart,
the event is called when the user first enters data i.e. moving from an empty:true -> empty:false state
if your application isn't working as mentioned above i.e. firing an event when the fields changes from empty to non-empty or vice-versa, i'd suggest sharing a sample that replicates the same issue so that we can take a closer look.
slender hearth
Hey @proud grail -- reopened this, how can i help?
proud grail
Thank you! My apologies to @next ferry and I had to pick up my son and the rest of the night didn't fall into place. 🙂
Here is the code I am using in reference to the issue above.
Without doing anything, I am getting these two change events firing on load.
No other events are firing when I enter values into any of the card fields. No JS errors are thrown either.
Hi @slender hearth, just checking in to see if you received this?
slender hearth
I did, thanks, just working through a backlog
The payment element doesnt work the same way as the card element, you don't get those granular change details
You'd only get the change event on payment type selection change, or when the fields are complete to let you know to enable your submit/pay button, for example
What are you trying to do that you need the key press events for?
proud grail
I don't need key press per say. I need to know when the user has entered something in that field so I can remove a selection from a saved card.
proud grail
When the user starts to enter a new credit card number, I deselect the saved payment.
I think I may just need to check for the 'focus' event and when they click into the payment element, I just remove the saved payment selection then.
Your statement above clarified things for me. I didn't know the same change events weren't being sent as the card element. I thought something was wrong in my implementation. I think I can work around it by using that focus event. From a UX experience, I don't think many people would click in the new card fields unless they planned on entering a new card, so that should suffice.
slender hearth
Ah, but i see what you're saying
Do you not get an initial event when they first start typing such that empty changes from true to false?
https://stripe.com/docs/js/element/events/on_change?type=paymentElement#element_on_change-handler-empty
If not, i would agree you should, which i think would give you what you need
"the customer has entered something in this form"
proud grail
No, I get those two events that fire right away. The second event says that there is something in the element... at least that is what I believe the value means. empty: false
slender hearth
Even while empty?
proud grail
Correct. Nothing has been entered into the form.
slender hearth
Interesting, let me try to poke at this and reproduce. That seems incorrect,
safe fern
do you have a simple repro? Like a jsfiddle that demonstrates this exact behaviour with logs? It'd be easier for us to align here
proud grail
Is there a way to do a fiddle with a client secret for the intent?
safe fern
you can simply hardcode a client_secret it's all test mode
proud grail
Let me know if that is what you are looking for.
So... setting the billingDetails is what's causing the issue. If I remove those settings when creating the payment elements, the event fires just once and then fires when I enter in new information.
slender hearth
Ah nice! Thanks for sharing. Yes I was about to say I am seeing the expected events in my test environment, with the change event happening when the text entry happens
proud grail
Should that be happening? It seems that second event shouldn't fire since nothing has been entered by the user.
safe fern
jsfiddle purely errors for me with $ not defined, did you load jquery properly?
proud grail
Try this? I am not getting an error, but I wasn't logged in. I didn't add any jquery that I know of.
https://jsfiddle.net/solarmatthew/1mj0n542/1/
safe fern
ah cool that one works. So the problem is that on load you get the event with empty: false right before you even start typing?
slender hearth
It's the on focus event handler, i just removed that since its not applicable in the repro
safe fern
console.log("on focus - ", JSON.stringify(event));
});
paymentElement.on('change', function(event) {
console.log("on change - ", JSON.stringify(event));
});```Yes, you'll see the change event fire twice. Once when the load occurs and then again right after... but only when the billingDetails fields are provided when setting up the payment element.
safe fern
if you do this, on focus never happens
so I don't get why it'd be the focus event @slender hearth ?
proud grail
Here is a version with the focus event removed. I should have done that in the beginning to alleviate confusion.
https://jsfiddle.net/solarmatthew/1mj0n542/7/
slender hearth
Sorry, i was unclear. the focus event handler in the first jsfiddle was the source of the script error.
It's not related to the element events and the unexpected change with empty=false
safe fern
okay so we're all in agreement that this is weird and looks like a bug right? Earlier you mentioned billing_details or something and I wasn't clear on the relation
slender hearth
Yes, its this config that triggers it:
const paymentElement = elements.create('payment', {
fields: {
billingDetails: {
name: 'never',
email: 'never',
address: 'never'
}
}
});
If you disable that, the events happen as expected on first actual card field entry
proud grail
^^^ what's said here ^^^ 🙂
safe fern
Ah perfect, okay so looks like a real bug that we'll report and get fix
thanks a lot for taking the time to repro @proud grail that will help a lot
proud grail
Thank you both for your help. This channel is a great resource. I'm trying to make sure I'm not a constant bother.
slender hearth
Yes, thanks very much!
proud grail
Have a great day. I'll see if I can work around this for now. What is your release schedule? I know this wouldn't be in the next one, but it would be good to know what days I should look for an update.
safe fern
We don't have one, we release changes every day, thousands of times per day. But that one is unlikely to be fixed soon
proud grail
OK. Thank you again.