I have a kiosk application where the kiosk software wraps a registration website where the user pays at the end of the process.
As with many of these types of applications, there is a need after a certain period of inactivity, to redirect to the starting page and/or clear user data.
Since stripe.js "elements" payments fields load in an iFrame, I am not able to detect changes and when users fumble for with typing in their cards (especially older users that are easily frustrated by technology), the system times out and sends them back to the beginning, losing not only their card input, but everything else they've done. Obviously this causes a lot of hate and discontent.
The solution seemed to be easy, hook to the "change" event for the element (provided by stripe.js), however, it appears to only fire when some major payload change occurs (i.e. first digit or two of the card, anything in the postal field, nothing in the exp fields, and nothing in the CVV field).
Anyone come up another option to be notified when the user interacts with the element? Seems like this would be a common use case that the developers have overlooked (or maybe I'm just not seeing the solution to). If it provides other options, I'm using a UWP webview as my kiosk application software.
It appears there is no good answer. I spoke with Stripe Support who confirmed that the change event only fires when the "payload" changes, by design. Not super helpful in this instance. Their suggestion was to "increase your timeout" (seems legit from a security perspective of wanting to clear the data out on an abandoned kiosk session as soon as possible). Would be nice if they would maybe create another event that does fire on each keystroke as I'm fairly certain I am not the only person who has ever created a kiosk with payment input details & needs to reset abandoned sessions.
In the end, what I did was a combination of resetting my timer on every change event they do fire, and put up a modal as the countdown nears it's end alerting the user that they are about to timeout and be sent back to the beginning. This way, if the user touches anywhere on the screen (which dismisses the modal) or the button on the modal, I can trigger an event that will reset my kiosk timer - allowing them to continue.
Between these two things, I think this is a halfway acceptable (albeit annoying) solution.
have you tried registering events on the other elements? Stripe also provides a set of individual elements that you can integrate.
For instance, you can create a cardCvcElement and register a onChange listener to get notified for the cvc input events. See https://stripe.com/docs/js/element/events/on_change?type=cardCvcElement