How to hide and show payment gateways in shopify checkout (COD)

hide_and_show.js

// The Payment Gateway / Shippnig Method can be internationalized,
// if the shop does not use this internationalization, use ["Cash on Delivery (COD)"]
var CODGatewayNames = ["代金引換", "Cash on Delivery (COD)"],
    CODShippingNames = ["代金引換", "Cash on Delivery"],
    radioButtonSelector = ".radio__input .input-radio";

function toggleCODPayment(shippingElement) {
  var isCOD = function(el) {
    var label = el.querySelectorAll(".radio__label__primary")[0];
    var labelText = label ? label.textContent.trim().toLowerCase() : "";

    return label && CODGatewayNames.some(function(CODGatewayName) { return labelText.indexOf(CODGatewayName.toLowerCase()) != -1 });
  }

  var isCODShipping = function(shippingElement) {
    var text = shippingElement && shippingElement.textContent.trim().toLowerCase();
    return text && CODShippingNames.some(function(CODShippingName) { return text.indexOf(CODShippingName.toLowerCase()) > -1 });
  }

  var removeSubfields = function(gatewayID) {
    var subfields = document.getElementById("payment-gateway-subfields-" + gatewayID);

    if (subfields) {
      subfields.remove();
    }
  }

  if (isCODShipping(shippingElement)) {
    var els = document.querySelectorAll(".section--payment-method .radio-wrapper.content-box__row");
    for (var i = 0; i < els.length; i++) {
      var el = els[i],
          radioButton = el.querySelector(radioButtonSelector);
      if (el.dataset.selectGateway && !isCOD(el)) {
        // Use this if you don't want to remove the element:
        // el.classList.add("visually-hidden");
        removeSubfields(el.dataset.selectGateway)
        el.remove();
        if (radioButton.checked) {
          radioButton.checked = false;
        }
      } else if (el.dataset.selectGateway && isCOD(el)) {
        radioButton.checked = true;
      }
    }
  } else if (shippingElement) {
    var els = document.querySelectorAll(".section--payment-method .radio-wrapper.content-box__row"),
        radioButtons = [];
    for (var i = 0; i < els.length; i++) {
      var el = els[i],
          radioButton = el.querySelector(radioButtonSelector);
      if (el.dataset.selectGateway && isCOD(el)) {
        // Use this if you don't want to remove the element:
        // el.classList.add("visually-hidden");
        removeSubfields(el.dataset.selectGateway)
        el.remove();
        
        if (radioButton.checked) {
          radioButton.checked = false;
        }
      } else if (radioButton && el.dataset.selectGateway) {
        radioButtons.push(radioButton);
      }
    }
    if (!radioButtons.some(function(el) { return el.checked })) {
      radioButtons[0].checked = true;
    }
  }
}

function initObserver(shippingElement) {
  var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.target == document.querySelector(".main__content")) { toggleCODPayment(shippingElement) }
      });
    });

    observer.observe(document.querySelector(".main"), {childList: true, subtree: true});
}

(function(fn){var d=document;(d.readyState=='loading')?d.addEventListener('DOMContentLoaded',fn):fn();})(function(){
  var shippingElement = document.querySelector("div.review-block:nth-child(3) > div:nth-child(1) > div:nth-child(2)");
  
  if (shippingElement) {
    initObserver(shippingElement);
    toggleCODPayment(shippingElement);
  }
});

it doesnt seem to work. as shopify uses the script as an iframe srcdoc. restricting the script from accessing the page content

Right.