Objeto de Terminal Stripe en todo el sitio web de JavaScript o ReactJS.
Actualmente estoy desarrollando una aplicación utilizando Stripe Terminal para pagos físicos. Estoy utilizando una aplicación Electron que utiliza ReactJS para mostrar la interfaz del Punto de Venta. Debido a la naturaleza inusual del negocio, este punto de venta utiliza múltiples páginas para diferentes funciones de cajero. El software del Punto de Venta actualmente tiene múltiples páginas para manejar clientes y otras tareas de gestión, y una página de pago para cobrar a los clientes. Puedo hacer funcionar el terminal, pero cada vez que la página se recarga o voy a otra página, pierdo la instancia del terminal que tenía y tengo que volver a conectarme al terminal, lo cual no es ideal. Estoy tratando de encontrar una manera para que una vez que abra la aplicación, se conecte al terminal y luego mantenga esa instancia mientras la aplicación esté abierta.
La instancia de Stripe terminal debe crearse en el lado del cliente, por lo que tengo un archivo stripe.js cargado en el index.html de ReactJS, y en el archivo stripe.js creo una nueva instancia del terminal con:
var terminal = this.StripeTerminal.create({
onFetchConnectionToken: fetchConnectionToken,
onUnexpectedReaderDisconnect: terminalDisconnected,
});
Pero cuando la página se recarga o voy a otra página, vuelve a cargar el archivo stripe.js y el terminal se reconecta de nuevo.
He intentado almacenar el objeto en localStorage utilizando los métodos encontrados en el siguiente enlace: aquí, pero no funcionó, ya que no se pudo ejecutar una función del objeto terminal (por ejemplo, JSON.parse(localStorage.getItem('terminal')).setReaderDisplay()).
¿Cómo puedo evitar que el archivo stripe.js se recargue cada vez, o que el terminal se cree una vez y se acceda a él a lo largo de toda la aplicación?
Cualquier ayuda es apreciada, ¡gracias!
davy.ai
Para resolver este problema, puedes intentar usar una biblioteca de gestión de estado como Redux o MobX para almacenar la instancia de la terminal y pasarla a los componentes requeridos como props. Esto te permitirá acceder a la instancia de la terminal en toda la aplicación sin necesidad de volver a conectarse cada vez que cambies de página o recargues la aplicación.
Alternativamente, puedes intentar usar el API de Context de React para proporcionar la instancia de la terminal a todos los componentes en el árbol de reacción. Esto te permitirá acceder a la instancia de la terminal sin necesidad de pasarla como props.
Otro enfoque es usar un almacenamiento de sesión o cookies para guardar la instancia de la terminal, lo cual se puede acceder incluso después de recargar una página. Sin embargo, es importante tener en cuenta que almacenar información sensible de pago en el almacenamiento de sesión o cookies puede no ser seguro y puede violar el cumplimiento de PCI.
También es importante considerar reestructurar tu aplicación para evitar múltiples recargas de página, como utilizar un enfoque de aplicación de una sola página (SPA) o implementar el enrutamiento del lado del cliente para navegar entre diferentes secciones de la aplicación sin recargar la página.
En cualquier caso, es importante asegurarse de que la solución que elijas sea segura, cumpla con las regulaciones de PCI y no comprometa la integridad del sistema de procesamiento de pagos.