I am currently developing an application using the Stripe Terminal for physical payments. I am using an Electron app that uses ReactJS to display the interface of the Point of Sale. Because this point of sale uses multiple pages for different cashier functions due to the unusual nature of the business, the POS software currently has multiple pages, to handle clients and other management stuff, and a checkout page to charge the customers. I am able to get the terminal working, but at the moment every time the page reloads or I go to another page, I lose the terminal instance I had and have to reconnect to the terminal, which is not ideal. I am trying to find a way so once I open the application, it connects to the terminal and then retains that instance for the whole time the application is open.

The Stripe terminal instance needs to be created on the client-side, so I have a stripe.js file loaded into the ReactJS index.html, and in the stripe.js file I create a new instance of the terminal with:

var terminal = this.StripeTerminal.create({
    onFetchConnectionToken: fetchConnectionToken,
    onUnexpectedReaderDisconnect: terminalDisconnected,
});

but when the page is reloaded or I go to another page, it reloads the stripe.js file and the terminal reconnects again.

I have tried storing the object into localStorage using the methods found here, but it did not work as running a function of the terminal object did not work (i.e. JSON.parse(localStorage.getItem('terminal')).setReaderDisplay())

How can I keep the stripe.js file from being reloaded every time, or the terminal from being created once and accessing it throughout the whole application?

Any help is appreciated, thank you!