[WPMU DEV] Prevents PayPal Inputs Zoom

wpmudev-prevents-paypal-inputs-zoom.php

<?php
/**
 * Plugin Name: [WPMU DEV] Prevents PayPal Inputs Zoom
 * Plugin URI: https://wpmudev.com/
 * Description: Chrome mobile has a bug that auto zooms the screen when you select an input field from an embed page -  EG.: the iFrame used by the PayPal checkout. This plugin is a workaround for this situation.
 * Author: Glauber Silva @ WPMUDEV
 * Author URI: https://wpmudev.com/
 * Task: SLS-3307
 * License: GPLv2 or later
 *
 * @package WPMU_DEV_Prevents_PayPal_Inputs_Zoom
 */

defined( 'ABSPATH' ) || exit;

add_action(
	'wp_footer',
	function() {
		?>
			<script type="text/javascript">

				function readyHandler() {

					if ( navigator.userAgentData.mobile ) {								
						var scalable = true;							
						var observer = new MutationObserver(function(mutations, observer) {						
							//console.log(mutations, observer);
							setTimeout( function(){
								var PayPal = document.querySelector("iframe[title=PayPal]");
								if ( !! PayPal && scalable ) {
									var viewport = document.querySelector("meta[name=viewport]");
									if ( !! viewport ) {
										viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
									} else {
										var metaTag=document.createElement('meta');
										metaTag.name = "viewport"
										metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
										document.getElementsByTagName('head')[0].appendChild(metaTag);
									}
									scalable = false;
								}
							}, 100 );							
						});							
						observer.observe(document, {
							subtree: true,
							attributes: true								
						});
					}
				}

				// Check if the DOMContentLoaded has already been completed
				if ( document.readyState !== 'loading' ) {
					readyHandler();
				} else {
					document.addEventListener( 'DOMContentLoaded', readyHandler );
				}
			</script>
		<?php
	},
	9999
);