Tengo una aplicación de quiosco donde el software de quiosco envuelve un sitio web de registro donde el usuario paga al final del proceso.
Como ocurre con muchos de estos tipos de aplicaciones, existe la necesidad, después de un cierto período de inactividad, de redirigir a la página de inicio y/o borrar los datos del usuario.
Dado que los campos de pago de los "elementos" de stripe.js se cargan en un iFrame, no puedo detectar cambios y cuando los usuarios buscan a tientas al escribir sus tarjetas (especialmente los usuarios mayores que se frustran fácilmente con la tecnología), el sistema se agota y los envía volver al principio, perdiendo no solo la entrada de su tarjeta, sino todo lo demás que han hecho. Obviamente esto causa mucho odio y descontento.
La solución parecía ser fácil, conectarse al evento de "cambio" para el elemento (proporcionado por stripe.js), sin embargo, parece que solo se activa cuando ocurre algún cambio importante en la carga útil (es decir, el primer dígito o dos de la tarjeta, cualquier cosa en el campo postal, nada en los campos exp y nada en el campo CVV).
¿Alguien ha encontrado otra opción para ser notificado cuando el usuario interactúa con el elemento? Parece que este sería un caso de uso común que los desarrolladores han pasado por alto (o tal vez simplemente no veo la solución). Si ofrece otras opciones, estoy usando una vista web de UWP como mi software de aplicación de quiosco.
Parece que no hay una buena respuesta. Hablé con Stripe Support, quien confirmó que el evento de cambio solo se activa cuando cambia la "carga útil", por diseño. No es muy útil en este caso. Su sugerencia fue "aumentar su tiempo de espera" (parece legítimo desde una perspectiva de seguridad de querer borrar los datos en una sesión de quiosco abandonada lo antes posible). Sería bueno si tal vez crearan otro evento que se active con cada pulsación de tecla, ya que estoy bastante seguro de que no soy la única persona que ha creado un quiosco con detalles de entrada de pago y necesita restablecer sesiones abandonadas.
Al final, lo que hice fue una combinación de restablecer mi temporizador en cada evento de cambio que activan y poner un modal a medida que la cuenta regresiva se acerca a su fin, alertando al usuario de que está a punto de agotarse y volver al principio. De esta manera, si el usuario toca cualquier parte de la pantalla (lo que descarta el modal) o el botón en el modal, puedo activar un evento que restablecerá el temporizador de mi quiosco, lo que les permitirá continuar.
Entre estas dos cosas, creo que esta es una solución medianamente aceptable (aunque molesta).
¿Ha intentado registrar eventos en los otros elementos? Stripe también proporciona un conjunto de elementos individuales que puede integrar.
Por ejemplo, puede crear un cardCvcElement y registrar un oyente onChange para recibir notificaciones sobre los eventos de entrada de cvc. Consulte https://stripe.com/docs/js/element/events/on_change?type=cardCvcElement