In case, anyone else is interested, I came up with my own solution, after much Googling (this is my first ever web application). It works by putting an empty <div> as an overlay in the container containing all the Square card elements and pay button at the exact same position. The container <div> is changed to a positioned element by giving it the positon:relative property but not actually moving it from its default position in the document flow. However, this allows the overlay element with position:absolute to reference the container’s position and size and match it exactly. The overlay is initially hidden. Being the last element in the container ensures that it is rendered “on top” of all the other elements in the container, therefore blocking access to any of the card entry as well as the pay button when enabled.
<div id=“sq-container” style=“position: relative; max-width: 380px; margin: auto;”>
<div id=“sq-card-number”></div>
<div class=“third” id=“sq-expiration-date”></div>
<div class=“third” id=“sq-cvv”></div>
<div class=“third” id=“sq-postal-code”></div>
<button id=“sq-creditcard” class=“button-credit-card”>Pay</button>
<div id=“sq-overlay” style=“position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden;”></div>
</div>
In Javascript, you can then turn the overlay on and off at will:
function disableSquareElements(state)
{
document.getElementById(“sq-overlay”).style.visibility = state ? “visible” : “hidden”;
}
While this takes care of the elements not being reachable by mouse clicks, they can still be activated by using the keyboard “tab” key. However, there is a solution for this as well. While mounting the Square Elements on the <div>s above and converting them into <iframe>s, the element ids actually stay the same. In addition to that, the <iframes> still support the tabIndex property, which I guess would prevent any active element in an <iframe> to not be reachable, but here we only seem to have a single element in each of the <iframe>s. Therefore, we can extend the above code to:
function disableSquareElements(state)
{
document.getElementById(“sq-overlay”).style.visibility = state ? “visible” : “hidden”;
document.getElementById(“sq-card-number”).tabIndex =
document.getElementById(“sq-expiration-date”).tabIndex =
document.getElementById(“sq-cvv”).tabIndex =
document.getElementById(“sq-postal-code”).tabIndex = state ? -1 : 0;
document.getElementById(“sq-creditcard”).disabled = state;
}