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

Answer: 
You can use `Object.entries()` to get hold of both key and value at same time.

From [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries):

> 
> The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs
> 
> 
> 

Try something as below:

```js
const someArray = Object.entries(someObject).map(([key, value]) => ({id: key, value: value}))

```
With `Object.keys()`, you can work as below:

```js
let input = {
    item1: "this is string field value",
    item2: "FF FF A2 C4h"
};

let result: {id: string, value: string}[] = [];

Object.keys(input).forEach(function(k) {
    let key = k as keyof typeof input;
    result.push({
        id: k,
        value: input[key]
    });
});

```

[Sample Typescript Playground](https://www.typescriptlang.org/play?ssl=16&ssc=21&pln=1&pc=1#code/DYUwLgBAlgdgDgV0gXggbwFAW9MIC2AjAFwQBEYAFlAM7R01gBOsA5hAGZQjAAmEANwCGwBCDIAaLDih58AJlJkAYsoiqIAQXkQAwgBZKZDAF8A3BgyhITEDQTAwpNFF6lGLGKwmCRY98xsJgDaALoQqGEWGADyAEYAViAAxmAAdADWIACeNAAUsIhgAJRpHAD2TACiQsmUeRwIMKlQ5TB5GcXo0tjWEFnZEf0QQnQD5RwQYNlwIBPQ8EgWOBC29o5piDT1mCsrrqQZUns4wqIgpIVIwQOhPRAmxRaP0cltNOWgacDlrHlrDhKZiAA)