Hammering #popup issues in Simpl Checkout

with first principle

This article summarizes an elegant way that we invented to resolve the popup blocker issue in Simpl Checkout (why are we not using the Modal approach over the Popup one is a topic for some other blog). Simpl enables merchants to make more transactions online while making the process effortless for customers. If you’ve not used Simpl before, I highly recommend to check out a list of merchants we support.

Before we lay out a solution, let us understand how popup-blocker works in every browser today.

Investigate PopupBlocker issue

The built-in popup blocker in every browser (even if it forcefully enabled from the browser’s privacy settings) does not block a pop-up or child window if it is opened with human intervention — meaning manually launching it by clicking/tapping and not using dynamic Javascript function invocation. However, if we delay the human interaction i.e. click/tap and the popup-opening logic i.e. window.open either using setTimeout or XHR call in-between then also the popup blocker will kick in and the popup will be blocked forever unless the website was added to the popup exception list.

For example, the 2nd window.open method (given below) called from within setTimeout will be ceased by the browser immediately, leaving you stranded.

<button onclick=”javascript:launch()”>
function launch() {
  // will launch the website instantly and
  // will be opened in a child window a.k.a. Popup
  window.open(“https://getsimpl.com");
  // will launch the website after 2 seconds and
  // will be blocked by the browser's popup blocker
  window.setTimeout(function() {
    window.open(“https://getsimpl.com");
  }, 2 * 1000);
}

This is what happens when any browser blocks the incoming popup. As you can see, it’s very hard for a layman to contemplate on what just happened in the following video.

Simpl Checkout PopupBlocker issue | Before

Since the popup-blocker issue was a serious problem for us as most of the Simpl users did not know exactly how to disable the popup-blocker in order to continue using Simpl. So we had decided to take a stab at it on our end.

Solution 1

We came up with a bunch of naive solutions to resolve this issue. First among them was to notify the Simpl user about it whenever that happens, which was fairly easy to do. All we had to do was check if the popup has thefocus property, if it isn’t then the popup is blocked by the browser.

var wwindow = window.open(“https://getsimpl.com");
if (wwindow && wwindow.focus) {
 wwindow.focus();
} else {
 // detected popup blocker
 alert(“Pop-up Blocker is enabled! Please add “ + window.location.host + “ site to your exception list.”);
}

So we did that!!! Now the question was that Will the user take that much effort to add the merchant website to the exception list? Moreover, each browser has the similar setting locked up differently under Preferences and is hard to lookup even for a tech-savvy person. To circumvent this issue, we thought of having a hosted guide (including all evergreen browsers) for users to refer in order to undo the popup blocker setting. But it was still an overdo from the user’s side. Then came the breakthrough.

Solution 2

In the breakthrough solution, we cached the blocked URL so that we could ask the user to open it again. To achieve this, we had slightly modified the above logic. Here, the showPopupBlockerMessage() method simply adds a backdrop into the host website only to show the above popup blocker message but with a twist. Instead of asking the user to update the exception list, we had asked the user to relaunch the cached blocked URL and voila!!

var wwindow = window.open(“https://getsimpl.com");
var blockedURL = “”;
if (wwindow && wwindow.focus) {
  wwindow.focus();
} else {
  // detected popup blocker
  blockedURL = “https://getsimpl.com";
  showPopupBlockerMessage();
}

Custom Popup Blocker Message

Now, this is what happens when any browser blocks the incoming popup.

Simpl Checkout PopupBlocker issue | After

Summary

In this article, we’ve covered the very important point which is focus on your users. Hopefully, we’ll further improve the fix to auto-launch the blocked URL immediately rather than asking the user to click twice :-)

Till then 👋 👋 👋