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.
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