19

I want to open a new tab for a bank payment on my website using javascript, and without the main window navigating away,

when the user is back from the bank payment to a return URL, i want to detect the reply of the return URL in from the other window ( if possible ) or just notify the main window that the transaction is done and it should check the database for updates.

I've seen this behaviour on several websites, such as popup->login->popup closes->main window reloads with the loaded session, The problem is that i don't know what this method is called, so I don't know what keyword I'm looking for.

What I exactly need is either the name of this method, or how is it done ( as a certain keyword in javascript or something )

Thanks in advance

Mohammad AbuShady
  • 40,884
  • 11
  • 78
  • 89
  • 2
    Rather than using new windows and tabs. I would highly recommend using a modal popup. – Smeegs Jun 18 '13 at 14:32
  • I think the particular system you don't know the name for is OAuth, e.g., [How to authenticate with Google via OAuth 2.0 in a popup?](http://stackoverflow.com/questions/7947038/how-to-authenticate-with-google-via-oauth-2-0-in-a-popup) – apsillers Jun 18 '13 at 14:34
  • @Javalsu Using that would either need SSL on my website or an Iframe correct? and people kinda feel safer when they know it's the website from the URL instead of something that could be phishing. – Mohammad AbuShady Jun 18 '13 at 14:34
  • A modal popup seems less *phishy* than another full window popup, at least in my opinion. That way you never have to leave the page. – Charlie Jun 18 '13 at 14:39

3 Answers3

37

You can open a new page using window.open() and then check periodically to see if the window has been closed. The reference to the opened window is returned by window.open() and you can check if it has been closed using windowHandle.closed.

btn.onclick = () => {
  const win = window.open(
      'https://www.stackoverflow.com/',
      'Secure Payment');
  const timer = setInterval(() => {
    if (win.closed) {
      clearInterval(timer);
      alert('"Secure Payment" window closed!');
    }
  }, 500);
}

See, also, this short demo.

For more info on window.open() and best practices, take a look at MDN.

gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • I used window.open and i do a window.close on the new window when it's done, still haven't implemented a method to check if the window is prematurely closed, will consider this method when i reach that part. – Mohammad AbuShady Jun 20 '13 at 22:32
  • That's awesome, I did not know about this possibility!! Still, most banking authentication redirects redirect back to an initially provided URL after you confirm the authentication step. So how do you concretely implement this solution for the use-case mentioned in the question? How do you close the bank's confirmation page when the client confirms it? – DevelJoe Apr 09 '22 at 19:03
7

The best approach with data transfer from the child window I found.

Parent code

window.open(url);
await new Promise(resolve => window.addEventListener('custom', resolve));

Child code

if(window.opener) {
  const customEvent = new CustomEvent('custom', { detail: {} });
  window.opener.dispatchEvent(customEvent);
  window.close();
}
Ivan Zakharchanka
  • 71
  • 1
  • 2
4

Before closing the popup, try opener.someFunction() to call a function in the window that opened it. Note that this will fail if the user closed the first window, or if the user navigated it to another site, or if the two windows are on different domains for whatever reason.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • 1
    Thanks for this method, but just an added value to the answer, windows can't communicate with each other if they are on different domains, I had to wait for the bank gateway to return to a URL on my domain to run the opener.function(), will consider this an answer. – Mohammad AbuShady Jun 20 '13 at 22:34