How to open and then close a window without getting blocked as a popup?

Question

I want to direct a customer in an e-commerce site to pay via Paypal's website. I would like the payment to be done in a new tab/window so the customer doesn't lose the current state of the web page he/she is at.

In order for the Paypal window to open without getting blocked, I am using an anchor with target="_blank". Which is working perfectly except for the fact, I can't close it after Paypal payment is done since window.close() doesn't work for windows that were not opened via window.open().

How do I make it so it is BOTH not blocked as a popup AND I am able to close it with JS later on?

Answer 1

In order for the Paypal window to open without getting blocked, I am using an anchor with target="_blank".

That's one option, but as long as you call window.open from within the handler for a user-generated event (like click), you can open pop-up windows. So just make sure you call window.open from within a click handler on the link (and then you can close it). Modern pop-up blockers (anything from the last several years) block pop-ups that aren't triggered by a user event, but allow ones that are.

<p><a href="#" id="target">Click to open popup</a>; it will close automatically after five seconds.</p>

document.getElementById("target").addEventListener("click", () => {
    const wnd = window.open("https://stackoverflow.com");
    setTimeout(() => {
        wnd.close();
    }, 5000);
    return false;
});

(Unfortunately, Stack Snippets don't let you do window.open.)