Skip to content

Instantly share code, notes, and snippets.

@Ninigi Ninigi/hide_and_show.js
Last active Oct 10, 2019

Embed
What would you like to do?
How to hide and show payment gateways in shopify checkout (COD)
var CODGatewayName = "Cash on Delivery",
CODShippingName = "Cash on delivery",
radioButtonSelector = ".radio__input .input-radio";
function toggleCODPayment(shippingElement) {
var isCOD = function(el) {
return el.querySelectorAll(".radio__label__primary")[0] && el.querySelectorAll(".radio__label__primary")[0].textContent.trim().toLowerCase().indexOf(CODGatewayName.toLowerCase()) != -1;
}
if (shippingElement && shippingElement.textContent.trim().toLowerCase().indexOf(CODShippingName.toLowerCase()) > -1) {
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)) {
el.classList.add("visually-hidden");
document.getElementById("payment-gateway-subfields-" + el.dataset.selectGateway).classList.add("visually-hidden");
if (radioButton.checked) {
radioButton.checked = false;
}
} else if (el.dataset.selectGateway && isCOD(el)) {
radioButton.click();
}
}
} 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)) {
el.classList.add("visually-hidden");
document.getElementById("payment-gateway-subfields-" + el.dataset.selectGateway).classList.add("visually-hidden");
if (radioButton.checked) {
radioButton.checked = false;
}
} else if (radioButton && el.dataset.selectGateway) {
radioButtons.push(radioButton);
}
}
if (!radioButtons.reduce(function(checked, el) { return checked || el.checked }, false)) {
radioButtons[0].click();
}
}
}
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);
}
});
@RaviKumarAndroid

This comment has been minimized.

Copy link

RaviKumarAndroid commented Apr 2, 2019

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

@Ninigi

This comment has been minimized.

Copy link
Owner Author

Ninigi commented Oct 10, 2019

@RaviKumarAndroid

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

Yes, you are right - the approach was very hacky from the beginning, and it was just a matter of time until Shopify shut it down due to the security risks.

It seems to still work on old shops we have set this up on - but not on newer shops.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.