How to integrate payment gateway in applications created using javascript frameworks like ExtJs?

Question

Our application is a one-page application created using ExtJs. For any user action, the browser tab is never reloaded and all the actions are performed using ajax. A user can open/close multiple ExtJs windows/panels within the same browser tab, and this way everything remains confined to the same browser tab.

Now, we need to integrate payment gateway in the application, which involves redirecting the user to the bank website and having her brought back to our application.

The issue is that when browser redirects the user, then all the application javascript code along with panels and windows get destroyed, and when the user comes back to the application then she finds it to be different from one she left.

As a solution to this, we were thinking of using following two appraoches:

Option 1. Maintaining the state of application - When user leaves for the bank's website then somehow we maintain the state of application - like which windows are opened carrying what data, which variables have which values etc.. and when user returns back, we generate the same application state for her.

Option 2. Have a browser pop-up window for payment gateway - We intend to provide a button which will open a small pop-up window carrying the transaction details, and in this pop-up window the entire payment gateway process will take place taking care of redirection and everything.

Option 1 is proving to be very cumbersome and complicated as maintaining the exact state is not getting feasible.

For Option 2, we are not sure if this is safe and possible?

Has anyone implemented such an approach earlier. Otherwise, what are the other options which we can go for?

Thanks for any help in advance.

Answer 1

I faced the problem and I implemented it using websocket/polling in the main application while a new window pops up for the payment.

After the payment is successful the main application will be notified.

That way each payment runs in it own sandbox totally unbound from the main application which makes maintenance quite easy. Note that our backend create a new session for each payment using the existing one.

I think it is not uncommon to open new windows for payment that's why I decided to go this.